:root{
--bg:#050606;
--panel:#0b0d0e;
--panel-2:#101214;
--panel-3:#151719;
--border:#24272a;
--muted:#9ba0a6;
--text:#f3f4f4;
--yellow:#f5e600;
--yellow-2:#b8ad00;
--green:#4fcf57;
--danger:#ff5959;
--shadow:0 20px 80px rgba(0,0,0,.55);
--radius:8px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.btn{border:0;border-radius:3px;padding:14px 18px;font-weight:800;cursor:pointer;transition:.18s ease}
.btn-primary{background:linear-gradient(180deg,var(--yellow),#e6d700);color:#050505;box-shadow:0 0 20px rgba(245,230,0,.1)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.brand{display:inline-flex;flex-direction:column;line-height:1;letter-spacing:.15em;font-weight:900;color:#fff}
.brand>span{font-size:31px;letter-spacing:.08em}.brand>span span{color:var(--yellow)}.brand small{font-size:10px;letter-spacing:.36em;margin-top:4px;color:#fff}
/* LOGIN */
.login-page{min-height:100vh;background:
radial-gradient(circle at 20% 15%,rgba(245,230,0,.05),transparent 16%),
radial-gradient(circle at 82% 22%,rgba(245,230,0,.04),transparent 18%),
linear-gradient(180deg,#040505,#060708 46%,#030404 100%);padding:0}
.login-shell{width:100%;min-height:100vh;position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(420px,1.08fr) minmax(420px,.92fr);align-items:center;padding:34px 38px 26px;background:
linear-gradient(90deg,rgba(5,6,6,.92) 0%,rgba(5,6,6,.68) 46%,rgba(5,6,6,.88) 100%),
radial-gradient(circle at 52% 14%,rgba(245,230,0,.07),transparent 20%),
url("login-bg.jpg.png"),
linear-gradient(145deg,#070808 0%,#101213 42%,#040505 100%);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
box-shadow:inset 0 0 0 1px var(--yellow), inset 0 0 60px rgba(245,230,0,.03), var(--shadow)}
.login-shell:before{content:"";position:absolute;inset:8px;pointer-events:none;border:1px solid rgba(245,230,0,.18);background:
radial-gradient(ellipse at 58% 26%,rgba(255,255,255,.10),transparent 10%),
linear-gradient(160deg,transparent 0 41%,rgba(255,255,255,.04) 41.2% 41.4%,transparent 42%),
linear-gradient(153deg,transparent 0 48%,rgba(255,255,255,.05) 48.3% 48.5%,transparent 49%),
radial-gradient(ellipse at 50% 72%,rgba(90,95,96,.24),transparent 24%);opacity:.95}
.login-shell:after{content:"";position:absolute;left:46.5%;top:13%;width:280px;height:140px;background:
radial-gradient(ellipse at 50% 18%,rgba(180,180,180,.32),transparent 20%),
linear-gradient(90deg,transparent 0 31%,rgba(230,230,230,.55) 32.5% 35%,transparent 36% 64%,rgba(230,230,230,.55) 65% 67.5%,transparent 69%),
radial-gradient(circle at 50% 44%,rgba(160,160,160,.55),transparent 14%);filter:blur(.6px);opacity:.28;transform:rotate(8deg)}
.login-left{position:relative;z-index:1;min-height:calc(100vh - 60px);padding:42px 24px 22px 20px;display:flex;flex-direction:column;justify-content:space-between}.brand-login>span{font-size:42px}.brand-login small{font-size:13px}.login-copy{margin-top:auto;margin-bottom:auto;max-width:540px;padding-top:20px}.login-copy h1{font-size:clamp(32px,3.2vw,46px);line-height:1.12;margin:0 0 28px;font-weight:500;letter-spacing:-.01em}.login-copy h1 strong{color:var(--yellow);display:inline-block;white-space:nowrap;font-weight:600}.login-copy p{color:#d2d4d3;font-size:18px;line-height:1.65;max-width:420px}.copyright{margin-top:auto;font-size:12px;color:#c6c8c5}.login-card{position:relative;z-index:2;right:auto;top:auto;width:min(100%,500px);justify-self:end;align-self:center;background:rgba(10,11,12,.86);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:40px 34px;box-shadow:0 24px 90px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02)}.login-card h2{margin:0 0 24px;font-size:23px}.login-card label{display:block}.login-card label>span{position:absolute;width:1px;height:1px;overflow:hidden}.login-card input[type=email],.login-card input[type=password],.login-card input[type=text]{width:100%;height:58px;background:#111315;border:1px solid #25282b;border-radius:4px;color:#fff;padding:0 18px;outline:0}.login-card input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(245,230,0,.08)}.password-field{position:relative;margin-top:16px}.password-field button{position:absolute;right:12px;top:13px;height:32px;width:32px;border:0;background:transparent;color:#bfc1c3;cursor:pointer}.login-options{display:flex;align-items:center;justify-content:space-between;margin:22px 0 22px;font-size:13px}.checkbox-row{display:flex!important;align-items:center;gap:10px;color:#d5d6d7}.checkbox-row input{accent-color:var(--yellow)}.login-options a{color:var(--yellow);font-weight:800}.login-card .btn{width:100%;height:57px}.help-text{font-size:13px;color:#b8bbbe;margin:24px 0 0}
/* SHARED LAYOUT */
.portal-page,.admin-page{min-height:100vh;background:linear-gradient(180deg,#080909,#050606);display:grid;grid-template-columns:245px 1fr;grid-template-rows:74px 1fr}.sidebar{grid-row:1/3;background:#090a0b;border-right:1px solid var(--border);min-height:100vh;position:sticky;top:0}.sidebar .brand{height:74px;padding:17px 44px 10px 44px;border-bottom:1px solid #1d2022}.sidebar .brand>span{font-size:28px}.sidebar .brand small{font-size:8px}.side-nav{padding:24px 22px;display:flex;flex-direction:column;gap:7px}.side-nav a{height:42px;border-radius:5px;color:#d4d6d7;display:flex;align-items:center;gap:12px;padding:0 13px;font-size:14px;font-weight:650}.side-nav a i{width:18px;color:#dadddf;font-style:normal}.side-nav a.active{background:rgba(245,230,0,.18);color:var(--yellow)}.topbar{grid-column:2;grid-row:1;height:74px;border-bottom:1px solid var(--border);background:#090a0b;display:flex;align-items:center;justify-content:space-between;padding:0 27px}.content{grid-column:2;grid-row:2;padding:30px 34px 40px}.user-menu,.admin-actions{display:flex;gap:18px;align-items:center;color:#e0e1e2;font-size:14px}.user-menu a{color:#d3ca19}.section-title{font-size:18px;margin:24px 0 16px}
/* CUSTOMER */
.customer-sidebar{width:245px}.valid-box{margin:75px 35px 0;border:1px solid #33373a;border-radius:4px;padding:18px 16px}.valid-box span{display:block;font-size:13px;color:#c7c9ca;margin-bottom:6px}.valid-box strong{display:block;color:var(--yellow);font-size:17px}.valid-box small{display:block;color:#e8e8e8}.sidebar-bottom{position:absolute;bottom:0;left:0;right:0;border-top:1px solid var(--border);height:49px;padding:17px 30px;color:#cfd1d3;font-size:12px}.customer-content{padding-top:25px}.welcome-row h1{font-size:30px;margin:0 0 9px}.welcome-row strong{color:var(--yellow)}.welcome-row p{margin:0;color:#aeb3b8}.project-hero{position:relative;margin-top:25px;display:grid;grid-template-columns:1fr 350px;gap:18px;align-items:stretch}.car-visual{min-height:215px;border:1px solid #151718;background:
linear-gradient(90deg,rgba(0,0,0,.25),rgba(0,0,0,.15)),
radial-gradient(ellipse at 32% 63%,rgba(0,0,0,.85),transparent 15%),
radial-gradient(ellipse at 57% 63%,rgba(0,0,0,.85),transparent 12%),
linear-gradient(0deg,#151515 0 14%,transparent 15%),
linear-gradient(10deg,transparent 0 40%,rgba(255,255,255,.12) 40.5% 41.5%,transparent 42%),
radial-gradient(ellipse at 42% 53%,#1e2223 0 37%,transparent 38%),
linear-gradient(180deg,#252525,#111);position:relative;overflow:hidden}.car-visual:after{content:"";position:absolute;left:105px;top:70px;width:520px;height:85px;border-radius:50px 135px 35px 45px;background:linear-gradient(180deg,#1a1e20,#050607);box-shadow:inset 0 0 0 2px #272b2e, 60px -28px 0 -12px #111}.car-visual:before{content:"";position:absolute;z-index:2;left:180px;top:113px;width:280px;height:10px;background:linear-gradient(90deg,#f3f6f6,#9ea3a4,transparent);border-radius:10px;opacity:.55}.project-card{border:1px solid #313539;border-radius:5px;background:#0c0e0f;padding:30px 25px}.project-card span,.project-card dt{color:#9da3a8;font-size:13px}.project-card h2{font-size:22px;margin:8px 0 28px}.project-card dl{margin:0}.project-card dd{margin:4px 0 18px;font-weight:800}.customer-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:18px}.media-card,.download-card,.info-box{border:1px solid #2b2f32;background:#0b0d0e;border-radius:6px}.media-card{height:160px;padding:24px 22px;display:grid;grid-template-columns:85px 1fr;grid-template-rows:1fr 1fr;align-items:center}.media-icon{font-size:39px;color:#c8cccf;opacity:.9}.media-card strong{font-size:33px;align-self:end}.media-card span{grid-column:2;font-size:14px;align-self:start}.media-card .btn{grid-column:1/3;height:44px;padding:0;margin-top:16px}.download-card{padding:24px 25px;height:177px}.download-card h3{margin:0 0 13px;font-size:17px}.download-card p{color:#c2c5c7;line-height:1.45;font-size:14px;margin:0 0 17px}.download-card .btn{width:100%;height:45px;padding:0}.download-card small{display:block;color:#b6babd;margin-top:13px}.info-box{margin-top:20px;max-width:780px;padding:20px;display:flex;gap:16px}.info-box i{font-style:normal;width:28px;height:28px;border:1px solid var(--yellow);color:var(--yellow);border-radius:50%;display:grid;place-items:center}.info-box strong{font-size:14px}.info-box p{margin:4px 0 0;color:#c5c8ca;font-size:13px}
/* ADMIN */
.admin-page{grid-template-columns:220px 1fr}.admin-sidebar .brand{padding-left:40px}.logout{position:absolute;bottom:25px;left:28px;color:#e1e1e1;font-size:14px}.admin-topbar h1{font-size:18px;margin:0}.admin-content{padding:24px 38px 35px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:15px}.stat-card{height:100px;border:1px solid #1f2224;background:#101214;border-radius:6px;padding:20px 21px;position:relative}.stat-card strong{display:block;font-size:30px;margin-bottom:4px}.stat-card small{font-size:18px}.stat-card span{color:#c9ccce;font-size:13px;line-height:1.35}.stat-card i{position:absolute;right:24px;top:34px;font-style:normal;color:#6d7378;font-size:30px}.admin-main-grid{display:grid;grid-template-columns:1fr 240px;gap:14px}.panel{border:1px solid #222629;background:#0c0e0f;border-radius:6px}.panel h2{font-size:15px;margin:0 0 20px}.projects-panel{padding:23px 20px}.projects-panel table{width:100%;border-collapse:collapse;margin-bottom:32px}.projects-panel th{text-align:left;color:#a9afb4;font-size:12px;padding:13px 0}.projects-panel td{font-size:13px;color:#f0f1f1;padding:13px 0;border-top:1px solid rgba(255,255,255,.03)}.badge{background:rgba(79,207,87,.14);color:var(--green);padding:4px 9px;border-radius:5px;font-weight:800;font-size:12px}.projects-panel .btn{height:45px;padding:0 23px}.admin-side-stack{display:flex;flex-direction:column;gap:14px}.quick-panel,.storage-panel{padding:21px}.quick-panel button{width:100%;height:36px;margin-bottom:8px;border:1px solid #32363a;background:#101315;color:#fff;text-align:left;border-radius:4px;padding-left:18px;font-weight:650}.storage-row{display:flex;align-items:center;gap:16px}.donut{width:90px;height:90px;border-radius:50%;background:conic-gradient(var(--yellow) 0 90deg,#575b5e 90deg 360deg);display:grid;place-items:center;position:relative}.donut:before{content:"";position:absolute;width:62px;height:62px;background:#0c0e0f;border-radius:50%}.donut span{position:relative;text-align:center;font-size:13px;font-weight:900}.donut small{font-size:9px;color:#b8bdc0}.storage-panel ul{list-style:none;margin:0;padding:0;font-size:12px;color:#d9dcdd}.storage-panel li{margin-bottom:12px}.storage-panel b{display:inline-block;width:8px;height:8px;background:var(--yellow);border-radius:50%;margin-right:8px}.storage-panel li:nth-child(2) b{background:#5d6368}.storage-panel strong{display:block;margin-left:18px;color:#fff;margin-top:2px}
@media (max-width: 980px){.portal-page,.admin-page{grid-template-columns:1fr}.sidebar{position:relative;grid-row:auto}.topbar,.content{grid-column:1}.side-nav{display:grid;grid-template-columns:repeat(2,1fr)}.project-hero,.customer-grid,.admin-main-grid,.stats-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr;min-height:100vh;padding:24px 20px}.login-card{position:relative;right:auto;top:auto;width:auto;justify-self:stretch}.login-left{min-height:auto;padding:10px 0 24px}.login-copy{margin:60px 0 50px;max-width:100%}.login-copy h1{font-size:34px}.login-copy p{font-size:15px;max-width:100%}}
/* ===== FUNKTIONS-SEITEN ===== */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid .full{grid-column:1/-1}.field label{display:block;color:#a9afb4;font-size:12px;margin-bottom:7px;font-weight:800}.field input,.field select,.field textarea{width:100%;background:#101315;border:1px solid #32363a;border-radius:4px;color:#fff;padding:12px 13px;outline:0}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--yellow)}.actions-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn-secondary{background:#111315;border:1px solid #33383c;color:#fff}.btn-danger{background:#210b0b;border:1px solid #642727;color:#ff8686}.btn-small{padding:8px 11px;font-size:12px}.notice{border:1px solid #33383c;background:#101315;border-radius:6px;padding:14px 16px;margin:0 0 16px;color:#d7dadc}.notice.ok{border-color:#235a29;color:#97ff9e}.notice.err{border-color:#642727;color:#ff9d9d}.muted{color:#9ba0a6}.status-expired{background:rgba(255,89,89,.14);color:#ff7777}.status-blocked{background:rgba(255,180,0,.14);color:#ffd25f}.table-actions{display:flex;gap:6px;flex-wrap:wrap}.admin-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}.media-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}.media-tile{border:1px solid #2b2f32;background:#0b0d0e;border-radius:6px;padding:12px}.media-thumb{height:110px;background:#151719;border-radius:4px;display:grid;place-items:center;overflow:hidden;margin-bottom:10px}.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover}.media-tile strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tabs{display:flex;gap:8px;margin:0 0 18px}.tabs a{border:1px solid #32363a;background:#101315;padding:10px 13px;border-radius:4px;font-weight:800;font-size:13px}.tabs a.active{background:rgba(245,230,0,.18);color:var(--yellow)}@media(max-width:980px){.form-grid,.admin-two-col{grid-template-columns:1fr}}
/* LOGIN + REGISTRIERUNG */
.auth-panel{
position:relative;
z-index:2;
width:min(100%,520px);
justify-self:end;
display:flex;
flex-direction:column;
gap:16px;
}
.auth-panel .login-card{
position:relative;
right:auto;
top:auto;
width:100%;
justify-self:auto;
}
.register-card{
padding-top:30px;
}
.register-card h2{
font-size:20px;
}
.register-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:12px;
}
.register-card label{
margin-bottom:12px;
}
.register-card .btn{
width:100%;
height:50px;
}
@media(max-width:980px){
.auth-panel{
width:100%;
justify-self:stretch;
}
.register-grid{
grid-template-columns:1fr;
gap:0;
}
}
/* REGISTRIERUNG ALS POPUP */
.register-help a{
color:var(--yellow);
font-weight:900;
text-decoration:none;
}
.register-help a:hover{
text-decoration:underline;
}
.register-modal{
position:fixed;
inset:0;
z-index:50;
display:none;
align-items:center;
justify-content:center;
padding:22px;
}
.register-modal.is-open{
display:flex;
}
.register-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.72);
backdrop-filter:blur(5px);
}
.register-modal .register-card{
position:relative;
z-index:2;
width:min(100%,560px);
max-height:calc(100vh - 44px);
overflow:auto;
margin:0;
justify-self:auto;
right:auto;
top:auto;
padding-top:34px;
}
.register-close{
position:absolute;
right:18px;
top:14px;
width:34px;
height:34px;
border:1px solid rgba(255,255,255,.12);
border-radius:4px;
background:#111315;
color:#fff;
font-size:25px;
line-height:1;
cursor:pointer;
}
.register-close:hover{
border-color:var(--yellow);
color:var(--yellow);
}
.register-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:12px;
}
.register-card label{
margin-bottom:12px;
}
.register-card .btn{
width:100%;
height:50px;
}
@media(max-width:980px){
.register-grid{
grid-template-columns:1fr;
gap:0;
}
}
/* Registrieren-Link gelb wie Passwort vergessen */
.register-help{
color:#b8bbbe;
}
.register-help a,
.register-help a:visited{
color:var(--yellow) !important;
font-weight:900;
text-decoration:none;
}
.register-help a:hover{
color:var(--yellow) !important;
text-decoration:underline;
}
/* Footer-Link NextSolutions-Group UG gelb */
.footer-left a.accent,
.copyright a.accent,
.footer .footer-left a.accent{
color: var(--yellow) !important;
font-weight: 900;
text-shadow: 0 0 18px rgba(245,230,0,.18);
}
.footer-left a.accent:hover,
.copyright a.accent:hover,
.footer .footer-left a.accent:hover{
text-decoration: underline;
}
/* ===== FIX: Dashboard-Karten bleiben sauber im Kästchen ===== */
.stats-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.stat-card{
min-width:0;
height:auto;
min-height:100px;
overflow:hidden;
padding:20px 64px 18px 21px;
}
.stat-card strong{
max-width:100%;
font-size:clamp(20px,1.7vw,30px);
line-height:1.08;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
}
.stat-card strong.storage-value{
font-size:clamp(18px,1.45vw,28px);
letter-spacing:.01em;
}
.stat-card span{
display:block;
max-width:100%;
overflow-wrap:anywhere;
}
.stat-card i{
right:22px;
top:50%;
transform:translateY(-50%);
}
.storage-panel strong,
.storage-panel small{
overflow-wrap:anywhere;
word-break:break-word;
}
@media (max-width:1200px){
.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
.stats-grid{grid-template-columns:1fr;}
.stat-card{padding-right:58px;}
}
/* ===== UPDATE: Speicheranzeige verständlich in KB/MB/GB/TB + exakte Bytes darunter ===== */
.storage-stat-card .storage-value{
font-size:clamp(24px,2vw,30px);
}
.storage-stat-card span{
font-size:12px;
line-height:1.35;
color:#c9ccce;
}
.storage-stat-card{
min-height:112px;
}
/* ===== FIX: rechte Dashboard-Spalte, Schnellaktionen und Speicherdiagramm ===== */
.admin-main-grid{
grid-template-columns:minmax(0,1fr) minmax(300px,340px) !important;
align-items:start;
}
.admin-side-stack,
.quick-panel,
.storage-panel{
min-width:0;
overflow:hidden;
}
.quick-panel{
padding:21px !important;
}
.quick-panel h2,
.storage-panel h2{
margin:0 0 16px !important;
}
.quick-panel .quick-action{
width:100%;
min-height:42px;
margin:0 0 10px;
padding:0 16px;
display:flex;
align-items:center;
justify-content:flex-start;
border:1px solid #32363a;
border-radius:4px;
background:#101315;
color:#fff;
font-size:13px;
font-weight:800;
line-height:1.2;
white-space:normal;
overflow-wrap:anywhere;
box-sizing:border-box;
}
.quick-panel .quick-action:hover{
border-color:var(--yellow);
color:var(--yellow);
}
.storage-panel{
padding:21px !important;
}
.storage-row{
display:grid !important;
grid-template-columns:96px minmax(0,1fr);
gap:18px !important;
align-items:center !important;
}
.donut{
width:96px !important;
height:96px !important;
flex:0 0 96px;
background:conic-gradient(var(--yellow) 0 var(--storage-deg, 0deg), #575b5e var(--storage-deg, 0deg) 360deg) !important;
}
.donut:before{
width:66px !important;
height:66px !important;
}
.donut span{
max-width:70px;
font-size:12px !important;
line-height:1.1;
overflow-wrap:anywhere;
}
.storage-details{
min-width:0;
display:flex;
flex-direction:column;
gap:14px;
}
.storage-line{
display:grid;
grid-template-columns:12px minmax(0,1fr);
gap:8px;
align-items:start;
min-width:0;
}
.storage-line b{
display:block;
width:9px;
height:9px;
margin-top:5px;
border-radius:50%;
background:var(--yellow);
}
.storage-line.free b{
background:#5d6368;
}
.storage-line span{
display:block;
color:#d9dcdd;
font-size:12px;
line-height:1.2;
}
.storage-line strong{
display:block;
margin:2px 0 0 !important;
color:#fff;
font-size:15px;
line-height:1.15;
overflow-wrap:anywhere;
word-break:normal;
}
.storage-line small{
display:block;
margin-top:3px;
color:#9ba0a6;
font-size:11px;
line-height:1.25;
overflow-wrap:anywhere;
}
.storage-panel ul{
display:none !important;
}
@media (max-width:1250px){
.admin-main-grid{
grid-template-columns:1fr !important;
}
}
@media (max-width:520px){
.storage-row{
grid-template-columns:1fr !important;
}
.donut{
margin:0 auto;
}
}
/* ===== KUNDENPORTAL: Projektbild als Diashow ===== */
.project-slideshow{
position:relative;
min-height:270px;
border:1px solid #151718;
border-radius:6px;
background:#080909;
overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.project-slideshow:before{
content:"";
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,.05),rgba(0,0,0,.34));
}
.project-slideshow .slide{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transform:scale(1.025);
transition:opacity .8s ease, transform 4.5s ease;
}
.project-slideshow .slide.is-active{
opacity:1;
transform:scale(1);
}
.slideshow-overlay{
position:absolute;
right:14px;
bottom:14px;
z-index:3;
border:1px solid rgba(245,230,0,.28);
border-radius:999px;
background:rgba(5,6,6,.72);
color:var(--yellow);
padding:7px 11px;
font-size:12px;
font-weight:900;
backdrop-filter:blur(5px);
}
.slideshow-empty{
min-height:270px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
text-align:center;
padding:28px;
color:#d7dadc;
background:linear-gradient(135deg,#101214,#060707);
}
.slideshow-empty strong{
color:#fff;
font-size:18px;
}
.slideshow-empty span{
max-width:420px;
color:#9ba0a6;
font-size:13px;
line-height:1.45;
}
@media(max-width:980px){
.project-slideshow{
min-height:220px;
}
.slideshow-empty{
min-height:220px;
}
}
/* ===== KUNDENPORTAL: mehrere freigegebene Projekte ===== */
.customer-projects-section{
margin-top:24px;
margin-bottom:22px;
}
.section-headline{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
margin-bottom:14px;
}
.section-headline h2{
margin:0;
font-size:19px;
}
.section-headline span{
color:#9ba0a6;
font-size:13px;
}
.customer-project-list{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:12px;
}
.customer-project-item{
display:flex;
flex-direction:column;
gap:7px;
min-height:104px;
border:1px solid #2b2f32;
background:#0b0d0e;
border-radius:6px;
padding:16px 17px;
transition:.18s ease;
}
.customer-project-item:hover,
.customer-project-item.is-selected{
border-color:rgba(245,230,0,.75);
box-shadow:0 0 0 1px rgba(245,230,0,.08),0 14px 45px rgba(0,0,0,.24);
transform:translateY(-1px);
}
.customer-project-item.is-selected{
background:linear-gradient(180deg,rgba(245,230,0,.08),#0b0d0e 72%);
}
.customer-project-item strong{
color:#fff;
font-size:16px;
line-height:1.2;
overflow-wrap:anywhere;
}
.customer-project-item span{
color:var(--yellow);
font-size:13px;
font-weight:900;
}
.customer-project-item small{
color:#aeb3b8;
font-size:12px;
line-height:1.35;
}
.media-category{
margin-top:24px;
}
.media-category-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-bottom:12px;
}
.media-category-head h3{
margin:0;
font-size:17px;
}
.media-category-head span{
color:#9ba0a6;
font-size:13px;
}
.media-tile strong{
display:block;
min-height:34px;
overflow-wrap:anywhere;
word-break:break-word;
line-height:1.25;
}
.media-tile .muted{
display:block;
margin-top:5px;
}
@media(max-width:980px){
.section-headline,
.media-category-head{
align-items:flex-start;
flex-direction:column;
}
}
/* ===== FIX: Copyright/Footer unten rechts ===== */
.copyright{
position:fixed !important;
right:25px !important;
bottom:15px !important;
left:auto !important;
z-index:60;
margin:0 !important;
width:auto !important;
max-width:calc(100vw - 50px);
text-align:right !important;
color:#c6c8c5;
font-size:12px;
}
.copyright a{
display:inline-block;
}
@media(max-width:640px){
.copyright{
right:14px !important;
bottom:10px !important;
max-width:calc(100vw - 28px);
font-size:11px;
}
}
/* Footer unten rechts */
.copyright{
position:fixed;
right:25px;
bottom:15px;
left:auto;
width:auto;
text-align:right;
z-index:50;
}
/* ===== DATEIEN-SEITE: Upload + Kunden/Projekte sauber gruppiert ===== */
.upload-panel{
margin-bottom:24px;
padding:24px !important;
overflow:hidden;
}
.upload-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}
.upload-head h2{
margin:0 0 6px !important;
font-size:18px !important;
}
.upload-head p{
margin:0;
color:var(--muted);
font-size:13px;
line-height:1.45;
}
.upload-grid{
grid-template-columns:1fr 1fr;
align-items:end;
}
.file-drop{
min-height:88px;
border:1px dashed rgba(245,230,0,.35);
border-radius:8px;
background:linear-gradient(180deg,rgba(245,230,0,.035),rgba(255,255,255,.015));
display:flex !important;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:6px;
padding:18px 20px;
cursor:pointer;
transition:.18s ease;
}
.file-drop:hover{
border-color:rgba(245,230,0,.75);
background:linear-gradient(180deg,rgba(245,230,0,.075),rgba(255,255,255,.02));
}
.file-drop input{
width:100%;
padding:0 !important;
border:0 !important;
background:transparent !important;
}
.file-drop span{
color:#fff;
font-size:14px;
font-weight:900;
}
.file-drop small{
color:var(--muted);
font-size:12px;
}
.upload-actions{
margin-top:18px;
}
.files-overview-section{
margin-top:22px;
}
.customer-file-list{
display:flex;
flex-direction:column;
gap:12px;
}
.file-customer-card{
border:1px solid #24282b;
border-radius:10px;
background:linear-gradient(180deg,#0d0f10,#090a0b);
overflow:hidden;
box-shadow:0 18px 55px rgba(0,0,0,.18);
}
.file-customer-card.is-selected{
border-color:rgba(245,230,0,.55);
box-shadow:0 0 0 1px rgba(245,230,0,.08),0 22px 70px rgba(0,0,0,.28);
}
.file-customer-head{
display:grid;
grid-template-columns:48px minmax(0,1fr) auto auto;
gap:14px;
align-items:center;
padding:15px 16px;
transition:.18s ease;
}
.file-customer-head:hover{
background:rgba(245,230,0,.045);
}
.customer-avatar{
width:48px;
height:48px;
border-radius:50%;
display:grid;
place-items:center;
border:1px solid rgba(245,230,0,.35);
background:rgba(245,230,0,.10);
color:var(--yellow);
font-weight:950;
font-size:18px;
}
.customer-main{
min-width:0;
}
.customer-main strong{
display:block;
font-size:15px;
color:#fff;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.customer-main small{
display:block;
margin-top:4px;
color:var(--muted);
font-size:12px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.customer-stats{
text-align:right;
min-width:92px;
}
.customer-stats span{
display:block;
color:#fff;
font-size:13px;
font-weight:900;
}
.customer-stats small{
display:block;
margin-top:3px;
color:var(--muted);
font-size:12px;
}
.customer-project-tree{
display:flex;
flex-direction:column;
gap:8px;
padding:0 16px 16px 78px;
}
.project-tree-item{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
align-items:center;
gap:14px;
border:1px solid #272b2e;
border-radius:8px;
background:#101315;
padding:12px 14px;
transition:.18s ease;
}
.project-tree-item:before{
content:"";
position:absolute;
left:-34px;
top:50%;
width:26px;
height:1px;
background:#34383b;
}
.project-tree-item:hover,
.project-tree-item.is-active{
border-color:rgba(245,230,0,.70);
transform:translateY(-1px);
box-shadow:0 10px 28px rgba(0,0,0,.24);
}
.project-tree-item.is-active{
background:linear-gradient(180deg,rgba(245,230,0,.08),#101315 72%);
}
.project-tree-item strong{
display:block;
color:#fff;
font-size:14px;
overflow-wrap:anywhere;
}
.project-tree-item small,
.project-file-counts small{
display:block;
margin-top:4px;
color:var(--muted);
font-size:12px;
}
.project-file-counts{
text-align:right;
min-width:120px;
}
.project-file-counts span{
display:block;
color:var(--yellow);
font-size:13px;
font-weight:900;
}
.empty-files-box{
padding:18px 20px;
color:var(--muted);
}
/* ===== Rollenfarben in der Benutzerverwaltung ===== */
.badge-role{
border:1px solid transparent;
font-weight:950;
}
.badge-role-admin{
background:rgba(255,89,89,.14) !important;
border-color:rgba(255,89,89,.36) !important;
color:#ff7474 !important;
}
.badge-role-manager{
background:rgba(79,207,87,.14) !important;
border-color:rgba(79,207,87,.36) !important;
color:#6dff76 !important;
}
.badge-role-customer,
.badge-role-kunde{
background:rgba(245,230,0,.14) !important;
border-color:rgba(245,230,0,.38) !important;
color:var(--yellow) !important;
}
/* ===== Schönere Aktions-Kästchen für Tabellen/alle Kategorien ===== */
.table-actions,
.actions-row{
gap:8px;
}
.table-actions .btn,
.actions-row .btn,
td .btn-small{
border-radius:8px;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.table-actions .btn:hover,
.actions-row .btn:hover,
td .btn-small:hover{
transform:translateY(-1px);
box-shadow:0 12px 30px rgba(0,0,0,.30);
}
.btn-secondary{
background:linear-gradient(180deg,#171a1d,#101214) !important;
color:#fff !important;
border-color:#34383c !important;
}
.btn-secondary:hover{
border-color:rgba(245,230,0,.55) !important;
color:var(--yellow) !important;
}
.btn-danger{
background:linear-gradient(180deg,#2a1013,#19090b) !important;
color:#ff8f8f !important;
border-color:rgba(255,89,89,.40) !important;
}
.btn-danger:hover{
color:#fff !important;
border-color:rgba(255,89,89,.75) !important;
}
@media(max-width:900px){
.upload-grid{
grid-template-columns:1fr;
}
.file-customer-head{
grid-template-columns:42px minmax(0,1fr);
}
.customer-avatar{
width:42px;
height:42px;
}
.customer-stats,
.file-customer-head .badge-role{
grid-column:2;
justify-self:start;
text-align:left;
}
.customer-project-tree{
padding-left:16px;
}
.project-tree-item{
grid-template-columns:1fr;
}
.project-tree-item:before{
display:none;
}
.project-file-counts{
text-align:left;
}
}
/* ===== UPDATE: Aktions-Kästchen wie Rollen-Badges + Schrift mittig ===== */
.badge,
.badge-role,
.table-actions .btn,
.actions-row .btn,
td .btn-small,
.btn-small{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
line-height:1 !important;
}
.table-actions{
display:flex !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.table-actions form{
display:inline-flex !important;
align-items:center !important;
margin:0 !important;
}
.table-actions .btn,
.actions-row .btn.btn-small,
td .btn-small{
min-width:82px !important;
height:28px !important;
min-height:28px !important;
padding:0 10px !important;
border-radius:5px !important;
font-size:12px !important;
font-weight:950 !important;
letter-spacing:.02em !important;
box-shadow:none !important;
transform:none !important;
}
.table-actions .btn-secondary,
.actions-row .btn-secondary.btn-small,
td .btn-secondary.btn-small{
background:rgba(255,255,255,.045) !important;
border:1px solid rgba(255,255,255,.12) !important;
color:#ffffff !important;
}
.table-actions .btn-secondary:hover,
.actions-row .btn-secondary.btn-small:hover,
td .btn-secondary.btn-small:hover{
background:rgba(245,230,0,.12) !important;
border-color:rgba(245,230,0,.36) !important;
color:var(--yellow) !important;
}
.table-actions .btn-danger,
.actions-row .btn-danger.btn-small,
td .btn-danger.btn-small{
background:rgba(255,89,89,.14) !important;
border:1px solid rgba(255,89,89,.36) !important;
color:#ff7474 !important;
}
.table-actions .btn-danger:hover,
.actions-row .btn-danger.btn-small:hover,
td .btn-danger.btn-small:hover{
background:rgba(255,89,89,.20) !important;
border-color:rgba(255,89,89,.58) !important;
color:#ff9b9b !important;
}
.table-actions .btn-primary,
.actions-row .btn-primary.btn-small,
td .btn-primary.btn-small{
background:rgba(245,230,0,.14) !important;
border:1px solid rgba(245,230,0,.38) !important;
color:var(--yellow) !important;
}
.table-actions .btn-primary:hover,
.actions-row .btn-primary.btn-small:hover,
td .btn-primary.btn-small:hover{
background:rgba(245,230,0,.20) !important;
border-color:rgba(245,230,0,.60) !important;
color:#fff56a !important;
}
.badge{
min-height:24px;
padding:0 9px;
}
/* ===== UPDATE: Dateien-Seite kompakter ===== */
.upload-panel-compact{
max-width:1180px;
padding:20px 24px !important;
margin-bottom:24px;
}
.upload-head-compact{
margin-bottom:14px !important;
}
.upload-head-compact h2{
font-size:17px !important;
}
.upload-head-compact p{
font-size:12px !important;
}
.upload-compact-grid{
display:grid;
grid-template-columns:minmax(220px,1fr) minmax(260px,1fr) 260px 150px;
gap:12px;
align-items:end;
}
.upload-compact-grid .field label{
margin-bottom:7px;
}
.upload-compact-grid select,
.upload-compact-grid .upload-file-input{
height:42px !important;
min-height:42px !important;
padding:9px 12px !important;
}
.upload-file-input{
width:100%;
background:#101315;
border:1px solid #32363a;
border-radius:5px;
color:#fff;
outline:0;
}
.upload-file-input::file-selector-button{
height:26px;
margin-right:10px;
border:0;
border-radius:4px;
background:rgba(245,230,0,.16);
color:var(--yellow);
font-weight:900;
cursor:pointer;
}
.upload-submit-inline .btn{
width:100%;
height:42px !important;
min-height:42px !important;
padding:0 16px !important;
border-radius:6px !important;
display:inline-flex;
align-items:center;
justify-content:center;
}
.upload-current{
margin-top:10px;
font-size:12px;
}
.files-overview-section{
max-width:1180px;
}
.files-overview-section .section-headline{
max-width:980px;
}
.customer-file-list{
max-width:1140px;
}
.file-customer-card{
max-width:1140px;
}
.file-customer-head{
padding:13px 16px;
grid-template-columns:42px minmax(0,1fr) auto auto;
}
.customer-avatar{
width:42px;
height:42px;
font-size:16px;
}
.customer-project-tree{
padding:0 16px 14px 70px;
}
.project-tree-item{
padding:10px 13px;
min-height:56px;
}
.project-tree-item:before{
left:-28px;
width:22px;
}
@media(max-width:1200px){
.upload-compact-grid{
grid-template-columns:1fr 1fr;
}
.upload-file-inline,
.upload-submit-inline{
grid-column:auto;
}
}
@media(max-width:720px){
.upload-panel-compact,
.files-overview-section,
.customer-file-list,
.file-customer-card{
max-width:100%;
}
.upload-compact-grid{
grid-template-columns:1fr;
}
.customer-project-tree{
padding:0 14px 14px 14px;
}
}
/* ===== UPDATE: Dateien-Seite zentriert + Kunden als aufklappbare Karten ===== */
.upload-panel-compact{
width:calc(100% - 84px) !important;
max-width:1180px !important;
margin:0 auto 26px auto !important;
}
.files-overview-section{
width:calc(100% - 84px) !important;
max-width:1180px !important;
margin:0 auto !important;
}
.files-overview-section .section-headline{
max-width:1180px !important;
}
.customer-file-list{
width:100% !important;
max-width:1180px !important;
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(360px,1fr)) !important;
gap:12px !important;
align-items:start !important;
}
.file-customer-card{
width:100% !important;
max-width:none !important;
min-width:0 !important;
overflow:hidden !important;
}
.file-customer-head{
min-height:76px !important;
grid-template-columns:42px minmax(0,1fr) auto auto 30px !important;
gap:12px !important;
}
.customer-main strong,
.customer-main small{
display:block !important;
max-width:100% !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.customer-stats{
min-width:74px !important;
text-align:right !important;
}
.customer-toggle-indicator{
width:28px;
height:28px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(245,230,0,.28);
border-radius:6px;
color:var(--yellow);
background:rgba(245,230,0,.08);
font-size:18px;
font-weight:950;
line-height:1;
}
.customer-project-tree{
padding:0 14px 14px 64px !important;
}
.project-tree-item{
grid-template-columns:minmax(0,1fr) auto auto !important;
gap:10px !important;
}
.project-tree-item strong,
.project-tree-item small{
max-width:100%;
overflow-wrap:anywhere;
}
.project-file-counts{
min-width:76px;
}
@media(max-width:1350px){
.upload-panel-compact,
.files-overview-section{
width:calc(100% - 52px) !important;
}
}
@media(max-width:900px){
.customer-file-list{
grid-template-columns:1fr !important;
}
.file-customer-head{
grid-template-columns:42px minmax(0,1fr) auto 30px !important;
}
.file-customer-head .badge-role{
display:none !important;
}
}
@media(max-width:720px){
.upload-panel-compact,
.files-overview-section{
width:calc(100% - 28px) !important;
}
.file-customer-head{
grid-template-columns:40px minmax(0,1fr) 28px !important;
}
.customer-stats,
.file-customer-head .badge-role{
display:none !important;
}
.customer-project-tree{
padding:0 12px 12px 12px !important;
}
.project-tree-item{
grid-template-columns:1fr !important;
}
.project-file-counts{
text-align:left !important;
}
}
/* ===== TERMINANFRAGEN: Admin + Kundenportal ===== */
.appointments-headline{
margin-bottom:16px;
}
.appointment-tabs{
margin:0 !important;
flex-wrap:wrap;
}
.appointment-admin-list{
display:grid;
grid-template-columns:1fr;
gap:14px;
}
.appointment-card{
padding:18px;
border-radius:10px;
}
.appointment-card-main{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(220px,.9fr) auto;
gap:18px;
align-items:center;
}
.appointment-label{
display:block;
color:#9ba0a6;
font-size:12px;
font-weight:900;
margin-bottom:5px;
}
.appointment-card h3{
margin:0 0 5px;
font-size:17px;
}
.appointment-card p,
.appointment-card small{
margin:0;
color:#b8bdc0;
font-size:13px;
}
.appointment-card strong{
display:block;
font-size:15px;
}
.appointment-status-box{
display:flex;
justify-content:flex-end;
}
.appointment-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:24px;
padding:5px 10px;
border-radius:6px;
font-size:12px;
font-style:normal;
font-weight:950;
line-height:1;
white-space:nowrap;
}
.appointment-badge-pending{
color:var(--yellow);
border:1px solid rgba(245,230,0,.28);
background:rgba(245,230,0,.10);
}
.appointment-badge-accepted{
color:#65ff72;
border:1px solid rgba(79,207,87,.28);
background:rgba(79,207,87,.14);
}
.appointment-badge-declined{
color:#ff8f8f;
border:1px solid rgba(255,89,89,.32);
background:rgba(255,89,89,.13);
}
.appointment-note{
margin-top:14px;
padding:12px 14px;
border:1px solid rgba(255,255,255,.08);
border-radius:8px;
background:#101315;
color:#d7dadc;
font-size:13px;
line-height:1.45;
}
.appointment-note.admin-note{
border-color:rgba(245,230,0,.18);
}
.appointment-admin-form{
margin-top:14px;
display:grid;
gap:12px;
}
.appointment-admin-form label span{
display:block;
margin-bottom:7px;
color:#a9afb4;
font-size:12px;
font-weight:900;
}
.appointment-admin-form textarea,
.appointment-request-form textarea{
width:100%;
background:#101315;
border:1px solid #32363a;
border-radius:6px;
color:#fff;
padding:12px 13px;
outline:0;
resize:vertical;
}
.appointment-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,420px);
gap:16px;
align-items:start;
}
.appointment-request-form{
padding:20px;
}
.appointment-request-form .btn{
margin-top:14px;
}
.appointment-history{
display:grid;
gap:10px;
}
.appointment-history h3{
margin:0 0 4px;
font-size:17px;
}
.appointment-mini{
border:1px solid #2b2f32;
background:#0b0d0e;
border-radius:9px;
padding:13px;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
align-items:start;
}
.appointment-mini strong,
.appointment-mini span{
display:block;
}
.appointment-mini span{
margin-top:4px;
color:#aeb3b8;
font-size:12px;
}
.appointment-mini p{
grid-column:1/-1;
margin:2px 0 0;
color:#d7dadc;
font-size:13px;
line-height:1.45;
}
@media(max-width:980px){
.appointment-card-main,
.appointment-grid{
grid-template-columns:1fr;
}
.appointment-status-box{
justify-content:flex-start;
}
}
/* ===== DASHBOARD: schmalere Statistik-Karten + Termin-Zähler ===== */
.dashboard-stats-grid,
.stats-grid.dashboard-stats-grid{
display:grid !important;
grid-template-columns:repeat(6,minmax(150px,1fr)) !important;
gap:10px !important;
margin-bottom:16px !important;
}
.dashboard-stats-grid .stat-card{
min-height:82px !important;
height:auto !important;
padding:15px 44px 14px 17px !important;
border-radius:6px !important;
display:block;
color:var(--text);
}
.dashboard-stats-grid .stat-card strong{
font-size:clamp(21px,1.35vw,28px) !important;
line-height:1 !important;
margin-bottom:8px !important;
}
.dashboard-stats-grid .stat-card span{
font-size:12px !important;
line-height:1.25 !important;
}
.dashboard-stats-grid .stat-card i{
right:16px !important;
top:50% !important;
transform:translateY(-50%) !important;
font-size:24px !important;
opacity:.75;
}
.dashboard-stats-grid .storage-stat-card .storage-value{
font-size:clamp(20px,1.2vw,26px) !important;
}
.dashboard-stats-grid .stat-link{
text-decoration:none;
cursor:pointer;
transition:.18s ease;
}
.dashboard-stats-grid .stat-link:hover{
transform:translateY(-2px);
border-color:rgba(245,230,0,.55);
box-shadow:0 12px 34px rgba(0,0,0,.28),0 0 0 1px rgba(245,230,0,.08);
}
.dashboard-stats-grid .stat-card-warning{
border-color:rgba(245,230,0,.25) !important;
background:linear-gradient(180deg,rgba(245,230,0,.055),#101214) !important;
}
.dashboard-stats-grid .stat-card-warning strong{
color:var(--yellow);
}
.dashboard-stats-grid .stat-card-success{
border-color:rgba(79,207,87,.25) !important;
background:linear-gradient(180deg,rgba(79,207,87,.055),#101214) !important;
}
.dashboard-stats-grid .stat-card-success strong{
color:var(--green);
}
.quick-panel .quick-action{
width:100%;
min-height:42px;
margin:0 0 10px;
padding:0 16px;
display:flex;
align-items:center;
justify-content:flex-start;
border:1px solid #32363a;
border-radius:4px;
background:#101315;
color:#fff;
font-size:13px;
font-weight:800;
line-height:1.2;
white-space:normal;
overflow-wrap:anywhere;
}
.quick-panel .quick-action:hover{
border-color:var(--yellow);
color:var(--yellow);
}
@media(max-width:1500px){
.dashboard-stats-grid,
.stats-grid.dashboard-stats-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
}
@media(max-width:760px){
.dashboard-stats-grid,
.stats-grid.dashboard-stats-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:520px){
.dashboard-stats-grid,
.stats-grid.dashboard-stats-grid{
grid-template-columns:1fr !important;
}
}
/* ===== UPDATE: Terminanfrage Projekt/Paket/Datum untereinander ===== */
.appointment-request-form .appointment-request-fields{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
}
.appointment-request-form .field,
.appointment-request-form .field.full{
grid-column:1/-1 !important;
}
.appointment-request-form .field select,
.appointment-request-form .field input[type="datetime-local"],
.appointment-request-form .field textarea{
min-height:46px;
border-radius:6px;
background:#101315;
border:1px solid #32363a;
color:#fff;
padding:12px 13px;
}
.appointment-request-form .field select:focus,
.appointment-request-form .field input[type="datetime-local"]:focus,
.appointment-request-form .field textarea:focus{
border-color:var(--yellow);
box-shadow:0 0 0 3px rgba(245,230,0,.08);
}
/* ===== ADMIN: Paket-Kategorien ===== */
.package-admin-panel{
padding:20px;
margin:0 0 18px;
}
.package-headline{
margin-bottom:14px;
}
.package-form{
border:1px solid rgba(255,255,255,.06);
background:#0a0c0d;
border-radius:8px;
padding:16px;
margin-bottom:16px;
}
.package-form-grid{
display:grid;
grid-template-columns:minmax(220px,1.4fr) minmax(120px,.6fr) minmax(100px,.45fr) minmax(180px,.8fr);
gap:12px;
align-items:end;
margin-bottom:12px;
}
.package-form-grid .full{
grid-column:1/-1;
}
.package-active-field .package-check{
min-height:46px;
display:flex;
align-items:center;
gap:9px;
padding:0 12px;
border:1px solid #32363a;
background:#101315;
border-radius:6px;
color:#d7dadc;
font-size:12px;
font-weight:800;
}
.package-check input{
accent-color:var(--yellow);
}
.package-list{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:12px;
}
.package-item{
border:1px solid #2b2f32;
background:#0b0d0e;
border-radius:8px;
padding:13px;
display:grid;
grid-template-columns:1fr auto;
gap:10px;
align-items:start;
}
.package-item.is-active{
border-color:rgba(245,230,0,.22);
}
.package-item.is-inactive{
opacity:.65;
}
.package-edit-form{
min-width:0;
}
.package-edit-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 90px 70px 80px;
gap:8px;
margin-bottom:8px;
}
.package-edit-grid input,
.package-edit-grid .package-check,
.package-edit-form textarea{
width:100%;
background:#101315;
border:1px solid #32363a;
border-radius:5px;
color:#fff;
padding:9px 10px;
font-size:12px;
outline:0;
}
.package-edit-grid .package-check{
display:flex;
align-items:center;
gap:6px;
color:#d7dadc;
font-weight:800;
}
.package-edit-form textarea{
resize:vertical;
margin-bottom:8px;
}
.appointment-card-main{
grid-template-columns:1.2fr 1fr 1fr auto !important;
}
@media(max-width:1200px){
.package-form-grid,
.appointment-card-main{
grid-template-columns:1fr !important;
}
.package-list{
grid-template-columns:1fr;
}
}
@media(max-width:640px){
.package-item{
grid-template-columns:1fr;
}
.package-edit-grid{
grid-template-columns:1fr;
}
}
/* ===== OPTIK-UPDATE: Terminverwaltung wie Dateien ===== */
.appointments-shell{
display:grid;
gap:18px;
}
.appointments-hero-panel{
padding:22px 24px;
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);
gap:18px;
align-items:center;
}
.hero-kicker{
display:inline-block;
color:var(--yellow);
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:8px;
}
.appointments-hero-copy h2{
margin:0 0 8px;
font-size:30px;
}
.appointments-hero-copy p{
margin:0;
color:#b8bdc0;
line-height:1.5;
max-width:820px;
}
.appointments-top-stats{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
}
.appointment-stat-chip{
border:1px solid #2b2f32;
background:#0b0d0e;
border-radius:8px;
min-height:92px;
transition:.18s ease;
}
.appointment-stat-chip a{
display:flex;
height:100%;
padding:14px 16px;
flex-direction:column;
justify-content:center;
gap:6px;
}
.appointment-stat-chip strong{
font-size:28px;
line-height:1;
color:#fff;
}
.appointment-stat-chip span{
color:#aeb3b8;
font-size:13px;
font-weight:700;
}
.appointment-stat-chip:hover,
.appointment-stat-chip.is-active{
border-color:rgba(245,230,0,.45);
background:linear-gradient(180deg,rgba(245,230,0,.05),#0b0d0e 70%);
transform:translateY(-1px);
box-shadow:0 14px 38px rgba(0,0,0,.25);
}
.appointment-stat-chip.is-active strong,
.appointment-stat-chip.is-active span{
color:var(--yellow);
}
.package-admin-panel-v2{
padding:22px;
}
.package-headline-v2{
margin-bottom:14px;
}
.package-admin-layout{
display:grid;
grid-template-columns:minmax(330px,420px) minmax(0,1fr);
gap:16px;
align-items:start;
}
.package-form-v2{
padding:18px;
border-radius:10px;
border:1px solid #2b2f32;
background:#0b0d0e;
margin:0;
}
.package-form-grid-v2{
grid-template-columns:1fr;
gap:12px;
}
.package-form-v2 .btn{
width:100%;
margin-top:6px;
}
.package-list-v2{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:12px;
}
.package-item-v2{
border-radius:10px;
padding:14px;
grid-template-columns:1fr;
gap:12px;
}
.package-item-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}
.package-item-head strong{
display:block;
font-size:17px;
margin-bottom:4px;
}
.package-item-head span{
display:block;
color:#aeb3b8;
font-size:12px;
}
.package-visibility-badge.is-visible{
background:rgba(79,207,87,.14);
color:var(--green);
}
.package-visibility-badge.is-hidden{
background:rgba(255,89,89,.13);
color:#ff8f8f;
}
.package-edit-form-v2 textarea{
min-height:84px;
}
.package-actions-row{
justify-content:flex-start;
}
.appointment-list-heading{
margin-bottom:12px;
}
.appointment-admin-list-v2{
grid-template-columns:1fr;
gap:14px;
}
.appointment-card-v2{
padding:18px;
border-radius:10px;
}
.appointment-card-v2:hover{
border-color:rgba(245,230,0,.22);
box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.appointment-card-main-v2{
display:grid !important;
grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr) auto;
gap:18px;
align-items:start;
}
.appointment-customer-col{
display:flex;
align-items:center;
gap:14px;
}
.appointment-customer-avatar{
width:48px;
height:48px;
border-radius:50%;
border:1px solid rgba(245,230,0,.4);
background:rgba(245,230,0,.08);
color:var(--yellow);
display:grid;
place-items:center;
font-weight:900;
font-size:20px;
flex:0 0 48px;
}
.appointment-info-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.appointment-info-box{
border:1px solid rgba(255,255,255,.05);
background:#0a0c0d;
border-radius:8px;
padding:12px 13px;
min-height:96px;
}
.appointment-info-box strong{
margin-bottom:4px;
}
.appointment-side-col{
min-width:150px;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:12px;
}
.appointment-status-box-v2{
width:100%;
justify-content:flex-end;
}
.appointment-inline-actions{
justify-content:flex-end;
}
.appointment-admin-form-v2{
margin-top:14px;
border-top:1px solid rgba(255,255,255,.05);
padding-top:14px;
}
.appointment-confirm-actions{
justify-content:flex-start;
}
.appointment-note{
border-radius:8px;
}
@media(max-width:1400px){
.appointments-hero-panel,
.package-admin-layout,
.appointment-card-main-v2,
.appointment-info-grid{
grid-template-columns:1fr;
}
.appointments-top-stats{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.appointment-side-col,
.appointment-status-box-v2,
.appointment-inline-actions{
width:100%;
justify-content:flex-start;
align-items:flex-start;
}
}
@media(max-width:760px){
.appointments-top-stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:520px){
.appointments-top-stats,
.package-list-v2{
grid-template-columns:1fr;
}
.appointments-hero-copy h2{
font-size:24px;
}
}
/* ===== Paket-Kategorien als eigene Admin-Seite ===== */
.packages-hero-panel .packages-top-stats{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.side-nav a[href="packages.php"]{
padding-left:22px;
}
@media(max-width:760px){
.packages-hero-panel .packages-top-stats{
grid-template-columns:1fr;
}
}
/* ===== KOMPAKTER HEADER: Terminverwaltung ===== */
.appointments-hero-panel{
padding:16px 18px !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:12px !important;
align-items:start !important;
}
.appointments-hero-header{
display:flex;
align-items:center;
justify-content:flex-start;
}
.hero-kicker{
display:inline-block;
margin:0 !important;
color:var(--yellow);
font-size:14px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}
.appointments-hero-copy,
.appointments-hero-copy h2,
.appointments-hero-copy p{
display:none !important;
}
.appointments-top-stats-compact{
display:grid !important;
grid-template-columns:repeat(5,minmax(120px,1fr));
gap:10px !important;
}
.appointment-stat-chip{
min-height:76px !important;
border-radius:8px !important;
}
.appointment-stat-chip a{
padding:12px 14px !important;
gap:4px !important;
}
.appointment-stat-chip strong{
font-size:24px !important;
}
.appointment-stat-chip span{
font-size:12px !important;
font-weight:800 !important;
}
@media(max-width:1200px){
.appointments-top-stats-compact{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
}
@media(max-width:700px){
.appointments-top-stats-compact{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:480px){
.appointments-top-stats-compact{
grid-template-columns:1fr !important;
}
}
/* ===== PAKETE: aufgeräumte Karten ohne Sortierung/Checkbox ===== */
.package-list-v2{
grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
gap:14px;
}
.package-item-v2{
padding:16px;
border-radius:12px;
border:1px solid rgba(245,230,0,.18);
background:linear-gradient(180deg,#0b0d0e,#090b0c);
box-shadow:0 12px 30px rgba(0,0,0,.16);
}
.package-item-v2.is-inactive{
border-color:rgba(255,255,255,.08);
opacity:1;
}
.package-item-head{
align-items:center;
padding-bottom:4px;
}
.package-item-head strong{
font-size:18px;
margin-bottom:3px;
}
.package-item-head span{
font-size:13px;
color:#c0c4c7;
}
.package-edit-form-v2{
display:grid;
gap:10px;
}
.package-edit-grid-clean{
display:grid !important;
grid-template-columns:minmax(0,1fr) 120px !important;
gap:10px !important;
margin-bottom:0 !important;
}
.package-edit-grid-clean input,
.package-edit-form-v2 textarea{
width:100%;
background:#101315;
border:1px solid #2f3438;
border-radius:8px;
color:#fff;
padding:11px 12px;
font-size:13px;
outline:0;
}
.package-edit-grid-clean input:focus,
.package-edit-form-v2 textarea:focus{
border-color:var(--yellow);
box-shadow:0 0 0 3px rgba(245,230,0,.08);
}
.package-edit-form-v2 textarea{
min-height:110px;
line-height:1.45;
resize:vertical;
}
.package-actions-row-clean{
gap:8px;
flex-wrap:wrap;
}
.package-actions-row-clean form{
margin:0;
}
.package-actions-row-clean .btn{
min-width:110px;
justify-content:center;
}
.package-visibility-badge{
border-radius:999px;
padding:6px 10px;
font-size:12px;
}
@media(max-width:640px){
.package-edit-grid-clean{
grid-template-columns:1fr !important;
}
.package-list-v2{
grid-template-columns:1fr;
}
}
/* ===== PAKETE kompakter + Aktionen in einer Reihe ===== */
.package-admin-layout{
grid-template-columns:minmax(280px,340px) minmax(320px,780px);
justify-content:start;
}
.package-list-v2{
grid-template-columns:repeat(auto-fit,minmax(300px,420px));
justify-content:start;
align-content:start;
}
.package-item-v2{
width:100%;
max-width:420px;
padding:14px;
}
.package-item-head strong{
font-size:16px;
}
.package-item-head span{
font-size:12px;
}
.package-edit-form-v2{
gap:8px;
}
.package-edit-grid-clean{
grid-template-columns:minmax(0,1fr) 110px !important;
gap:8px !important;
}
.package-edit-grid-clean input,
.package-edit-form-v2 textarea{
padding:10px 11px;
font-size:12px;
}
.package-edit-form-v2 textarea{
min-height:96px;
}
.package-actions-row-unified{
display:flex;
align-items:center;
gap:8px;
flex-wrap:nowrap;
}
.package-actions-row-unified form{
margin:0;
}
.package-actions-row-unified .btn,
.package-actions-row-unified button[form]{
min-width:96px;
height:38px;
padding:8px 12px;
font-size:12px;
}
@media(max-width:1100px){
.package-admin-layout{
grid-template-columns:1fr;
}
}
@media(max-width:640px){
.package-actions-row-unified{
flex-wrap:wrap;
}
.package-item-v2{
max-width:100%;
}
}
/* ===== PAKETE FINAL: günstige Pakete zuerst + Sichtbarkeit per Button ===== */
.package-headline-v2{
margin-bottom:10px !important;
}
.package-headline-v2 span{
display:none !important;
}
.package-form-grid-v2{
grid-template-columns:1fr !important;
}
.package-form-v2{
padding:16px !important;
}
.package-form-v2 .field label{
margin-bottom:7px;
}
.package-form-v2 textarea{
min-height:96px;
}
.package-list-v2{
grid-template-columns:repeat(auto-fit,minmax(300px,390px)) !important;
justify-content:start !important;
}
.package-item-v2{
max-width:390px !important;
}
.package-visibility-badge.is-visible{
background:rgba(79,207,87,.16) !important;
color:#65ff72 !important;
border:1px solid rgba(79,207,87,.28);
}
.package-visibility-badge.is-hidden{
background:rgba(255,89,89,.14) !important;
color:#ff8f8f !important;
border:1px solid rgba(255,89,89,.32);
}
.btn-visible{
background:rgba(79,207,87,.16) !important;
border:1px solid rgba(79,207,87,.38) !important;
color:#65ff72 !important;
}
.btn-visible:hover{
border-color:rgba(79,207,87,.75) !important;
box-shadow:0 0 18px rgba(79,207,87,.12);
}
.btn-hidden{
background:rgba(255,89,89,.14) !important;
border:1px solid rgba(255,89,89,.38) !important;
color:#ff8f8f !important;
}
.btn-hidden:hover{
border-color:rgba(255,89,89,.75) !important;
box-shadow:0 0 18px rgba(255,89,89,.12);
}
/* ===== TERMINANFRAGEN: Klickbares Accordion ===== */
.appointment-accordion-list{
display:grid;
gap:10px;
}
.appointment-accordion-item{
border:1px solid #222629;
background:linear-gradient(180deg,#0b0d0e,#080a0b);
border-radius:10px;
overflow:hidden;
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.appointment-accordion-item:hover,
.appointment-accordion-item.is-open{
border-color:rgba(245,230,0,.35);
box-shadow:0 14px 34px rgba(0,0,0,.24);
}
.appointment-accordion-summary{
width:100%;
min-height:78px;
display:grid;
grid-template-columns:minmax(230px,.95fr) minmax(190px,.65fr) minmax(230px,.85fr) auto auto 28px;
gap:16px;
align-items:center;
padding:13px 16px;
border:0;
background:transparent;
color:var(--text);
text-align:left;
cursor:pointer;
}
.appointment-accordion-summary:hover{
background:rgba(255,255,255,.015);
}
.appointment-summary-customer{
min-width:0;
}
.appointment-summary-name,
.appointment-summary-email{
display:block;
}
.appointment-summary-name{
font-size:15px;
font-weight:900;
color:#fff;
margin-bottom:3px;
}
.appointment-summary-email{
font-size:12px;
color:#aeb3b8;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.appointment-summary-info{
min-width:0;
display:flex;
align-items:center;
gap:12px;
}
.appointment-summary-icon{
width:28px;
height:28px;
border-radius:50%;
display:grid;
place-items:center;
color:var(--yellow);
border:1px solid rgba(245,230,0,.22);
background:rgba(245,230,0,.05);
flex:0 0 28px;
font-size:13px;
}
.appointment-summary-info strong{
display:block;
color:#fff;
font-size:14px;
line-height:1.25;
}
.appointment-summary-info small{
display:block;
color:#aeb3b8;
font-size:12px;
margin-top:2px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.appointment-header-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
}
.appointment-header-actions form{
margin:0;
}
.appointment-header-actions .btn{
min-width:100px;
height:36px;
padding:8px 12px;
display:inline-flex;
align-items:center;
justify-content:center;
}
.appointment-chevron{
color:var(--yellow);
font-size:24px;
line-height:1;
transform:rotate(0deg);
transition:transform .18s ease;
text-align:center;
}
.appointment-accordion-item.is-open .appointment-chevron{
transform:rotate(180deg);
}
.appointment-accordion-body{
display:none;
padding:0 16px 16px;
border-top:1px solid rgba(255,255,255,.04);
}
.appointment-accordion-item.is-open .appointment-accordion-body{
display:block;
}
.appointment-detail-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:16px;
}
.appointment-detail-box{
min-height:92px;
display:flex;
gap:13px;
align-items:center;
padding:14px;
border:1px solid rgba(255,255,255,.06);
border-radius:9px;
background:#0a0c0d;
}
.appointment-detail-icon{
width:42px;
height:42px;
border-radius:50%;
display:grid;
place-items:center;
border:1px solid rgba(245,230,0,.28);
background:rgba(245,230,0,.05);
color:var(--yellow);
font-size:18px;
flex:0 0 42px;
}
.appointment-detail-box strong{
display:block;
color:#fff;
font-size:15px;
margin:3px 0;
}
.appointment-detail-box small{
color:#aeb3b8;
font-size:12px;
}
.appointment-note-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:12px;
}
.appointment-note-compact{
min-height:74px;
margin-top:0 !important;
display:flex;
gap:8px;
align-items:flex-start;
}
.appointment-note-compact strong{
flex:0 0 auto;
}
.appointment-note-compact span{
color:#d7dadc;
}
.appointment-admin-form-v2{
margin-top:12px !important;
padding-top:12px !important;
}
@media(max-width:1350px){
.appointment-accordion-summary{
grid-template-columns:minmax(220px,1fr) minmax(190px,.8fr) minmax(220px,.9fr) auto 28px;
}
.appointment-header-actions{
grid-column:1/-2;
justify-content:flex-start;
}
}
@media(max-width:980px){
.appointment-accordion-summary{
grid-template-columns:1fr;
gap:12px;
}
.appointment-status-box-v2,
.appointment-header-actions{
justify-content:flex-start;
}
.appointment-chevron{
position:absolute;
right:20px;
}
.appointment-accordion-item{
position:relative;
}
.appointment-detail-grid,
.appointment-note-grid{
grid-template-columns:1fr;
}
}
@media(max-width:520px){
.appointment-header-actions{
flex-wrap:wrap;
}
.appointment-header-actions .btn{
min-width:auto;
width:100%;
}
.appointment-header-actions form{
width:100%;
}
}
/* ===== FIX: Accordion genau wie Mockup, keine kaputten Button-Spalten ===== */
.appointment-accordion-list{
display:grid !important;
gap:10px !important;
}
.appointment-accordion-item{
border:1px solid #222629 !important;
background:linear-gradient(180deg,#0b0d0e,#080a0b) !important;
border-radius:10px !important;
overflow:hidden !important;
}
.appointment-accordion-item.is-open{
border-color:rgba(245,230,0,.55) !important;
}
.appointment-accordion-summary{
width:100% !important;
min-height:82px !important;
display:grid !important;
grid-template-columns:minmax(260px,1.15fr) minmax(220px,.72fr) minmax(260px,.9fr) 135px 240px 28px !important;
gap:18px !important;
align-items:center !important;
padding:15px 16px !important;
border:0 !important;
border-bottom:1px solid transparent;
background:transparent !important;
color:var(--text) !important;
cursor:pointer !important;
text-align:left !important;
}
.appointment-accordion-item.is-open .appointment-accordion-summary{
border-bottom-color:rgba(255,255,255,.05) !important;
}
.appointment-customer-col.appointment-summary-customer{
display:flex !important;
align-items:center !important;
gap:14px !important;
min-width:0 !important;
}
.appointment-customer-avatar{
width:48px !important;
height:48px !important;
flex:0 0 48px !important;
}
.appointment-summary-info{
display:flex !important;
align-items:center !important;
gap:12px !important;
min-width:0 !important;
}
.appointment-summary-icon{
width:30px !important;
height:30px !important;
flex:0 0 30px !important;
}
.appointment-status-box-v2{
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.appointment-header-actions{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
min-width:0 !important;
}
.appointment-header-actions form{
margin:0 !important;
}
.appointment-header-actions .btn{
width:auto !important;
min-width:104px !important;
height:38px !important;
padding:8px 12px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
white-space:nowrap !important;
}
.appointment-chevron{
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:var(--yellow) !important;
font-size:25px !important;
line-height:1 !important;
transform:rotate(0deg);
transition:transform .18s ease;
}
.appointment-accordion-item.is-open .appointment-chevron{
transform:rotate(180deg);
}
.appointment-accordion-body{
display:none !important;
padding:16px !important;
}
.appointment-accordion-item.is-open .appointment-accordion-body{
display:block !important;
}
.appointment-detail-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:12px !important;
margin:0 0 12px !important;
}
.appointment-detail-box{
min-height:96px !important;
display:flex !important;
align-items:center !important;
gap:14px !important;
padding:14px !important;
border:1px solid rgba(255,255,255,.06) !important;
border-radius:9px !important;
background:#0a0c0d !important;
}
.appointment-note-grid{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:12px !important;
margin-top:0 !important;
}
.appointment-note-compact{
margin:0 !important;
min-height:74px !important;
border-radius:9px !important;
}
@media(max-width:1450px){
.appointment-accordion-summary{
grid-template-columns:minmax(240px,1fr) minmax(200px,.8fr) minmax(230px,.9fr) 120px 220px 28px !important;
gap:14px !important;
}
.appointment-header-actions .btn{
min-width:96px !important;
}
}
@media(max-width:1180px){
.appointment-accordion-summary{
grid-template-columns:1fr 1fr !important;
}
.appointment-status-box-v2,
.appointment-header-actions{
justify-content:flex-start !important;
}
.appointment-chevron{
position:absolute;
right:18px;
top:26px;
}
.appointment-accordion-item{
position:relative;
}
.appointment-detail-grid,
.appointment-note-grid{
grid-template-columns:1fr !important;
}
}
@media(max-width:640px){
.appointment-accordion-summary{
grid-template-columns:1fr !important;
}
.appointment-header-actions{
flex-wrap:wrap !important;
}
}
/* ===== STATUSFARBEN TERMINANFRAGEN ===== */
.appointment-badge-pending{
color:#f5e600 !important;
border:1px solid rgba(245,230,0,.38) !important;
background:rgba(245,230,0,.12) !important;
}
.appointment-badge-accepted{
color:#65ff72 !important;
border:1px solid rgba(79,207,87,.38) !important;
background:rgba(79,207,87,.16) !important;
}
.appointment-badge-declined{
color:#ff8f8f !important;
border:1px solid rgba(255,89,89,.40) !important;
background:rgba(255,89,89,.14) !important;
}
.appointment-badge-archived{
color:#6db6ff !important;
border:1px solid rgba(80,145,255,.38) !important;
background:rgba(80,145,255,.14) !important;
}
/* ===== SIDEBAR: Icons und Schrift sauber in einer Reihe ===== */
.side-nav{
gap:8px !important;
}
.side-nav a{
width:100%;
min-height:42px;
height:auto !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:12px !important;
padding:10px 14px !important;
line-height:1.2 !important;
white-space:nowrap !important;
}
.side-nav a i{
width:20px !important;
min-width:20px !important;
height:20px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 20px !important;
margin:0 !important;
line-height:1 !important;
text-align:center !important;
}
/* Nur Abgelaufene Zugänge darf weiterhin umbrechen */
.side-nav a[href="expired.php"]{
white-space:normal !important;
align-items:flex-start !important;
}
.side-nav a[href="expired.php"] i{
margin-top:2px !important;
}
/* ===== ABGELAUFENE PROJEKTE ===== */
.expired-projects-page{
display:grid;
gap:16px;
}
.expired-projects-head{
margin-bottom:2px;
}
.expired-project-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
gap:14px;
}
.expired-project-card{
padding:18px;
border-radius:10px;
background:linear-gradient(180deg,#0b0d0e,#090b0c);
}
.expired-project-card:hover{
border-color:rgba(245,230,0,.24);
box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.expired-project-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
margin-bottom:14px;
}
.expired-project-top h3{
margin:4px 0 3px;
font-size:18px;
}
.expired-project-top small,
.expired-project-main small{
color:#aeb3b8;
font-size:12px;
}
.expired-label{
display:block;
color:#a9afb4;
font-size:12px;
font-weight:900;
}
.expired-project-main{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.expired-project-main > div{
border:1px solid rgba(255,255,255,.06);
background:#0a0c0d;
border-radius:8px;
padding:12px;
min-width:0;
}
.expired-project-main strong{
display:block;
color:#fff;
font-size:14px;
margin:4px 0;
overflow-wrap:anywhere;
}
.expired-project-note{
margin-top:12px;
border:1px solid rgba(255,255,255,.06);
background:#101315;
border-radius:8px;
padding:12px;
color:#d7dadc;
font-size:13px;
line-height:1.45;
}
.expired-project-note strong{
display:block;
margin-bottom:5px;
}
.expired-project-actions{
margin-top:14px;
display:flex;
align-items:end;
gap:8px;
flex-wrap:wrap;
}
.expired-project-actions form{
margin:0;
}
.expired-activate-form{
display:flex;
align-items:end;
gap:8px;
padding:8px;
border:1px solid rgba(245,230,0,.14);
border-radius:8px;
background:rgba(245,230,0,.035);
}
.expired-activate-form label span{
display:block;
color:#a9afb4;
font-size:11px;
font-weight:900;
margin-bottom:4px;
}
.expired-activate-form input{
width:76px;
min-height:35px;
background:#101315;
border:1px solid #32363a;
border-radius:6px;
color:#fff;
padding:7px 9px;
}
.status-expired{
color:#ff8f8f !important;
border:1px solid rgba(255,89,89,.34);
background:rgba(255,89,89,.13);
}
@media(max-width:760px){
.expired-project-grid,
.expired-project-main{
grid-template-columns:1fr;
}
.expired-project-actions,
.expired-activate-form{
align-items:stretch;
flex-direction:column;
}
.expired-activate-form input,
.expired-project-actions .btn{
width:100%;
}
}
/* ===== KUNDENPORTAL: aufgeräumte Übersicht mit Statistik-Karten ===== */
.customer-content{
max-width:1680px;
width:100%;
margin:0 auto;
padding-top:32px !important;
}
.customer-welcome-clean{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:20px;
}
.customer-welcome-clean .hero-kicker{
display:block;
color:var(--yellow);
font-size:12px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
margin-bottom:8px;
}
.customer-welcome-clean h1{
font-size:34px;
line-height:1.1;
margin:0 0 10px;
}
.customer-welcome-clean p{
max-width:720px;
line-height:1.55;
}
.customer-welcome-status{
min-width:260px;
border:1px solid rgba(245,230,0,.18);
background:linear-gradient(145deg,rgba(245,230,0,.075),#0a0c0d 65%);
border-radius:12px;
padding:17px 18px;
text-align:right;
}
.customer-welcome-status span{
display:block;
color:#aeb3b8;
font-size:12px;
font-weight:800;
margin-bottom:7px;
}
.customer-welcome-status strong{
display:block;
color:#fff;
font-size:17px;
overflow-wrap:anywhere;
}
.customer-stats-grid{
display:grid;
grid-template-columns:repeat(7,minmax(150px,1fr));
gap:12px;
margin:24px 0 22px;
}
.customer-stat-card{
position:relative;
min-height:122px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:8px;
border:1px solid rgba(255,255,255,.075);
border-radius:13px;
background:linear-gradient(180deg,#111315,#080a0b);
padding:18px 18px 16px;
overflow:hidden;
box-shadow:0 18px 45px rgba(0,0,0,.22);
transition:.18s ease;
}
.customer-stat-card:before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 88% 16%,rgba(245,230,0,.12),transparent 32%);
pointer-events:none;
}
.customer-stat-card:hover{
transform:translateY(-2px);
border-color:rgba(245,230,0,.45);
box-shadow:0 22px 60px rgba(0,0,0,.30),0 0 0 1px rgba(245,230,0,.05);
}
.customer-stat-card span,
.customer-stat-card small,
.customer-stat-card strong{
position:relative;
z-index:1;
}
.customer-stat-card span{
color:#c9ccce;
font-size:12px;
font-weight:900;
line-height:1.25;
}
.customer-stat-card strong{
color:var(--yellow);
font-size:clamp(22px,1.9vw,31px);
line-height:1;
letter-spacing:-.03em;
white-space:nowrap;
}
.customer-stat-card small{
color:#8f969c;
font-size:11px;
line-height:1.25;
}
.customer-stat-card i{
position:absolute;
right:15px;
top:15px;
color:rgba(255,255,255,.12);
font-style:normal;
font-size:28px;
}
.customer-stat-muted strong{
color:#fff;
}
.portal-info-banner .info-box{
max-width:none;
width:100%;
margin:0 0 20px;
border-radius:12px;
background:linear-gradient(180deg,#0d0f10,#080909);
border-color:rgba(255,255,255,.08);
}
.portal-category-section{
margin:0 0 22px;
}
.portal-category-grid{
display:grid;
grid-template-columns:repeat(5,minmax(160px,1fr));
gap:12px;
}
.portal-category-card{
min-height:116px;
display:grid;
grid-template-columns:34px 1fr;
grid-template-rows:auto 1fr auto;
column-gap:12px;
row-gap:4px;
border:1px solid rgba(255,255,255,.08);
background:#0b0d0e;
border-radius:12px;
padding:15px;
transition:.18s ease;
}
.portal-category-card:hover,
.portal-category-card.is-active{
border-color:rgba(245,230,0,.55);
background:linear-gradient(180deg,rgba(245,230,0,.075),#0b0d0e 70%);
transform:translateY(-1px);
}
.portal-category-icon{
grid-row:1/4;
width:34px;
height:34px;
display:grid;
place-items:center;
border-radius:9px;
border:1px solid rgba(245,230,0,.25);
color:var(--yellow);
background:rgba(245,230,0,.08);
font-weight:900;
}
.portal-category-card strong{
color:#fff;
font-size:15px;
line-height:1.2;
}
.portal-category-card span{
color:#aeb3b8;
font-size:12px;
line-height:1.35;
}
.portal-category-card small{
color:var(--yellow);
font-size:12px;
font-weight:900;
}
.compact-project-hero{
grid-template-columns:minmax(0,1fr) 330px !important;
gap:18px !important;
margin-top:22px !important;
}
.compact-project-hero .project-card{
border-radius:12px;
background:linear-gradient(180deg,#0d0f10,#080909);
}
.project-item-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.project-item-top em{
color:var(--yellow);
font-style:normal;
font-size:11px;
font-weight:950;
padding:4px 7px;
border-radius:999px;
background:rgba(245,230,0,.10);
border:1px solid rgba(245,230,0,.20);
}
.download-project-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
border:1px solid rgba(255,255,255,.08);
background:linear-gradient(180deg,#0d0f10,#080909);
border-radius:13px;
padding:24px;
}
.download-project-card span{
color:var(--yellow);
font-size:12px;
font-weight:950;
text-transform:uppercase;
letter-spacing:.12em;
}
.download-project-card h3{
margin:7px 0 8px;
font-size:23px;
}
.download-project-card p{
margin:0 0 8px;
color:#c6c9cb;
}
.download-project-card small{
color:#9ba0a6;
}
.appointment-grid{
display:grid;
grid-template-columns:minmax(0,1fr) 420px;
gap:16px;
align-items:start;
}
.appointment-request-form,
.appointment-history{
padding:22px;
border-radius:13px;
}
.appointment-history{
border:1px solid rgba(255,255,255,.08);
background:#0b0d0e;
}
.appointment-history h3{
margin:0 0 14px;
font-size:17px;
}
.appointment-mini{
border:1px solid rgba(255,255,255,.07);
border-radius:10px;
padding:13px;
margin-bottom:10px;
background:#090b0c;
}
.appointment-mini strong,
.appointment-mini span{
display:block;
}
.appointment-mini span{
color:#aeb3b8;
font-size:12px;
margin-top:4px;
}
.appointment-mini p{
margin:10px 0 0;
color:#d7dadc;
font-size:13px;
line-height:1.4;
}
@media(max-width:1500px){
.customer-stats-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.portal-category-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:1100px){
.customer-stats-grid,
.portal-category-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.compact-project-hero,
.appointment-grid{
grid-template-columns:1fr !important;
}
.customer-welcome-clean{
align-items:flex-start;
flex-direction:column;
}
.customer-welcome-status{
width:100%;
text-align:left;
}
}
@media(max-width:640px){
.customer-content{
padding-left:18px !important;
padding-right:18px !important;
}
.customer-stats-grid,
.portal-category-grid{
grid-template-columns:1fr;
}
.download-project-card{
flex-direction:column;
align-items:stretch;
}
.customer-welcome-clean h1{
font-size:28px;
}
}
/* Update: Kunden-Diashow volle Breite, ohne rechte Projektkarte */
.compact-project-hero{
grid-template-columns:1fr !important;
}
.compact-project-hero .project-slideshow{
width:100%;
min-height:330px;
}
.compact-project-hero .project-card{
display:none !important;
}
@media(max-width:1100px){
.compact-project-hero{
grid-template-columns:1fr !important;
}
}
/* Update: Kundenportal-Titel mittig in der Topbar + kleinere Begrüßung */
.customer-topbar{
position:relative;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
}
.topbar-center-title{
color:var(--yellow);
font-size:22px;
font-weight:950;
letter-spacing:.16em;
text-transform:uppercase;
text-align:center;
justify-self:center;
}
.customer-topbar .user-menu{
justify-self:end;
}
.customer-welcome-clean{
margin-bottom:14px;
}
.customer-welcome-clean h1{
font-size:26px !important;
line-height:1.08;
margin:0 0 4px !important;
}
.customer-welcome-clean h1 strong{
font-size:inherit;
}
@media(max-width:980px){
.customer-topbar{
grid-template-columns:1fr;
gap:8px;
height:auto;
padding-top:14px;
padding-bottom:14px;
}
.customer-topbar > div:first-child{display:none;}
.customer-topbar .user-menu{justify-self:center;}
}
@media(max-width:640px){
.customer-welcome-clean h1{font-size:22px !important;}
.topbar-center-title{font-size:12px;letter-spacing:.16em;}
}
/* ===== KUNDENPORTAL: Projekte als Admin-Liste ===== */
.customer-project-table-panel{
padding:22px 20px;
border-radius:12px;
background:linear-gradient(180deg,#0d0f10,#080909);
border-color:rgba(255,255,255,.08);
overflow-x:auto;
}
.customer-project-table{
min-width:860px;
}
.customer-project-table td strong{
display:block;
color:#fff;
font-size:14px;
margin-bottom:4px;
}
.customer-project-table td small{
display:block;
color:#8f969c;
font-size:11px;
line-height:1.35;
}
.customer-project-table tr.is-selected-row td{
background:linear-gradient(90deg,rgba(245,230,0,.055),transparent 70%);
}
.customer-project-table .badge-soft{
background:rgba(245,230,0,.10);
color:var(--yellow);
}
.customer-project-table .table-actions{
justify-content:flex-start;
flex-wrap:nowrap;
}
.customer-project-table .btn-small{
white-space:nowrap;
}
@media(max-width:980px){
.customer-project-table-panel{
padding:16px 14px;
}
}
/* ===== KUNDENPORTAL: Projektliste schöner & einheitlich ===== */
.section-headline-clean{
margin-top:0;
margin-bottom:14px;
}
.section-headline-clean h2{
margin:0;
font-size:24px;
letter-spacing:-.02em;
}
.customer-project-table-panel{
padding:18px 18px 20px !important;
border-radius:14px !important;
background:
radial-gradient(circle at 12% 0%,rgba(245,230,0,.045),transparent 28%),
linear-gradient(180deg,#0c0f10,#070808) !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:0 18px 45px rgba(0,0,0,.25);
}
.customer-project-table{
width:100%;
min-width:920px;
border-collapse:separate !important;
border-spacing:0 10px !important;
}
.customer-project-table thead th{
padding:0 14px 8px !important;
color:#b6bdc3 !important;
font-size:12px !important;
text-transform:uppercase;
letter-spacing:.04em;
border:0 !important;
}
.customer-project-table tbody tr{
transition:transform .16s ease, filter .16s ease;
}
.customer-project-table tbody tr:hover{
transform:translateY(-1px);
filter:brightness(1.05);
}
.customer-project-table tbody td{
background:linear-gradient(180deg,#101314,#0b0d0e) !important;
border-top:1px solid rgba(245,230,0,.24) !important;
border-bottom:1px solid rgba(245,230,0,.24) !important;
padding:18px 14px !important;
vertical-align:middle;
min-height:66px;
box-shadow:none !important;
}
.customer-project-table tbody td:first-child{
border-left:1px solid rgba(245,230,0,.24) !important;
border-radius:12px 0 0 12px;
}
.customer-project-table tbody td:last-child{
border-right:1px solid rgba(245,230,0,.24) !important;
border-radius:0 12px 12px 0;
}
.customer-project-table tbody tr:hover td{
border-color:rgba(245,230,0,.38) !important;
box-shadow:none !important;
}
.customer-project-table tr.is-selected-row td{
background:linear-gradient(180deg,#101314,#0b0d0e) !important;
border-color:rgba(245,230,0,.24) !important;
box-shadow:none !important;
}
.customer-project-table td strong{
color:#fff !important;
font-size:15px !important;
font-weight:900;
}
.customer-project-table td small{
color:#9fa7ad !important;
margin-top:3px;
}
.customer-project-table .badge-soft{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:64px;
height:28px;
background:rgba(79,207,87,.13) !important;
color:#69f274 !important;
border:1px solid rgba(79,207,87,.22);
border-radius:8px;
font-size:12px;
}
.customer-project-table .table-actions{
gap:8px !important;
}
.customer-project-table .btn-small{
height:34px;
min-width:78px;
padding:0 13px !important;
border-radius:8px !important;
display:inline-flex;
align-items:center;
justify-content:center;
}
.customer-project-table .btn-secondary{
background:#121517 !important;
border:1px solid rgba(255,255,255,.14) !important;
}
.customer-project-table .btn-primary{
background:rgba(245,230,0,.14) !important;
color:var(--yellow) !important;
border:1px solid rgba(245,230,0,.55) !important;
box-shadow:none !important;
}
@media(max-width:980px){
.customer-project-table-panel{padding:12px !important;}
.section-headline-clean h2{font-size:21px;}
}
/* ===== KUNDENPORTAL: Bilder nach Projekten gruppiert ===== */
.grouped-images-category{
margin-top:22px;
}
.project-image-groups{
display:flex;
flex-direction:column;
gap:22px;
}
.project-image-group{
border:1px solid rgba(245,230,0,.22);
border-radius:14px;
background:
radial-gradient(circle at 14% 0%,rgba(245,230,0,.06),transparent 32%),
linear-gradient(180deg,#0d1011,#070808);
box-shadow:0 0 24px rgba(245,230,0,.07),0 18px 45px rgba(0,0,0,.25);
padding:18px;
}
.project-image-group-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:16px;
padding-bottom:14px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.project-image-group-head h3{
margin:0;
font-size:19px;
color:#fff;
}
.project-image-group-head p{
margin:5px 0 0;
color:#9fa7ad;
font-size:13px;
}
.project-image-group-head span{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:82px;
height:30px;
padding:0 12px;
border-radius:999px;
border:1px solid rgba(245,230,0,.34);
background:rgba(245,230,0,.10);
color:var(--yellow);
font-size:12px;
font-weight:900;
white-space:nowrap;
}
.project-image-list{
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
}
.project-image-tile{
border-color:rgba(245,230,0,.18) !important;
background:linear-gradient(180deg,#101314,#0b0d0e) !important;
box-shadow:0 0 18px rgba(245,230,0,.045);
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.project-image-tile:hover{
transform:translateY(-2px);
border-color:rgba(245,230,0,.38) !important;
box-shadow:0 0 24px rgba(245,230,0,.10);
}
.project-image-tile .media-thumb{
height:130px;
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
background:#060707;
}
.project-image-tile .media-thumb img{
object-fit:cover;
}
@media(max-width:720px){
.project-image-group-head{
flex-direction:column;
}
.project-image-list{
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
}
/* ===== KUNDENPORTAL: Videos nach Projekten gruppiert ===== */
.grouped-videos-category{
margin-top:22px;
}
.project-video-groups{
display:flex;
flex-direction:column;
gap:22px;
}
.project-video-group,
.project-video-group-head{
/* nutzt bewusst den gleichen Style wie die Bilder-Gruppen */
}
.project-video-list{
grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.project-video-tile .media-thumb{
height:150px;
}
.project-video-tile .media-thumb video{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
@media(max-width:720px){
.project-video-list{
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}
}
/* ===== Sidebar: mehrere Projekt-Ablaufdaten anzeigen ===== */
.valid-projects-box{
margin-top:75px;
max-height:360px;
overflow:auto;
}
.valid-projects-box > span{
margin-bottom:10px;
}
.valid-project-group{
padding:10px 0 12px;
border-top:1px solid rgba(255,255,255,.08);
}
.valid-project-group:first-of-type{
border-top:0;
padding-top:0;
}
.valid-project-group strong{
margin-bottom:2px;
}
.valid-project-group small{
color:#e8e8e8;
margin-bottom:8px;
}
.valid-project-group ul{
list-style:none;
margin:8px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:5px;
}
.valid-project-group li{
font-size:12px;
line-height:1.25;
color:#f2f3f3;
padding-left:10px;
position:relative;
overflow-wrap:anywhere;
}
.valid-project-group li:before{
content:"";
position:absolute;
left:0;
top:.55em;
width:4px;
height:4px;
border-radius:50%;
background:var(--yellow);
box-shadow:0 0 8px rgba(245,230,0,.35);
}
/* ===== Sidebar: Überschrift Läuft bald ab mittig & gelb ===== */
.valid-projects-box > span{
display:block !important;
width:100%;
text-align:center;
color:var(--yellow) !important;
font-size:16px !important;
font-weight:900 !important;
letter-spacing:.02em;
margin:0 0 14px !important;
text-shadow:0 0 14px rgba(245,230,0,.22);
}
/* ===== Sidebar: Läuft bald ab über dem Kästchen ===== */
.valid-projects-title{
margin:75px 35px 8px;
text-align:center;
color:var(--yellow);
font-size:16px;
font-weight:900;
letter-spacing:.02em;
text-shadow:0 0 14px rgba(245,230,0,.22);
}
.valid-projects-box{
margin-top:0 !important;
}
.valid-projects-box > span{
display:none !important;
}
/* ===== Kundenportal: Terminformular kompakter ===== */
.appointment-grid{
grid-template-columns:minmax(280px,420px) minmax(280px,420px) !important;
justify-content:flex-start;
align-items:start;
}
.appointment-request-form{
max-width:420px;
width:100%;
}
.appointment-request-form .appointment-request-fields{
grid-template-columns:1fr !important;
}
.appointment-request-form .form-grid .full{
grid-column:1 !important;
}
@media(max-width:980px){
.appointment-grid{
grid-template-columns:1fr !important;
}
.appointment-request-form,
.appointment-history{
max-width:none;
width:100%;
}
}
/* ===== Kundenportal: Terminanfragen nach Status splitten ===== */
.appointment-grid{
grid-template-columns:minmax(280px,420px) minmax(0,1fr) !important;
}
.appointment-history-split{
display:grid !important;
grid-template-columns:repeat(4,minmax(220px,1fr));
gap:14px;
align-items:start;
}
.appointment-status-column{
border:1px solid rgba(255,255,255,.09);
border-radius:12px;
background:linear-gradient(180deg,#0d1011,#080909);
padding:14px;
min-height:150px;
}
.appointment-status-column h3{
margin:0 0 12px !important;
font-size:15px !important;
color:var(--yellow);
text-align:center;
letter-spacing:.02em;
}
.appointment-empty{
margin:0 !important;
padding:12px !important;
font-size:12px;
text-align:center;
}
.appointment-history-split .appointment-mini{
margin-bottom:10px;
}
.appointment-history-split .appointment-mini:last-child{
margin-bottom:0;
}
.appointment-column-accepted{
border-color:rgba(79,207,87,.24);
}
.appointment-column-declined{
border-color:rgba(255,89,89,.24);
}
.appointment-column-archived{
border-color:rgba(160,166,172,.20);
}
@media(max-width:1400px){
.appointment-history-split{
grid-template-columns:repeat(2,minmax(220px,1fr));
}
}
@media(max-width:980px){
.appointment-grid{
grid-template-columns:1fr !important;
}
.appointment-history-split{
grid-template-columns:1fr;
}
}
/* ===== Kundenportal: Termin-Ränder farblich angepasst ===== */
.appointment-request-form{
border:1px solid rgba(245,230,0,.38) !important;
background:
radial-gradient(circle at 10% 0%,rgba(245,230,0,.09),transparent 34%),
linear-gradient(180deg,#0d1011,#080909) !important;
box-shadow:0 0 22px rgba(245,230,0,.06);
}
.appointment-column-pending{
border-color:rgba(245,230,0,.42) !important;
box-shadow:0 0 18px rgba(245,230,0,.055);
}
.appointment-column-archived{
border-color:rgba(65,145,255,.42) !important;
box-shadow:0 0 18px rgba(65,145,255,.055);
}
.appointment-column-archived h3{
color:#6fb1ff !important;
}
/* ===== Kundenportal: Container hinter Termin-Status entfernen ===== */
.appointment-status-column{
border:0 !important;
background:transparent !important;
padding:0 !important;
min-height:0 !important;
box-shadow:none !important;
}
.appointment-status-column h3{
margin:0 0 12px !important;
}
.appointment-column-pending,
.appointment-column-accepted,
.appointment-column-declined,
.appointment-column-archived{
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
.appointment-column-pending h3{
color:var(--yellow) !important;
}
.appointment-column-accepted h3{
color:#69f274 !important;
}
.appointment-column-declined h3{
color:#ff7777 !important;
}
.appointment-column-archived h3{
color:#6fb1ff !important;
}
/* ===== Kundenportal: grauen Hintergrund-Container bei Terminen entfernen, farbige Status-Boxen behalten ===== */
.appointment-section{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
}
.appointment-status-column{
border:1px solid rgba(255,255,255,.09) !important;
border-radius:12px !important;
background:transparent !important;
padding:14px !important;
min-height:150px !important;
box-shadow:none !important;
}
.appointment-column-pending{
border-color:rgba(245,230,0,.42) !important;
box-shadow:0 0 18px rgba(245,230,0,.055) !important;
}
.appointment-column-accepted{
border-color:rgba(79,207,87,.32) !important;
box-shadow:0 0 18px rgba(79,207,87,.05) !important;
}
.appointment-column-declined{
border-color:rgba(255,89,89,.32) !important;
box-shadow:0 0 18px rgba(255,89,89,.05) !important;
}
.appointment-column-archived{
border-color:rgba(65,145,255,.42) !important;
box-shadow:0 0 18px rgba(65,145,255,.055) !important;
}
.appointment-column-pending h3{
color:var(--yellow) !important;
}
.appointment-column-accepted h3{
color:#69f274 !important;
}
.appointment-column-declined h3{
color:#ff7777 !important;
}
.appointment-column-archived h3{
color:#6fb1ff !important;
}
/* ===== Kundenportal: äußeren grauen Termin-Container wirklich entfernen ===== */
.appointment-grid,
.appointment-history,
.appointment-history-split{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
outline:0 !important;
}
.appointment-history-split::before,
.appointment-history-split::after,
.appointment-history::before,
.appointment-history::after,
.appointment-grid::before,
.appointment-grid::after{
display:none !important;
content:none !important;
}
.appointment-status-column{
border-radius:12px !important;
background:transparent !important;
padding:14px !important;
min-height:150px !important;
}
.appointment-column-pending{
border:1px solid rgba(245,230,0,.42) !important;
box-shadow:0 0 18px rgba(245,230,0,.055) !important;
}
.appointment-column-accepted{
border:1px solid rgba(79,207,87,.32) !important;
box-shadow:0 0 18px rgba(79,207,87,.05) !important;
}
.appointment-column-declined{
border:1px solid rgba(255,89,89,.32) !important;
box-shadow:0 0 18px rgba(255,89,89,.05) !important;
}
.appointment-column-archived{
border:1px solid rgba(65,145,255,.42) !important;
box-shadow:0 0 18px rgba(65,145,255,.055) !important;
}
/* ===== Kundenportal: Archivierte Anfragen ausblenden + abgelehnte löschbar ===== */
.appointment-history-split{
grid-template-columns:repeat(3,minmax(240px,1fr)) !important;
}
.appointment-delete-form{
grid-column:1/-1;
margin-top:8px;
display:flex;
justify-content:flex-end;
}
.appointment-delete-form .btn-danger{
height:32px;
min-width:90px;
padding:0 12px !important;
border-radius:8px;
}
@media(max-width:1200px){
.appointment-history-split{
grid-template-columns:repeat(2,minmax(220px,1fr)) !important;
}
}
@media(max-width:980px){
.appointment-history-split{
grid-template-columns:1fr !important;
}
}
/* ===== Kundenportal: Feedback-Kategorie ===== */
.feedback-section{
max-width:760px;
}
.feedback-form{
border:1px solid rgba(245,230,0,.34) !important;
border-radius:14px !important;
background:
radial-gradient(circle at 10% 0%,rgba(245,230,0,.08),transparent 34%),
linear-gradient(180deg,#0d1011,#080909) !important;
box-shadow:0 0 22px rgba(245,230,0,.055);
padding:22px;
}
.feedback-form-head{
margin-bottom:18px;
}
.feedback-form-head strong{
display:block;
color:var(--yellow);
font-size:18px;
font-weight:900;
margin-bottom:6px;
}
.feedback-form-head p{
margin:0;
color:#aeb3b8;
font-size:13px;
line-height:1.45;
}
.feedback-fields{
grid-template-columns:1fr !important;
}
.feedback-form .form-grid .full{
grid-column:1 !important;
}
.feedback-form textarea{
width:100%;
background:#101315;
border:1px solid #32363a;
border-radius:6px;
color:#fff;
padding:12px 13px;
outline:0;
resize:vertical;
}
.feedback-form textarea:focus,
.feedback-form input:focus{
border-color:var(--yellow);
}
.feedback-form .btn{
margin-top:14px;
}
@media(max-width:980px){
.feedback-section{
max-width:none;
}
}
/* ===== Kundenportal: Feedback-Formular komplett mittig ===== */
.feedback-section{
width:100%;
max-width:760px !important;
margin:0 auto !important;
}
.feedback-section .section-headline-clean{
text-align:center;
}
.feedback-form{
margin:0 auto !important;
}
/* ===== Kundenportal: Download-Kategorie nur Projekte mit Download-Optionen ===== */
.download-projects-section{
width:100%;
}
.download-project-list{
display:flex;
flex-direction:column;
gap:14px;
}
.download-project-card{
display:grid;
grid-template-columns:minmax(260px,1fr) auto;
gap:18px;
align-items:center;
border:1px solid rgba(245,230,0,.24);
border-radius:14px;
background:
radial-gradient(circle at 10% 0%,rgba(245,230,0,.055),transparent 32%),
linear-gradient(180deg,#101314,#0b0d0e);
padding:18px;
}
.download-project-info strong{
display:block;
font-size:16px;
font-weight:900;
color:#fff;
margin-bottom:6px;
}
.download-project-info span,
.download-project-info small{
display:block;
color:#aeb3b8;
font-size:13px;
line-height:1.45;
}
.download-project-info small{
color:#8f969c;
margin-top:3px;
}
.download-project-actions{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:10px;
}
.download-project-actions .btn-small{
min-height:36px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:8px !important;
white-space:nowrap;
}
.download-project-actions .is-disabled{
opacity:.38;
pointer-events:none;
cursor:not-allowed;
}
@media(max-width:1100px){
.download-project-card{
grid-template-columns:1fr;
}
.download-project-actions{
justify-content:flex-start;
}
}
@media(max-width:640px){
.download-project-actions{
flex-direction:column;
}
.download-project-actions .btn-small{
width:100%;
}
}
/* ===== Kundenportal: Download-Projekte schöner angeordnet ===== */
.download-project-card{
grid-template-columns:minmax(280px,1fr) minmax(320px,420px) !important;
align-items:stretch !important;
padding:20px !important;
}
.download-project-info{
display:flex;
flex-direction:column;
justify-content:center;
min-height:150px;
padding:4px 0;
}
.download-project-info strong{
font-size:18px !important;
color:var(--yellow) !important;
margin-bottom:10px !important;
}
.download-project-info span{
font-size:13px !important;
color:#d7dadc !important;
}
.download-project-info small{
margin-top:8px !important;
}
.download-project-actions{
background:
radial-gradient(circle at 14% 0%,rgba(245,230,0,.08),transparent 36%),
linear-gradient(180deg,#0b0e0f,#070808);
border:1px solid rgba(245,230,0,.24);
border-radius:12px;
padding:14px;
display:flex !important;
flex-direction:column;
justify-content:center !important;
gap:10px !important;
}
.download-project-actions .btn-small{
width:100%;
min-height:42px !important;
padding:0 14px !important;
font-size:12px;
font-weight:900;
}
.download-project-actions .btn-secondary{
background:#121517 !important;
border:1px solid rgba(255,255,255,.14) !important;
}
.download-project-actions .btn-secondary:hover{
border-color:rgba(245,230,0,.45) !important;
}
.download-project-actions .btn-primary{
background:linear-gradient(180deg,var(--yellow),#e6d700) !important;
color:#050505 !important;
border:1px solid rgba(245,230,0,.55) !important;
}
@media(max-width:1100px){
.download-project-card{
grid-template-columns:1fr !important;
}
.download-project-info{
min-height:auto;
}
.download-project-actions{
max-width:420px;
width:100%;
}
}
@media(max-width:640px){
.download-project-actions{
max-width:none;
}
}
/* ===== Kundenportal: Download-Projekte 4 nebeneinander ===== */
.download-project-list{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px !important;
}
.download-project-card{
display:flex !important;
flex-direction:column;
justify-content:space-between;
gap:16px;
min-width:0;
padding:16px !important;
}
.download-project-info{
min-height:auto !important;
justify-content:flex-start !important;
}
.download-project-info strong{
font-size:16px !important;
line-height:1.25;
}
.download-project-info span,
.download-project-info small{
font-size:12px !important;
}
.download-project-actions{
width:100%;
min-width:0;
max-width:none !important;
}
.download-project-actions .btn-small{
width:100%;
white-space:normal !important;
text-align:center;
line-height:1.2;
min-height:40px !important;
}
@media(max-width:1500px){
.download-project-list{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:1150px){
.download-project-list{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:720px){
.download-project-list{
grid-template-columns:1fr;
}
}
/* ===== Kundenportal: Feedback-Kategorie wiederhergestellt und mittig ===== */
.feedback-section{
width:100%;
max-width:760px !important;
margin:0 auto !important;
}
.feedback-section .section-headline-clean{
text-align:center;
}
.feedback-form{
margin:0 auto !important;
border:1px solid rgba(245,230,0,.34) !important;
border-radius:14px !important;
background:
radial-gradient(circle at 10% 0%,rgba(245,230,0,.08),transparent 34%),
linear-gradient(180deg,#0d1011,#080909) !important;
box-shadow:0 0 22px rgba(245,230,0,.055);
padding:22px;
}
.feedback-form-head{
margin-bottom:18px;
}
.feedback-form-head strong{
display:block;
color:var(--yellow);
font-size:18px;
font-weight:900;
margin-bottom:6px;
}
.feedback-form-head p{
margin:0;
color:#aeb3b8;
font-size:13px;
line-height:1.45;
}
.feedback-fields{
grid-template-columns:1fr !important;
}
.feedback-form .form-grid .full{
grid-column:1 !important;
}
.feedback-form textarea{
width:100%;
background:#101315;
border:1px solid #32363a;
border-radius:6px;
color:#fff;
padding:12px 13px;
outline:0;
resize:vertical;
}
.feedback-form textarea:focus,
.feedback-form input:focus{
border-color:var(--yellow);
}
.feedback-form .btn{
margin-top:14px;
}
@media(max-width:980px){
.feedback-section{
max-width:none !important;
}
}
/* ===== Sidebar: Brand-Trennlinie komplett durchgehend ===== */
.sidebar .brand{
display:flex !important;
width:100% !important;
box-sizing:border-box;
}
/* ===== Admin: eigene Kategorie Diashow ===== */
.slideshow-admin-panel{
margin-top:18px;
padding:23px 20px;
}
.slideshow-admin-layout{
display:grid;
grid-template-columns:minmax(280px,420px) 1fr;
gap:18px;
align-items:start;
}
.slideshow-upload-box{
border:1px solid rgba(245,230,0,.24);
border-radius:14px;
background:
radial-gradient(circle at 12% 0%,rgba(245,230,0,.07),transparent 34%),
linear-gradient(180deg,#0d1011,#080909);
padding:18px;
}
.slideshow-upload-box .btn{
margin-top:14px;
width:100%;
}
.slideshow-admin-list{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:14px;
}
.slideshow-admin-item{
border:1px solid rgba(255,255,255,.09);
border-radius:14px;
background:linear-gradient(180deg,#101314,#0b0d0e);
padding:12px;
}
.slideshow-admin-item.is-active{
border-color:rgba(245,230,0,.28);
}
.slideshow-admin-item.is-inactive{
opacity:.58;
}
.slideshow-admin-thumb{
height:120px;
border-radius:10px;
overflow:hidden;
background:#050606;
border:1px solid rgba(255,255,255,.08);
margin-bottom:10px;
}
.slideshow-admin-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.slideshow-admin-meta strong,
.slideshow-admin-meta span,
.slideshow-admin-meta em{
display:block;
}
.slideshow-admin-meta strong{
font-size:13px;
color:#fff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.slideshow-admin-meta span{
font-size:12px;
color:#9fa7ad;
margin-top:4px;
}
.slideshow-admin-meta em{
font-style:normal;
color:var(--yellow);
font-size:12px;
font-weight:900;
margin-top:4px;
}
.slideshow-admin-actions{
margin-top:12px;
}
.slideshow-admin-actions form{
flex:1;
}
.slideshow-admin-actions .btn{
width:100%;
}
@media(max-width:1100px){
.slideshow-admin-layout{
grid-template-columns:1fr;
}
}
/* ===== KUNDENPORTAL: Eigene Daten ===== */
.profile-section{
width:100%;
max-width:1100px;
margin:0 auto;
}
.profile-section .section-headline-clean{
margin-bottom:16px;
}
.profile-form{
width:100%;
max-width:1100px;
margin:0 auto;
padding:30px 30px 26px;
border:1px solid rgba(245,230,0,.34);
border-radius:14px;
background:
radial-gradient(circle at 10% 0%, rgba(245,230,0,.08), transparent 34%),
linear-gradient(180deg,#0d1011,#080909);
box-shadow:0 0 22px rgba(245,230,0,.055);
}
.profile-fields{
gap:16px;
}
.profile-form .field label{
display:block;
color:#d5d8da;
font-size:13px;
font-weight:800;
margin-bottom:8px;
}
.profile-form input{
height:48px;
background:#0d1113;
border:1px solid #2f3438;
border-radius:6px;
color:#fff;
padding:0 14px;
}
.profile-form input:focus{
border-color:var(--yellow);
box-shadow:0 0 0 3px rgba(245,230,0,.08);
}
.profile-fields input:disabled{
opacity:.72;
cursor:not-allowed;
background:#0b0f10;
}
.profile-note{
display:none;
}
.profile-form .btn{
margin-top:18px;
min-width:220px;
}
@media(max-width:980px){
.profile-form{
padding:22px 18px 20px;
}
.profile-fields{
grid-template-columns:1fr !important;
gap:14px;
}
.profile-fields .full{
grid-column:1 !important;
}
.profile-form .btn{
width:100%;
min-width:0;
}
}
/* ===== Öffentliche Dienstleistungsseite ===== */
.services-login-link{
display:block;
width:100%;
text-align:center;
color:var(--yellow);
font-size:22px;
font-weight:900;
letter-spacing:.03em;
text-transform:none;
margin:0 0 2px;
text-shadow:0 0 18px rgba(245,230,0,.16);
}
.services-login-link:hover{
text-decoration:underline;
}
.services-page{
min-height:100vh;
background:
radial-gradient(circle at 16% 10%,rgba(245,230,0,.08),transparent 25%),
radial-gradient(circle at 86% 16%,rgba(245,230,0,.05),transparent 24%),
linear-gradient(180deg,#050606,#080909 45%,#030404);
color:var(--text);
}
.services-shell{
width:min(1180px,calc(100% - 36px));
margin:0 auto;
padding:30px 0 46px;
}
.services-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:16px 0 32px;
}
.services-header .brand{
text-decoration:none;
}
.services-back-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
border:1px solid rgba(245,230,0,.28);
border-radius:999px;
padding:0 18px;
color:var(--yellow);
font-weight:900;
background:rgba(245,230,0,.06);
}
.services-hero{
border:1px solid rgba(245,230,0,.30);
border-radius:18px;
padding:38px 34px;
background:
radial-gradient(circle at 8% 0%,rgba(245,230,0,.10),transparent 32%),
linear-gradient(180deg,rgba(13,16,17,.96),rgba(8,9,9,.96));
box-shadow:0 24px 90px rgba(0,0,0,.38),0 0 26px rgba(245,230,0,.045);
}
.services-kicker{
display:inline-flex;
color:var(--yellow);
font-size:14px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:12px;
}
.services-hero h1{
margin:0;
max-width:820px;
font-size:clamp(32px,4vw,54px);
line-height:1.05;
letter-spacing:-.035em;
}
.services-hero p{
max-width:660px;
margin:18px 0 0;
color:#c5c8ca;
font-size:16px;
line-height:1.65;
}
.services-category-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:20px;
}
.services-category-card{
border:1px solid rgba(245,230,0,.22);
border-radius:16px;
background:#0b0d0e;
padding:22px;
min-height:280px;
box-shadow:0 16px 56px rgba(0,0,0,.25);
}
.services-category-head{
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px;
}
.services-category-head span{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:12px;
background:rgba(245,230,0,.10);
border:1px solid rgba(245,230,0,.22);
}
.services-category-head h2{
margin:0;
font-size:19px;
}
.services-category-empty{
color:#9ba0a6;
font-size:14px;
line-height:1.5;
}
.services-package-list{
display:flex;
flex-direction:column;
gap:12px;
}
.services-package-card{
border:1px solid #25292c;
border-radius:12px;
background:#101315;
padding:16px;
}
.services-package-card h3{
margin:0 0 8px;
font-size:16px;
color:#fff;
}
.services-package-card p{
margin:0 0 12px;
color:#b9bdc0;
font-size:13px;
line-height:1.5;
}
.services-package-card strong{
display:inline-flex;
color:var(--yellow);
font-size:17px;
font-weight:900;
}
.services-empty{
margin-top:20px;
padding:24px;
border-color:rgba(245,230,0,.22);
}
.services-empty h2{
margin:0 0 8px;
}
.services-empty p{
margin:0;
color:#c5c8ca;
}
.services-cta{
margin-top:20px;
border:1px solid #25292c;
border-radius:16px;
background:#0b0d0e;
padding:20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
}
.services-cta strong{
display:block;
color:#fff;
font-size:18px;
margin-bottom:5px;
}
.services-cta span{
color:#aeb3b8;
font-size:14px;
}
.services-cta .btn{
min-width:210px;
text-align:center;
}
@media(max-width:980px){
.services-category-grid{
grid-template-columns:1fr;
}
.services-header{
align-items:flex-start;
flex-direction:column;
}
.services-cta{
align-items:stretch;
flex-direction:column;
}
.services-cta .btn{
width:100%;
}
}
/* ===== Admin Pakete: Kategorie-Auswahl ===== */
.package-form select,
.package-edit-form select{
width:100%;
height:48px;
background:#101315;
border:1px solid #32363a;
border-radius:6px;
color:#fff;
padding:0 13px;
outline:0;
}
.package-form select:focus,
.package-edit-form select:focus{
border-color:var(--yellow);
box-shadow:0 0 0 3px rgba(245,230,0,.08);
}
.package-edit-grid-with-category{
grid-template-columns:1.2fr .7fr .9fr !important;
}
.package-badges{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
.package-category-badge{
background:rgba(245,230,0,.12);
color:var(--yellow);
border:1px solid rgba(245,230,0,.22);
}
.package-category-measure{
background:rgba(120,170,255,.12);
color:#a7c6ff;
border-color:rgba(120,170,255,.22);
}
.package-category-other{
background:rgba(255,255,255,.08);
color:#d7dadc;
border-color:rgba(255,255,255,.14);
}
@media(max-width:980px){
.package-edit-grid-with-category{
grid-template-columns:1fr !important;
}
.package-badges{
justify-content:flex-start;
}
}
/* ===== Paket-Kategorie bei bestehenden Paketen bearbeiten ===== */
.package-form select,
.package-edit-form select{
width:100%;
height:48px;
background:#101315;
border:1px solid #32363a;
border-radius:6px;
color:#fff;
padding:0 13px;
outline:0;
}
.package-form select:focus,
.package-edit-form select:focus{
border-color:var(--yellow);
box-shadow:0 0 0 3px rgba(245,230,0,.08);
}
.package-edit-grid-with-category{
grid-template-columns:1.2fr .7fr .9fr !important;
}
.package-badges{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
.package-category-badge{
background:rgba(245,230,0,.12);
color:var(--yellow);
border:1px solid rgba(245,230,0,.22);
}
.package-category-measure{
background:rgba(120,170,255,.12);
color:#a7c6ff;
border-color:rgba(120,170,255,.22);
}
.package-category-other{
background:rgba(255,255,255,.08);
color:#d7dadc;
border-color:rgba(255,255,255,.14);
}
@media(max-width:980px){
.package-edit-grid-with-category{
grid-template-columns:1fr !important;
}
.package-badges{
justify-content:flex-start;
}
}
/* ===== Dienstleistungen: Kategorien untereinander, Pakete nebeneinander ===== */
.services-category-grid{
display:flex !important;
flex-direction:column !important;
gap:22px !important;
margin-top:22px !important;
}
.services-category-card{
width:100% !important;
min-height:0 !important;
}
.services-package-list{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
gap:14px !important;
align-items:stretch !important;
}
.services-package-card{
height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.services-package-card strong{
margin-top:auto;
}
@media(max-width:720px){
.services-package-list{
grid-template-columns:1fr !important;
}
}
/* ===== Dienstleistungen: Logo statt Textmarke oben ===== */
.services-logo-link{
display:inline-flex;
align-items:center;
justify-content:flex-start;
min-height:74px;
text-decoration:none;
}
.services-logo-img{
display:block;
max-width:260px;
max-height:82px;
width:auto;
height:auto;
object-fit:contain;
filter:drop-shadow(0 0 18px rgba(245,230,0,.10));
}
@media(max-width:720px){
.services-logo-img{
max-width:220px;
max-height:72px;
}
}
/* ===== Dienstleistungen: Startseiten-Hintergrund 1:1 + Logo oben entfernt ===== */
.services-page{
min-height:100vh !important;
background:
radial-gradient(circle at 20% 15%,rgba(245,230,0,.05),transparent 16%),
radial-gradient(circle at 82% 22%,rgba(245,230,0,.04),transparent 18%),
linear-gradient(180deg,#040505,#060708 46%,#030404 100%) !important;
color:var(--text);
}
.services-shell{
width:100% !important;
min-height:100vh !important;
margin:0 !important;
padding:34px 38px 46px !important;
position:relative;
overflow:hidden;
background:
linear-gradient(90deg,rgba(5,6,6,.92) 0%,rgba(5,6,6,.68) 46%,rgba(5,6,6,.88) 100%),
radial-gradient(circle at 52% 14%,rgba(245,230,0,.07),transparent 20%),
url("login-bg.jpg.png"),
linear-gradient(145deg,#070808 0%,#101213 42%,#040505 100%) !important;
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
box-shadow:inset 0 0 0 1px var(--yellow), inset 0 0 60px rgba(245,230,0,.03), var(--shadow);
}
.services-shell:before{
content:"";
position:absolute;
inset:8px;
pointer-events:none;
border:1px solid rgba(245,230,0,.18);
background:
radial-gradient(ellipse at 58% 26%,rgba(255,255,255,.10),transparent 10%),
linear-gradient(160deg,transparent 0 41%,rgba(255,255,255,.04) 41.2% 41.4%,transparent 42%),
linear-gradient(153deg,transparent 0 48%,rgba(255,255,255,.05) 48.3% 48.5%,transparent 49%),
radial-gradient(ellipse at 50% 72%,rgba(90,95,96,.24),transparent 24%);
opacity:.95;
}
.services-header,
.services-hero,
.services-category-grid,
.services-empty,
.services-cta{
position:relative;
z-index:1;
}
.services-header{
width:min(1180px,calc(100% - 36px));
margin:0 auto;
justify-content:flex-end !important;
padding:16px 0 32px !important;
}
.services-hero,
.services-category-grid,
.services-empty,
.services-cta{
width:min(1180px,calc(100% - 36px));
margin-left:auto !important;
margin-right:auto !important;
}
.services-logo-link,
.services-logo-img{
display:none !important;
}
@media(max-width:720px){
.services-shell{
padding:24px 18px 36px !important;
}
.services-header,
.services-hero,
.services-category-grid,
.services-empty,
.services-cta{
width:100%;
}
}
/* =========================================================
SERVICES CATALOG DESIGN - SCREENSHOT STYLE + HERO + CTA
========================================================= */
.svc-premium-body{
margin:0;
min-height:100vh;
background:
radial-gradient(circle at 20% 0%, rgba(245,230,0,.06), transparent 24%),
linear-gradient(180deg, #050607 0%, #050607 38%, #030404 100%) !important;
color:#f4f5f6;
}
.svc-premium-page{
min-height:100vh;
background:#050607;
}
/* TOP HEADER */
.svc-main-header{
height:94px;
width:100%;
display:grid;
grid-template-columns:330px 1fr 260px;
align-items:center;
gap:20px;
padding:0 clamp(34px,4vw,76px);
border-bottom:1px solid rgba(255,255,255,.06);
background:rgba(4,5,5,.94);
}
.svc-logo{
display:flex;
align-items:center;
gap:14px;
color:#fff;
text-decoration:none;
}
.svc-logo-icon{
width:70px;
height:46px;
position:relative;
display:block;
}
.svc-logo-icon:before{
content:"";
position:absolute;
left:2px;
top:12px;
width:58px;
height:24px;
border-top:3px solid #fff;
border-bottom:3px solid #fff;
border-radius:50%;
opacity:.85;
filter:drop-shadow(0 0 5px rgba(255,255,255,.20));
}
.svc-logo-icon:after{
content:"";
position:absolute;
right:0;
top:3px;
width:38px;
height:38px;
border:3px solid #f1df00;
border-radius:50%;
box-shadow:0 0 18px rgba(241,223,0,.18);
}
.svc-logo-text strong{
display:block;
font-size:24px;
line-height:.9;
letter-spacing:.12em;
font-weight:1000;
}
.svc-logo-text em{
color:#f1df00;
font-style:normal;
}
.svc-logo-text small{
display:block;
margin-top:5px;
color:#d6d8d9;
font-size:8px;
letter-spacing:.30em;
}
.svc-main-nav{
display:flex;
align-items:center;
justify-content:center;
gap:46px;
}
.svc-main-nav a{
position:relative;
color:#f0f2f2;
text-decoration:none;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
}
.svc-main-nav a.active{
color:#f1df00;
}
.svc-main-nav a.active:after{
content:"";
position:absolute;
left:50%;
bottom:-22px;
transform:translateX(-50%);
width:58px;
height:2px;
background:#f1df00;
box-shadow:0 0 16px rgba(241,223,0,.35);
}
.svc-request-btn{
justify-self:end;
min-width:220px;
height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:13px;
border-radius:3px;
background:#f1df00;
color:#050607;
font-size:13px;
font-weight:1000;
letter-spacing:.06em;
text-decoration:none;
box-shadow:0 0 22px rgba(241,223,0,.12);
}
/* HERO */
.svc-hero{
min-height:270px;
position:relative;
overflow:hidden;
border-bottom:1px solid rgba(241,223,0,.40);
background:
linear-gradient(90deg, rgba(5,6,7,.98) 0%, rgba(5,6,7,.86) 39%, rgba(5,6,7,.54) 100%),
radial-gradient(circle at 75% 30%, rgba(241,223,0,.05), transparent 24%),
#050607;
}
.svc-hero:after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:1px;
background:linear-gradient(90deg, transparent 0%, rgba(241,223,0,.72) 18%, rgba(241,223,0,.35) 82%, transparent 100%);
}
.svc-hero-copy{
position:relative;
z-index:2;
width:min(1720px, calc(100% - 90px));
margin:0 auto;
padding:48px 0 44px;
}
.svc-hero-copy h1{
margin:0 0 16px;
line-height:.94;
letter-spacing:.12em;
text-transform:uppercase;
font-weight:1000;
}
.svc-hero-copy h1 span{
display:block;
color:#f4f5f6;
font-size:clamp(42px,4.3vw,76px);
}
.svc-hero-copy h1 strong{
display:block;
color:#f1df00;
font-size:clamp(42px,4.3vw,76px);
}
.svc-hero-copy p{
margin:0;
color:#d4d7d8;
font-size:17px;
line-height:1.55;
}
.svc-hero-drone{
position:absolute;
z-index:1;
right:0;
top:0;
width:min(980px,58vw);
height:100%;
opacity:.75;
mask-image:linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
}
.svc-hero-drone img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
filter:brightness(.72) contrast(1.10) saturate(.85);
}
/* CATEGORY/CARD AREA */
.svc-layout-shell{
width:min(1720px, calc(100% - 90px));
margin:0 auto;
padding:28px 0 46px;
}
.svc-section{
margin-bottom:20px;
}
.svc-section-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin:0 0 12px;
}
.svc-section-title-wrap{
display:flex;
align-items:center;
gap:14px;
flex:1;
min-width:0;
}
.svc-section-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid rgba(241,223,0,.55);
color:#f1df00;
background:rgba(0,0,0,.32);
font-size:17px;
box-shadow:inset 0 0 0 1px rgba(241,223,0,.08), 0 0 18px rgba(241,223,0,.05);
}
.svc-section-title{
margin:0;
white-space:nowrap;
color:#f5f6f6;
font-size:23px;
font-weight:900;
letter-spacing:.045em;
}
.svc-section-line{
flex:1;
min-width:10px;
height:1px;
background:linear-gradient(90deg, rgba(241,223,0,.55), rgba(241,223,0,.18));
}
.svc-section-more{
white-space:nowrap;
color:#f1df00;
text-decoration:none;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
}
.svc-section-more span{
margin-left:8px;
}
.svc-card-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:16px;
}
.svc-card{
min-height:184px;
display:grid;
grid-template-columns:46% 54%;
overflow:hidden;
border:1px solid rgba(255,255,255,.085);
border-radius:10px;
background:linear-gradient(180deg, rgba(11,13,14,.98), rgba(8,10,10,.98));
box-shadow:0 12px 42px rgba(0,0,0,.28);
}
.svc-card-image{
min-height:184px;
background-size:cover;
background-position:center;
position:relative;
}
.svc-card-image:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.20) 70%, rgba(0,0,0,0) 100%);
}
.svc-card-content{
display:flex;
flex-direction:column;
padding:18px 20px 15px;
}
.svc-card-title-block{
margin-bottom:10px;
}
.svc-card-title-main,
.svc-card-title-accent{
margin:0;
line-height:1.05;
text-transform:uppercase;
font-weight:900;
letter-spacing:.03em;
}
.svc-card-title-main{
color:#f6f7f7;
font-size:18px;
}
.svc-card-title-accent{
color:#f1df00;
font-size:18px;
margin-top:2px;
}
.svc-card-description{
margin:0;
color:#b2b8bb;
font-size:13px;
line-height:1.46;
}
.svc-card-bottom{
margin-top:auto;
padding-top:14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.svc-card-price{
color:#f1df00;
font-size:16px;
font-weight:1000;
letter-spacing:.02em;
}
.svc-card-arrow{
width:34px;
height:34px;
display:grid;
place-items:center;
color:#f1df00;
text-decoration:none;
font-size:23px;
font-weight:700;
}
.svc-empty-row,
.svc-empty-box{
padding:18px;
border-radius:10px;
border:1px solid rgba(241,223,0,.16);
background:#0a0c0d;
color:#c3c7c8;
}
.svc-empty-box h2{ margin:0 0 8px; }
.svc-empty-box p{ margin:0; }
/* BOTTOM CTA */
.svc-bottom-cta{
margin-top:24px;
min-height:82px;
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
border:1px solid rgba(241,223,0,.58);
border-radius:8px;
background:linear-gradient(90deg, rgba(241,223,0,.035), rgba(7,8,8,.98) 38%, rgba(7,8,8,.98));
padding:18px 38px;
box-shadow:0 18px 60px rgba(0,0,0,.24);
}
.svc-bottom-cta-left{
display:flex;
align-items:center;
gap:18px;
}
.svc-bottom-cta-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border:1px solid rgba(241,223,0,.58);
border-radius:8px;
color:#f1df00;
font-size:20px;
background:rgba(241,223,0,.045);
}
.svc-bottom-cta strong{
display:block;
color:#f1df00;
font-size:16px;
font-weight:1000;
margin-bottom:5px;
}
.svc-bottom-cta p{
margin:0;
color:#c9cccd;
font-size:13px;
}
.svc-bottom-cta-btn{
min-width:260px;
height:50px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:14px;
border-radius:3px;
background:#f1df00;
color:#050607;
text-decoration:none;
font-size:13px;
font-weight:1000;
letter-spacing:.06em;
}
@media (max-width: 1320px){
.svc-main-header{
grid-template-columns:280px 1fr 220px;
padding:0 28px;
}
.svc-main-nav{
gap:24px;
}
.svc-card-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 980px){
.svc-main-header{
height:auto;
grid-template-columns:1fr;
padding:20px;
}
.svc-main-nav{
flex-wrap:wrap;
justify-content:flex-start;
}
.svc-request-btn{
justify-self:start;
}
.svc-hero-copy,
.svc-layout-shell{
width:calc(100% - 32px);
}
.svc-hero-drone{
width:100%;
opacity:.28;
mask-image:none;
-webkit-mask-image:none;
}
.svc-card-grid{
grid-template-columns:1fr;
}
.svc-bottom-cta{
flex-direction:column;
align-items:stretch;
}
.svc-bottom-cta-btn{
width:100%;
}
}
@media (max-width: 560px){
.svc-main-nav{
gap:14px;
}
.svc-card{
grid-template-columns:1fr;
}
.svc-card-image{
min-height:170px;
}
.svc-section-head{
flex-direction:column;
align-items:flex-start;
}
.svc-section-title{
white-space:normal;
font-size:20px;
}
.svc-bottom-cta{
padding:18px;
}
}
/* =========================================================
Hero Schrift dünner: "Unsere Dienstleistungen"
========================================================= */
.svc-hero-copy h1{
font-weight:600 !important;
letter-spacing:.10em !important;
}
.svc-hero-copy h1 span{
font-weight:500 !important;
}
.svc-hero-copy h1 strong{
font-weight:600 !important;
}
/* =========================================================
Header Logo: echtes NextFlightMedia.png verwenden
Bilddatei: /assets/NextFlightMedia.png
========================================================= */
.svc-logo-image-link{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:0 !important;
min-width:0 !important;
width:auto !important;
text-decoration:none !important;
}
.svc-logo-image{
display:block !important;
width:auto !important;
height:auto !important;
max-width:285px !important;
max-height:64px !important;
object-fit:contain !important;
filter:drop-shadow(0 0 16px rgba(241,223,0,.10));
}
.svc-logo-image-link .svc-logo-icon,
.svc-logo-image-link .svc-logo-text{
display:none !important;
}
@media (max-width: 560px){
.svc-logo-image{
max-width:235px !important;
max-height:56px !important;
}
}
/* =========================================================
Logo oben links größer, damit es die obere Reihe besser füllt
========================================================= */
.svc-main-header{
grid-template-columns:420px 1fr 260px !important;
gap:26px !important;
}
.svc-logo-image-link{
width:100% !important;
min-width:0 !important;
}
.svc-logo-image{
max-width:400px !important;
max-height:86px !important;
width:100% !important;
height:auto !important;
object-fit:contain !important;
}
@media (max-width: 1320px){
.svc-main-header{
grid-template-columns:340px 1fr 220px !important;
}
.svc-logo-image{
max-width:320px !important;
max-height:74px !important;
}
}
@media (max-width: 980px){
.svc-main-header{
grid-template-columns:1fr !important;
}
.svc-logo-image{
width:auto !important;
max-width:340px !important;
max-height:76px !important;
}
}
@media (max-width: 560px){
.svc-logo-image{
max-width:260px !important;
max-height:62px !important;
}
}
/* =========================================================
FINAL FIX: Logo wirklich größer anzeigen
========================================================= */
.svc-main-header{
height:104px !important;
grid-template-columns:360px 1fr 260px !important;
overflow:visible !important;
}
.svc-logo-image-link{
width:360px !important;
height:104px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
overflow:visible !important;
}
.svc-logo-image{
width:300px !important;
max-width:none !important;
max-height:none !important;
height:auto !important;
object-fit:contain !important;
transform:scale(1.45) !important;
transform-origin:left center !important;
filter:drop-shadow(0 0 16px rgba(241,223,0,.12)) !important;
}
@media (max-width:1320px){
.svc-main-header{
grid-template-columns:320px 1fr 220px !important;
}
.svc-logo-image-link{
width:320px !important;
}
.svc-logo-image{
width:260px !important;
transform:scale(1.35) !important;
}
}
@media (max-width:980px){
.svc-main-header{
height:auto !important;
grid-template-columns:1fr !important;
}
.svc-logo-image-link{
width:100% !important;
height:82px !important;
}
.svc-logo-image{
width:280px !important;
transform:scale(1.25) !important;
}
}
@media (max-width:560px){
.svc-logo-image-link{
height:70px !important;
}
.svc-logo-image{
width:230px !important;
transform:scale(1.15) !important;
}
}
/* =========================================================
Logo vertikal mittig im Header
========================================================= */
.svc-main-header{
align-items:center !important;
}
.svc-logo-image-link{
height:100% !important;
min-height:104px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
.svc-logo-image{
position:relative !important;
top:50% !important;
transform:translateY(-50%) scale(1.45) !important;
transform-origin:left center !important;
margin:0 !important;
}
@media (max-width:1320px){
.svc-logo-image{
top:50% !important;
transform:translateY(-50%) scale(1.35) !important;
}
}
@media (max-width:980px){
.svc-logo-image-link{
min-height:82px !important;
}
.svc-logo-image{
top:50% !important;
transform:translateY(-50%) scale(1.25) !important;
}
}
@media (max-width:560px){
.svc-logo-image-link{
min-height:70px !important;
}
.svc-logo-image{
top:50% !important;
transform:translateY(-50%) scale(1.15) !important;
}
}
/* =========================================================
Logo aus Header entfernen und in den Hero-Bereich setzen
Verwendete Datei: /assets/NextFlightMedia.png
========================================================= */
/* Header ohne linkes Logo */
.svc-main-header{
grid-template-columns:1fr auto !important;
padding-left:clamp(34px,4vw,76px) !important;
padding-right:clamp(34px,4vw,76px) !important;
}
.svc-main-nav{
justify-content:center !important;
}
.svc-request-btn{
justify-self:end !important;
}
/* Falls alte Logo-Elemente noch vorhanden wären: ausblenden */
.svc-logo,
.svc-logo-image-link,
.svc-logo-icon,
.svc-logo-text,
.svc-logo-image{
display:none !important;
}
/* Hero-Logo statt Text */
.svc-hero{
min-height:290px !important;
}
.svc-hero-copy-logo{
display:flex !important;
align-items:center !important;
min-height:220px !important;
max-width:620px !important;
}
.svc-hero-main-logo{
display:block !important;
width:min(520px, 90%) !important;
height:auto !important;
object-fit:contain !important;
filter:drop-shadow(0 0 18px rgba(241,223,0,.10));
}
@media (max-width:1320px){
.svc-main-header{
grid-template-columns:1fr auto !important;
}
.svc-hero-main-logo{
width:min(460px, 88%) !important;
}
}
@media (max-width:980px){
.svc-main-header{
grid-template-columns:1fr !important;
}
.svc-main-nav{
justify-content:flex-start !important;
}
.svc-request-btn{
justify-self:start !important;
}
.svc-hero-copy-logo{
min-height:180px !important;
}
.svc-hero-main-logo{
width:min(380px, 88%) !important;
}
}
@media (max-width:560px){
.svc-hero{
min-height:230px !important;
}
.svc-hero-copy-logo{
min-height:140px !important;
}
.svc-hero-main-logo{
width:min(290px, 92%) !important;
}
}
/* =========================================================
Hero anpassen:
- Logo links ausrichten
- Bereich mit Logo + Drohne kleiner machen
========================================================= */
.svc-hero{
min-height:220px !important;
}
.svc-hero-copy{
width:min(1720px, calc(100% - 90px)) !important;
margin:0 auto !important;
padding:28px 0 24px !important;
}
.svc-hero-copy-logo{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
min-height:145px !important;
max-width:520px !important;
text-align:left !important;
}
.svc-hero-main-logo{
width:min(430px, 86%) !important;
margin:0 !important;
}
.svc-hero-drone{
width:min(860px, 50vw) !important;
height:100% !important;
opacity:.70 !important;
}
.svc-layout-shell{
padding-top:18px !important;
}
@media (max-width:1320px){
.svc-hero{
min-height:205px !important;
}
.svc-hero-copy{
padding:24px 0 22px !important;
}
.svc-hero-copy-logo{
min-height:130px !important;
max-width:460px !important;
}
.svc-hero-main-logo{
width:min(380px, 84%) !important;
}
.svc-hero-drone{
width:min(720px, 50vw) !important;
}
}
@media (max-width:980px){
.svc-hero{
min-height:180px !important;
}
.svc-hero-copy,
.svc-layout-shell{
width:calc(100% - 32px) !important;
}
.svc-hero-copy{
padding:22px 0 20px !important;
}
.svc-hero-copy-logo{
min-height:115px !important;
max-width:360px !important;
}
.svc-hero-main-logo{
width:min(320px, 82%) !important;
}
.svc-hero-drone{
width:56% !important;
opacity:.30 !important;
}
}
@media (max-width:560px){
.svc-hero{
min-height:150px !important;
}
.svc-hero-copy{
padding:18px 0 16px !important;
}
.svc-hero-copy-logo{
min-height:92px !important;
max-width:270px !important;
}
.svc-hero-main-logo{
width:min(240px, 86%) !important;
}
.svc-hero-drone{
width:62% !important;
}
}
/* =========================================================
FINAL: Hero-Logo exakt links wie der alte Text
========================================================= */
/* Hero wieder kompakter */
.svc-hero{
min-height:210px !important;
}
/* Inhalt startet exakt an der gleichen linken Kante wie vorher der Text */
.svc-hero-copy{
width:min(1720px, calc(100% - 90px)) !important;
margin:0 auto !important;
padding:26px 0 22px !important;
}
/* Logo-Box nicht zentrieren */
.svc-hero-copy-logo{
width:520px !important;
max-width:520px !important;
min-height:140px !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
text-align:left !important;
overflow:visible !important;
margin:0 !important;
}
/* Wichtig:
Dein PNG hat scheinbar viel transparenten Rand.
Deshalb wird das Bild nach links gezogen, damit das sichtbare Logo dort beginnt,
wo vorher "UNSERE DIENSTLEISTUNGEN" stand. */
.svc-hero-main-logo{
width:620px !important;
max-width:none !important;
height:auto !important;
object-fit:contain !important;
object-position:left center !important;
margin:0 !important;
transform:translateX(-38%) !important;
transform-origin:left center !important;
}
/* Drohnenbild rechts etwas kleiner halten */
.svc-hero-drone{
width:min(820px, 48vw) !important;
opacity:.66 !important;
}
.svc-layout-shell{
padding-top:18px !important;
}
@media (max-width:1320px){
.svc-hero{
min-height:200px !important;
}
.svc-hero-copy-logo{
width:460px !important;
max-width:460px !important;
min-height:130px !important;
}
.svc-hero-main-logo{
width:560px !important;
transform:translateX(-36%) !important;
}
}
@media (max-width:980px){
.svc-hero{
min-height:175px !important;
}
.svc-hero-copy{
width:calc(100% - 32px) !important;
padding:22px 0 20px !important;
}
.svc-hero-copy-logo{
width:360px !important;
max-width:360px !important;
min-height:112px !important;
}
.svc-hero-main-logo{
width:430px !important;
transform:translateX(-32%) !important;
}
.svc-hero-drone{
width:56% !important;
opacity:.30 !important;
}
}
@media (max-width:560px){
.svc-hero{
min-height:145px !important;
}
.svc-hero-copy-logo{
width:270px !important;
max-width:270px !important;
min-height:88px !important;
}
.svc-hero-main-logo{
width:320px !important;
transform:translateX(-28%) !important;
}
}
/* =========================================================
FINAL CLEAN HERO
Soll exakt wirken wie der Screenshot:
- kein Logo mehr oben links im Header
- links im Hero steht statt Text nur das Logo
- Logo sitzt an der linken Startkante des alten Textes
- Hero ist kompakt und sauber
========================================================= */
/* Header ohne linkes Logo */
.svc-main-header{
height:94px !important;
display:grid !important;
grid-template-columns:1fr auto !important;
align-items:center !important;
gap:28px !important;
padding:0 clamp(34px,4vw,76px) !important;
}
.svc-logo,
.svc-logo-image-link,
.svc-logo-icon,
.svc-logo-text,
.svc-logo-image{
display:none !important;
}
.svc-main-nav{
justify-content:center !important;
}
.svc-request-btn{
justify-self:end !important;
}
/* Hero wie im Screenshot */
.svc-hero{
min-height:248px !important;
position:relative !important;
overflow:hidden !important;
border-bottom:1px solid rgba(241,223,0,.40) !important;
background:
linear-gradient(90deg, rgba(5,6,7,.98) 0%, rgba(5,6,7,.90) 34%, rgba(5,6,7,.56) 100%),
radial-gradient(circle at 75% 30%, rgba(241,223,0,.05), transparent 24%),
#050607 !important;
}
.svc-hero-copy{
position:relative !important;
z-index:2 !important;
width:min(1720px, calc(100% - 90px)) !important;
margin:0 auto !important;
padding:28px 0 18px !important;
}
.svc-hero-copy-logo{
display:flex !important;
align-items:flex-start !important;
justify-content:flex-start !important;
width:540px !important;
max-width:540px !important;
min-height:164px !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
text-align:left !important;
}
/* Wichtig:
Das PNG hat transparenten Rand.
Darum wird es etwas größer und sauber nach links verschoben,
damit die sichtbare Kante an der alten Textposition startet. */
.svc-hero-main-logo{
display:block !important;
width:690px !important;
max-width:none !important;
height:auto !important;
margin:0 0 0 -122px !important;
transform:none !important;
object-fit:contain !important;
object-position:left center !important;
filter:drop-shadow(0 0 18px rgba(241,223,0,.10)) !important;
}
/* Drohnenbild rechts wie im Screenshot */
.svc-hero-drone{
position:absolute !important;
z-index:1 !important;
right:0 !important;
top:0 !important;
width:min(930px, 56vw) !important;
height:100% !important;
opacity:.76 !important;
mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 100%) !important;
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 100%) !important;
}
.svc-hero-drone img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
filter:brightness(.74) contrast(1.08) saturate(.86) !important;
}
/* Kategorien rücken wieder schön an den Hero ran */
.svc-layout-shell{
width:min(1720px, calc(100% - 90px)) !important;
margin:0 auto !important;
padding:16px 0 46px !important;
}
/* Responsive */
@media (max-width:1320px){
.svc-main-header{
grid-template-columns:1fr auto !important;
padding:0 28px !important;
}
.svc-main-nav{
gap:24px !important;
}
.svc-hero{
min-height:228px !important;
}
.svc-hero-copy-logo{
width:470px !important;
max-width:470px !important;
min-height:148px !important;
}
.svc-hero-main-logo{
width:600px !important;
margin-left:-104px !important;
}
.svc-hero-drone{
width:min(800px, 54vw) !important;
}
}
@media (max-width:980px){
.svc-main-header{
height:auto !important;
grid-template-columns:1fr !important;
padding:20px !important;
}
.svc-main-nav{
justify-content:flex-start !important;
flex-wrap:wrap !important;
}
.svc-request-btn{
justify-self:start !important;
}
.svc-hero{
min-height:185px !important;
}
.svc-hero-copy,
.svc-layout-shell{
width:calc(100% - 32px) !important;
}
.svc-hero-copy{
padding:20px 0 14px !important;
}
.svc-hero-copy-logo{
width:360px !important;
max-width:360px !important;
min-height:112px !important;
}
.svc-hero-main-logo{
width:430px !important;
margin-left:-70px !important;
}
.svc-hero-drone{
width:56% !important;
opacity:.34 !important;
}
}
@media (max-width:560px){
.svc-hero{
min-height:150px !important;
}
.svc-hero-copy{
padding:16px 0 10px !important;
}
.svc-hero-copy-logo{
width:260px !important;
max-width:260px !important;
min-height:82px !important;
}
.svc-hero-main-logo{
width:300px !important;
margin-left:-42px !important;
}
.svc-hero-drone{
width:62% !important;
}
}
/* =========================================================
FINAL HERO FIX
- Logo dort beginnen lassen, wo vorher die Headline stand
- Hero insgesamt niedriger machen
========================================================= */
.svc-hero{
min-height:192px !important;
}
.svc-hero-copy{
width:min(1720px, calc(100% - 90px)) !important;
margin:0 auto !important;
padding:18px 0 10px !important;
}
.svc-hero-copy-logo{
width:470px !important;
max-width:470px !important;
min-height:110px !important;
display:flex !important;
align-items:flex-start !important;
justify-content:flex-start !important;
margin:0 !important;
padding:0 !important;
text-align:left !important;
}
.svc-hero-main-logo{
width:565px !important;
max-width:none !important;
height:auto !important;
margin:0 0 0 -56px !important;
transform:none !important;
object-fit:contain !important;
object-position:left center !important;
}
.svc-hero-drone{
width:min(860px, 51vw) !important;
opacity:.74 !important;
}
.svc-layout-shell{
padding-top:12px !important;
}
@media (max-width:1320px){
.svc-hero{
min-height:182px !important;
}
.svc-hero-copy{
padding:16px 0 8px !important;
}
.svc-hero-copy-logo{
width:420px !important;
max-width:420px !important;
min-height:100px !important;
}
.svc-hero-main-logo{
width:505px !important;
margin-left:-46px !important;
}
.svc-hero-drone{
width:min(760px, 50vw) !important;
}
}
@media (max-width:980px){
.svc-hero{
min-height:160px !important;
}
.svc-hero-copy,
.svc-layout-shell{
width:calc(100% - 32px) !important;
}
.svc-hero-copy{
padding:14px 0 8px !important;
}
.svc-hero-copy-logo{
width:330px !important;
max-width:330px !important;
min-height:84px !important;
}
.svc-hero-main-logo{
width:390px !important;
margin-left:-28px !important;
}
.svc-hero-drone{
width:55% !important;
opacity:.34 !important;
}
}
@media (max-width:560px){
.svc-hero{
min-height:136px !important;
}
.svc-hero-copy{
padding:12px 0 6px !important;
}
.svc-hero-copy-logo{
width:245px !important;
max-width:245px !important;
min-height:68px !important;
}
.svc-hero-main-logo{
width:285px !important;
margin-left:-18px !important;
}
.svc-hero-drone{
width:60% !important;
}
}
/* =========================================================
FINAL FIX: Hero-Logo weiter nach rechts
========================================================= */
.svc-hero-copy-logo{
width:500px !important;
max-width:500px !important;
}
.svc-hero-main-logo{
width:565px !important;
margin-left:18px !important; /* vorher zu nah am Rand */
}
@media (max-width:1320px){
.svc-hero-copy-logo{
width:440px !important;
max-width:440px !important;
}
.svc-hero-main-logo{
width:505px !important;
margin-left:14px !important;
}
}
@media (max-width:980px){
.svc-hero-copy-logo{
width:350px !important;
max-width:350px !important;
}
.svc-hero-main-logo{
width:390px !important;
margin-left:10px !important;
}
}
@media (max-width:560px){
.svc-hero-copy-logo{
width:255px !important;
max-width:255px !important;
}
.svc-hero-main-logo{
width:285px !important;
margin-left:6px !important;
}
}
/* =========================================================
Hero: Zwei Bilder nebeneinander im rechten Bildfeld
Benötigt:
- /assets/services-hero-drone.png
- /assets/services-hero-extra.png
========================================================= */
/* Altes einzelnes Drohnenbild ausblenden, falls noch CSS vorhanden ist */
.svc-hero-drone{
display:none !important;
}
/* Neues rechtes Bildfeld mit 2 Bildern */
.svc-hero-image-row{
position:absolute !important;
z-index:1 !important;
right:0 !important;
top:0 !important;
width:min(980px, 58vw) !important;
height:100% !important;
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:12px !important;
padding:18px 32px 18px 0 !important;
opacity:.78 !important;
pointer-events:none !important;
mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 100%) !important;
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 100%) !important;
}
.svc-hero-image-box{
height:100% !important;
overflow:hidden !important;
border-radius:10px !important;
border:1px solid rgba(241,223,0,.12) !important;
background:#050607 !important;
box-shadow:0 16px 50px rgba(0,0,0,.35) !important;
}
.svc-hero-image-box img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
filter:brightness(.62) contrast(1.12) saturate(.82) !important;
}
/* Hero bleibt kompakt */
.svc-hero{
min-height:192px !important;
}
@media (max-width:1320px){
.svc-hero-image-row{
width:min(820px, 56vw) !important;
gap:10px !important;
padding:16px 24px 16px 0 !important;
}
}
@media (max-width:980px){
.svc-hero-image-row{
width:58% !important;
opacity:.34 !important;
gap:8px !important;
padding:14px 14px 14px 0 !important;
}
}
@media (max-width:560px){
.svc-hero-image-row{
width:62% !important;
grid-template-columns:1fr !important;
}
.svc-hero-image-box:nth-child(2){
display:none !important;
}
}
/* =========================================================
Hero: Bilder entfernen und Admin-Diashow verwenden
========================================================= */
/* Alte Bildfelder ausblenden */
.svc-hero-image-row,
.svc-hero-image-box,
.svc-hero-drone{
display:none !important;
}
/* Diashow aus dem Adminbereich im rechten Hero-Feld */
.svc-hero-admin-slideshow{
position:absolute !important;
z-index:1 !important;
right:0 !important;
top:0 !important;
width:min(930px, 56vw) !important;
height:100% !important;
overflow:hidden !important;
opacity:.76 !important;
pointer-events:none !important;
background:#050607 !important;
mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 100%) !important;
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 100%) !important;
}
.svc-hero-admin-slide{
position:absolute !important;
inset:0 !important;
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
opacity:0 !important;
transform:scale(1.035) !important;
animation:svcHeroSlideshow 24s infinite !important;
filter:brightness(.62) contrast(1.12) saturate(.86) !important;
}
.svc-hero-admin-slide:after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg, rgba(5,6,7,.05) 0%, rgba(5,6,7,.12) 45%, rgba(5,6,7,.28) 100%),
linear-gradient(180deg, rgba(5,6,7,.08), rgba(5,6,7,.18));
}
.svc-hero-admin-slide:nth-child(1){ animation-delay:0s !important; }
.svc-hero-admin-slide:nth-child(2){ animation-delay:6s !important; }
.svc-hero-admin-slide:nth-child(3){ animation-delay:12s !important; }
.svc-hero-admin-slide:nth-child(4){ animation-delay:18s !important; }
.svc-hero-admin-slide:nth-child(n+5){ animation-delay:24s !important; }
@keyframes svcHeroSlideshow{
0%{ opacity:0; transform:scale(1.035); }
7%{ opacity:1; transform:scale(1.02); }
28%{ opacity:1; transform:scale(1); }
35%{ opacity:0; transform:scale(1); }
100%{ opacity:0; transform:scale(1.035); }
}
@media (max-width:1320px){
.svc-hero-admin-slideshow{
width:min(800px, 54vw) !important;
}
}
@media (max-width:980px){
.svc-hero-admin-slideshow{
width:56% !important;
opacity:.34 !important;
}
}
@media (max-width:560px){
.svc-hero-admin-slideshow{
width:62% !important;
}
}
/* =========================================================
Hero: echte Admin-Kategorie "Diashow" nutzen
Quelle: slideshow_images.stored_name -> /uploads/
========================================================= */
/* Alte festen Bildfelder weg */
.svc-hero-image-row,
.svc-hero-image-box,
.svc-hero-drone{
display:none !important;
}
/* Slideshow-Bereich rechts im Hero */
.svc-hero-admin-slideshow{
position:absolute !important;
z-index:1 !important;
right:0 !important;
top:0 !important;
width:min(930px, 56vw) !important;
height:100% !important;
overflow:hidden !important;
opacity:.76 !important;
pointer-events:none !important;
background:#050607 !important;
mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 100%) !important;
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%, #000 100%) !important;
}
.svc-hero-admin-slide{
position:absolute !important;
inset:0 !important;
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
opacity:0 !important;
transform:scale(1.035) !important;
animation:svcHeroAdminSlideshow 24s infinite !important;
filter:brightness(.62) contrast(1.12) saturate(.86) !important;
}
.svc-hero-admin-slide:after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg, rgba(5,6,7,.06) 0%, rgba(5,6,7,.16) 45%, rgba(5,6,7,.30) 100%),
linear-gradient(180deg, rgba(5,6,7,.08), rgba(5,6,7,.18));
}
.svc-hero-admin-slide:nth-child(1){ animation-delay:0s !important; }
.svc-hero-admin-slide:nth-child(2){ animation-delay:6s !important; }
.svc-hero-admin-slide:nth-child(3){ animation-delay:12s !important; }
.svc-hero-admin-slide:nth-child(4){ animation-delay:18s !important; }
.svc-hero-admin-slide:nth-child(n+5){ animation-delay:24s !important; }
@keyframes svcHeroAdminSlideshow{
0%{ opacity:0; transform:scale(1.035); }
7%{ opacity:1; transform:scale(1.02); }
28%{ opacity:1; transform:scale(1); }
35%{ opacity:0; transform:scale(1); }
100%{ opacity:0; transform:scale(1.035); }
}
@media (max-width:1320px){
.svc-hero-admin-slideshow{
width:min(800px, 54vw) !important;
}
}
@media (max-width:980px){
.svc-hero-admin-slideshow{
width:56% !important;
opacity:.34 !important;
}
}
@media (max-width:560px){
.svc-hero-admin-slideshow{
width:62% !important;
}
}
/* =========================================================
FINAL: Logo aus Hero entfernen, nur echte Admin-Diashow anzeigen
Quelle: Adminbereich > Diashow > slideshow_images.stored_name
========================================================= */
/* Logo im Hero komplett entfernen */
.svc-hero-copy-logo,
.svc-hero-main-logo{
display:none !important;
}
/* Feste alte Bildcontainer ausblenden */
.svc-hero-image-row,
.svc-hero-image-box,
.svc-hero-drone{
display:none !important;
}
/* Hero-Bereich nur für Diashow */
.svc-hero{
min-height:210px !important;
position:relative !important;
overflow:hidden !important;
border-bottom:1px solid rgba(241,223,0,.40) !important;
background:#050607 !important;
}
/* Diashow füllt jetzt den kompletten Hero-Container */
.svc-hero-admin-slideshow{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
overflow:hidden !important;
opacity:1 !important;
pointer-events:none !important;
background:
radial-gradient(circle at 18% 18%, rgba(241,223,0,.06), transparent 26%),
#050607 !important;
mask-image:none !important;
-webkit-mask-image:none !important;
}
/* Dunkler Verlauf für Lesbarkeit / Premium-Look */
.svc-hero-admin-slideshow:after{
content:"";
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
background:
linear-gradient(90deg, rgba(5,6,7,.88) 0%, rgba(5,6,7,.52) 40%, rgba(5,6,7,.28) 100%),
linear-gradient(180deg, rgba(5,6,7,.16), rgba(5,6,7,.24));
}
.svc-hero-admin-slide{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
opacity:0 !important;
transform:scale(1.04) !important;
animation:svcHeroAdminSlideshow 24s infinite !important;
filter:brightness(.78) contrast(1.10) saturate(.90) !important;
}
/* Bei nur einem Bild bleibt es dauerhaft sichtbar */
.svc-hero-admin-slideshow.is-single .svc-hero-admin-slide{
opacity:1 !important;
animation:none !important;
transform:scale(1.01) !important;
}
/* Animation für mehrere aktive Bilder */
.svc-hero-admin-slide:nth-child(1){ animation-delay:0s !important; }
.svc-hero-admin-slide:nth-child(2){ animation-delay:6s !important; }
.svc-hero-admin-slide:nth-child(3){ animation-delay:12s !important; }
.svc-hero-admin-slide:nth-child(4){ animation-delay:18s !important; }
.svc-hero-admin-slide:nth-child(n+5){ animation-delay:24s !important; }
@keyframes svcHeroAdminSlideshow{
0%{ opacity:0; transform:scale(1.04); }
7%{ opacity:1; transform:scale(1.025); }
28%{ opacity:1; transform:scale(1.01); }
35%{ opacity:0; transform:scale(1.01); }
100%{ opacity:0; transform:scale(1.04); }
}
/* Kategorien dichter unter den Hero */
.svc-layout-shell{
padding-top:14px !important;
}
@media (max-width:980px){
.svc-hero{
min-height:170px !important;
}
}
@media (max-width:560px){
.svc-hero{
min-height:145px !important;
}
}
/* =========================================================
FINAL DEBUG FIX: Hero zeigt ausschließlich Admin-Diashow
Admin > Diashow: slideshow_images.stored_name aus /uploads/
========================================================= */
.svc-hero-copy,
.svc-hero-copy-logo,
.svc-hero-main-logo,
.svc-hero-image-row,
.svc-hero-image-box,
.svc-hero-drone{
display:none !important;
}
.svc-hero{
min-height:210px !important;
position:relative !important;
overflow:hidden !important;
background:#050607 !important;
border-bottom:1px solid rgba(241,223,0,.40) !important;
}
.svc-hero-admin-slideshow{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
overflow:hidden !important;
background:
radial-gradient(circle at 18% 18%, rgba(241,223,0,.06), transparent 26%),
linear-gradient(90deg, rgba(5,6,7,.92), rgba(5,6,7,.50)),
#050607 !important;
}
.svc-hero-admin-slideshow:after{
content:"";
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
background:
linear-gradient(90deg, rgba(5,6,7,.72) 0%, rgba(5,6,7,.28) 48%, rgba(5,6,7,.50) 100%),
linear-gradient(180deg, rgba(5,6,7,.10), rgba(5,6,7,.28));
}
.svc-hero-admin-slide{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
opacity:0 !important;
transform:scale(1.04) !important;
animation:svcHeroAdminSlideshow 24s infinite !important;
filter:brightness(.82) contrast(1.10) saturate(.95) !important;
}
.svc-hero-admin-slideshow.is-single .svc-hero-admin-slide{
opacity:1 !important;
animation:none !important;
transform:scale(1.01) !important;
}
.svc-hero-admin-slide:nth-child(1){ animation-delay:0s !important; }
.svc-hero-admin-slide:nth-child(2){ animation-delay:6s !important; }
.svc-hero-admin-slide:nth-child(3){ animation-delay:12s !important; }
.svc-hero-admin-slide:nth-child(4){ animation-delay:18s !important; }
.svc-hero-admin-slide:nth-child(n+5){ animation-delay:24s !important; }
@keyframes svcHeroAdminSlideshow{
0%{ opacity:0; transform:scale(1.04); }
7%{ opacity:1; transform:scale(1.025); }
28%{ opacity:1; transform:scale(1.01); }
35%{ opacity:0; transform:scale(1.01); }
100%{ opacity:0; transform:scale(1.04); }
}
.svc-hero-admin-empty{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
color:#f1df00;
text-align:center;
opacity:.72;
border:1px dashed rgba(241,223,0,.22);
margin:18px;
border-radius:8px;
}
.svc-hero-admin-empty strong{
font-size:18px;
font-weight:1000;
}
.svc-hero-admin-empty span{
color:#c9cccd;
font-size:13px;
}
.svc-layout-shell{
padding-top:14px !important;
}
@media(max-width:980px){
.svc-hero{
min-height:170px !important;
}
}
@media(max-width:560px){
.svc-hero{
min-height:145px !important;
}
}
/* =========================================================
FINAL FIX: Admin-Diashow als echte ![]()
-Slides anzeigen
Grund: background-image konnte bei dir leer wirken.
Quelle: /uploads/
========================================================= */
.svc-hero-copy,
.svc-hero-copy-logo,
.svc-hero-main-logo,
.svc-hero-image-row,
.svc-hero-image-box,
.svc-hero-drone,
.svc-hero-admin-slide{
display:none !important;
}
.svc-hero{
min-height:210px !important;
position:relative !important;
overflow:hidden !important;
background:#050607 !important;
border-bottom:1px solid rgba(241,223,0,.40) !important;
}
.svc-hero-admin-slideshow{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
overflow:hidden !important;
background:
radial-gradient(circle at 18% 18%, rgba(241,223,0,.06), transparent 26%),
#050607 !important;
}
.svc-hero-admin-slideshow:after{
content:"";
position:absolute;
inset:0;
z-index:5;
pointer-events:none;
background:
linear-gradient(90deg, rgba(5,6,7,.72) 0%, rgba(5,6,7,.30) 48%, rgba(5,6,7,.52) 100%),
linear-gradient(180deg, rgba(5,6,7,.08), rgba(5,6,7,.26));
}
.svc-hero-admin-slide-img{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
opacity:0 !important;
transform:scale(1.035) !important;
transition:opacity .9s ease, transform 4.5s ease !important;
filter:brightness(.82) contrast(1.10) saturate(.95) !important;
}
.svc-hero-admin-slide-img.is-active{
opacity:1 !important;
transform:scale(1.01) !important;
}
.svc-hero-admin-empty{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
color:#f1df00;
text-align:center;
opacity:.72;
border:1px dashed rgba(241,223,0,.22);
margin:18px;
border-radius:8px;
z-index:2;
}
.svc-hero-admin-empty strong{
font-size:18px;
font-weight:1000;
}
.svc-hero-admin-empty span{
color:#c9cccd;
font-size:13px;
}
.svc-layout-shell{
padding-top:14px !important;
}
@media(max-width:980px){
.svc-hero{
min-height:170px !important;
}
}
@media(max-width:560px){
.svc-hero{
min-height:145px !important;
}
}
/* =========================================================
Admin Diashow: Upload oben bei den Statistiken
========================================================= */
.slideshow-hero-panel-v2{
display:grid !important;
grid-template-columns:minmax(260px, 1fr) minmax(420px, 620px) !important;
align-items:stretch !important;
gap:22px !important;
}
.slideshow-top-right{
display:flex;
flex-direction:column;
gap:14px;
justify-content:space-between;
}
.slideshow-top-stats-v2{
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:10px !important;
}
.slideshow-top-stats-v2 .appointment-stat-chip a{
min-height:78px;
}
.slideshow-upload-inline{
border:1px solid rgba(245,230,0,.24);
border-radius:12px;
background:
radial-gradient(circle at 8% 0%, rgba(245,230,0,.075), transparent 28%),
linear-gradient(180deg, rgba(13,16,17,.96), rgba(8,9,9,.96));
padding:14px;
display:grid;
grid-template-columns:1fr auto;
align-items:end;
gap:14px;
box-shadow:0 16px 54px rgba(0,0,0,.22);
}
.slideshow-upload-inline-field{
display:flex;
flex-direction:column;
gap:7px;
}
.slideshow-upload-inline-field label{
color:#fff;
font-size:13px;
font-weight:900;
letter-spacing:.02em;
}
.slideshow-upload-inline-field input[type="file"]{
width:100%;
min-height:44px;
color:#d7dadc;
background:#101315;
border:1px solid #32363a;
border-radius:7px;
padding:10px;
}
.slideshow-upload-inline-field input[type="file"]::file-selector-button{
border:0;
border-radius:5px;
background:#f5e600;
color:#050606;
font-weight:900;
padding:8px 12px;
margin-right:12px;
cursor:pointer;
}
.slideshow-upload-inline-field small{
color:#aeb3b8;
font-size:12px;
}
.slideshow-upload-inline .btn{
min-width:170px;
height:44px;
white-space:nowrap;
}
.slideshow-images-only-panel .section-headline{
margin-bottom:18px;
}
.slideshow-admin-list-only{
width:100%;
}
.slideshow-admin-layout{
display:block !important;
}
.slideshow-admin-panel .slideshow-upload-box{
display:none !important;
}
@media(max-width:1180px){
.slideshow-hero-panel-v2{
grid-template-columns:1fr !important;
}
.slideshow-top-right{
gap:14px;
}
}
@media(max-width:760px){
.slideshow-top-stats-v2{
grid-template-columns:1fr !important;
}
.slideshow-upload-inline{
grid-template-columns:1fr !important;
}
.slideshow-upload-inline .btn{
width:100%;
}
}
/* =========================================================
Admin Diashow: kompakter Upload neben "Ausgeblendet"
========================================================= */
.slideshow-hero-panel-v2{
grid-template-columns:minmax(260px, 1fr) minmax(620px, 900px) !important;
align-items:center !important;
}
.slideshow-top-right-compact{
display:block !important;
}
.slideshow-top-stats-compact{
display:grid !important;
grid-template-columns:repeat(3, minmax(120px, 1fr)) minmax(250px, 330px) !important;
align-items:stretch !important;
gap:10px !important;
}
.slideshow-top-stats-compact .appointment-stat-chip a{
min-height:78px !important;
}
.slideshow-upload-inline{
display:none !important;
}
.slideshow-upload-compact{
min-height:78px;
border:1px solid rgba(245,230,0,.24);
border-radius:10px;
background:
radial-gradient(circle at 8% 0%, rgba(245,230,0,.065), transparent 28%),
linear-gradient(180deg, rgba(13,16,17,.96), rgba(8,9,9,.96));
padding:9px 10px;
display:grid;
grid-template-columns:1fr auto;
grid-template-rows:auto auto;
gap:7px 8px;
align-items:center;
}
.slideshow-upload-compact-file{
min-width:0;
height:34px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #32363a;
border-radius:7px;
background:#101315;
color:#fff;
font-size:12px;
font-weight:900;
cursor:pointer;
padding:0 10px;
}
.slideshow-upload-compact-file input{
position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}
.slideshow-upload-compact .btn{
height:34px;
min-height:34px;
padding:0 10px !important;
border-radius:7px;
font-size:12px;
white-space:nowrap;
}
.slideshow-upload-compact small{
grid-column:1 / -1;
color:#aeb3b8;
font-size:11px;
line-height:1.2;
}
@media(max-width:1180px){
.slideshow-hero-panel-v2{
grid-template-columns:1fr !important;
}
.slideshow-top-stats-compact{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}
.slideshow-upload-compact{
grid-column:1 / -1;
}
}
@media(max-width:760px){
.slideshow-top-stats-compact{
grid-template-columns:1fr !important;
}
.slideshow-upload-compact{
grid-template-columns:1fr !important;
}
.slideshow-upload-compact .btn{
width:100%;
}
}
/* ==============================
Next Flight Media Ticketsystem
In assets/style.css ganz unten einfügen
Stand: kompakte Kundenportal-Ansicht
============================== */
.tickets-admin-shell,
.tickets-customer-section{
display:flex;
flex-direction:column;
gap:14px;
}
.tickets-admin-grid,
.tickets-customer-grid,
.tickets-customer-admin-grid{
display:grid;
grid-template-columns:minmax(280px,390px) minmax(0,1fr);
gap:14px;
align-items:start;
}
/* Hero oben bewusst kleiner als die normalen Portal-Container */
.tickets-customer-hero-panel{
min-height:0 !important;
padding:14px 16px !important;
display:grid !important;
grid-template-columns:minmax(210px,1fr) auto !important;
gap:14px !important;
align-items:center !important;
}
.tickets-customer-hero-panel .appointments-hero-copy{
gap:2px !important;
}
.tickets-customer-hero-panel .hero-kicker{
font-size:10px !important;
letter-spacing:.16em !important;
margin-bottom:0 !important;
}
.tickets-customer-hero-panel h2{
margin:0 !important;
font-size:25px !important;
line-height:1 !important;
}
.tickets-customer-hero-panel p{
margin:5px 0 0 !important;
max-width:520px !important;
font-size:12px !important;
line-height:1.35 !important;
color:var(--muted,#a8a8a8) !important;
}
.tickets-customer-stats{
display:grid !important;
grid-template-columns:repeat(4,minmax(74px,1fr)) !important;
gap:7px !important;
min-width:360px;
}
.tickets-customer-stats .appointment-stat-chip{
min-height:56px !important;
padding:0 !important;
border-radius:14px !important;
}
.tickets-customer-stats .appointment-stat-chip a{
padding:8px 10px !important;
gap:2px !important;
}
.tickets-customer-stats .appointment-stat-chip strong{
font-size:19px !important;
line-height:1 !important;
}
.tickets-customer-stats .appointment-stat-chip span{
font-size:10px !important;
line-height:1.15 !important;
white-space:nowrap;
}
/* Neues Ticket: flach, klein und sauber */
.ticket-create-compact-panel{
padding:0 !important;
overflow:hidden;
border-radius:18px !important;
}
.ticket-create-compact-panel summary{
cursor:pointer;
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-height:50px;
padding:12px 14px;
font-weight:900;
border-bottom:1px solid transparent;
}
.ticket-create-compact-panel[open] summary{
border-bottom-color:rgba(255,255,255,.08);
}
.ticket-create-compact-panel summary::-webkit-details-marker{display:none;}
.ticket-create-compact-panel summary span{
color:var(--yellow,#e7ff00);
font-size:14px;
letter-spacing:.02em;
}
.ticket-create-compact-panel summary small{
color:var(--muted,#a8a8a8);
font-size:11px;
font-weight:700;
text-align:right;
}
.ticket-create-form-compact{
padding:13px 14px 14px !important;
display:flex;
flex-direction:column;
gap:10px !important;
}
.ticket-fields-compact{
display:grid !important;
grid-template-columns:1.2fr .8fr .8fr !important;
gap:9px !important;
}
.ticket-fields-compact .field.full{
grid-column:1 / -1;
}
.ticket-fields-compact label{
font-size:11px !important;
margin-bottom:5px !important;
}
.ticket-fields-compact input,
.ticket-fields-compact select,
.ticket-fields-compact textarea,
.ticket-reply-form textarea{
min-height:38px !important;
border-radius:12px !important;
font-size:13px !important;
padding:9px 11px !important;
}
.ticket-fields-compact textarea{
min-height:78px !important;
}
.ticket-create-form-compact .btn{
align-self:flex-start;
min-height:38px !important;
padding:9px 16px !important;
border-radius:999px !important;
}
/* Hauptlayout */
.tickets-customer-list-panel,
.customer-ticket-detail-panel{
padding:14px !important;
border-radius:18px !important;
}
.ticket-compact-headline{
margin:0 0 10px !important;
display:flex !important;
align-items:flex-end !important;
justify-content:space-between !important;
gap:10px !important;
}
.ticket-compact-headline h2{
margin:0 !important;
font-size:18px !important;
line-height:1 !important;
}
.ticket-compact-headline span{
font-size:11px !important;
color:var(--muted,#a8a8a8) !important;
text-align:right;
}
.ticket-list,
.ticket-customer-list-compact{
display:flex;
flex-direction:column;
gap:8px;
max-height:620px;
overflow:auto;
padding-right:3px;
}
.ticket-list-item{
display:block;
padding:11px 12px;
border:1px solid rgba(255,255,255,.09);
border-radius:14px;
background:rgba(255,255,255,.035);
color:inherit;
text-decoration:none;
transition:.16s ease;
}
.ticket-list-item:hover,
.ticket-list-item.is-active{
border-color:rgba(231,255,0,.60);
background:rgba(231,255,0,.075);
transform:translateY(-1px);
}
.ticket-list-top{
display:flex;
justify-content:space-between;
gap:8px;
align-items:flex-start;
margin-bottom:5px;
}
.ticket-list-top strong{
font-size:13px;
line-height:1.25;
max-width:235px;
}
.ticket-list-top .badge{
flex:0 0 auto;
font-size:10px !important;
padding:4px 7px !important;
border-radius:999px !important;
}
.ticket-list-item span,
.ticket-list-item small{
display:block;
}
.ticket-list-item > span:not(.ticket-list-top){
color:var(--muted,#a8a8a8);
font-size:11px;
line-height:1.35;
}
.ticket-list-item small{
color:rgba(255,255,255,.55);
margin-top:5px;
font-size:10.5px;
}
/* Detailbereich */
.ticket-detail-panel,
.customer-ticket-detail-panel{
display:flex;
flex-direction:column;
gap:12px;
}
.ticket-detail-head{
display:flex;
justify-content:space-between;
gap:14px;
align-items:flex-start;
border-bottom:1px solid rgba(255,255,255,.08);
padding-bottom:11px;
}
.ticket-detail-head .hero-kicker{
font-size:10px !important;
letter-spacing:.14em !important;
}
.customer-ticket-detail-panel .ticket-detail-head h2,
.ticket-detail-head h2{
margin:3px 0 5px !important;
font-size:21px !important;
line-height:1.1 !important;
}
.ticket-detail-head p{
margin:0;
color:var(--muted,#a8a8a8);
font-size:12px;
line-height:1.35;
}
.ticket-detail-head > .badge{
font-size:11px !important;
padding:6px 9px !important;
border-radius:999px !important;
}
.ticket-meta-grid,
.customer-ticket-meta-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.ticket-meta-grid div{
padding:9px 10px;
border:1px solid rgba(255,255,255,.08);
border-radius:13px;
background:rgba(255,255,255,.028);
min-width:0;
}
.ticket-meta-grid span{
display:block;
color:var(--muted,#a8a8a8);
font-size:10px;
margin-bottom:3px;
}
.ticket-meta-grid strong{
display:block;
font-size:12px;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.ticket-thread,
.customer-ticket-thread{
display:flex;
flex-direction:column;
gap:9px;
max-height:390px;
overflow:auto;
padding-right:3px;
}
.ticket-message{
padding:11px 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.04);
}
.ticket-message.is-admin{
border-color:rgba(231,255,0,.28);
background:rgba(231,255,0,.065);
}
.ticket-message-head{
display:flex;
justify-content:space-between;
gap:8px;
margin-bottom:6px;
color:var(--muted,#a8a8a8);
font-size:10.5px;
}
.ticket-message-head strong{color:#fff;font-size:11.5px;}
.ticket-message p{
margin:0;
line-height:1.45;
font-size:13px;
}
.ticket-reply-form{
display:flex;
flex-direction:column;
gap:8px;
padding-top:2px;
}
.ticket-reply-form label{
font-size:12px !important;
font-weight:800;
}
.ticket-reply-form textarea{
min-height:82px !important;
resize:vertical;
}
.ticket-admin-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
}
.ticket-admin-actions .btn,
.ticket-close-form .btn{
min-height:34px !important;
padding:8px 14px !important;
border-radius:999px !important;
}
.ticket-close-form{margin-top:-5px;}
/* Statusfarben */
.badge.ticket-status-open,
.ticket-status-open{background:rgba(255,193,7,.16);color:#ffd76a;}
.ticket-status-progress,
.ticket-status-in_progress{background:rgba(0,163,255,.16);color:#78d2ff;}
.ticket-status-customer,
.ticket-status-customer_reply{background:rgba(255,95,31,.18);color:#ffb28f;}
.ticket-status-admin,
.ticket-status-admin_reply{background:rgba(231,255,0,.16);color:var(--yellow,#e7ff00);}
.ticket-status-closed{background:rgba(160,160,160,.16);color:#cfcfcf;}
@media (max-width:1180px){
.tickets-customer-hero-panel{grid-template-columns:1fr !important;}
.tickets-customer-stats{min-width:0;width:100%;}
.tickets-admin-grid,
.tickets-customer-grid,
.tickets-customer-admin-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
.tickets-customer-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.ticket-fields-compact{grid-template-columns:1fr !important;}
.ticket-meta-grid,.customer-ticket-meta-grid{grid-template-columns:1fr 1fr;}
.ticket-create-compact-panel summary{align-items:flex-start;flex-direction:column;gap:4px;}
.ticket-create-compact-panel summary small{text-align:left;}
}
/* ==============================
Kundenportal Tickets: Status-Gruppen
============================== */
.tickets-customer-status-stats{
grid-template-columns:repeat(4,minmax(92px,1fr)) !important;
}
.tickets-customer-status-stats .appointment-stat-chip a{
min-width:0 !important;
padding:9px 10px !important;
}
.tickets-customer-status-stats .appointment-stat-chip strong{
font-size:18px !important;
}
.tickets-customer-status-stats .appointment-stat-chip span{
font-size:10px !important;
line-height:1.15 !important;
white-space:normal !important;
}
.ticket-list-grouped{
gap:12px !important;
}
.customer-ticket-group{
display:flex;
flex-direction:column;
gap:7px;
padding:8px;
border:1px solid rgba(255,255,255,.07);
border-radius:16px;
background:rgba(0,0,0,.13);
scroll-margin-top:90px;
}
.customer-ticket-group-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:3px 3px 5px;
border-bottom:1px solid rgba(255,255,255,.06);
}
.customer-ticket-group-head strong{
font-size:12px;
line-height:1;
color:var(--yellow,#e7ff00);
letter-spacing:.03em;
text-transform:uppercase;
}
.customer-ticket-group-head span{
min-width:24px;
height:24px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background:rgba(231,255,0,.12);
color:var(--yellow,#e7ff00);
font-size:11px;
font-weight:900;
}
.customer-ticket-empty-row{
padding:8px 9px;
border-radius:12px;
color:rgba(255,255,255,.52);
font-size:11px;
background:rgba(255,255,255,.025);
}
.customer-ticket-group .ticket-list-item{
padding:9px 10px !important;
border-radius:12px !important;
}
.customer-ticket-group-answers{
border-color:rgba(231,255,0,.18);
}
.customer-ticket-group-closed{
opacity:.88;
}
@media (max-width:900px){
.tickets-customer-status-stats{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
/* ==============================
Kundenportal: Meine Tickets Container noch kompakter/schöner
============================== */
.tickets-customer-admin-grid{
grid-template-columns:minmax(300px,360px) minmax(0,1fr) !important;
gap:12px !important;
}
.tickets-customer-list-panel{
padding:12px !important;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025)) !important;
}
.tickets-customer-list-panel .ticket-compact-headline{
padding:0 2px 8px !important;
margin:0 0 8px !important;
border-bottom:1px solid rgba(255,255,255,.07) !important;
}
.tickets-customer-list-panel .ticket-compact-headline h2{
font-size:16px !important;
letter-spacing:.01em !important;
}
.tickets-customer-list-panel .ticket-compact-headline span{
max-width:160px !important;
font-size:10px !important;
line-height:1.25 !important;
}
.ticket-customer-list-compact.ticket-list-grouped{
gap:9px !important;
max-height:560px !important;
padding-right:2px !important;
}
.customer-ticket-group{
gap:5px !important;
padding:7px !important;
border-radius:14px !important;
background:rgba(0,0,0,.10) !important;
}
.customer-ticket-group-head{
padding:2px 2px 5px !important;
min-height:24px !important;
}
.customer-ticket-group-head strong{
font-size:10.5px !important;
letter-spacing:.08em !important;
}
.customer-ticket-group-head span{
min-width:21px !important;
height:21px !important;
font-size:10px !important;
}
.customer-ticket-group .ticket-list-item{
padding:8px 9px !important;
border-radius:11px !important;
background:rgba(255,255,255,.028) !important;
}
.customer-ticket-group .ticket-list-item:hover,
.customer-ticket-group .ticket-list-item.is-active{
background:rgba(231,255,0,.075) !important;
}
.customer-ticket-group .ticket-list-top{
margin-bottom:3px !important;
gap:6px !important;
}
.customer-ticket-group .ticket-list-top strong{
font-size:11.5px !important;
line-height:1.22 !important;
max-width:200px !important;
}
.customer-ticket-group .ticket-list-top .badge{
font-size:9px !important;
padding:3px 6px !important;
}
.customer-ticket-group .ticket-list-item > span:not(.ticket-list-top){
font-size:10px !important;
line-height:1.25 !important;
}
.customer-ticket-group .ticket-list-item small{
margin-top:4px !important;
font-size:9.5px !important;
line-height:1.25 !important;
}
.customer-ticket-empty-row{
padding:7px 8px !important;
font-size:10px !important;
border-radius:10px !important;
}
@media (max-width:1180px){
.tickets-customer-admin-grid{
grid-template-columns:1fr !important;
}
.ticket-customer-list-compact.ticket-list-grouped{
max-height:none !important;
}
}
/* =========================================================
FINAL FIX: Kundenportal Tickets echte Kategorien + neues Ticket links
========================================================= */
.tickets-customer-admin-grid{
grid-template-columns:minmax(300px,360px) minmax(0,1fr) !important;
gap:12px !important;
align-items:start !important;
}
.tickets-customer-left-stack{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
width:100% !important;
min-width:0 !important;
}
.ticket-create-left-panel,
.tickets-customer-list-panel{
width:100% !important;
max-width:360px !important;
}
.ticket-create-left-panel{
border-radius:18px !important;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025)) !important;
}
.ticket-create-left-panel summary{
min-height:46px !important;
padding:11px 12px !important;
}
.ticket-create-left-panel summary span{
font-size:13px !important;
}
.ticket-create-left-panel summary small{
font-size:10px !important;
}
.ticket-create-left-panel .ticket-create-form-compact{
padding:12px !important;
}
.ticket-create-left-panel .ticket-fields-compact{
grid-template-columns:1fr 1fr !important;
gap:8px !important;
}
.ticket-create-left-panel .ticket-fields-compact .field.full{
grid-column:1 / -1 !important;
}
.ticket-create-left-panel .ticket-fields-compact input,
.ticket-create-left-panel .ticket-fields-compact select,
.ticket-create-left-panel .ticket-fields-compact textarea{
min-height:36px !important;
border-radius:10px !important;
font-size:12px !important;
padding:8px 10px !important;
}
.ticket-create-left-panel .ticket-fields-compact textarea{
min-height:70px !important;
}
.ticket-create-left-panel .ticket-create-form-compact .btn{
width:100% !important;
min-height:36px !important;
border-radius:10px !important;
padding:8px 12px !important;
}
.customer-ticket-group{
display:flex !important;
flex-direction:column !important;
}
.customer-ticket-group .ticket-list-item{
display:block !important;
}
.ticket-customer-list-compact.ticket-list-grouped{
max-height:520px !important;
}
.customer-ticket-detail-panel .notice{
margin:0 !important;
}
@media(max-width:1180px){
.tickets-customer-admin-grid{
grid-template-columns:1fr !important;
}
.ticket-create-left-panel,
.tickets-customer-list-panel{
max-width:none !important;
}
.ticket-customer-list-compact.ticket-list-grouped{
max-height:none !important;
}
}
@media(max-width:620px){
.ticket-create-left-panel .ticket-fields-compact{
grid-template-columns:1fr !important;
}
}
/* ===== TICKET-FIX FINAL: Kundenportal Detailfenster schmaler & sauberer ===== */
.tickets-customer-admin-grid{
grid-template-columns:minmax(280px,360px) minmax(520px,860px) !important;
justify-content:start !important;
gap:18px !important;
align-items:start !important;
}
.tickets-customer-left-stack{
width:100% !important;
max-width:360px !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.ticket-create-left-panel,
.tickets-list-clean{
width:100% !important;
max-width:360px !important;
}
.tickets-list-clean{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
}
.customer-ticket-group{
border:1px solid rgba(255,255,255,.09) !important;
border-radius:16px !important;
background:linear-gradient(180deg,#0d1011,#080909) !important;
padding:12px !important;
}
.customer-ticket-group-head{
min-height:34px !important;
padding:0 2px 10px !important;
margin-bottom:10px !important;
border-bottom:1px solid rgba(255,255,255,.07) !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
}
.customer-ticket-group-head strong{
color:var(--yellow) !important;
font-size:12px !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
.customer-ticket-group-head span{
width:22px !important;
height:22px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:999px !important;
background:rgba(245,230,0,.13) !important;
color:var(--yellow) !important;
font-size:11px !important;
font-weight:950 !important;
}
.customer-ticket-empty-row{
min-height:36px !important;
display:flex !important;
align-items:center !important;
border-radius:10px !important;
background:rgba(255,255,255,.03) !important;
color:#8f969c !important;
padding:0 10px !important;
font-size:11px !important;
}
.customer-ticket-detail-panel{
width:100% !important;
max-width:860px !important;
min-height:0 !important;
padding:16px !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:18px !important;
background:
radial-gradient(circle at 8% 0%,rgba(245,230,0,.045),transparent 30%),
linear-gradient(180deg,#0d1011,#070808) !important;
box-shadow:0 16px 44px rgba(0,0,0,.22) !important;
}
.customer-ticket-detail-panel .notice{
margin:0 !important;
min-height:50px !important;
display:flex !important;
align-items:center !important;
border-radius:10px !important;
padding:12px 14px !important;
}
.customer-ticket-detail-panel .ticket-detail-head{
padding-bottom:12px !important;
margin-bottom:0 !important;
}
.customer-ticket-detail-panel .ticket-detail-head h2{
max-width:620px !important;
font-size:20px !important;
line-height:1.12 !important;
overflow-wrap:anywhere !important;
}
.customer-ticket-detail-panel .ticket-detail-head p{
font-size:12px !important;
}
.customer-ticket-meta-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:8px !important;
}
.customer-ticket-meta-grid div{
border-radius:11px !important;
background:#101315 !important;
border:1px solid rgba(255,255,255,.08) !important;
padding:9px 10px !important;
}
.customer-ticket-thread{
max-height:260px !important;
padding:0 4px 0 0 !important;
gap:8px !important;
}
.customer-ticket-thread .ticket-message{
border-radius:12px !important;
padding:10px 12px !important;
background:#111416 !important;
}
.customer-ticket-thread .ticket-message.is-admin{
background:rgba(245,230,0,.07) !important;
border-color:rgba(245,230,0,.25) !important;
}
.customer-ticket-thread .ticket-message p{
font-size:12.5px !important;
line-height:1.42 !important;
}
.customer-ticket-detail-panel .ticket-reply-form{
margin-top:0 !important;
padding-top:0 !important;
gap:8px !important;
}
.customer-ticket-detail-panel .ticket-reply-form label{
color:#fff !important;
font-size:12px !important;
font-weight:900 !important;
}
.customer-ticket-detail-panel .ticket-reply-form textarea{
width:100% !important;
min-height:84px !important;
max-height:140px !important;
background:#101315 !important;
color:#fff !important;
border:1px solid #32363a !important;
border-radius:12px !important;
padding:11px 12px !important;
outline:0 !important;
resize:vertical !important;
box-shadow:0 0 0 1px rgba(255,255,255,.02) inset !important;
}
.customer-ticket-detail-panel .ticket-reply-form textarea:focus{
border-color:rgba(245,230,0,.65) !important;
box-shadow:0 0 0 3px rgba(245,230,0,.08) !important;
}
.customer-ticket-detail-panel .ticket-admin-actions .btn{
min-height:36px !important;
padding:0 16px !important;
border-radius:999px !important;
}
.customer-ticket-detail-panel .ticket-close-form .btn{
min-height:32px !important;
padding:0 14px !important;
border-radius:999px !important;
}
@media(max-width:1180px){
.tickets-customer-admin-grid{
grid-template-columns:1fr !important;
}
.tickets-customer-left-stack,
.ticket-create-left-panel,
.tickets-list-clean,
.customer-ticket-detail-panel{
max-width:none !important;
}
}
@media(max-width:760px){
.customer-ticket-meta-grid{
grid-template-columns:1fr 1fr !important;
}
.customer-ticket-detail-panel .ticket-detail-head{
flex-direction:column !important;
}
}
@media(max-width:520px){
.customer-ticket-meta-grid{
grid-template-columns:1fr !important;
}
}
/* =========================================================
FINAL FIX: Admin-Tickets 1:1 wie Kundenportal + ohne Alle-Tickets
========================================================= */
.tickets-admin-clean-shell{
display:grid !important;
gap:14px !important;
}
.tickets-admin-hero-clean{
padding:14px 16px !important;
display:grid !important;
grid-template-columns:minmax(260px,1fr) minmax(520px,760px) !important;
gap:16px !important;
align-items:center !important;
border-radius:18px !important;
background:
radial-gradient(circle at 8% 0%,rgba(245,230,0,.045),transparent 30%),
linear-gradient(180deg,#0d1011,#070808) !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:0 16px 44px rgba(0,0,0,.20) !important;
}
.tickets-admin-hero-clean .appointments-hero-copy h2{
display:block !important;
margin:2px 0 4px !important;
font-size:20px !important;
line-height:1.05 !important;
}
.tickets-admin-hero-clean .appointments-hero-copy p{
display:block !important;
margin:0 !important;
color:#9ba0a6 !important;
font-size:12px !important;
line-height:1.35 !important;
}
.tickets-admin-status-stats{
display:grid !important;
grid-template-columns:repeat(4,minmax(110px,1fr)) !important;
gap:8px !important;
min-width:0 !important;
}
.tickets-admin-status-stats .appointment-stat-chip{
min-height:58px !important;
border-radius:14px !important;
}
.tickets-admin-status-stats .appointment-stat-chip a{
padding:9px 10px !important;
gap:2px !important;
}
.tickets-admin-status-stats .appointment-stat-chip strong{
font-size:19px !important;
line-height:1 !important;
}
.tickets-admin-status-stats .appointment-stat-chip span{
font-size:10px !important;
line-height:1.15 !important;
white-space:normal !important;
}
.tickets-admin-same-grid{
display:grid !important;
grid-template-columns:minmax(280px,360px) minmax(520px,860px) !important;
justify-content:start !important;
gap:18px !important;
align-items:start !important;
}
.tickets-admin-left-stack{
width:100% !important;
max-width:360px !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.tickets-admin-list-clean{
width:100% !important;
max-width:360px !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
padding:0 !important;
}
.admin-ticket-group{
border:1px solid rgba(255,255,255,.09) !important;
border-radius:16px !important;
background:linear-gradient(180deg,#0d1011,#080909) !important;
padding:12px !important;
display:flex !important;
flex-direction:column !important;
gap:7px !important;
}
.admin-ticket-group .ticket-list-item{
display:block !important;
padding:9px 10px !important;
border-radius:12px !important;
background:rgba(255,255,255,.028) !important;
}
.admin-ticket-group .ticket-list-item:hover,
.admin-ticket-group .ticket-list-item.is-active{
background:rgba(231,255,0,.075) !important;
border-color:rgba(231,255,0,.55) !important;
}
.admin-ticket-group .ticket-list-top strong{
font-size:11.5px !important;
line-height:1.22 !important;
max-width:200px !important;
}
.admin-ticket-group .ticket-list-top .badge{
font-size:9px !important;
padding:3px 6px !important;
}
.admin-ticket-group .ticket-list-item > span:not(.ticket-list-top){
font-size:10px !important;
line-height:1.25 !important;
color:#9ba0a6 !important;
}
.admin-ticket-group .ticket-list-item small{
margin-top:4px !important;
font-size:9.5px !important;
line-height:1.25 !important;
}
.admin-ticket-detail-panel{
width:100% !important;
max-width:860px !important;
min-height:0 !important;
padding:16px !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:18px !important;
background:
radial-gradient(circle at 8% 0%,rgba(245,230,0,.045),transparent 30%),
linear-gradient(180deg,#0d1011,#070808) !important;
box-shadow:0 16px 44px rgba(0,0,0,.22) !important;
}
.admin-ticket-detail-panel .ticket-detail-head{
padding-bottom:12px !important;
margin-bottom:0 !important;
}
.admin-ticket-detail-panel .ticket-detail-head h2{
max-width:620px !important;
font-size:20px !important;
line-height:1.12 !important;
overflow-wrap:anywhere !important;
}
.admin-ticket-detail-panel .ticket-detail-head p{
font-size:12px !important;
}
.admin-ticket-meta-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:8px !important;
}
.admin-ticket-meta-grid div{
border-radius:11px !important;
background:#101315 !important;
border:1px solid rgba(255,255,255,.08) !important;
padding:9px 10px !important;
}
.admin-ticket-actions-row{
display:flex !important;
align-items:center !important;
gap:8px !important;
flex-wrap:wrap !important;
}
.admin-ticket-actions-row form{
margin:0 !important;
}
.admin-ticket-actions-row .btn{
min-height:34px !important;
padding:0 14px !important;
border-radius:999px !important;
}
.admin-ticket-thread{
max-height:260px !important;
padding:0 4px 0 0 !important;
gap:8px !important;
}
.admin-ticket-thread .ticket-message{
border-radius:12px !important;
padding:10px 12px !important;
background:#111416 !important;
}
.admin-ticket-thread .ticket-message.is-admin{
background:rgba(245,230,0,.07) !important;
border-color:rgba(245,230,0,.25) !important;
}
.admin-ticket-thread .ticket-message p{
font-size:12.5px !important;
line-height:1.42 !important;
}
.admin-ticket-reply-form{
margin-top:0 !important;
padding-top:0 !important;
gap:8px !important;
}
.admin-ticket-reply-form label{
color:#fff !important;
font-size:12px !important;
font-weight:900 !important;
}
.admin-ticket-reply-form textarea{
width:100% !important;
min-height:84px !important;
max-height:140px !important;
background:#101315 !important;
color:#fff !important;
border:1px solid #32363a !important;
border-radius:12px !important;
padding:11px 12px !important;
outline:0 !important;
resize:vertical !important;
box-shadow:0 0 0 1px rgba(255,255,255,.02) inset !important;
}
.admin-ticket-reply-form textarea:focus{
border-color:rgba(245,230,0,.65) !important;
box-shadow:0 0 0 3px rgba(245,230,0,.08) !important;
}
.admin-ticket-reply-form .btn{
align-self:flex-start !important;
min-height:38px !important;
padding:0 18px !important;
border-radius:999px !important;
}
@media(max-width:1280px){
.tickets-admin-hero-clean{
grid-template-columns:1fr !important;
}
.tickets-admin-status-stats{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
}
@media(max-width:1180px){
.tickets-admin-same-grid{
grid-template-columns:1fr !important;
}
.tickets-admin-left-stack,
.tickets-admin-list-clean,
.admin-ticket-detail-panel{
max-width:none !important;
}
}
@media(max-width:760px){
.tickets-admin-status-stats{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.admin-ticket-meta-grid{
grid-template-columns:1fr 1fr !important;
}
.admin-ticket-detail-panel .ticket-detail-head{
flex-direction:column !important;
}
}
@media(max-width:520px){
.tickets-admin-status-stats,
.admin-ticket-meta-grid{
grid-template-columns:1fr !important;
}
}
/* =========================================================
FINAL: Admin/Kundenportal Haupt-Hintergrund
Bild liegt wie in der alten funktionierenden CSS relativ zur style.css.
Wenn assets/style.css geladen wird, muss die Datei hier liegen:
/assets/services-drone-hero.png
========================================================= */
body.portal-page,
body.admin-page{
background:
linear-gradient(90deg,rgba(5,6,6,.94) 0%,rgba(5,6,6,.72) 48%,rgba(5,6,6,.92) 100%),
radial-gradient(circle at 52% 14%,rgba(245,230,0,.07),transparent 20%),
url("services-drone-hero.png"),
linear-gradient(145deg,#070808 0%,#101213 42%,#040505 100%) !important;
background-size:cover,auto,cover,cover !important;
background-position:center,center,center,center !important;
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat !important;
background-attachment:fixed,fixed,fixed,fixed !important;
}
body.portal-page::before,
body.admin-page::before{
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background:
radial-gradient(circle at 20% 15%,rgba(245,230,0,.055),transparent 18%),
radial-gradient(circle at 82% 22%,rgba(245,230,0,.045),transparent 20%),
linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.34));
}
body.portal-page .topbar,
body.admin-page .topbar,
body.portal-page .sidebar,
body.admin-page .sidebar{
background:rgba(9,10,11,.92) !important;
backdrop-filter:blur(7px);
}
body.portal-page .panel,
body.admin-page .panel,
body.portal-page .customer-stat-card,
body.portal-page .customer-project-table-panel,
body.portal-page .project-image-group,
body.portal-page .download-project-card,
body.portal-page .appointment-request-form,
body.portal-page .feedback-form,
body.portal-page .profile-form,
body.admin-page .appointment-accordion-item,
body.admin-page .ticket-admin-shell,
body.portal-page .ticket-customer-shell{
background-color:rgba(8,10,11,.86) !important;
backdrop-filter:blur(8px);
}
body.portal-page .content,
body.admin-page .content{
background:transparent !important;
}
/* ===== STARTSEITE: Navigation oben mittig wie Dienstleistungsseite ===== */
.login-main-nav{
position:absolute;
top:28px;
left:50%;
transform:translateX(-50%);
z-index:6;
display:flex;
align-items:center;
justify-content:center;
gap:46px;
padding:13px 22px;
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
background:rgba(7,8,9,.58);
backdrop-filter:blur(8px);
box-shadow:0 16px 50px rgba(0,0,0,.22);
}
.login-main-nav a{
position:relative;
color:#f0f2f2;
text-decoration:none;
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
white-space:nowrap;
transition:.18s ease;
}
.login-main-nav a:hover,
.login-main-nav a:first-child{
color:#f1df00;
}
.login-main-nav a:first-child:after{
content:"";
position:absolute;
left:50%;
bottom:-14px;
transform:translateX(-50%);
width:48px;
height:2px;
background:#f1df00;
box-shadow:0 0 16px rgba(241,223,0,.35);
}
@media(max-width:980px){
.login-main-nav{
position:relative;
top:auto;
left:auto;
transform:none;
grid-column:1;
width:100%;
flex-wrap:wrap;
gap:16px 24px;
margin:0 0 18px;
padding:12px 14px;
}
.login-main-nav a{
font-size:12px;
}
.login-main-nav a:first-child:after{
bottom:-8px;
}
}
@media(max-width:520px){
.login-main-nav{
gap:12px 16px;
border-radius:14px;
}
.login-main-nav a{
font-size:11px;
letter-spacing:.05em;
}
}
/* =========================================================
PUBLIC PAGES: einheitliche Navigation + Über uns / Referenzen
========================================================= */
.login-main-nav.site-main-nav,
.svc-main-header .site-main-nav{
position:absolute !important;
top:28px !important;
left:50% !important;
transform:translateX(-50%) !important;
z-index:80 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:34px !important;
width:max-content !important;
max-width:calc(100vw - 48px) !important;
padding:13px 24px !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:999px !important;
background:rgba(7,8,9,.72) !important;
backdrop-filter:blur(10px) !important;
box-shadow:0 16px 50px rgba(0,0,0,.28) !important;
}
.login-main-nav.site-main-nav a,
.svc-main-header .site-main-nav a{
position:relative !important;
color:#f0f2f2 !important;
text-decoration:none !important;
font-size:13px !important;
font-weight:900 !important;
letter-spacing:.02em !important;
text-transform:none !important;
white-space:nowrap !important;
transition:.18s ease !important;
}
.login-main-nav.site-main-nav a:hover,
.login-main-nav.site-main-nav a.active,
.login-main-nav.site-main-nav a.home-link,
.svc-main-header .site-main-nav a:hover,
.svc-main-header .site-main-nav a.active{
color:#f1df00 !important;
}
.login-main-nav.site-main-nav a.active:after,
.login-main-nav.site-main-nav a.home-link:after,
.svc-main-header .site-main-nav a.active:after{
content:"" !important;
position:absolute !important;
left:50% !important;
bottom:-14px !important;
transform:translateX(-50%) !important;
width:48px !important;
height:2px !important;
background:#f1df00 !important;
box-shadow:0 0 16px rgba(241,223,0,.35) !important;
}
.svc-main-header,
.public-main-header{
position:relative !important;
height:100px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 clamp(24px,4vw,76px) !important;
}
.svc-main-header .svc-request-btn{
position:absolute !important;
right:clamp(24px,4vw,76px) !important;
top:26px !important;
z-index:81 !important;
}
.public-info-body{
background:#050607 !important;
}
.public-info-page{
min-height:100vh;
background:
radial-gradient(circle at 20% 0%, rgba(245,230,0,.06), transparent 24%),
linear-gradient(180deg,#050607 0%,#050607 44%,#030404 100%);
}
.public-hero{
min-height:310px;
position:relative;
overflow:hidden;
border-top:1px solid rgba(255,255,255,.04);
border-bottom:1px solid rgba(241,223,0,.38);
background:
linear-gradient(90deg,rgba(5,6,7,.96) 0%,rgba(5,6,7,.78) 46%,rgba(5,6,7,.92) 100%),
radial-gradient(circle at 75% 25%,rgba(245,230,0,.10),transparent 28%),
url("login-bg.jpg.png"),
#050607;
background-size:cover;
background-position:center;
}
.public-hero:after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(90deg,rgba(0,0,0,.40),transparent 60%),
radial-gradient(circle at 84% 34%,rgba(245,230,0,.07),transparent 20%);
}
.public-hero-inner{
position:relative;
z-index:2;
width:min(1180px,calc(100% - 48px));
margin:0 auto;
padding:72px 0 62px;
}
.public-kicker,
.public-card-kicker{
display:inline-flex;
color:#f1df00;
font-size:13px;
font-weight:1000;
letter-spacing:.10em;
text-transform:uppercase;
margin-bottom:12px;
}
.public-hero h1{
margin:0;
max-width:900px;
color:#fff;
font-size:clamp(36px,4.6vw,68px);
line-height:1.02;
letter-spacing:-.04em;
}
.public-hero p{
max-width:720px;
margin:18px 0 0;
color:#cfd3d5;
font-size:17px;
line-height:1.6;
}
.public-content-shell{
width:min(1180px,calc(100% - 48px));
margin:0 auto;
padding:28px 0 54px;
}
.public-intro-grid{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
gap:16px;
margin-bottom:28px;
}
.public-panel,
.public-mini-card,
.public-step-card,
.reference-card{
border:1px solid rgba(255,255,255,.09);
background:linear-gradient(180deg,#0d1011,#080909);
border-radius:14px;
box-shadow:0 18px 48px rgba(0,0,0,.24);
}
.public-intro-card{
padding:28px;
}
.public-intro-card h2{
margin:0 0 16px;
color:#fff;
font-size:30px;
line-height:1.15;
letter-spacing:-.02em;
}
.public-intro-card p,
.public-mini-card p,
.public-step-card p,
.reference-card p,
.reference-note-panel p{
color:#b9bec1;
font-size:14px;
line-height:1.62;
}
.public-facts-card{
padding:24px;
border-color:rgba(241,223,0,.22);
}
.public-facts-card h3,
.reference-note-panel h3{
margin:0 0 14px;
color:#fff;
font-size:20px;
}
.public-fact-list{
display:grid;
gap:12px;
}
.public-fact-list div{
border:1px solid rgba(241,223,0,.16);
border-radius:10px;
background:rgba(245,230,0,.045);
padding:14px;
}
.public-fact-list strong,
.public-fact-list span{
display:block;
}
.public-fact-list strong{
color:#f1df00;
margin-bottom:5px;
}
.public-fact-list span{
color:#c9cccd;
font-size:13px;
line-height:1.45;
}
.public-section{
margin-top:28px;
}
.public-section-head{
display:flex;
align-items:center;
gap:14px;
margin-bottom:14px;
}
.public-section-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid rgba(241,223,0,.55);
color:#f1df00;
background:rgba(0,0,0,.30);
}
.public-section-head h2{
margin:0;
color:#fff;
font-size:24px;
font-weight:1000;
}
.public-section-head > span:last-child{
flex:1;
height:1px;
background:linear-gradient(90deg,rgba(241,223,0,.48),rgba(241,223,0,.10));
}
.public-step-grid,
.public-card-grid,
.reference-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.public-card-grid-four{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.public-step-card,
.public-mini-card{
padding:20px;
}
.public-step-card strong{
display:inline-flex;
margin-bottom:18px;
color:#f1df00;
font-size:28px;
font-weight:1000;
}
.public-step-card h3,
.public-mini-card h3{
margin:0 0 8px;
color:#fff;
font-size:18px;
}
.public-bottom-cta{
margin-top:30px;
min-height:86px;
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
border:1px solid rgba(241,223,0,.48);
border-radius:12px;
background:linear-gradient(90deg,rgba(241,223,0,.055),rgba(7,8,8,.98) 38%,rgba(7,8,8,.98));
padding:20px 26px;
}
.public-bottom-cta strong{
display:block;
color:#f1df00;
font-size:18px;
margin-bottom:5px;
}
.public-bottom-cta p{
margin:0;
color:#c9cccd;
font-size:14px;
}
.public-bottom-cta a{
min-width:220px;
height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
border-radius:4px;
background:#f1df00;
color:#050607;
text-decoration:none;
font-size:13px;
font-weight:1000;
}
.reference-card{
overflow:hidden;
transition:.18s ease;
}
.reference-card:hover{
transform:translateY(-2px);
border-color:rgba(241,223,0,.36);
}
.reference-card > div:last-child{
padding:18px;
}
.reference-card span{
display:block;
color:#f1df00;
font-size:12px;
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:8px;
}
.reference-card h3{
margin:0 0 8px;
color:#fff;
font-size:18px;
line-height:1.22;
}
.reference-thumb{
height:150px;
background:
linear-gradient(135deg,rgba(241,223,0,.12),rgba(255,255,255,.04)),
radial-gradient(circle at 30% 20%,rgba(241,223,0,.16),transparent 26%),
#0b0d0e;
border-bottom:1px solid rgba(255,255,255,.08);
position:relative;
overflow:hidden;
}
.reference-thumb:after{
content:"";
position:absolute;
inset:20px;
border:1px solid rgba(241,223,0,.22);
border-radius:12px;
box-shadow:0 0 28px rgba(241,223,0,.055);
}
.reference-thumb-two{background:linear-gradient(135deg,rgba(100,160,255,.13),rgba(255,255,255,.04)),#0b0d0e;}
.reference-thumb-three{background:linear-gradient(135deg,rgba(245,130,0,.15),rgba(255,255,255,.04)),#0b0d0e;}
.reference-thumb-four{background:linear-gradient(135deg,rgba(190,90,255,.15),rgba(255,255,255,.04)),#0b0d0e;}
.reference-thumb-five{background:linear-gradient(135deg,rgba(79,207,87,.14),rgba(255,255,255,.04)),#0b0d0e;}
.reference-thumb-six{background:linear-gradient(135deg,rgba(245,230,0,.14),rgba(255,255,255,.04)),#0b0d0e;}
.reference-note-panel{
padding:24px;
}
.reference-tag-list{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px;
}
.reference-tag-list span{
display:inline-flex;
align-items:center;
min-height:30px;
border:1px solid rgba(241,223,0,.22);
border-radius:999px;
padding:0 12px;
color:#f1df00;
background:rgba(241,223,0,.06);
font-size:12px;
font-weight:900;
}
.contact-modal{
position:fixed;
inset:0;
z-index:9999;
display:none;
align-items:center;
justify-content:center;
padding:22px;
}
.contact-modal.is-open{
display:flex;
}
.contact-modal-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.78);
backdrop-filter:blur(7px);
}
.contact-modal-card{
position:relative;
z-index:2;
width:min(100%,520px);
border:1px solid rgba(241,223,0,.38);
border-radius:16px;
background:
radial-gradient(circle at 10% 0%,rgba(241,223,0,.10),transparent 34%),
linear-gradient(180deg,#0d1011,#080909);
box-shadow:0 30px 110px rgba(0,0,0,.62),0 0 30px rgba(241,223,0,.06);
padding:30px;
}
.contact-modal-close{
position:absolute;
right:16px;
top:14px;
width:36px;
height:36px;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
background:#111315;
color:#fff;
font-size:26px;
line-height:1;
cursor:pointer;
}
.contact-modal-close:hover{
color:#f1df00;
border-color:rgba(241,223,0,.45);
}
.contact-modal-kicker{
display:block;
color:#f1df00;
font-size:12px;
font-weight:1000;
letter-spacing:.10em;
text-transform:uppercase;
margin-bottom:10px;
}
.contact-modal-card h2{
margin:0 0 10px;
color:#fff;
font-size:28px;
}
.contact-modal-card p{
margin:0 0 18px;
color:#c5c9cb;
font-size:14px;
line-height:1.55;
}
.contact-modal-list{
display:grid;
gap:10px;
margin-bottom:18px;
}
.contact-modal-item{
display:flex;
align-items:center;
gap:13px;
border:1px solid rgba(255,255,255,.09);
border-radius:12px;
background:#0b0d0e;
padding:14px;
text-decoration:none;
}
.contact-modal-item:hover{
border-color:rgba(241,223,0,.35);
}
.contact-modal-item > span{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:10px;
color:#f1df00;
border:1px solid rgba(241,223,0,.25);
background:rgba(241,223,0,.06);
}
.contact-modal-item small,
.contact-modal-item strong{
display:block;
}
.contact-modal-item small{
color:#9fa7ad;
font-size:12px;
margin-bottom:3px;
}
.contact-modal-item strong{
color:#fff;
font-size:15px;
overflow-wrap:anywhere;
}
body.contact-modal-open{
overflow:hidden;
}
@media(max-width:1180px){
.svc-main-header .svc-request-btn{
display:none !important;
}
}
@media(max-width:980px){
.login-main-nav.site-main-nav,
.svc-main-header .site-main-nav{
position:relative !important;
top:auto !important;
left:auto !important;
transform:none !important;
width:100% !important;
max-width:none !important;
flex-wrap:wrap !important;
gap:16px 24px !important;
margin:16px 0 18px !important;
padding:12px 14px !important;
}
.svc-main-header,
.public-main-header{
height:auto !important;
padding:8px 20px !important;
}
.public-intro-grid,
.public-step-grid,
.public-card-grid,
.public-card-grid-four,
.reference-grid{
grid-template-columns:1fr !important;
}
.public-bottom-cta{
flex-direction:column;
align-items:stretch;
}
.public-bottom-cta a{
width:100%;
}
}
@media(max-width:560px){
.public-hero-inner,
.public-content-shell{
width:calc(100% - 30px);
}
.public-hero-inner{
padding:48px 0 44px;
}
.contact-modal-card{
padding:24px 18px;
}
}
/* ===== UPDATE: Kundenportal Übersicht - 8 Kacheln in einer Reihe ===== */
body.portal-page .customer-stats-grid{
grid-template-columns:repeat(8,minmax(0,1fr)) !important;
gap:8px !important;
align-items:stretch;
}
body.portal-page .customer-stat-card{
min-width:0 !important;
min-height:106px !important;
padding:13px 10px 12px !important;
border-radius:10px !important;
gap:6px !important;
}
body.portal-page .customer-stat-card span{
font-size:10.5px !important;
line-height:1.18 !important;
letter-spacing:.01em;
padding-right:20px;
overflow-wrap:anywhere;
}
body.portal-page .customer-stat-card strong{
font-size:clamp(17px,1.28vw,26px) !important;
line-height:1.02 !important;
white-space:normal !important;
overflow-wrap:anywhere;
word-break:break-word;
}
body.portal-page .customer-stat-card small{
font-size:9.5px !important;
line-height:1.18 !important;
overflow-wrap:anywhere;
}
body.portal-page .customer-stat-card i{
right:9px !important;
top:10px !important;
font-size:20px !important;
}
@media(max-width:1250px){
body.portal-page .customer-stats-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:10px !important;
}
body.portal-page .customer-stat-card{
min-height:112px !important;
padding:15px 14px 13px !important;
}
body.portal-page .customer-stat-card span{
font-size:12px !important;
}
body.portal-page .customer-stat-card strong{
font-size:clamp(22px,2.5vw,30px) !important;
}
body.portal-page .customer-stat-card small{
font-size:11px !important;
}
body.portal-page .customer-stat-card i{
right:14px !important;
top:14px !important;
font-size:26px !important;
}
}
@media(max-width:760px){
body.portal-page .customer-stats-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:520px){
body.portal-page .customer-stats-grid{
grid-template-columns:1fr !important;
}
}
/* ===== UPDATE: Kundenportal Kategorie "Abgelaufene Projekte" ===== */
body.portal-page .expired-projects-section{
width:100%;
}
body.portal-page .expired-projects-headline{
align-items:flex-start;
}
body.portal-page .expired-projects-headline h2{
margin-bottom:6px;
}
body.portal-page .expired-projects-headline span{
display:block;
max-width:780px;
color:#9ba0a6;
font-size:13px;
line-height:1.45;
}
body.portal-page .expired-project-list{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:16px;
}
body.portal-page .expired-project-card{
display:flex;
flex-direction:column;
gap:16px;
min-width:0;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:14px !important;
background:
radial-gradient(circle at 12% 0%,rgba(255,89,89,.055),transparent 34%),
linear-gradient(180deg,#101314,#090b0c) !important;
padding:18px !important;
transition:.18s ease;
}
body.portal-page .expired-project-card:hover{
transform:translateY(-2px);
border-color:rgba(245,230,0,.28) !important;
box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 0 1px rgba(245,230,0,.035);
}
body.portal-page .expired-project-info{
min-width:0;
}
body.portal-page .expired-project-title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:8px;
}
body.portal-page .expired-project-title-row strong{
color:var(--yellow);
font-size:17px;
line-height:1.25;
font-weight:900;
overflow-wrap:anywhere;
}
body.portal-page .expired-project-info small{
display:block;
color:#9ba0a6;
font-size:12px;
line-height:1.4;
}
body.portal-page .expired-project-file-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
body.portal-page .expired-project-file-grid > div{
min-width:0;
border:1px solid rgba(255,255,255,.07);
border-radius:10px;
background:#0a0c0d;
padding:12px;
}
body.portal-page .expired-project-file-grid span{
display:block;
color:#aeb3b8;
font-size:11px;
font-weight:900;
line-height:1.25;
margin-bottom:5px;
}
body.portal-page .expired-project-file-grid strong{
display:block;
color:#fff;
font-size:22px;
line-height:1;
font-weight:900;
}
body.portal-page .expired-project-file-grid small{
display:block;
margin-top:5px;
color:#8f969c;
font-size:11px;
line-height:1.25;
overflow-wrap:anywhere;
}
body.portal-page .expired-project-extension-form{
margin:0;
padding:14px;
border:1px solid rgba(245,230,0,.22);
border-radius:12px;
background:
radial-gradient(circle at 14% 0%,rgba(245,230,0,.075),transparent 38%),
linear-gradient(180deg,#0b0e0f,#070808);
}
body.portal-page .expired-project-extension-form .btn{
width:100%;
min-height:43px;
padding:0 14px;
border-radius:8px !important;
}
body.portal-page .side-nav a[href*="abgelaufene-projekte"]{
white-space:normal !important;
}
@media(max-width:720px){
body.portal-page .expired-project-list,
body.portal-page .expired-project-file-grid{
grid-template-columns:1fr;
}
}
/* ===== UPDATE: Kundenportal eigene Daten + kompakte abgelaufene Projekte ===== */
body.portal-page .profile-form .profile-fields input[name="first_name"],
body.portal-page .profile-form .profile-fields input[name="last_name"]{
font-weight:800;
}
body.portal-page .expired-project-list{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(280px,max-content)) !important;
justify-content:start;
align-items:start;
gap:14px !important;
}
body.portal-page .expired-project-card{
width:fit-content;
min-width:280px;
max-width:360px;
gap:13px !important;
padding:15px !important;
}
body.portal-page .expired-project-title-row{
gap:10px !important;
margin-bottom:10px !important;
}
body.portal-page .expired-project-title-row strong{
font-size:15px !important;
max-width:230px;
}
body.portal-page .expired-project-title-row .badge{
flex:0 0 auto;
padding:4px 8px;
font-size:11px;
line-height:1.1;
}
body.portal-page .expired-project-date-pill{
display:inline-flex;
align-items:center;
justify-content:center;
width:fit-content;
max-width:100%;
padding:7px 10px;
margin:0 0 8px;
border:1px solid rgba(245,230,0,.32);
border-radius:999px;
background:rgba(245,230,0,.08);
color:var(--yellow);
font-size:13px;
line-height:1;
font-weight:900;
white-space:nowrap;
}
body.portal-page .expired-project-file-list{
display:flex;
flex-direction:column;
gap:7px;
min-width:0;
}
body.portal-page .expired-file-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:12px;
min-height:38px;
min-width:0;
padding:9px 10px;
border:1px solid rgba(255,255,255,.07);
border-radius:9px;
background:#0a0c0d;
}
body.portal-page .expired-file-row span{
min-width:0;
color:#aeb3b8;
font-size:12px;
font-weight:900;
line-height:1.2;
overflow-wrap:anywhere;
}
body.portal-page .expired-file-row strong{
color:#fff;
font-size:17px;
line-height:1;
font-weight:900;
text-align:right;
}
body.portal-page .expired-file-row small{
grid-column:1/-1;
color:#8f969c;
font-size:11px;
line-height:1.25;
text-align:right;
overflow-wrap:anywhere;
}
body.portal-page .expired-file-row-total{
border-color:rgba(245,230,0,.18);
background:linear-gradient(180deg,rgba(245,230,0,.045),#0a0c0d);
}
body.portal-page .expired-project-extension-form{
padding:10px !important;
border-radius:10px !important;
}
body.portal-page .expired-project-extension-form .btn{
min-height:39px !important;
font-size:12px;
}
@media(max-width:720px){
body.portal-page .expired-project-list{
grid-template-columns:1fr !important;
}
body.portal-page .expired-project-card{
width:100%;
max-width:none;
}
}
/* ===== UPDATE: Kundenportal Übersicht - 7 Kacheln ohne Unterzeilen ===== */
body.portal-page .customer-stats-grid{
grid-template-columns:repeat(7,minmax(0,1fr)) !important;
gap:9px !important;
}
body.portal-page .customer-stat-card{
min-height:88px !important;
padding:13px 10px 12px !important;
justify-content:center !important;
}
body.portal-page .customer-stat-card small{
display:none !important;
}
body.portal-page .customer-stat-card strong{
margin-top:7px !important;
}
@media(max-width:1250px){
body.portal-page .customer-stats-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
}
@media(max-width:760px){
body.portal-page .customer-stats-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:520px){
body.portal-page .customer-stats-grid{
grid-template-columns:1fr !important;
}
}
/* ===== KUNDENPORTAL: Projekte als moderne Kacheln ===== */
.customer-project-card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:18px;
margin-top:14px;
}
.customer-project-card{
position:relative;
overflow:hidden;
min-height:310px;
border:1px solid rgba(245,230,0,.20);
border-radius:16px;
background:
radial-gradient(circle at 14% 0%,rgba(245,230,0,.075),transparent 32%),
linear-gradient(180deg,rgba(16,19,20,.94),rgba(8,10,11,.92));
box-shadow:0 18px 55px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.025);
padding:20px;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease;
}
.customer-project-card:hover{
transform:translateY(-2px);
border-color:rgba(245,230,0,.42);
box-shadow:0 24px 70px rgba(0,0,0,.36),0 0 0 1px rgba(245,230,0,.06);
filter:brightness(1.03);
}
.customer-project-card.is-selected{
border-color:rgba(245,230,0,.70);
box-shadow:0 24px 70px rgba(0,0,0,.36),0 0 0 1px rgba(245,230,0,.18), inset 0 0 30px rgba(245,230,0,.035);
}
.project-card-glow{
position:absolute;
right:-70px;
top:-90px;
width:210px;
height:210px;
border-radius:50%;
background:rgba(245,230,0,.09);
filter:blur(24px);
pointer-events:none;
}
.project-card-top{
position:relative;
z-index:1;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}
.project-card-title-wrap{
min-width:0;
}
.project-card-eyebrow{
display:inline-flex;
align-items:center;
gap:6px;
margin-bottom:8px;
color:var(--yellow);
font-size:11px;
font-weight:900;
letter-spacing:.11em;
text-transform:uppercase;
}
.project-card-eyebrow:before{
content:"";
width:7px;
height:7px;
border-radius:50%;
background:var(--yellow);
box-shadow:0 0 14px rgba(245,230,0,.45);
}
.customer-project-card h3{
margin:0;
color:#fff;
font-size:20px;
line-height:1.15;
letter-spacing:-.02em;
overflow-wrap:anywhere;
}
.customer-project-card p{
margin:9px 0 0;
max-width:560px;
color:#aeb5ba;
font-size:13px;
line-height:1.45;
overflow-wrap:anywhere;
}
.project-status-pill{
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
min-width:64px;
height:30px;
padding:0 11px;
border:1px solid rgba(79,207,87,.28);
border-radius:999px;
background:rgba(79,207,87,.12);
color:#79ff83;
font-size:12px;
font-weight:900;
}
.project-card-meta-row{
position:relative;
z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:18px;
}
.project-meta-box{
min-width:0;
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
background:rgba(5,6,6,.38);
padding:13px 14px;
}
.project-meta-box span,
.project-size-info span,
.project-file-pill span{
display:block;
color:#8f979d;
font-size:11px;
font-weight:900;
letter-spacing:.07em;
text-transform:uppercase;
}
.project-meta-box strong,
.project-size-info strong{
display:block;
margin-top:5px;
color:#fff;
font-size:15px;
line-height:1.15;
overflow-wrap:anywhere;
}
.project-meta-box small{
display:block;
margin-top:4px;
color:var(--yellow);
font-size:12px;
font-weight:800;
}
.project-file-pills{
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin-top:14px;
}
.project-file-pill{
min-width:0;
border:1px solid rgba(245,230,0,.16);
border-radius:12px;
background:rgba(245,230,0,.055);
padding:13px 12px;
}
.project-file-pill strong{
display:block;
margin-top:6px;
color:#fff;
font-size:24px;
line-height:1;
}
.project-card-footer{
position:relative;
z-index:1;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
margin-top:18px;
padding-top:16px;
border-top:1px solid rgba(255,255,255,.075);
}
.project-size-info{
min-width:120px;
}
.project-card-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
}
.project-card-actions .btn-small{
height:36px;
min-width:82px;
padding:0 13px !important;
border-radius:9px !important;
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
}
.project-card-actions .btn-secondary{
background:rgba(18,21,23,.92) !important;
border:1px solid rgba(255,255,255,.13) !important;
color:#fff !important;
}
.project-card-actions .btn-primary{
background:linear-gradient(180deg,var(--yellow),#e6d700) !important;
color:#050505 !important;
border:1px solid rgba(245,230,0,.70) !important;
box-shadow:0 0 18px rgba(245,230,0,.10) !important;
}
@media(max-width:1180px){
.customer-project-card-grid{
grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
}
@media(max-width:720px){
.customer-project-card-grid{
grid-template-columns:1fr;
}
.customer-project-card{
padding:17px;
}
.project-card-top,
.project-card-footer{
flex-direction:column;
align-items:flex-start;
}
.project-card-meta-row,
.project-file-pills{
grid-template-columns:1fr;
}
.project-card-actions{
width:100%;
justify-content:flex-start;
}
}
/* ===== UPDATE: Projekt-Kacheln schmaler und kompakter ===== */
.customer-project-card-grid{
grid-template-columns:repeat(auto-fill,minmax(250px,285px)) !important;
justify-content:start;
align-items:stretch;
gap:14px !important;
}
.customer-project-card{
min-height:0 !important;
padding:16px !important;
border-radius:14px !important;
}
.project-card-top{
gap:10px !important;
}
.project-card-eyebrow{
margin-bottom:6px !important;
font-size:10px !important;
letter-spacing:.08em !important;
}
.customer-project-card h3{
font-size:17px !important;
line-height:1.18 !important;
}
.customer-project-card p{
margin-top:7px !important;
font-size:12px !important;
line-height:1.38 !important;
}
.project-status-pill{
min-width:auto !important;
height:26px !important;
padding:0 9px !important;
font-size:11px !important;
}
.project-card-meta-row{
grid-template-columns:1fr !important;
gap:8px !important;
margin-top:13px !important;
}
.project-meta-box{
padding:10px 11px !important;
border-radius:10px !important;
}
.project-meta-box span,
.project-size-info span,
.project-file-pill span{
font-size:10px !important;
letter-spacing:.05em !important;
}
.project-meta-box strong,
.project-size-info strong{
font-size:13px !important;
}
.project-meta-box small{
font-size:11px !important;
}
.project-file-pills{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:7px !important;
margin-top:11px !important;
}
.project-file-pill{
padding:9px 8px !important;
border-radius:10px !important;
}
.project-file-pill strong{
margin-top:5px !important;
font-size:19px !important;
}
.project-card-footer{
flex-direction:column !important;
align-items:stretch !important;
gap:11px !important;
margin-top:13px !important;
padding-top:13px !important;
}
.project-size-info{
min-width:0 !important;
}
.project-card-actions{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:7px !important;
width:100% !important;
}
.project-card-actions .btn-small{
width:100% !important;
min-width:0 !important;
height:33px !important;
padding:0 8px !important;
border-radius:8px !important;
font-size:11px !important;
}
@media(max-width:720px){
.customer-project-card-grid{
grid-template-columns:1fr !important;
}
.project-file-pills{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
}
/* ===== UPDATE: Kundenportal Übersicht - Gesamte Projekte links, nicht klickbar ===== */
body.portal-page .customer-stat-card.customer-stat-static{
cursor:default !important;
pointer-events:none;
}
body.portal-page .customer-stat-card.customer-stat-static:hover{
transform:none !important;
border-color:rgba(255,255,255,.075) !important;
box-shadow:0 18px 45px rgba(0,0,0,.22) !important;
}
/* ===== UPDATE: Kundenportal Übersicht - kompaktere schönere Kacheln ===== */
body.portal-page .customer-stats-grid{
grid-template-columns:repeat(7,minmax(108px,1fr)) !important;
gap:10px !important;
align-items:stretch !important;
margin-top:18px !important;
}
body.portal-page .customer-stat-card{
position:relative !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 28px !important;
grid-template-rows:auto auto !important;
align-content:center !important;
align-items:center !important;
gap:2px 8px !important;
min-width:0 !important;
min-height:74px !important;
padding:11px 12px !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:12px !important;
background:
radial-gradient(circle at 100% 0%,rgba(245,230,0,.075),transparent 34%),
linear-gradient(180deg,#111415,#080a0b) !important;
box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.02) !important;
overflow:hidden !important;
text-align:left !important;
justify-content:initial !important;
}
body.portal-page .customer-stat-card:before{
content:"" !important;
position:absolute !important;
left:0 !important;
top:0 !important;
bottom:0 !important;
width:3px !important;
background:linear-gradient(180deg,var(--yellow),rgba(245,230,0,.18)) !important;
opacity:.9 !important;
}
body.portal-page .customer-stat-card:hover{
transform:translateY(-1px) !important;
border-color:rgba(245,230,0,.32) !important;
box-shadow:0 16px 34px rgba(0,0,0,.28),0 0 0 1px rgba(245,230,0,.055) !important;
}
body.portal-page .customer-stat-card span{
grid-column:1 !important;
grid-row:1 !important;
min-width:0 !important;
padding-right:0 !important;
color:#aeb4b9 !important;
font-size:10.5px !important;
line-height:1.15 !important;
font-weight:900 !important;
letter-spacing:.035em !important;
text-transform:uppercase !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
}
body.portal-page .customer-stat-card strong{
grid-column:1 !important;
grid-row:2 !important;
display:block !important;
margin:2px 0 0 !important;
color:#fff !important;
font-size:clamp(19px,1.35vw,24px) !important;
line-height:1 !important;
font-weight:950 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
body.portal-page .customer-stat-card small{
display:none !important;
}
body.portal-page .customer-stat-card i{
position:static !important;
grid-column:2 !important;
grid-row:1 / 3 !important;
align-self:center !important;
justify-self:end !important;
width:28px !important;
height:28px !important;
border:1px solid rgba(245,230,0,.22) !important;
border-radius:9px !important;
background:rgba(245,230,0,.07) !important;
color:var(--yellow) !important;
display:grid !important;
place-items:center !important;
font-size:15px !important;
line-height:1 !important;
opacity:.95 !important;
transform:none !important;
}
body.portal-page .customer-stat-muted:before{
background:linear-gradient(180deg,#ff7777,rgba(255,119,119,.18)) !important;
}
body.portal-page .customer-stat-muted i{
border-color:rgba(255,119,119,.22) !important;
background:rgba(255,119,119,.07) !important;
color:#ff7777 !important;
}
body.portal-page .customer-stat-card.customer-stat-static{
cursor:default !important;
pointer-events:none !important;
}
body.portal-page .customer-stat-card.customer-stat-static:hover{
transform:none !important;
border-color:rgba(255,255,255,.08) !important;
box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.02) !important;
}
@media(max-width:1320px){
body.portal-page .customer-stats-grid{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
body.portal-page .customer-stat-card{
min-height:78px !important;
padding:12px 13px !important;
}
}
@media(max-width:820px){
body.portal-page .customer-stats-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:520px){
body.portal-page .customer-stats-grid{
grid-template-columns:1fr !important;
}
}
/* ===== UPDATE: Kontakt-Popup Social-Icons nur als klickbare Icons + Login-Kontaktlink ===== */
.support-help a,
.support-help a:visited{
color:var(--yellow) !important;
font-weight:900;
text-decoration:none;
}
.support-help a:hover{
color:var(--yellow) !important;
text-decoration:underline;
}
.contact-social-icons{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding-top:2px;
}
.contact-social-icon{
width:46px;
height:46px;
display:grid;
place-items:center;
border:1px solid rgba(241,223,0,.25);
border-radius:12px;
color:#f1df00;
background:rgba(241,223,0,.06);
transition:.18s ease;
}
.contact-social-icon:hover{
border-color:rgba(241,223,0,.55);
background:rgba(241,223,0,.12);
transform:translateY(-1px);
}
.contact-social-icon svg{
width:21px;
height:21px;
fill:currentColor;
display:block;
}
/* =========================================================
LEISTUNGEN MODERN 2026 - OHNE PAKETBILDER
========================================================= */
.svc-premium-body{
background:
radial-gradient(circle at 18% 0%, rgba(245,230,0,.07), transparent 26%),
radial-gradient(circle at 92% 18%, rgba(255,255,255,.035), transparent 20%),
linear-gradient(180deg,#050606 0%,#070808 46%,#030404 100%) !important;
}
.svc-premium-page{
background:transparent !important;
}
.svc-main-header{
position:sticky;
top:0;
z-index:90;
min-height:86px !important;
height:auto !important;
background:rgba(5,6,6,.88) !important;
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(245,230,0,.12) !important;
box-shadow:0 18px 60px rgba(0,0,0,.32);
}
.svc-main-header .svc-request-btn,
.svc-request-btn{
border-radius:999px !important;
min-width:190px !important;
height:44px !important;
box-shadow:0 0 24px rgba(245,230,0,.12) !important;
}
.svc-modern-hero,
.svc-hero{
min-height:auto !important;
border-bottom:1px solid rgba(245,230,0,.22) !important;
background:
linear-gradient(135deg,rgba(245,230,0,.075),transparent 30%),
radial-gradient(circle at 88% 16%,rgba(245,230,0,.10),transparent 20%),
linear-gradient(180deg,rgba(12,14,15,.96),rgba(5,6,6,.98)) !important;
}
.svc-hero:before{
content:"";
position:absolute;
inset:18px;
pointer-events:none;
border:1px solid rgba(245,230,0,.11);
border-radius:22px;
background:
linear-gradient(120deg,transparent 0 42%,rgba(255,255,255,.04) 42.2% 42.45%,transparent 43%),
radial-gradient(circle at 20% 18%,rgba(245,230,0,.08),transparent 18%);
}
.svc-hero-inner{
position:relative;
z-index:2;
width:min(1480px,calc(100% - 72px));
margin:0 auto;
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
gap:34px;
align-items:end;
padding:72px 0 62px;
}
.svc-hero-copy{
width:auto !important;
margin:0 !important;
padding:0 !important;
}
.svc-hero-kicker{
display:inline-flex;
align-items:center;
min-height:30px;
border:1px solid rgba(245,230,0,.26);
border-radius:999px;
background:rgba(245,230,0,.07);
color:var(--yellow);
padding:0 13px;
margin-bottom:18px;
font-size:12px;
font-weight:950;
letter-spacing:.12em;
text-transform:uppercase;
}
.svc-hero-copy h1{
margin:0 0 18px !important;
line-height:.96 !important;
letter-spacing:.035em !important;
}
.svc-hero-copy h1 span,
.svc-hero-copy h1 strong{
font-size:clamp(40px,5.1vw,84px) !important;
letter-spacing:.02em !important;
}
.svc-hero-copy h1 strong{
color:var(--yellow) !important;
text-shadow:0 0 28px rgba(245,230,0,.10);
}
.svc-hero-copy p{
max-width:780px;
color:#d5d8d9 !important;
font-size:clamp(15px,1.15vw,18px) !important;
}
.svc-hero-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:26px;
}
.svc-hero-tags a{
min-height:38px;
display:inline-flex;
align-items:center;
border:1px solid rgba(255,255,255,.10);
border-radius:999px;
background:rgba(255,255,255,.035);
color:#f1f2f2;
padding:0 15px;
font-size:12px;
font-weight:900;
letter-spacing:.04em;
transition:.18s ease;
}
.svc-hero-tags a:hover{
color:var(--yellow);
border-color:rgba(245,230,0,.38);
background:rgba(245,230,0,.08);
transform:translateY(-1px);
}
.svc-hero-stat-grid{
display:grid;
gap:12px;
}
.svc-hero-stat{
display:grid;
grid-template-columns:58px minmax(0,1fr);
align-items:center;
gap:14px;
min-height:78px;
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
background:rgba(9,11,12,.72);
box-shadow:0 18px 60px rgba(0,0,0,.24);
padding:14px 16px;
}
.svc-hero-stat strong{
width:48px;
height:48px;
display:grid;
place-items:center;
border:1px solid rgba(245,230,0,.32);
border-radius:14px;
background:rgba(245,230,0,.08);
color:var(--yellow);
font-size:14px;
font-weight:1000;
}
.svc-hero-stat span{
color:#f4f5f5;
font-size:13px;
font-weight:900;
line-height:1.32;
}
.svc-hero-admin-slideshow,
.svc-hero-admin-slide,
.svc-hero-admin-slide-img,
.svc-hero-image-row,
.svc-hero-image-box,
.svc-hero-drone,
.svc-card-image{
display:none !important;
}
.svc-layout-shell{
width:min(1480px,calc(100% - 72px)) !important;
padding:42px 0 58px !important;
}
.svc-section{
position:relative;
margin:0 0 26px !important;
border:1px solid rgba(255,255,255,.075);
border-radius:22px;
background:
radial-gradient(circle at 0% 0%,rgba(245,230,0,.055),transparent 30%),
linear-gradient(180deg,rgba(13,15,16,.72),rgba(7,8,8,.84));
box-shadow:0 24px 80px rgba(0,0,0,.24);
padding:22px;
overflow:hidden;
}
.svc-section:before{
content:"";
position:absolute;
left:22px;
top:0;
width:160px;
height:2px;
background:linear-gradient(90deg,var(--yellow),transparent);
opacity:.75;
}
.svc-section-head{
margin:0 0 18px !important;
padding-bottom:16px;
border-bottom:1px solid rgba(255,255,255,.06);
}
.svc-section-title-wrap{
gap:12px !important;
}
.svc-section-icon{
width:40px !important;
height:40px !important;
border-radius:12px !important;
font-size:15px !important;
background:rgba(245,230,0,.08) !important;
border-color:rgba(245,230,0,.32) !important;
}
.svc-section-title{
font-size:clamp(18px,1.5vw,25px) !important;
letter-spacing:.025em !important;
}
.svc-section-line{
background:linear-gradient(90deg,rgba(245,230,0,.38),transparent) !important;
}
.svc-section-more{
min-height:34px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(245,230,0,.25);
border-radius:999px;
background:rgba(245,230,0,.055);
padding:0 13px;
transition:.18s ease;
}
.svc-section-more:hover{
background:rgba(245,230,0,.11);
border-color:rgba(245,230,0,.46);
transform:translateY(-1px);
}
.svc-card-grid{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:14px !important;
}
.svc-card{
position:relative;
min-height:260px !important;
display:flex !important;
flex-direction:column !important;
border-radius:18px !important;
border:1px solid rgba(255,255,255,.085) !important;
background:
linear-gradient(180deg,rgba(18,20,21,.96),rgba(9,10,11,.98)) !important;
box-shadow:0 18px 56px rgba(0,0,0,.28) !important;
overflow:hidden !important;
transition:.2s ease;
}
.svc-card:hover{
border-color:rgba(245,230,0,.40) !important;
transform:translateY(-3px);
box-shadow:0 24px 72px rgba(0,0,0,.35),0 0 0 1px rgba(245,230,0,.045) !important;
}
.svc-card:before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:3px;
background:linear-gradient(90deg,var(--yellow),rgba(245,230,0,.10),transparent);
opacity:.72;
}
.svc-card-topline{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:18px 18px 0;
}
.svc-card-number{
display:inline-flex;
align-items:center;
min-height:28px;
border:1px solid rgba(245,230,0,.26);
border-radius:999px;
color:var(--yellow);
background:rgba(245,230,0,.065);
padding:0 10px;
font-size:12px;
font-weight:1000;
}
.svc-card-mini-icon{
width:32px;
height:32px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.10);
border-radius:10px;
color:#e8e9e9;
background:rgba(255,255,255,.035);
font-size:13px;
}
.svc-card-content{
flex:1;
padding:16px 18px 18px !important;
}
.svc-card-title-block{
margin-bottom:12px !important;
}
.svc-card-title-main,
.svc-card-title-accent{
line-height:1.04 !important;
letter-spacing:.02em !important;
}
.svc-card-title-main{
font-size:clamp(17px,1.35vw,22px) !important;
}
.svc-card-title-accent{
font-size:clamp(17px,1.35vw,22px) !important;
color:var(--yellow) !important;
}
.svc-card-description{
color:#b9bec1 !important;
font-size:13px !important;
line-height:1.55 !important;
}
.svc-card-bottom{
padding-top:18px !important;
margin-top:auto !important;
}
.svc-card-price{
display:inline-flex;
align-items:center;
min-height:34px;
border:1px solid rgba(245,230,0,.24);
border-radius:999px;
background:rgba(245,230,0,.07);
color:var(--yellow) !important;
padding:0 12px;
font-size:14px !important;
}
.svc-card-arrow{
width:40px !important;
height:40px !important;
border:1px solid rgba(245,230,0,.26);
border-radius:50% !important;
background:rgba(245,230,0,.06);
transition:.18s ease;
}
.svc-card-arrow:hover{
background:var(--yellow);
color:#050606 !important;
transform:translateX(2px);
}
.svc-empty-row,
.svc-empty-box{
border-radius:16px !important;
background:rgba(255,255,255,.035) !important;
}
.svc-bottom-cta{
border-radius:20px !important;
border-color:rgba(245,230,0,.32) !important;
background:
radial-gradient(circle at 0% 0%,rgba(245,230,0,.12),transparent 34%),
linear-gradient(135deg,rgba(245,230,0,.06),rgba(9,10,11,.98) 44%) !important;
padding:24px !important;
}
.svc-bottom-cta-icon{
border-radius:14px !important;
}
.svc-bottom-cta-btn{
border-radius:999px !important;
}
@media(max-width:1180px){
.svc-hero-inner{
grid-template-columns:1fr;
align-items:start;
}
.svc-hero-stat-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.svc-card-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:820px){
.svc-hero-inner,
.svc-layout-shell{
width:calc(100% - 32px) !important;
}
.svc-hero-inner{
padding:50px 0 42px;
}
.svc-hero-stat-grid,
.svc-card-grid{
grid-template-columns:1fr !important;
}
.svc-section{
padding:18px;
border-radius:18px;
}
.svc-section-head,
.svc-section-title-wrap{
align-items:flex-start !important;
}
.svc-section-title-wrap{
flex-wrap:wrap;
}
.svc-section-line{
display:none;
}
.svc-bottom-cta{
align-items:stretch !important;
}
}
@media(max-width:560px){
.svc-main-header{
padding:16px !important;
}
.svc-hero-copy h1 span,
.svc-hero-copy h1 strong{
font-size:38px !important;
}
.svc-hero-tags a{
width:100%;
justify-content:center;
}
.svc-card{
min-height:auto !important;
}
}
/* =========================================================
UPDATE: Leistungen wieder mit oberer Diashow + Kategorien
========================================================= */
.svc-modern-hero,
.svc-hero-inner,
.svc-hero-copy,
.svc-hero-stat-grid,
.svc-hero-tags{
display:none !important;
}
.svc-hero{
min-height:260px !important;
position:relative !important;
overflow:hidden !important;
background:#050607 !important;
border-bottom:1px solid rgba(245,230,0,.42) !important;
}
.svc-hero-admin-slideshow{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
overflow:hidden !important;
opacity:1 !important;
pointer-events:none !important;
background:#050607 !important;
mask-image:none !important;
-webkit-mask-image:none !important;
}
.svc-hero-admin-slideshow:after{
content:"";
position:absolute;
inset:0;
z-index:5;
pointer-events:none;
background:
linear-gradient(90deg,rgba(5,6,7,.78) 0%,rgba(5,6,7,.28) 48%,rgba(5,6,7,.56) 100%),
linear-gradient(180deg,rgba(5,6,7,.08),rgba(5,6,7,.30));
}
.svc-hero-admin-slide-img{
position:absolute !important;
inset:0 !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
opacity:0 !important;
transform:scale(1.035) !important;
transition:opacity .9s ease, transform 4.5s ease !important;
filter:brightness(.82) contrast(1.10) saturate(.95) !important;
display:block !important;
}
.svc-hero-admin-slide-img.is-active,
.svc-hero-admin-slideshow.is-single .svc-hero-admin-slide-img{
opacity:1 !important;
transform:scale(1.01) !important;
}
.svc-layout-shell{
width:min(1480px,calc(100% - 72px)) !important;
padding:26px 0 58px !important;
}
.svc-section{
margin:0 0 26px !important;
border:1px solid rgba(255,255,255,.075) !important;
border-radius:18px !important;
background:linear-gradient(180deg,rgba(13,15,16,.78),rgba(7,8,8,.92)) !important;
padding:22px !important;
box-shadow:0 22px 70px rgba(0,0,0,.24) !important;
}
.svc-section-head{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:18px !important;
margin:0 0 18px !important;
padding-bottom:16px !important;
border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.svc-section-title-wrap{
display:flex !important;
align-items:center !important;
gap:12px !important;
flex:1 !important;
min-width:0 !important;
}
.svc-section-title{
margin:0 !important;
color:#f5f6f6 !important;
font-size:clamp(19px,1.5vw,25px) !important;
font-weight:950 !important;
letter-spacing:.035em !important;
white-space:nowrap !important;
}
.svc-section-line{
display:block !important;
flex:1 !important;
height:1px !important;
background:linear-gradient(90deg,rgba(245,230,0,.48),transparent) !important;
}
.svc-section-more{
min-height:34px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(245,230,0,.25) !important;
border-radius:999px !important;
background:rgba(245,230,0,.055) !important;
color:var(--yellow) !important;
padding:0 13px !important;
}
.svc-card-image{
display:none !important;
}
.svc-card-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:14px !important;
}
.svc-card{
min-height:250px !important;
display:flex !important;
flex-direction:column !important;
border-radius:16px !important;
border:1px solid rgba(255,255,255,.085) !important;
background:linear-gradient(180deg,rgba(18,20,21,.96),rgba(9,10,11,.98)) !important;
box-shadow:0 18px 56px rgba(0,0,0,.28) !important;
overflow:hidden !important;
}
.svc-card-topline{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
padding:18px 18px 0 !important;
}
.svc-card-content{
flex:1 !important;
display:flex !important;
flex-direction:column !important;
padding:16px 18px 18px !important;
}
.svc-card-bottom{
margin-top:auto !important;
}
@media(max-width:1180px){
.svc-card-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:820px){
.svc-layout-shell{
width:calc(100% - 32px) !important;
}
.svc-hero{
min-height:190px !important;
}
.svc-card-grid{
grid-template-columns:1fr !important;
}
.svc-section-head,
.svc-section-title-wrap{
align-items:flex-start !important;
}
.svc-section-title-wrap{
flex-wrap:wrap !important;
}
.svc-section-line{
display:none !important;
}
}
@media(max-width:560px){
.svc-hero{
min-height:155px !important;
}
.svc-section{
padding:18px !important;
}
.svc-card{
min-height:auto !important;
}
}
/* =========================================================
UPDATE: Leistungen wie Referenz-Karten + sichtbare Diashow
- oben wieder echte Diashow sichtbar
- Pakete ohne Bilder, dafür breite moderne Karten
- lange Texte werden nicht abgeschnitten
========================================================= */
.svc-hero{
min-height:320px !important;
position:relative !important;
overflow:hidden !important;
background:#050607 !important;
border-bottom:1px solid rgba(245,230,0,.44) !important;
}
.svc-hero-admin-slideshow{
display:block !important;
position:absolute !important;
inset:0 !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
overflow:hidden !important;
opacity:1 !important;
pointer-events:none !important;
background:#050607 !important;
mask-image:none !important;
-webkit-mask-image:none !important;
}
.svc-hero-admin-slideshow:after{
content:"";
position:absolute;
inset:0;
z-index:6;
pointer-events:none;
background:
linear-gradient(90deg,rgba(5,6,7,.88) 0%,rgba(5,6,7,.54) 42%,rgba(5,6,7,.28) 100%),
linear-gradient(180deg,rgba(5,6,7,.08),rgba(5,6,7,.38));
}
.svc-hero-admin-slide-img{
display:block !important;
position:absolute !important;
inset:0 !important;
z-index:1 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
opacity:0 !important;
transform:scale(1.035) !important;
transition:opacity .9s ease, transform 4.5s ease !important;
filter:brightness(.84) contrast(1.12) saturate(.95) !important;
}
.svc-hero-admin-slide-img.is-active,
.svc-hero-admin-slideshow.is-single .svc-hero-admin-slide-img{
opacity:1 !important;
transform:scale(1.01) !important;
}
.svc-hero-overlay{
position:relative !important;
z-index:9 !important;
width:min(1480px,calc(100% - 72px)) !important;
min-height:320px !important;
margin:0 auto !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:center !important;
padding:38px 0 !important;
pointer-events:none !important;
}
.svc-hero-kicker{
display:inline-flex;
align-items:center;
min-height:30px;
border:1px solid rgba(245,230,0,.32);
border-radius:999px;
background:rgba(245,230,0,.07);
color:var(--yellow);
padding:0 12px;
font-size:12px;
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:14px;
}
.svc-hero-overlay h1{
margin:0 0 14px;
color:#fff;
font-size:clamp(34px,4.6vw,70px);
line-height:.98;
font-weight:950;
letter-spacing:.02em;
text-transform:uppercase;
max-width:760px;
text-shadow:0 22px 70px rgba(0,0,0,.75);
}
.svc-hero-overlay p{
margin:0;
max-width:620px;
color:#d7dadc;
font-size:clamp(15px,1.2vw,18px);
line-height:1.55;
text-shadow:0 14px 40px rgba(0,0,0,.80);
}
.svc-layout-shell{
width:min(1480px,calc(100% - 72px)) !important;
padding:34px 0 58px !important;
}
.svc-section{
margin:0 0 34px !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
}
.svc-section:before{
display:none !important;
}
.svc-section-head{
min-height:70px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:18px !important;
margin:0 0 16px !important;
padding:14px 18px !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:18px !important;
background:
radial-gradient(circle at 0% 0%,rgba(245,230,0,.08),transparent 34%),
linear-gradient(180deg,rgba(15,17,18,.94),rgba(8,9,10,.96)) !important;
box-shadow:0 18px 58px rgba(0,0,0,.24) !important;
}
.svc-section-title-wrap{
display:flex !important;
align-items:center !important;
gap:13px !important;
min-width:0 !important;
flex:1 !important;
}
.svc-section-icon{
width:44px !important;
height:44px !important;
border-radius:14px !important;
border:1px solid rgba(245,230,0,.34) !important;
background:rgba(245,230,0,.08) !important;
color:var(--yellow) !important;
font-size:16px !important;
flex:0 0 auto;
}
.svc-section-title{
margin:0 !important;
color:#f7f8f8 !important;
font-size:clamp(18px,1.45vw,26px) !important;
font-weight:950 !important;
letter-spacing:.035em !important;
white-space:normal !important;
}
.svc-section-line{
display:block !important;
flex:1 !important;
height:1px !important;
background:linear-gradient(90deg,rgba(245,230,0,.48),transparent) !important;
}
.svc-section-more{
height:40px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:9px !important;
border:1px solid rgba(245,230,0,.28) !important;
border-radius:999px !important;
background:rgba(245,230,0,.065) !important;
color:var(--yellow) !important;
padding:0 15px !important;
font-size:12px !important;
font-weight:1000 !important;
text-decoration:none !important;
transition:.18s ease !important;
}
.svc-section-more:hover{
background:rgba(245,230,0,.13) !important;
border-color:rgba(245,230,0,.55) !important;
transform:translateY(-1px) !important;
}
.svc-card-grid{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:16px !important;
}
.svc-card,
.svc-reference-card{
position:relative !important;
min-height:0 !important;
height:auto !important;
display:grid !important;
grid-template-columns:86px minmax(0,1fr) auto !important;
gap:0 !important;
align-items:stretch !important;
overflow:hidden !important;
border:1px solid rgba(255,255,255,.09) !important;
border-radius:20px !important;
background:
linear-gradient(135deg,rgba(17,19,20,.98),rgba(8,9,10,.98)) !important;
box-shadow:0 22px 70px rgba(0,0,0,.30) !important;
transition:.2s ease !important;
}
.svc-card:hover,
.svc-reference-card:hover{
border-color:rgba(245,230,0,.44) !important;
box-shadow:0 30px 90px rgba(0,0,0,.40),0 0 0 1px rgba(245,230,0,.05) !important;
transform:translateY(-3px) !important;
}
.svc-card:before,
.svc-reference-card:before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:4px;
background:linear-gradient(180deg,var(--yellow),rgba(245,230,0,.12),transparent);
opacity:.92;
}
.svc-card-image{
display:none !important;
}
.svc-card-topline{
grid-column:1 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:12px !important;
padding:20px 14px !important;
border-right:1px solid rgba(255,255,255,.07) !important;
background:linear-gradient(180deg,rgba(245,230,0,.06),rgba(255,255,255,.02)) !important;
}
.svc-card-number{
width:44px !important;
height:44px !important;
display:grid !important;
place-items:center !important;
padding:0 !important;
border:1px solid rgba(245,230,0,.35) !important;
border-radius:14px !important;
background:rgba(245,230,0,.10) !important;
color:var(--yellow) !important;
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.04em !important;
}
.svc-card-mini-icon{
width:36px !important;
height:36px !important;
display:grid !important;
place-items:center !important;
border:1px solid rgba(255,255,255,.11) !important;
border-radius:12px !important;
background:rgba(255,255,255,.035) !important;
color:#fff !important;
font-size:14px !important;
}
.svc-card-content{
grid-column:2 !important;
min-width:0 !important;
display:flex !important;
flex-direction:column !important;
padding:22px 22px 20px !important;
}
.svc-card-title-block{
margin:0 0 12px !important;
}
.svc-card-title-main,
.svc-card-title-accent{
margin:0 !important;
line-height:1.05 !important;
text-transform:uppercase !important;
font-weight:950 !important;
letter-spacing:.02em !important;
word-break:normal !important;
overflow-wrap:anywhere !important;
}
.svc-card-title-main{
color:#f8f9f9 !important;
font-size:clamp(18px,1.45vw,25px) !important;
}
.svc-card-title-accent{
color:var(--yellow) !important;
font-size:clamp(18px,1.45vw,25px) !important;
margin-top:3px !important;
}
.svc-card-description{
margin:0 !important;
color:#c1c6c8 !important;
font-size:14px !important;
line-height:1.62 !important;
white-space:normal !important;
overflow:visible !important;
display:block !important;
max-height:none !important;
}
.svc-card-bottom{
grid-column:3 !important;
min-width:185px !important;
margin:0 !important;
padding:22px 18px !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
justify-content:space-between !important;
gap:18px !important;
border-left:1px solid rgba(255,255,255,.07) !important;
background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.10)) !important;
}
.svc-card-price{
min-height:40px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(245,230,0,.32) !important;
border-radius:999px !important;
background:rgba(245,230,0,.09) !important;
color:var(--yellow) !important;
padding:0 14px !important;
font-size:14px !important;
font-weight:1000 !important;
white-space:nowrap !important;
}
.svc-card-arrow{
min-width:126px !important;
height:42px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
border:1px solid rgba(245,230,0,.30) !important;
border-radius:999px !important;
background:rgba(245,230,0,.06) !important;
color:var(--yellow) !important;
padding:0 14px !important;
font-size:12px !important;
font-weight:1000 !important;
letter-spacing:.04em !important;
text-decoration:none !important;
transition:.18s ease !important;
}
.svc-card-arrow:hover{
background:var(--yellow) !important;
color:#050606 !important;
transform:translateY(-1px) !important;
}
.svc-empty-row,
.svc-empty-box{
border-radius:18px !important;
border:1px solid rgba(245,230,0,.16) !important;
background:rgba(255,255,255,.035) !important;
}
.svc-bottom-cta{
border-radius:20px !important;
border-color:rgba(245,230,0,.35) !important;
background:
radial-gradient(circle at 0% 0%,rgba(245,230,0,.12),transparent 34%),
linear-gradient(135deg,rgba(245,230,0,.055),rgba(9,10,11,.98) 45%) !important;
padding:24px !important;
}
.svc-bottom-cta-btn{
border-radius:999px !important;
}
@media(max-width:1320px){
.svc-card-grid{
grid-template-columns:1fr !important;
}
}
@media(max-width:820px){
.svc-hero{
min-height:230px !important;
}
.svc-hero-overlay,
.svc-layout-shell{
width:calc(100% - 32px) !important;
}
.svc-hero-overlay{
min-height:230px !important;
padding:30px 0 !important;
}
.svc-section-head{
align-items:flex-start !important;
flex-direction:column !important;
}
.svc-section-title-wrap{
width:100% !important;
}
.svc-section-line{
display:none !important;
}
.svc-section-more{
width:100% !important;
}
.svc-card,
.svc-reference-card{
grid-template-columns:1fr !important;
}
.svc-card-topline{
grid-column:1 !important;
flex-direction:row !important;
justify-content:space-between !important;
border-right:0 !important;
border-bottom:1px solid rgba(255,255,255,.07) !important;
padding:16px !important;
}
.svc-card-content{
grid-column:1 !important;
padding:18px !important;
}
.svc-card-bottom{
grid-column:1 !important;
min-width:0 !important;
flex-direction:row !important;
align-items:center !important;
border-left:0 !important;
border-top:1px solid rgba(255,255,255,.07) !important;
padding:16px 18px !important;
}
}
@media(max-width:560px){
.svc-hero{
min-height:210px !important;
}
.svc-hero-overlay{
min-height:210px !important;
}
.svc-hero-kicker{
font-size:11px;
}
.svc-hero-overlay h1{
font-size:32px;
}
.svc-card-bottom{
flex-direction:column !important;
align-items:stretch !important;
}
.svc-card-price,
.svc-card-arrow{
width:100% !important;
}
}
/* ===== UPDATE: Leistungen Hero Text ersetzt durch transparenten Projekttitel ===== */
.svc-hero-project-overlay{
inset:0 !important;
width:100% !important;
min-height:100% !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:26px !important;
text-align:center !important;
pointer-events:none !important;
}
.svc-hero-project-title{
margin:0 !important;
max-width:1100px !important;
color:rgba(255,255,255,.10) !important;
-webkit-text-stroke:1px rgba(255,255,255,.46) !important;
text-shadow:0 0 34px rgba(245,230,0,.12),0 18px 55px rgba(0,0,0,.58) !important;
font-size:clamp(34px,6vw,92px) !important;
line-height:.95 !important;
font-weight:1000 !important;
letter-spacing:.045em !important;
text-transform:uppercase !important;
}
@media(max-width:720px){
.svc-hero-project-title{
font-size:clamp(28px,10vw,56px) !important;
letter-spacing:.025em !important;
-webkit-text-stroke:.8px rgba(255,255,255,.42) !important;
}
}
/* ===== UPDATE: Leistungen Kategorien + Pakete Premium-Layout ===== */
.svc-layout-shell{
width:min(1500px,calc(100% - 72px)) !important;
padding:34px 0 64px !important;
}
.svc-category-nav{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:12px !important;
margin:0 0 24px !important;
}
.svc-category-nav-item{
position:relative !important;
min-height:74px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:16px !important;
overflow:hidden !important;
border:1px solid rgba(255,255,255,.09) !important;
border-radius:18px !important;
background:
radial-gradient(circle at 10% 0%,rgba(245,230,0,.10),transparent 38%),
linear-gradient(135deg,rgba(18,20,21,.98),rgba(7,8,9,.98)) !important;
padding:18px 18px !important;
text-decoration:none !important;
box-shadow:0 20px 60px rgba(0,0,0,.22) !important;
transition:.18s ease !important;
}
.svc-category-nav-item:before{
content:"";
position:absolute;
left:0;
top:14px;
bottom:14px;
width:3px;
border-radius:999px;
background:var(--yellow);
opacity:.85;
}
.svc-category-nav-item:hover{
border-color:rgba(245,230,0,.42) !important;
transform:translateY(-2px) !important;
box-shadow:0 26px 80px rgba(0,0,0,.34),0 0 0 1px rgba(245,230,0,.04) !important;
}
.svc-category-nav-item span{
position:relative;
color:#fff;
font-size:13px;
font-weight:1000;
letter-spacing:.055em;
text-transform:uppercase;
line-height:1.25;
}
.svc-category-nav-item strong{
position:relative;
width:42px;
height:42px;
display:grid;
place-items:center;
border:1px solid rgba(245,230,0,.28);
border-radius:14px;
background:rgba(245,230,0,.08);
color:var(--yellow);
font-size:18px;
font-weight:1000;
}
.svc-category-section,
.svc-section.svc-category-section{
position:relative !important;
margin:0 0 28px !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
overflow:visible !important;
}
.svc-section.svc-category-section:before{
display:none !important;
}
.svc-category-panel{
position:relative !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) 260px !important;
gap:20px !important;
overflow:hidden !important;
margin:0 0 14px !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:24px !important;
background:
linear-gradient(90deg,rgba(245,230,0,.10),transparent 30%),
radial-gradient(circle at 100% 0%,rgba(255,255,255,.08),transparent 27%),
linear-gradient(135deg,rgba(16,18,19,.98),rgba(8,9,10,.99)) !important;
box-shadow:0 24px 78px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.015) !important;
}
.svc-category-panel:before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:5px;
background:linear-gradient(180deg,var(--yellow),rgba(245,230,0,.18),transparent);
}
.svc-category-panel:after{
content:"";
position:absolute;
right:22px;
top:50%;
width:150px;
height:150px;
border:1px solid rgba(245,230,0,.08);
border-radius:50%;
transform:translateY(-50%);
pointer-events:none;
}
.svc-category-main{
position:relative !important;
z-index:1 !important;
min-width:0 !important;
padding:26px 30px 26px 32px !important;
}
.svc-category-eyebrow{
display:inline-flex !important;
align-items:center !important;
min-height:26px !important;
border:1px solid rgba(245,230,0,.24) !important;
border-radius:999px !important;
background:rgba(245,230,0,.065) !important;
color:var(--yellow) !important;
padding:0 10px !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.11em !important;
text-transform:uppercase !important;
}
.svc-category-title-row{
display:flex !important;
align-items:center !important;
gap:14px !important;
margin:15px 0 10px !important;
min-width:0 !important;
}
.svc-category-icon{
width:48px !important;
height:48px !important;
display:grid !important;
place-items:center !important;
flex:0 0 48px !important;
border:1px solid rgba(245,230,0,.34) !important;
border-radius:16px !important;
background:rgba(245,230,0,.10) !important;
color:var(--yellow) !important;
font-size:17px !important;
font-weight:1000 !important;
box-shadow:0 0 36px rgba(245,230,0,.06) !important;
}
.svc-category-section .svc-section-title{
margin:0 !important;
color:#fff !important;
font-size:clamp(24px,2.35vw,42px) !important;
line-height:1.02 !important;
font-weight:1000 !important;
letter-spacing:.035em !important;
text-transform:uppercase !important;
overflow-wrap:anywhere !important;
}
.svc-category-description{
max-width:850px !important;
margin:0 !important;
color:#c4c9cb !important;
font-size:15px !important;
line-height:1.58 !important;
}
.svc-category-side{
position:relative !important;
z-index:1 !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
justify-content:space-between !important;
gap:18px !important;
padding:24px !important;
border-left:1px solid rgba(255,255,255,.08) !important;
background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.08)) !important;
}
.svc-category-count{
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
text-align:right !important;
}
.svc-category-count strong{
color:rgba(245,230,0,.96) !important;
font-size:48px !important;
line-height:.9 !important;
font-weight:1000 !important;
letter-spacing:-.04em !important;
}
.svc-category-count span{
margin-top:6px !important;
color:#aeb4b7 !important;
font-size:12px !important;
font-weight:900 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
.svc-category-request{
min-height:46px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:9px !important;
border:1px solid rgba(245,230,0,.35) !important;
border-radius:999px !important;
background:rgba(245,230,0,.08) !important;
color:var(--yellow) !important;
padding:0 18px !important;
font-size:12px !important;
font-weight:1000 !important;
letter-spacing:.04em !important;
text-decoration:none !important;
text-transform:uppercase !important;
transition:.18s ease !important;
}
.svc-category-request:hover{
background:var(--yellow) !important;
color:#050606 !important;
transform:translateY(-1px) !important;
}
.svc-package-grid{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:14px !important;
}
.svc-package-card{
position:relative !important;
min-height:100% !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
border:1px solid rgba(255,255,255,.09) !important;
border-radius:22px !important;
background:
radial-gradient(circle at 0% 0%,rgba(245,230,0,.085),transparent 33%),
linear-gradient(180deg,rgba(16,18,19,.98),rgba(8,9,10,.99)) !important;
box-shadow:0 18px 58px rgba(0,0,0,.24) !important;
transition:.20s ease !important;
}
.svc-package-card:before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 28%,rgba(245,230,0,.035) 100%);
opacity:.72;
}
.svc-package-card:hover{
border-color:rgba(245,230,0,.42) !important;
transform:translateY(-3px) !important;
box-shadow:0 30px 86px rgba(0,0,0,.36),0 0 0 1px rgba(245,230,0,.05) !important;
}
.svc-package-head{
position:relative !important;
z-index:1 !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
padding:18px 18px 0 !important;
}
.svc-package-number{
width:44px !important;
height:44px !important;
display:grid !important;
place-items:center !important;
border:1px solid rgba(245,230,0,.30) !important;
border-radius:15px !important;
background:rgba(245,230,0,.09) !important;
color:var(--yellow) !important;
font-size:13px !important;
font-weight:1000 !important;
letter-spacing:.04em !important;
}
.svc-package-price{
min-height:38px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(245,230,0,.30) !important;
border-radius:999px !important;
background:rgba(245,230,0,.075) !important;
color:var(--yellow) !important;
padding:0 13px !important;
font-size:13px !important;
font-weight:1000 !important;
white-space:nowrap !important;
}
.svc-package-body{
position:relative !important;
z-index:1 !important;
flex:1 1 auto !important;
display:flex !important;
flex-direction:column !important;
padding:20px 20px 18px !important;
}
.svc-package-title{
margin:0 0 13px !important;
color:#fff !important;
font-size:clamp(19px,1.45vw,26px) !important;
line-height:1.05 !important;
font-weight:1000 !important;
letter-spacing:.025em !important;
text-transform:uppercase !important;
overflow-wrap:anywhere !important;
}
.svc-package-title span,
.svc-package-title em{
display:block !important;
font-style:normal !important;
}
.svc-package-title em{
color:var(--yellow) !important;
margin-top:3px !important;
}
.svc-package-description{
color:#c4c9cb !important;
font-size:14px !important;
line-height:1.62 !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}
.svc-package-description strong,
.svc-package-description b{
color:#fff !important;
}
.svc-package-footer{
position:relative !important;
z-index:1 !important;
margin-top:auto !important;
padding:0 20px 20px !important;
}
.svc-package-link{
width:100% !important;
min-height:46px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:9px !important;
border:1px solid rgba(255,255,255,.12) !important;
border-radius:15px !important;
background:rgba(255,255,255,.045) !important;
color:#fff !important;
padding:0 16px !important;
font-size:12px !important;
font-weight:1000 !important;
letter-spacing:.055em !important;
text-decoration:none !important;
text-transform:uppercase !important;
transition:.18s ease !important;
}
.svc-package-link:hover{
border-color:rgba(245,230,0,.55) !important;
background:rgba(245,230,0,.13) !important;
color:var(--yellow) !important;
transform:translateY(-1px) !important;
}
.svc-category-section .svc-empty-row{
margin-top:0 !important;
border-radius:18px !important;
border:1px solid rgba(245,230,0,.16) !important;
background:rgba(255,255,255,.035) !important;
padding:22px !important;
}
@media(max-width:1280px){
.svc-package-grid{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:980px){
.svc-layout-shell{
width:calc(100% - 34px) !important;
}
.svc-category-nav{
grid-template-columns:1fr !important;
}
.svc-category-panel{
grid-template-columns:1fr !important;
}
.svc-category-side{
border-left:0 !important;
border-top:1px solid rgba(255,255,255,.08) !important;
flex-direction:row !important;
align-items:center !important;
}
.svc-category-count{
align-items:flex-start !important;
text-align:left !important;
}
}
@media(max-width:720px){
.svc-package-grid{
grid-template-columns:1fr !important;
}
.svc-category-main{
padding:23px 20px 22px !important;
}
.svc-category-title-row{
align-items:flex-start !important;
flex-direction:column !important;
}
.svc-category-side{
flex-direction:column !important;
align-items:stretch !important;
padding:18px 20px 20px !important;
}
.svc-category-request{
width:100% !important;
}
.svc-category-section .svc-section-title{
font-size:28px !important;
}
}
@media(max-width:460px){
.svc-package-head{
align-items:flex-start !important;
flex-direction:column !important;
}
.svc-package-price{
width:100% !important;
}
}
/* ===== UPDATE: Leistungskategorien kompakter + Kategorie-Nummern entfernt ===== */
.svc-category-eyebrow{
display:none !important;
}
.svc-category-panel{
grid-template-columns:minmax(0,1fr) 230px !important;
gap:14px !important;
margin:0 0 12px !important;
border-radius:20px !important;
}
.svc-category-panel:before{
width:4px !important;
}
.svc-category-panel:after{
right:20px !important;
width:108px !important;
height:108px !important;
opacity:.85 !important;
}
.svc-category-main{
padding:20px 26px 20px 30px !important;
}
.svc-category-title-row{
gap:12px !important;
margin:0 0 8px !important;
}
.svc-category-icon{
width:42px !important;
height:42px !important;
flex:0 0 42px !important;
border-radius:14px !important;
font-size:15px !important;
}
.svc-category-section .svc-section-title{
font-size:clamp(22px,2.05vw,36px) !important;
letter-spacing:.03em !important;
}
.svc-category-description{
max-width:880px !important;
font-size:14px !important;
line-height:1.45 !important;
}
.svc-category-side{
gap:12px !important;
padding:17px 18px !important;
}
.svc-category-count strong{
font-size:38px !important;
line-height:.9 !important;
}
.svc-category-count span{
margin-top:5px !important;
font-size:11px !important;
letter-spacing:.075em !important;
}
.svc-category-request{
min-height:40px !important;
padding:0 15px !important;
font-size:11px !important;
}
@media(max-width:980px){
.svc-category-panel{
grid-template-columns:1fr !important;
}
.svc-category-main{
padding:20px 22px 18px !important;
}
.svc-category-side{
padding:15px 20px 18px !important;
}
}
@media(max-width:720px){
.svc-category-title-row{
flex-direction:row !important;
align-items:center !important;
}
.svc-category-section .svc-section-title{
font-size:25px !important;
}
}
/* ===== UPDATE: Kategorie-Anfragen in Containern entfernt ===== */
.svc-category-side{
justify-content:center !important;
}
.svc-category-request{
display:none !important;
}
/* ===== UPDATE: Paketnummern entfernt + Paketkarten moderner ===== */
.svc-package-grid{
gap:16px !important;
}
.svc-package-card{
position:relative !important;
border-radius:20px !important;
border:1px solid rgba(255,255,255,.11) !important;
background:
linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015) 46%,rgba(0,0,0,.08)),
radial-gradient(circle at 0 0,rgba(245,230,0,.12),transparent 28%),
radial-gradient(circle at 100% 100%,rgba(255,255,255,.055),transparent 30%),
linear-gradient(145deg,#111416 0%,#090a0b 100%) !important;
box-shadow:0 18px 58px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.svc-package-card:before{
content:"" !important;
position:absolute !important;
inset:0 !important;
border-radius:inherit !important;
pointer-events:none !important;
background:
linear-gradient(90deg,rgba(245,230,0,.55),rgba(245,230,0,.10) 34%,transparent 64%) left top/100% 2px no-repeat,
linear-gradient(135deg,rgba(255,255,255,.075),transparent 30%) !important;
opacity:.75 !important;
}
.svc-package-card:after{
content:"" !important;
position:absolute !important;
left:20px !important;
top:20px !important;
width:42px !important;
height:4px !important;
border-radius:999px !important;
background:var(--yellow) !important;
box-shadow:0 0 22px rgba(245,230,0,.22) !important;
opacity:.9 !important;
pointer-events:none !important;
}
.svc-package-card:hover{
border-color:rgba(245,230,0,.48) !important;
transform:translateY(-4px) !important;
box-shadow:0 30px 90px rgba(0,0,0,.40),0 0 0 1px rgba(245,230,0,.055), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.svc-package-number{
display:none !important;
}
.svc-package-head{
justify-content:flex-end !important;
align-items:flex-start !important;
min-height:54px !important;
padding:18px 18px 0 78px !important;
}
.svc-package-price{
min-height:34px !important;
border-radius:999px !important;
border:1px solid rgba(245,230,0,.34) !important;
background:rgba(245,230,0,.095) !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.025) !important;
padding:0 13px !important;
font-size:12px !important;
letter-spacing:.045em !important;
}
.svc-package-body{
padding:15px 22px 18px !important;
}
.svc-package-title{
margin:0 0 14px !important;
font-size:clamp(19px,1.28vw,24px) !important;
line-height:1.16 !important;
letter-spacing:.02em !important;
}
.svc-package-title span,
.svc-package-title em{
display:inline !important;
}
.svc-package-title em{
margin-left:6px !important;
color:var(--yellow) !important;
}
.svc-package-description{
position:relative !important;
margin-top:14px !important;
padding-top:16px !important;
border-top:1px solid rgba(255,255,255,.075) !important;
color:#d1d5d7 !important;
font-size:14.5px !important;
line-height:1.7 !important;
}
.svc-package-footer{
padding:0 22px 22px !important;
}
.svc-package-link{
min-height:44px !important;
border-radius:14px !important;
border-color:rgba(245,230,0,.26) !important;
background:linear-gradient(180deg,rgba(245,230,0,.10),rgba(245,230,0,.045)) !important;
color:var(--yellow) !important;
letter-spacing:.06em !important;
}
.svc-package-link:hover{
background:linear-gradient(180deg,var(--yellow),#e8da00) !important;
border-color:var(--yellow) !important;
color:#050606 !important;
box-shadow:0 13px 34px rgba(245,230,0,.12) !important;
}
@media(max-width:460px){
.svc-package-head{
align-items:flex-end !important;
flex-direction:row !important;
padding:18px 18px 0 72px !important;
}
.svc-package-price{
width:auto !important;
}
}
/* ===== UPDATE: Paket anfragen als Login-/Registrieren-Popup ===== */
.package-login-modal{
position:fixed !important;
inset:0 !important;
z-index:120 !important;
display:none !important;
align-items:center !important;
justify-content:center !important;
padding:24px !important;
}
.package-login-modal.is-open{
display:flex !important;
}
.package-login-backdrop{
position:absolute !important;
inset:0 !important;
background:rgba(0,0,0,.76) !important;
backdrop-filter:blur(7px) !important;
}
.package-login-card{
position:relative !important;
z-index:2 !important;
width:min(100%,560px) !important;
max-height:calc(100vh - 48px) !important;
overflow:auto !important;
border:1px solid rgba(245,230,0,.22) !important;
border-radius:22px !important;
background:
radial-gradient(circle at 0 0,rgba(245,230,0,.13),transparent 32%),
radial-gradient(circle at 100% 100%,rgba(255,255,255,.06),transparent 28%),
linear-gradient(180deg,rgba(16,18,20,.97),rgba(7,8,9,.98)) !important;
box-shadow:0 34px 110px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.04) !important;
padding:30px !important;
}
.package-login-close{
position:absolute !important;
right:18px !important;
top:16px !important;
width:38px !important;
height:38px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border:1px solid rgba(255,255,255,.13) !important;
border-radius:12px !important;
background:rgba(255,255,255,.04) !important;
color:#fff !important;
font-size:28px !important;
line-height:1 !important;
cursor:pointer !important;
transition:.18s ease !important;
}
.package-login-close:hover{
border-color:rgba(245,230,0,.55) !important;
color:var(--yellow) !important;
}
.package-login-head{
padding-right:44px !important;
margin-bottom:18px !important;
}
.package-login-kicker{
display:inline-flex !important;
align-items:center !important;
min-height:26px !important;
border:1px solid rgba(245,230,0,.28) !important;
border-radius:999px !important;
background:rgba(245,230,0,.08) !important;
color:var(--yellow) !important;
padding:0 10px !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
}
.package-login-card h2{
margin:14px 0 8px !important;
color:#fff !important;
font-size:clamp(25px,2vw,34px) !important;
line-height:1.05 !important;
font-weight:1000 !important;
letter-spacing:.01em !important;
}
.package-login-card p{
margin:0 !important;
color:#bfc4c7 !important;
font-size:14px !important;
line-height:1.55 !important;
}
.package-login-card p strong{
color:var(--yellow) !important;
}
.package-auth-tabs{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:8px !important;
margin:18px 0 !important;
padding:5px !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:15px !important;
background:rgba(255,255,255,.035) !important;
}
.package-auth-tab{
min-height:42px !important;
border:0 !important;
border-radius:11px !important;
background:transparent !important;
color:#c9cdd0 !important;
cursor:pointer !important;
font-size:12px !important;
font-weight:1000 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
transition:.18s ease !important;
}
.package-auth-tab.is-active{
background:linear-gradient(180deg,var(--yellow),#e6d700) !important;
color:#050606 !important;
box-shadow:0 10px 30px rgba(245,230,0,.10) !important;
}
.package-auth-form{
display:none !important;
gap:12px !important;
}
.package-auth-form.is-active{
display:grid !important;
}
.package-auth-form label{
display:block !important;
}
.package-auth-form label span{
display:block !important;
margin:0 0 7px !important;
color:#aeb4b8 !important;
font-size:12px !important;
font-weight:900 !important;
}
.package-auth-form input{
width:100% !important;
height:52px !important;
border:1px solid rgba(255,255,255,.11) !important;
border-radius:12px !important;
background:rgba(255,255,255,.045) !important;
color:#fff !important;
padding:0 15px !important;
outline:0 !important;
}
.package-auth-form input:focus{
border-color:rgba(245,230,0,.65) !important;
box-shadow:0 0 0 3px rgba(245,230,0,.08) !important;
}
.package-auth-row{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
margin:-2px 0 2px !important;
}
.package-auth-row a{
color:var(--yellow) !important;
font-size:12px !important;
font-weight:900 !important;
}
.package-auth-form .btn{
width:100% !important;
height:52px !important;
border-radius:14px !important;
margin-top:4px !important;
}
.package-register-grid{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:12px !important;
}
body.package-login-modal-open{
overflow:hidden !important;
}
@media(max-width:620px){
.package-login-modal{
padding:16px !important;
}
.package-login-card{
padding:24px 18px 20px !important;
border-radius:18px !important;
}
.package-login-head{
padding-right:42px !important;
}
.package-register-grid{
grid-template-columns:1fr !important;
gap:12px !important;
}
.package-auth-tabs{
grid-template-columns:1fr !important;
}
}
/* ===== UPDATE: Pakete als moderne horizontale Angebotsliste ===== */
.svc-package-grid{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
}
.svc-offer-card{
position:relative;
display:grid;
grid-template-columns:minmax(230px,.82fr) minmax(0,1.75fr) minmax(180px,.56fr);
gap:22px;
align-items:stretch;
min-height:150px;
padding:22px;
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
background:
linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.016) 52%,rgba(0,0,0,.10)),
radial-gradient(circle at 0 0,rgba(245,230,0,.105),transparent 30%),
linear-gradient(145deg,#111416 0%,#080909 100%);
box-shadow:0 18px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035);
overflow:hidden;
transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.svc-offer-card:before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:3px;
background:linear-gradient(180deg,var(--yellow),rgba(245,230,0,.15),transparent);
opacity:.95;
}
.svc-offer-card:after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(135deg,rgba(255,255,255,.065),transparent 24%);
opacity:.8;
}
.svc-offer-card:hover{
border-color:rgba(245,230,0,.42);
transform:translateY(-2px);
box-shadow:0 28px 86px rgba(0,0,0,.38),0 0 0 1px rgba(245,230,0,.045), inset 0 1px 0 rgba(255,255,255,.045);
}
.svc-offer-title-zone,
.svc-offer-description,
.svc-offer-action{
position:relative;
z-index:2;
}
.svc-offer-title-zone{
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
padding-right:8px;
}
.svc-offer-eyebrow{
width:max-content;
max-width:100%;
display:inline-flex;
align-items:center;
min-height:26px;
padding:0 10px;
margin-bottom:14px;
border:1px solid rgba(245,230,0,.24);
border-radius:999px;
background:rgba(245,230,0,.075);
color:var(--yellow);
font-size:10px;
font-weight:950;
letter-spacing:.105em;
text-transform:uppercase;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.svc-offer-title{
margin:0;
color:#fff;
font-size:clamp(18px,1.35vw,25px);
line-height:1.14;
letter-spacing:.025em;
text-transform:uppercase;
overflow-wrap:anywhere;
}
.svc-offer-title span,
.svc-offer-title em{
display:block;
font-style:normal;
}
.svc-offer-title em{
margin-top:3px;
color:var(--yellow);
}
.svc-offer-description{
display:flex;
align-items:center;
padding:4px 22px;
border-left:1px solid rgba(255,255,255,.08);
border-right:1px solid rgba(255,255,255,.08);
color:#d4d8da;
font-size:14.5px;
line-height:1.72;
overflow-wrap:anywhere;
word-break:normal;
}
.svc-offer-description strong,
.svc-offer-description b{
color:#fff;
}
.svc-offer-action{
display:flex;
flex-direction:column;
justify-content:center;
align-items:stretch;
gap:12px;
min-width:0;
}
.svc-offer-price{
display:flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 14px;
border:1px solid rgba(245,230,0,.32);
border-radius:999px;
background:rgba(245,230,0,.085);
color:var(--yellow);
font-size:13px;
font-weight:950;
letter-spacing:.06em;
text-align:center;
white-space:normal;
overflow-wrap:anywhere;
}
.svc-offer-link{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:46px;
padding:0 14px;
border:1px solid rgba(245,230,0,.30);
border-radius:13px;
background:linear-gradient(180deg,rgba(245,230,0,.12),rgba(245,230,0,.045));
color:var(--yellow);
font-size:12px;
font-weight:950;
letter-spacing:.075em;
text-transform:uppercase;
transition:.18s ease;
}
.svc-offer-link:hover{
background:linear-gradient(180deg,var(--yellow),#e7d900);
border-color:var(--yellow);
color:#050606;
box-shadow:0 14px 34px rgba(245,230,0,.12);
transform:translateY(-1px);
}
.svc-offer-link span{
font-size:15px;
line-height:1;
}
@media(max-width:1100px){
.svc-offer-card{
grid-template-columns:minmax(210px,.9fr) minmax(0,1.45fr);
}
.svc-offer-action{
grid-column:1/-1;
flex-direction:row;
align-items:center;
}
.svc-offer-price,
.svc-offer-link{
flex:1 1 0;
}
.svc-offer-description{
border-right:0;
padding-right:0;
}
}
@media(max-width:720px){
.svc-package-grid{
gap:12px !important;
}
.svc-offer-card{
grid-template-columns:1fr;
gap:15px;
padding:20px 18px;
border-radius:16px;
}
.svc-offer-title-zone{
padding-right:0;
}
.svc-offer-eyebrow{
margin-bottom:10px;
}
.svc-offer-description{
display:block;
padding:14px 0 0;
border-left:0;
border-right:0;
border-top:1px solid rgba(255,255,255,.08);
font-size:14px;
line-height:1.68;
}
.svc-offer-action{
flex-direction:column;
}
.svc-offer-price,
.svc-offer-link{
width:100%;
}
}
/* ===== LEISTUNGEN: Premium Accordion Pakete ===== */
.svc-package-grid.svc-accordion-list{
display:grid !important;
grid-template-columns:1fr !important;
gap:14px !important;
align-items:stretch !important;
}
.svc-accordion-card{
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.105);
border-radius:18px;
background:
linear-gradient(135deg,rgba(245,230,0,.055),transparent 30%),
linear-gradient(180deg,rgba(16,18,20,.94),rgba(8,9,10,.98));
box-shadow:0 18px 55px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.02);
transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.svc-accordion-card:before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:linear-gradient(180deg,var(--yellow),rgba(245,230,0,.16));
opacity:.88;
}
.svc-accordion-card:after{
content:"";
position:absolute;
right:-90px;
top:-120px;
width:260px;
height:260px;
border-radius:50%;
background:radial-gradient(circle,rgba(245,230,0,.10),transparent 62%);
pointer-events:none;
}
.svc-accordion-card:hover,
.svc-accordion-card.is-open{
border-color:rgba(245,230,0,.38);
transform:translateY(-2px);
box-shadow:0 24px 75px rgba(0,0,0,.38), 0 0 0 1px rgba(245,230,0,.055);
}
.svc-accordion-top{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(230px,300px);
gap:22px;
align-items:center;
padding:22px 24px 22px 28px;
}
.svc-accordion-main{
min-width:0;
}
.svc-accordion-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:10px;
color:rgba(245,230,0,.92);
font-size:11px;
line-height:1;
font-weight:950;
letter-spacing:.16em;
text-transform:uppercase;
}
.svc-accordion-kicker:before{
content:"";
display:block;
width:22px;
height:1px;
background:var(--yellow);
opacity:.8;
}
.svc-accordion-title{
margin:0;
display:flex;
flex-wrap:wrap;
gap:.25em;
align-items:baseline;
color:#fff;
font-size:clamp(20px,1.8vw,30px);
line-height:1.02;
letter-spacing:-.04em;
text-transform:uppercase;
}
.svc-accordion-title span,
.svc-accordion-title em{
display:inline;
font-style:normal;
overflow-wrap:anywhere;
}
.svc-accordion-title em{
color:var(--yellow);
}
.svc-accordion-preview{
max-width:880px;
margin:12px 0 0;
color:#c8cccf;
font-size:14px;
line-height:1.6;
overflow-wrap:anywhere;
}
.svc-accordion-side{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:14px;
min-width:0;
}
.svc-accordion-price{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:0 14px;
border:1px solid rgba(245,230,0,.34);
border-radius:999px;
background:rgba(245,230,0,.10);
color:var(--yellow);
font-size:15px;
line-height:1;
font-weight:950;
white-space:nowrap;
box-shadow:0 0 32px rgba(245,230,0,.08);
}
.svc-accordion-actions{
display:flex;
gap:10px;
justify-content:flex-end;
align-items:center;
flex-wrap:wrap;
}
.svc-accordion-toggle,
.svc-accordion-request{
min-height:42px;
border-radius:12px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:0 14px;
font-size:12px;
line-height:1;
font-weight:950;
letter-spacing:.04em;
text-transform:uppercase;
transition:.18s ease;
cursor:pointer;
white-space:nowrap;
}
.svc-accordion-toggle{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.045);
color:#fff;
}
.svc-accordion-toggle:hover{
border-color:rgba(245,230,0,.42);
color:var(--yellow);
background:rgba(245,230,0,.08);
}
.svc-accordion-toggle .toggle-hide{
display:none;
}
.svc-accordion-card.is-open .svc-accordion-toggle .toggle-show{
display:none;
}
.svc-accordion-card.is-open .svc-accordion-toggle .toggle-hide{
display:inline;
}
.svc-accordion-request{
border:1px solid rgba(245,230,0,.52);
background:linear-gradient(180deg,var(--yellow),#dfd100);
color:#050606;
box-shadow:0 14px 34px rgba(245,230,0,.10);
}
.svc-accordion-request:hover{
transform:translateY(-1px);
filter:brightness(1.06);
box-shadow:0 18px 42px rgba(245,230,0,.14);
}
.svc-accordion-request span{
font-size:14px;
}
.svc-accordion-details{
position:relative;
z-index:2;
padding:0 24px 24px 28px;
}
.svc-accordion-detail-box{
border-top:1px solid rgba(255,255,255,.08);
padding-top:18px;
display:grid;
grid-template-columns:210px minmax(0,1fr);
gap:20px;
}
.svc-accordion-detail-box span{
color:#9ba0a6;
font-size:12px;
font-weight:950;
letter-spacing:.12em;
text-transform:uppercase;
}
.svc-accordion-detail-box p{
margin:0;
color:#e4e7e8;
font-size:14px;
line-height:1.78;
overflow-wrap:anywhere;
}
.svc-accordion-detail-box p strong,
.svc-accordion-detail-box p b{
color:#fff;
}
@media(max-width:980px){
.svc-accordion-top{
grid-template-columns:1fr;
gap:18px;
padding:20px 18px 20px 22px;
}
.svc-accordion-side{
align-items:flex-start;
}
.svc-accordion-actions{
justify-content:flex-start;
width:100%;
}
.svc-accordion-toggle,
.svc-accordion-request{
flex:1 1 190px;
}
.svc-accordion-details{
padding:0 18px 20px 22px;
}
.svc-accordion-detail-box{
grid-template-columns:1fr;
gap:10px;
}
}
@media(max-width:560px){
.svc-accordion-card{
border-radius:15px;
}
.svc-accordion-title{
font-size:22px;
}
.svc-accordion-preview,
.svc-accordion-detail-box p{
font-size:13px;
}
.svc-accordion-price,
.svc-accordion-toggle,
.svc-accordion-request{
width:100%;
}
}
/* ===== UPDATE: Leistungen Accordion Pakete 4 nebeneinander ===== */
.svc-package-grid.svc-accordion-list{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:16px !important;
align-items:stretch !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card{
min-width:0 !important;
height:100% !important;
display:flex !important;
flex-direction:column !important;
border-radius:18px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card:before{
left:0 !important;
right:0 !important;
top:0 !important;
bottom:auto !important;
width:auto !important;
height:3px !important;
background:linear-gradient(90deg,var(--yellow),rgba(245,230,0,.18),transparent) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-top{
flex:1 1 auto !important;
display:flex !important;
flex-direction:column !important;
gap:16px !important;
align-items:stretch !important;
padding:22px 18px 18px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-main{
flex:1 1 auto !important;
display:flex !important;
flex-direction:column !important;
min-width:0 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-kicker{
margin-bottom:10px !important;
font-size:9.5px !important;
letter-spacing:.12em !important;
line-height:1.25 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-kicker:before{
width:16px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-title{
display:block !important;
font-size:clamp(17px,1.1vw,21px) !important;
line-height:1.12 !important;
letter-spacing:-.02em !important;
overflow-wrap:anywhere !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-title span,
.svc-package-grid.svc-accordion-list .svc-accordion-title em{
display:inline !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-preview{
margin-top:12px !important;
color:#c7cbce !important;
font-size:13px !important;
line-height:1.6 !important;
overflow-wrap:anywhere !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-side{
align-items:stretch !important;
gap:12px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-price{
width:100% !important;
min-height:40px !important;
font-size:13px !important;
white-space:normal !important;
text-align:center !important;
padding:9px 12px !important;
line-height:1.15 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-actions{
width:100% !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:9px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-request{
width:100% !important;
min-height:40px !important;
padding:0 10px !important;
font-size:10.5px !important;
border-radius:11px !important;
white-space:normal !important;
line-height:1.15 !important;
text-align:center !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-details{
padding:0 18px 18px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-detail-box{
grid-template-columns:1fr !important;
gap:10px !important;
padding-top:15px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-detail-box span{
font-size:10px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-detail-box p{
font-size:13px !important;
line-height:1.68 !important;
}
@media(max-width:1450px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
}
@media(max-width:1080px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:680px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:1fr !important;
gap:12px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-top{
padding:20px 16px 16px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-details{
padding:0 16px 16px !important;
}
}
/* ===== FIX: Leistungen Pakete - 4er Grid + geöffnete Details als breite Premium-Karte ===== */
.svc-package-grid.svc-accordion-list .svc-accordion-card{
min-height:360px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open{
grid-column:1 / -1 !important;
min-height:0 !important;
height:auto !important;
z-index:4 !important;
background:
radial-gradient(circle at 12% 0%,rgba(245,230,0,.12),transparent 34%),
linear-gradient(180deg,rgba(18,20,22,.97),rgba(7,8,9,.99)) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open:before{
height:4px !important;
background:linear-gradient(90deg,var(--yellow),rgba(245,230,0,.55),transparent 72%) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-top{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(230px,330px) !important;
gap:26px !important;
align-items:center !important;
padding:26px 30px 22px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-title{
display:flex !important;
flex-wrap:wrap !important;
gap:.25em !important;
font-size:clamp(25px,2.2vw,38px) !important;
line-height:1.02 !important;
letter-spacing:-.045em !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-preview{
max-width:900px !important;
font-size:15px !important;
line-height:1.7 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-side{
align-items:flex-end !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-price{
width:auto !important;
min-width:170px !important;
min-height:44px !important;
font-size:15px !important;
padding:0 16px !important;
white-space:nowrap !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-actions{
width:auto !important;
display:flex !important;
justify-content:flex-end !important;
gap:10px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-request{
width:auto !important;
min-width:150px !important;
min-height:42px !important;
padding:0 16px !important;
font-size:11px !important;
white-space:nowrap !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-details{
padding:0 30px 28px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-detail-box{
grid-template-columns:220px minmax(0,1fr) !important;
gap:24px !important;
padding:20px 0 0 !important;
border-top:1px solid rgba(245,230,0,.18) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-detail-box span{
font-size:11px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-detail-box p{
font-size:14px !important;
line-height:1.82 !important;
max-width:1050px !important;
}
@media(max-width:1080px){
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-top{
grid-template-columns:1fr !important;
gap:18px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-side{
align-items:flex-start !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-actions{
justify-content:flex-start !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-detail-box{
grid-template-columns:1fr !important;
gap:10px !important;
}
}
@media(max-width:680px){
.svc-package-grid.svc-accordion-list .svc-accordion-card{
min-height:0 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-top{
padding:22px 18px 18px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-title{
font-size:24px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-price,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-request{
width:100% !important;
min-width:0 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-actions{
width:100% !important;
display:grid !important;
grid-template-columns:1fr !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-details{
padding:0 18px 20px !important;
}
}
/* ===== FINAL FIX: Leistungen Pakete sauber als 4er Karten + Details im Popup ===== */
.svc-package-grid.svc-accordion-list{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:18px !important;
align-items:stretch !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open{
grid-column:auto !important;
min-height:0 !important;
height:auto !important;
display:flex !important;
flex-direction:column !important;
border-radius:18px !important;
overflow:hidden !important;
transform:none !important;
background:
radial-gradient(circle at 18% 0%,rgba(245,230,0,.08),transparent 34%),
linear-gradient(180deg,rgba(17,19,21,.96),rgba(8,9,10,.99)) !important;
border:1px solid rgba(255,255,255,.105) !important;
box-shadow:0 16px 46px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.018) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card:hover{
transform:translateY(-3px) !important;
border-color:rgba(245,230,0,.40) !important;
box-shadow:0 22px 66px rgba(0,0,0,.38), 0 0 0 1px rgba(245,230,0,.05) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card:before,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open:before{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:0 !important;
bottom:auto !important;
width:auto !important;
height:3px !important;
background:linear-gradient(90deg,var(--yellow),rgba(245,230,0,.22),transparent 78%) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card:after{
opacity:.75 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-top,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-top{
flex:1 1 auto !important;
display:flex !important;
flex-direction:column !important;
gap:18px !important;
align-items:stretch !important;
padding:22px 18px 18px !important;
min-height:100% !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-main{
flex:1 1 auto !important;
display:flex !important;
flex-direction:column !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-kicker{
display:none !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-title,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-title{
display:block !important;
margin:0 !important;
color:#fff !important;
font-size:clamp(18px,1.05vw,22px) !important;
line-height:1.12 !important;
letter-spacing:-.02em !important;
text-transform:uppercase !important;
overflow-wrap:anywhere !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-title span,
.svc-package-grid.svc-accordion-list .svc-accordion-title em{
display:inline !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-title em{
color:var(--yellow) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-preview,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-preview{
margin:12px 0 0 !important;
color:#c7cbce !important;
font-size:13px !important;
line-height:1.58 !important;
max-width:none !important;
overflow-wrap:anywhere !important;
display:-webkit-box !important;
-webkit-line-clamp:4 !important;
-webkit-box-orient:vertical !important;
overflow:hidden !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-side,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-side{
align-items:stretch !important;
gap:12px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-price,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-price{
width:100% !important;
min-width:0 !important;
min-height:40px !important;
padding:8px 12px !important;
border-radius:999px !important;
font-size:13px !important;
line-height:1.15 !important;
text-align:center !important;
white-space:normal !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-actions,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-actions{
width:100% !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:9px !important;
justify-content:stretch !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-request,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-request{
width:100% !important;
min-width:0 !important;
min-height:40px !important;
padding:0 10px !important;
border-radius:11px !important;
font-size:10.5px !important;
line-height:1.15 !important;
text-align:center !important;
white-space:normal !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-details{
display:none !important;
}
.package-detail-modal{
position:fixed;
inset:0;
z-index:140;
display:none;
align-items:center;
justify-content:center;
padding:24px;
}
.package-detail-modal.is-open{
display:flex;
}
.package-detail-modal-open{
overflow:hidden;
}
.package-detail-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.76);
backdrop-filter:blur(6px);
}
.package-detail-card{
position:relative;
z-index:2;
width:min(100%,680px);
min-height:min(620px, calc(100vh - 48px));
max-height:calc(100vh - 32px);
overflow:auto;
display:flex;
flex-direction:column;
border:1px solid rgba(245,230,0,.28);
border-radius:22px;
background:
radial-gradient(circle at 18% 0%,rgba(245,230,0,.12),transparent 34%),
linear-gradient(180deg,rgba(17,19,21,.98),rgba(6,7,8,.99));
box-shadow:0 34px 120px rgba(0,0,0,.68), inset 0 0 0 1px rgba(255,255,255,.028);
padding:32px 28px 28px;
}
.package-detail-close{
position:absolute;
right:18px;
top:16px;
width:38px;
height:38px;
border:1px solid rgba(255,255,255,.14);
border-radius:10px;
background:rgba(255,255,255,.045);
color:#fff;
font-size:27px;
line-height:1;
cursor:pointer;
transition:.18s ease;
}
.package-detail-close:hover{
border-color:rgba(245,230,0,.48);
color:var(--yellow);
}
.package-detail-head{
padding-right:50px;
}
.package-detail-kicker{
display:inline-flex;
align-items:center;
gap:8px;
color:var(--yellow);
font-size:11px;
line-height:1;
font-weight:950;
letter-spacing:.16em;
text-transform:uppercase;
}
.package-detail-kicker:before{
content:"";
width:24px;
height:1px;
background:var(--yellow);
}
.package-detail-head h2{
margin:14px 0 16px;
color:#fff;
font-size:clamp(30px,3.2vw,48px);
line-height:.98;
letter-spacing:-.055em;
text-transform:uppercase;
overflow-wrap:anywhere;
}
.package-detail-price{
display:inline-flex;
min-height:42px;
align-items:center;
justify-content:center;
padding:0 16px;
border:1px solid rgba(245,230,0,.38);
border-radius:999px;
background:rgba(245,230,0,.10);
color:var(--yellow);
font-size:14px;
font-weight:950;
}
.package-detail-content{
margin-top:24px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.09);
display:grid;
grid-template-columns:145px minmax(0,1fr);
gap:20px;
flex:1;
}
.package-detail-content span{
color:#9ba0a6;
font-size:11px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
}
.package-detail-content p{
margin:0;
color:#e5e8e9;
font-size:15px;
line-height:1.82;
white-space:pre-line;
overflow-wrap:anywhere;
}
.package-detail-actions{
margin-top:auto;
padding-top:24px;
display:flex;
justify-content:flex-end;
gap:12px;
flex-wrap:wrap;
}
.package-detail-actions .btn{
width:auto !important;
min-width:170px;
min-height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:13px;
}
@media(max-width:1450px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
}
@media(max-width:1080px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:680px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:1fr !important;
gap:12px !important;
}
.package-detail-modal{
padding:14px;
}
.package-detail-card{
width:min(100%,560px);
min-height:auto;
padding:24px 18px 18px;
border-radius:18px;
}
.package-detail-head{
padding-right:42px;
}
.package-detail-content{
grid-template-columns:1fr;
gap:10px;
}
.package-detail-content p{
font-size:14px;
}
.package-detail-actions{
display:grid;
grid-template-columns:1fr;
}
.package-detail-actions .btn{
width:100% !important;
}
}
/* ===== UPDATE: Leistungen Paketkarten cleaner + Popup-Titel mit gleichem Gelb ===== */
.svc-package-grid.svc-accordion-list .svc-accordion-preview{
display:none !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-top,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-top{
gap:20px !important;
padding:24px 18px 18px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-main{
flex:0 0 auto !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-title,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-title{
min-height:56px !important;
display:flex !important;
flex-wrap:wrap !important;
align-content:flex-start !important;
align-items:baseline !important;
gap:.22em !important;
font-size:clamp(18px,1.08vw,23px) !important;
line-height:1.12 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-side,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-side{
margin-top:auto !important;
}
.package-detail-head h2{
display:flex !important;
flex-wrap:wrap !important;
align-items:baseline !important;
gap:.22em !important;
}
.package-detail-head h2 span,
.package-detail-head h2 em{
display:inline !important;
font-style:normal !important;
overflow-wrap:anywhere !important;
}
.package-detail-head h2 em{
color:var(--yellow) !important;
text-shadow:0 0 28px rgba(245,230,0,.14);
}
@media(max-width:680px){
.svc-package-grid.svc-accordion-list .svc-accordion-title,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-title{
min-height:0 !important;
}
}
/* ===== UPDATE: Leistungen Paketkarten kompakter & ansprechender ===== */
.svc-package-grid.svc-accordion-list{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:14px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open{
position:relative !important;
min-height:214px !important;
border-radius:15px !important;
overflow:hidden !important;
background:
radial-gradient(circle at 85% 8%,rgba(245,230,0,.13),transparent 24%),
linear-gradient(180deg,rgba(18,20,22,.94),rgba(8,9,10,.99)) !important;
border:1px solid rgba(255,255,255,.095) !important;
box-shadow:0 13px 34px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.018) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card:hover{
transform:translateY(-2px) !important;
border-color:rgba(245,230,0,.34) !important;
box-shadow:0 18px 48px rgba(0,0,0,.34),0 0 0 1px rgba(245,230,0,.045) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card:before,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open:before{
height:2px !important;
background:linear-gradient(90deg,rgba(245,230,0,.95),rgba(245,230,0,.20),transparent 74%) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card:after{
content:"" !important;
position:absolute !important;
right:15px !important;
top:16px !important;
width:30px !important;
height:30px !important;
border-radius:50% !important;
opacity:1 !important;
background:
radial-gradient(circle at center,rgba(245,230,0,.28) 0 3px,transparent 4px),
linear-gradient(180deg,rgba(245,230,0,.12),rgba(255,255,255,.035)) !important;
border:1px solid rgba(245,230,0,.23) !important;
pointer-events:none !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-top,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-top{
min-height:214px !important;
padding:17px 15px 15px !important;
gap:14px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-main{
padding-right:34px !important;
flex:0 0 auto !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-title,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-title{
min-height:0 !important;
font-size:clamp(16px,.92vw,20px) !important;
line-height:1.08 !important;
letter-spacing:-.015em !important;
gap:.18em !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-title em{
text-shadow:0 0 18px rgba(245,230,0,.15) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-side,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-side{
margin-top:auto !important;
gap:10px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-price,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-price{
min-height:36px !important;
padding:7px 10px !important;
border-radius:10px !important;
font-size:12px !important;
letter-spacing:.02em !important;
background:rgba(245,230,0,.105) !important;
border:1px solid rgba(245,230,0,.30) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-actions,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-actions{
gap:7px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-request,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-request{
min-height:36px !important;
border-radius:10px !important;
font-size:10px !important;
font-weight:950 !important;
letter-spacing:.06em !important;
text-transform:uppercase !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-toggle{
background:rgba(255,255,255,.045) !important;
border:1px solid rgba(255,255,255,.11) !important;
color:#e8e9ea !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-toggle:hover{
border-color:rgba(245,230,0,.34) !important;
color:var(--yellow) !important;
background:rgba(245,230,0,.08) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-request{
background:linear-gradient(180deg,var(--yellow),#dcca00) !important;
border:1px solid rgba(245,230,0,.70) !important;
color:#070707 !important;
box-shadow:0 8px 22px rgba(245,230,0,.08) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-request:hover{
filter:brightness(1.04) !important;
transform:translateY(-1px) !important;
}
@media(max-width:1450px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
}
@media(max-width:1080px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media(max-width:680px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:1fr !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open,
.svc-package-grid.svc-accordion-list .svc-accordion-top,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-top{
min-height:0 !important;
}
}
/* ===== UPDATE: Leistungs-Kategorie-Header kompakter & cleaner ===== */
.svc-category-section,
.svc-section.svc-category-section{
margin-bottom:24px !important;
}
.svc-category-panel{
min-height:0 !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
gap:12px !important;
align-items:center !important;
margin:0 0 14px !important;
padding:12px 14px !important;
border-radius:16px !important;
border:1px solid rgba(255,255,255,.09) !important;
background:
linear-gradient(90deg,rgba(245,230,0,.075),transparent 34%),
linear-gradient(180deg,rgba(18,20,22,.92),rgba(8,9,10,.98)) !important;
box-shadow:0 14px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025) !important;
overflow:hidden !important;
}
.svc-category-panel:before{
width:3px !important;
background:linear-gradient(180deg,var(--yellow),rgba(245,230,0,.14)) !important;
opacity:.9 !important;
}
.svc-category-panel:after{
width:76px !important;
height:76px !important;
right:88px !important;
opacity:.45 !important;
border-color:rgba(245,230,0,.07) !important;
}
.svc-category-main{
display:grid !important;
grid-template-columns:auto minmax(0,1fr) !important;
gap:12px !important;
align-items:center !important;
padding:0 8px 0 12px !important;
min-width:0 !important;
}
.svc-category-title-row{
display:contents !important;
margin:0 !important;
}
.svc-category-icon{
width:36px !important;
height:36px !important;
flex:0 0 36px !important;
border-radius:12px !important;
font-size:14px !important;
background:rgba(245,230,0,.095) !important;
border-color:rgba(245,230,0,.28) !important;
box-shadow:0 0 24px rgba(245,230,0,.05) !important;
}
.svc-category-section .svc-section-title{
margin:0 !important;
font-size:clamp(18px,1.55vw,26px) !important;
line-height:1.05 !important;
letter-spacing:.025em !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.svc-category-description{
grid-column:2 !important;
max-width:760px !important;
margin:-2px 0 0 !important;
color:#aeb4b7 !important;
font-size:12.5px !important;
line-height:1.35 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.svc-category-side{
min-width:auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:0 !important;
padding:0 !important;
border-left:0 !important;
background:transparent !important;
}
.svc-category-count{
min-height:38px !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
padding:0 13px !important;
border:1px solid rgba(245,230,0,.24) !important;
border-radius:999px !important;
background:rgba(245,230,0,.075) !important;
text-align:center !important;
}
.svc-category-count strong{
color:var(--yellow) !important;
font-size:18px !important;
line-height:1 !important;
letter-spacing:-.02em !important;
}
.svc-category-count span{
margin:0 !important;
color:#d2d5d6 !important;
font-size:10.5px !important;
line-height:1 !important;
letter-spacing:.075em !important;
white-space:nowrap !important;
}
@media(max-width:980px){
.svc-category-panel{
grid-template-columns:1fr !important;
padding:13px !important;
}
.svc-category-panel:after{
right:18px !important;
}
.svc-category-main{
padding:0 !important;
}
.svc-category-side{
justify-content:flex-start !important;
padding:0 0 0 48px !important;
}
}
@media(max-width:620px){
.svc-category-main{
grid-template-columns:34px minmax(0,1fr) !important;
gap:10px !important;
}
.svc-category-icon{
width:34px !important;
height:34px !important;
}
.svc-category-section .svc-section-title{
font-size:20px !important;
}
.svc-category-description{
white-space:normal !important;
display:-webkit-box !important;
-webkit-line-clamp:2 !important;
-webkit-box-orient:vertical !important;
}
.svc-category-side{
padding-left:44px !important;
}
.svc-category-count{
min-height:34px !important;
padding:0 11px !important;
}
}
/* ===== UPDATE: Paketkarten ohne Kreise + schönere Container-Breite ===== */
.svc-package-grid.svc-accordion-list{
grid-template-columns:repeat(auto-fit,minmax(250px,292px)) !important;
justify-content:center !important;
align-items:stretch !important;
gap:18px !important;
max-width:1230px !important;
width:100% !important;
margin:0 auto !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card:after,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open:after{
content:none !important;
display:none !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open{
width:100% !important;
min-height:196px !important;
border-radius:16px !important;
background:
linear-gradient(135deg,rgba(245,230,0,.06),transparent 26%),
linear-gradient(180deg,rgba(18,20,22,.95),rgba(8,9,10,.99)) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-top,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-top{
min-height:196px !important;
padding:18px 16px 16px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-main{
padding-right:0 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-title,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-title{
max-width:100% !important;
padding-right:0 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-price,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-price{
width:100% !important;
justify-content:center !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-actions,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-actions{
width:100% !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-request,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-request{
flex:1 1 0 !important;
min-width:0 !important;
}
@media(max-width:1120px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:repeat(auto-fit,minmax(245px,1fr)) !important;
max-width:820px !important;
}
}
@media(max-width:680px){
.svc-package-grid.svc-accordion-list{
grid-template-columns:1fr !important;
max-width:430px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open,
.svc-package-grid.svc-accordion-list .svc-accordion-top,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-top{
min-height:0 !important;
}
}
/* ===== UPDATE: Leistungen - übrige Bereiche kleiner & cleaner ===== */
/* Kategorie-Auswahl oberhalb der Bereiche */
.svc-category-nav{
width:min(100%,1040px) !important;
margin:24px auto 30px !important;
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:10px !important;
}
.svc-category-nav-item{
min-height:46px !important;
border-radius:14px !important;
padding:0 13px 0 15px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)) !important;
border:1px solid rgba(255,255,255,.085) !important;
box-shadow:none !important;
}
.svc-category-nav-item:before{
width:2px !important;
opacity:.9 !important;
background:linear-gradient(180deg,var(--yellow),rgba(245,230,0,.16)) !important;
}
.svc-category-nav-item span{
font-size:11px !important;
letter-spacing:.09em !important;
line-height:1.15 !important;
color:#f2f3f3 !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
.svc-category-nav-item strong{
min-width:27px !important;
height:27px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 27px !important;
border-radius:999px !important;
color:var(--yellow) !important;
background:rgba(245,230,0,.09) !important;
border:1px solid rgba(245,230,0,.22) !important;
font-size:12px !important;
line-height:1 !important;
}
.svc-category-nav-item:hover{
transform:translateY(-1px) !important;
border-color:rgba(245,230,0,.30) !important;
background:linear-gradient(180deg,rgba(245,230,0,.08),rgba(255,255,255,.02)) !important;
}
/* Preis- und Buttonbereich der Paketkarten ruhiger */
.svc-package-grid.svc-accordion-list .svc-accordion-side,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-side{
width:100% !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:10px !important;
margin-top:auto !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-price,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-price{
width:auto !important;
align-self:flex-start !important;
min-height:31px !important;
padding:0 11px !important;
border-radius:999px !important;
background:rgba(245,230,0,.075) !important;
border:1px solid rgba(245,230,0,.25) !important;
color:var(--yellow) !important;
box-shadow:none !important;
font-size:11px !important;
letter-spacing:.055em !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-actions,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-actions{
width:100% !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:7px !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-request,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-toggle,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open .svc-accordion-request{
width:100% !important;
min-height:35px !important;
border-radius:11px !important;
padding:0 12px !important;
font-size:10px !important;
letter-spacing:.07em !important;
box-shadow:none !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-toggle{
background:rgba(255,255,255,.035) !important;
border:1px solid rgba(255,255,255,.105) !important;
color:#dfe2e3 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-toggle:hover{
color:var(--yellow) !important;
background:rgba(245,230,0,.075) !important;
border-color:rgba(245,230,0,.28) !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-request{
background:linear-gradient(180deg,var(--yellow),#d8cc00) !important;
border:1px solid rgba(245,230,0,.60) !important;
color:#050606 !important;
font-weight:1000 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-request:hover{
transform:translateY(-1px) !important;
filter:brightness(1.04) !important;
}
/* Kategorie-Header noch etwas eleganter */
.svc-category-panel{
max-width:1120px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:10px 12px !important;
border-radius:14px !important;
}
.svc-category-icon{
width:32px !important;
height:32px !important;
flex-basis:32px !important;
border-radius:10px !important;
font-size:12px !important;
}
.svc-category-section .svc-section-title{
font-size:clamp(17px,1.28vw,23px) !important;
letter-spacing:.055em !important;
}
.svc-category-description{
font-size:12px !important;
color:#a9afb2 !important;
}
.svc-category-count{
min-height:32px !important;
padding:0 11px !important;
}
.svc-category-count strong{
font-size:16px !important;
}
.svc-category-count span{
font-size:9.5px !important;
}
/* Unterer Anfragebereich kleiner und passender */
.svc-bottom-cta{
width:min(100%,920px) !important;
margin:34px auto 8px !important;
min-height:76px !important;
padding:16px 18px !important;
border-radius:18px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:18px !important;
background:
linear-gradient(90deg,rgba(245,230,0,.075),transparent 36%),
linear-gradient(180deg,rgba(18,20,22,.92),rgba(8,9,10,.98)) !important;
border:1px solid rgba(255,255,255,.09) !important;
box-shadow:0 14px 44px rgba(0,0,0,.24) !important;
}
.svc-bottom-cta-left{
display:flex !important;
align-items:center !important;
gap:13px !important;
}
.svc-bottom-cta-icon{
width:38px !important;
height:38px !important;
flex:0 0 38px !important;
border-radius:12px !important;
font-size:16px !important;
background:rgba(245,230,0,.095) !important;
border:1px solid rgba(245,230,0,.25) !important;
}
.svc-bottom-cta strong{
font-size:16px !important;
line-height:1.15 !important;
}
.svc-bottom-cta p{
margin-top:3px !important;
font-size:12px !important;
line-height:1.35 !important;
color:#aeb4b7 !important;
}
.svc-bottom-cta-btn{
min-height:40px !important;
border-radius:12px !important;
padding:0 15px !important;
font-size:10.5px !important;
letter-spacing:.08em !important;
white-space:nowrap !important;
}
@media(max-width:920px){
.svc-category-nav{
grid-template-columns:1fr !important;
width:min(100%,520px) !important;
}
.svc-bottom-cta{
align-items:flex-start !important;
flex-direction:column !important;
}
.svc-bottom-cta-btn{
width:100% !important;
justify-content:center !important;
}
}
@media(max-width:680px){
.svc-category-nav{
margin:18px auto 22px !important;
}
.svc-category-panel{
max-width:430px !important;
}
.svc-category-description{
white-space:normal !important;
}
}
/* ===== UPDATE: Leistungen - obere Kategorie-Auswahl entfernt ===== */
.svc-category-nav{
display:none !important;
}
.svc-layout-shell{
padding-top:26px !important;
}
/* ===== UPDATE: Leistungen - Kategorien nur als Text mit Verlaufslinie ===== */
.svc-category-panel,
.svc-category-side,
.svc-category-count,
.svc-category-description,
.svc-category-icon{
display:none !important;
}
.svc-category-section{
margin-top:34px !important;
}
.svc-category-heading{
width:min(100%,1120px) !important;
margin:0 auto 16px !important;
display:flex !important;
align-items:center !important;
gap:16px !important;
padding:0 2px !important;
}
.svc-category-heading .svc-section-title{
margin:0 !important;
flex:0 0 auto !important;
color:#ffffff !important;
font-size:clamp(18px,1.35vw,25px) !important;
font-weight:950 !important;
line-height:1 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
text-shadow:0 0 24px rgba(245,230,0,.08) !important;
}
.svc-category-heading-line{
display:block !important;
height:1px !important;
flex:1 1 auto !important;
min-width:90px !important;
background:linear-gradient(90deg,rgba(245,230,0,.85) 0%,rgba(245,230,0,.38) 36%,rgba(245,230,0,.10) 72%,rgba(245,230,0,0) 100%) !important;
box-shadow:0 0 18px rgba(245,230,0,.13) !important;
}
.svc-category-heading:before{
content:"" !important;
width:7px !important;
height:7px !important;
flex:0 0 7px !important;
border-radius:999px !important;
background:var(--yellow) !important;
box-shadow:0 0 16px rgba(245,230,0,.45) !important;
}
@media(max-width:680px){
.svc-category-section{
margin-top:26px !important;
}
.svc-category-heading{
gap:10px !important;
margin-bottom:13px !important;
}
.svc-category-heading .svc-section-title{
font-size:16px !important;
letter-spacing:.055em !important;
}
.svc-category-heading-line{
min-width:42px !important;
}
}
/* ===== UPDATE: Leistungen - Hintergrundbild im Paketbereich ===== */
.svc-layout-shell{
position:relative !important;
isolation:isolate !important;
width:min(1480px,calc(100% - 72px)) !important;
margin:28px auto 0 !important;
padding:34px clamp(18px,2.4vw,34px) 46px !important;
border-radius:30px !important;
border:1px solid rgba(245,230,0,.13) !important;
background:
linear-gradient(180deg,rgba(5,6,6,.88),rgba(5,6,6,.94)),
radial-gradient(circle at 18% 8%,rgba(245,230,0,.105),transparent 24%),
radial-gradient(circle at 82% 0%,rgba(255,255,255,.055),transparent 22%),
url("login-bg.jpg.png") center center / cover no-repeat !important;
box-shadow:0 28px 90px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.025) !important;
overflow:hidden !important;
}
.svc-layout-shell:before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:-1 !important;
pointer-events:none !important;
background:
linear-gradient(135deg,rgba(245,230,0,.08),transparent 34%),
linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.42)) !important;
}
.svc-layout-shell:after{
content:"" !important;
position:absolute !important;
left:24px !important;
right:24px !important;
top:0 !important;
height:1px !important;
pointer-events:none !important;
background:linear-gradient(90deg,transparent,rgba(245,230,0,.65),transparent) !important;
opacity:.8 !important;
}
.svc-category-heading,
.svc-package-grid.svc-accordion-list,
.svc-bottom-cta,
.svc-empty-box{
position:relative !important;
z-index:1 !important;
}
.svc-category-section{
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
padding-left:0 !important;
padding-right:0 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card,
.svc-package-grid.svc-accordion-list .svc-accordion-card.is-open{
background:linear-gradient(180deg,rgba(12,14,15,.90),rgba(7,8,8,.94)) !important;
backdrop-filter:blur(4px) !important;
}
@media(max-width:760px){
.svc-layout-shell{
width:calc(100% - 28px) !important;
margin-top:18px !important;
padding:24px 14px 34px !important;
border-radius:22px !important;
}
}
/* ===== FIX: Leistungen - Hintergrundbild über volle Breite statt Container ===== */
.svc-layout-shell{
position:relative !important;
isolation:isolate !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:46px max(22px,calc((100vw - 1230px) / 2)) 58px !important;
border-radius:0 !important;
border:0 !important;
background:
linear-gradient(180deg,rgba(5,6,6,.88),rgba(5,6,6,.96)),
radial-gradient(circle at 15% 8%,rgba(245,230,0,.11),transparent 25%),
radial-gradient(circle at 85% 0%,rgba(255,255,255,.055),transparent 24%),
url("login-bg.jpg.png") center center / cover no-repeat !important;
box-shadow:inset 0 1px 0 rgba(245,230,0,.18), inset 0 -1px 0 rgba(245,230,0,.08) !important;
overflow:hidden !important;
}
.svc-layout-shell:before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:-1 !important;
pointer-events:none !important;
background:
linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.10) 45%,rgba(0,0,0,.55)),
linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.40)) !important;
}
.svc-layout-shell:after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:0 !important;
height:1px !important;
pointer-events:none !important;
background:linear-gradient(90deg,transparent,rgba(245,230,0,.60),transparent) !important;
opacity:.75 !important;
}
.svc-category-heading,
.svc-package-grid.svc-accordion-list,
.svc-bottom-cta,
.svc-empty-box{
position:relative !important;
z-index:1 !important;
}
.svc-category-section{
background:transparent !important;
border-color:transparent !important;
box-shadow:none !important;
padding-left:0 !important;
padding-right:0 !important;
}
@media(max-width:760px){
.svc-layout-shell{
width:100% !important;
margin:0 !important;
padding:32px 14px 42px !important;
border-radius:0 !important;
}
}
/* ===== FIX: Leistungen - Hintergrundbild im Paketbereich sichtbar machen ===== */
.svc-layout-shell{
position:relative !important;
isolation:isolate !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:46px max(22px,calc((100vw - 1230px) / 2)) 58px !important;
border-radius:0 !important;
border:0 !important;
background-color:#050606 !important;
background-image:
linear-gradient(180deg,rgba(5,6,6,.46) 0%,rgba(5,6,6,.64) 48%,rgba(5,6,6,.78) 100%),
linear-gradient(90deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.14) 44%,rgba(0,0,0,.56) 100%),
radial-gradient(circle at 16% 10%,rgba(245,230,0,.16),transparent 26%),
url("login-bg.jpg.png") !important;
background-size:cover,cover,cover,cover !important;
background-position:center center,center center,center center,center center !important;
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat !important;
box-shadow:inset 0 1px 0 rgba(245,230,0,.20), inset 0 -1px 0 rgba(245,230,0,.08) !important;
overflow:hidden !important;
}
.svc-layout-shell:before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:0 !important;
pointer-events:none !important;
background:
linear-gradient(180deg,rgba(5,6,6,.18),rgba(5,6,6,.40)),
radial-gradient(circle at 80% 8%,rgba(255,255,255,.06),transparent 24%) !important;
}
.svc-layout-shell:after{
content:"" !important;
position:absolute !important;
left:0 !important;
right:0 !important;
top:0 !important;
height:1px !important;
z-index:1 !important;
pointer-events:none !important;
background:linear-gradient(90deg,transparent,rgba(245,230,0,.68),transparent) !important;
opacity:.9 !important;
}
.svc-category-heading,
.svc-package-grid.svc-accordion-list,
.svc-bottom-cta,
.svc-empty-box{
position:relative !important;
z-index:2 !important;
}
.svc-package-grid.svc-accordion-list .svc-accordion-card{
background:linear-gradient(180deg,rgba(10,12,13,.82),rgba(6,7,7,.90)) !important;
backdrop-filter:blur(7px) !important;
-webkit-backdrop-filter:blur(7px) !important;
}
@media(max-width:760px){
.svc-layout-shell{
width:100% !important;
margin:0 !important;
padding:32px 14px 42px !important;
border-radius:0 !important;
background-position:center center,center center,center center,center center !important;
}
}
/* ===== UPDATE: Leistungen Detail-Popup schöner / kompakter / hochwertiger ===== */
.package-detail-backdrop{
background:
radial-gradient(circle at 50% 20%, rgba(245,230,0,.09), transparent 26%),
rgba(0,0,0,.82) !important;
backdrop-filter:blur(8px);
}
.package-detail-card{
width:min(100%,620px) !important;
min-height:min(700px,calc(100vh - 44px)) !important;
max-height:calc(100vh - 36px) !important;
border-radius:24px !important;
padding:34px 30px 26px !important;
background:
radial-gradient(circle at 84% 10%, rgba(245,230,0,.12), transparent 24%),
radial-gradient(circle at 10% 0%, rgba(255,255,255,.06), transparent 26%),
linear-gradient(180deg, rgba(18,20,22,.985), rgba(7,8,9,.995)) !important;
border:1px solid rgba(245,230,0,.22) !important;
box-shadow:0 36px 130px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.package-detail-card:before{
content:"";
position:absolute;
left:30px;
right:30px;
top:0;
height:3px;
border-radius:999px;
background:linear-gradient(90deg, rgba(245,230,0,.95), rgba(245,230,0,.32), transparent 78%);
}
.package-detail-close{
right:18px !important;
top:18px !important;
width:40px !important;
height:40px !important;
border-radius:12px !important;
background:rgba(255,255,255,.05) !important;
border:1px solid rgba(255,255,255,.10) !important;
}
.package-detail-head{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px 18px;
align-items:start;
padding-right:54px !important;
}
.package-detail-kicker{
grid-column:1 / -1;
font-size:10px !important;
letter-spacing:.18em !important;
}
.package-detail-head h2{
margin:2px 0 0 !important;
font-size:clamp(28px,2.5vw,40px) !important;
line-height:1.02 !important;
}
.package-detail-price{
justify-self:end;
align-self:start;
min-height:44px !important;
padding:0 18px !important;
border-radius:999px !important;
background:linear-gradient(180deg, rgba(245,230,0,.16), rgba(245,230,0,.08)) !important;
box-shadow:inset 0 0 0 1px rgba(245,230,0,.16);
}
.package-detail-content{
margin-top:22px !important;
padding-top:22px !important;
grid-template-columns:1fr !important;
gap:12px !important;
}
.package-detail-content span{
font-size:10px !important;
letter-spacing:.16em !important;
}
.package-detail-copy{
min-height:300px;
max-height:400px;
overflow:auto;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
padding:18px 18px 20px;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.package-detail-copy::-webkit-scrollbar{width:10px;}
.package-detail-copy::-webkit-scrollbar-track{background:transparent;}
.package-detail-copy::-webkit-scrollbar-thumb{
background:rgba(245,230,0,.26);
border-radius:999px;
border:2px solid transparent;
background-clip:padding-box;
}
.package-detail-content p{
font-size:15px !important;
line-height:1.72 !important;
}
.package-detail-actions{
margin-top:20px !important;
padding-top:20px !important;
border-top:1px solid rgba(255,255,255,.08);
display:grid !important;
grid-template-columns:1fr 1fr;
gap:12px !important;
}
.package-detail-actions .btn{
min-width:0 !important;
width:100% !important;
min-height:48px !important;
border-radius:14px !important;
}
.package-detail-actions .btn.btn-secondary{
background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)) !important;
border:1px solid rgba(255,255,255,.10) !important;
}
.package-detail-actions .btn.btn-primary{
box-shadow:0 10px 30px rgba(245,230,0,.12) !important;
}
@media(max-width:680px){
.package-detail-card{
width:min(100%,560px) !important;
min-height:auto !important;
padding:24px 18px 18px !important;
border-radius:20px !important;
}
.package-detail-card:before{
left:18px;
right:18px;
}
.package-detail-head{
grid-template-columns:1fr !important;
padding-right:42px !important;
}
.package-detail-price{
justify-self:start;
}
.package-detail-copy{
min-height:230px;
max-height:320px;
padding:16px;
}
.package-detail-actions{
grid-template-columns:1fr !important;
}
}
/* ===== UPDATE: Gelber Rahmen um die Kategorien-Navigation / Leistungs-Navigation ===== */
.svc-category-nav,
.svc-category-tabs,
.svc-category-filter,
.svc-service-category-nav,
.svc-premium-category-nav{
border:1px solid rgba(245,230,0,.42) !important;
box-shadow:
0 12px 34px rgba(0,0,0,.22),
0 0 0 1px rgba(255,255,255,.025) inset,
0 0 20px rgba(245,230,0,.055) !important;
}
/* Falls du die normale obere Navigation meinst: auch dort sanft gelber Rand */
.svc-main-header .site-main-nav{
border:1px solid rgba(245,230,0,.36) !important;
box-shadow:
0 12px 34px rgba(0,0,0,.24),
0 0 0 1px rgba(255,255,255,.025) inset,
0 0 18px rgba(245,230,0,.05) !important;
}
/* ===== UPDATE: Gelber Rand für alle öffentlichen Navigationen ===== */
.site-main-nav,
.login-main-nav.site-main-nav,
.svc-main-header .site-main-nav,
.public-main-header .site-main-nav{
border:1px solid rgba(245,230,0,.38) !important;
box-shadow:
0 12px 34px rgba(0,0,0,.24),
0 0 0 1px rgba(255,255,255,.025) inset,
0 0 18px rgba(245,230,0,.055) !important;
}
.site-main-nav a:hover,
.site-main-nav a.active{
background:rgba(245,230,0,.12) !important;
color:var(--yellow) !important;
}
/* ===== FIX: Leistungen Diashow voll bis oben + Navigation ohne eigenen Hintergrund ===== */
.svc-premium-page{
position:relative !important;
padding-top:0 !important;
}
.svc-premium-page > .svc-main-header{
position:absolute !important;
top:0 !important;
left:0 !important;
right:0 !important;
z-index:120 !important;
height:0 !important;
min-height:0 !important;
padding:0 !important;
margin:0 !important;
display:block !important;
pointer-events:none !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
overflow:visible !important;
}
.svc-premium-page > .svc-main-header .site-main-nav{
pointer-events:auto !important;
position:absolute !important;
top:28px !important;
left:50% !important;
transform:translateX(-50%) !important;
width:max-content !important;
max-width:calc(100vw - 48px) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:34px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
box-shadow:none !important;
}
.svc-premium-page > .svc-main-header .site-main-nav a{
color:#fff !important;
text-shadow:0 3px 16px rgba(0,0,0,.65) !important;
}
.svc-premium-page > .svc-main-header .site-main-nav a:hover,
.svc-premium-page > .svc-main-header .site-main-nav a.active{
color:var(--yellow) !important;
background:transparent !important;
}
.svc-hero{
width:100% !important;
max-width:none !important;
margin:0 !important;
border-radius:0 !important;
min-height:360px !important;
height:360px !important;
overflow:hidden !important;
}
.svc-hero-admin-slideshow{
inset:0 !important;
width:100% !important;
height:100% !important;
}
.svc-hero-admin-slideshow:after{
background:
linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.20) 24%,rgba(0,0,0,.26) 55%,rgba(0,0,0,.58) 100%),
linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.16),rgba(0,0,0,.42)) !important;
}
.svc-hero-project-overlay{
padding-top:70px !important;
}
@media(max-width:980px){
.svc-premium-page > .svc-main-header .site-main-nav{
top:16px !important;
left:16px !important;
right:16px !important;
transform:none !important;
width:auto !important;
max-width:none !important;
flex-wrap:wrap !important;
gap:14px 22px !important;
}
.svc-hero{
min-height:300px !important;
height:300px !important;
}
.svc-hero-project-overlay{
padding-top:88px !important;
}
}
@media(max-width:560px){
.svc-premium-page > .svc-main-header .site-main-nav{
top:12px !important;
left:12px !important;
right:12px !important;
gap:10px 14px !important;
}
.svc-premium-page > .svc-main-header .site-main-nav a{
font-size:12px !important;
}
.svc-hero{
min-height:260px !important;
height:260px !important;
}
.svc-hero-project-overlay{
padding-top:100px !important;
}
}
/* ===== UPDATE: Leistungen Navigation wieder oval mit gelbem Rand über der Diashow ===== */
.svc-premium-page > .svc-main-header .site-main-nav{
padding:13px 24px !important;
border:1px solid rgba(245,230,0,.42) !important;
border-radius:999px !important;
background:rgba(7,8,9,.68) !important;
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
box-shadow:
0 16px 50px rgba(0,0,0,.34),
0 0 0 1px rgba(255,255,255,.03) inset,
0 0 22px rgba(245,230,0,.07) !important;
}
.svc-premium-page > .svc-main-header .site-main-nav a{
color:#f3f4f4 !important;
text-shadow:none !important;
}
.svc-premium-page > .svc-main-header .site-main-nav a:hover,
.svc-premium-page > .svc-main-header .site-main-nav a.active{
color:var(--yellow) !important;
background:rgba(245,230,0,.10) !important;
}
.svc-premium-page > .svc-main-header .site-main-nav a.active:after{
background:var(--yellow) !important;
box-shadow:0 0 16px rgba(245,230,0,.35) !important;
}
@media(max-width:980px){
.svc-premium-page > .svc-main-header .site-main-nav{
padding:12px 14px !important;
border-radius:22px !important;
background:rgba(7,8,9,.72) !important;
}
}
@media(max-width:560px){
.svc-premium-page > .svc-main-header .site-main-nav{
padding:10px 12px !important;
border-radius:18px !important;
}
}
/* ===== UPDATE: Navigation ohne gelben Hintergrund/Schatten, nur Schrift gelb ===== */
.site-main-nav a,
.login-main-nav.site-main-nav a,
.svc-main-header .site-main-nav a,
.public-main-header .site-main-nav a{
color:#f3f4f4 !important;
background:transparent !important;
box-shadow:none !important;
text-shadow:none !important;
}
.site-main-nav a:hover,
.site-main-nav a.active,
.login-main-nav.site-main-nav a:hover,
.login-main-nav.site-main-nav a.active,
.login-main-nav.site-main-nav a.home-link,
.svc-main-header .site-main-nav a:hover,
.svc-main-header .site-main-nav a.active,
.public-main-header .site-main-nav a:hover,
.public-main-header .site-main-nav a.active{
color:var(--yellow) !important;
background:transparent !important;
box-shadow:none !important;
text-shadow:none !important;
}
.site-main-nav a:before,
.site-main-nav a:after,
.login-main-nav.site-main-nav a:before,
.login-main-nav.site-main-nav a:after,
.svc-main-header .site-main-nav a:before,
.svc-main-header .site-main-nav a:after,
.public-main-header .site-main-nav a:before,
.public-main-header .site-main-nav a:after{
display:none !important;
opacity:0 !important;
background:transparent !important;
box-shadow:none !important;
}
.site-main-nav,
.login-main-nav.site-main-nav,
.svc-main-header .site-main-nav,
.public-main-header .site-main-nav{
box-shadow:
0 16px 50px rgba(0,0,0,.28),
0 0 0 1px rgba(255,255,255,.025) inset !important;
}
/* ===== FINAL FIX: Navigation aktiv/hover nur gelbe Schrift, kein Schatten/Balken/Hintergrund ===== */
body .site-main-nav a,
body .login-main-nav.site-main-nav a,
body .svc-main-header .site-main-nav a,
body .public-main-header .site-main-nav a,
body.public-info-body .site-main-nav a,
body.svc-premium-body .site-main-nav a{
color:#f3f4f4 !important;
background:transparent !important;
box-shadow:none !important;
text-shadow:none !important;
}
body .site-main-nav a:hover,
body .site-main-nav a.active,
body .login-main-nav.site-main-nav a:hover,
body .login-main-nav.site-main-nav a.active,
body .login-main-nav.site-main-nav a.home-link,
body .svc-main-header .site-main-nav a:hover,
body .svc-main-header .site-main-nav a.active,
body .public-main-header .site-main-nav a:hover,
body .public-main-header .site-main-nav a.active,
body.public-info-body .site-main-nav a:hover,
body.public-info-body .site-main-nav a.active,
body.svc-premium-body .site-main-nav a:hover,
body.svc-premium-body .site-main-nav a.active{
color:var(--yellow) !important;
background:transparent !important;
box-shadow:none !important;
text-shadow:none !important;
filter:none !important;
}
body .site-main-nav a::before,
body .site-main-nav a::after,
body .login-main-nav.site-main-nav a::before,
body .login-main-nav.site-main-nav a::after,
body .svc-main-header .site-main-nav a::before,
body .svc-main-header .site-main-nav a::after,
body .public-main-header .site-main-nav a::before,
body .public-main-header .site-main-nav a::after,
body.public-info-body .site-main-nav a::before,
body.public-info-body .site-main-nav a::after,
body.svc-premium-body .site-main-nav a::before,
body.svc-premium-body .site-main-nav a::after{
content:none !important;
display:none !important;
opacity:0 !important;
visibility:hidden !important;
width:0 !important;
height:0 !important;
background:transparent !important;
box-shadow:none !important;
filter:none !important;
}
/* Ovaler Rahmen bleibt, aber ohne gelben Glow hinter einzelnen Punkten */
body .site-main-nav,
body .login-main-nav.site-main-nav,
body .svc-main-header .site-main-nav,
body .public-main-header .site-main-nav{
border:1px solid rgba(245,230,0,.38) !important;
box-shadow:
0 16px 50px rgba(0,0,0,.28),
0 0 0 1px rgba(255,255,255,.025) inset !important;
}
/* ===== HARD FIX: Leistungen & Über uns aktiver Nav-Punkt ohne gelben Hintergrund ===== */
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a,
body.public-info-body .svc-premium-page > .svc-main-header .site-main-nav a{
color:#f3f4f4 !important;
background:transparent !important;
box-shadow:none !important;
text-shadow:none !important;
filter:none !important;
}
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a:hover,
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a.active,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a:hover,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a.active,
body.public-info-body .svc-premium-page > .svc-main-header .site-main-nav a:hover,
body.public-info-body .svc-premium-page > .svc-main-header .site-main-nav a.active{
color:var(--yellow) !important;
background:transparent !important;
box-shadow:none !important;
text-shadow:none !important;
filter:none !important;
}
/* Entfernt den gelben Balken/Schein unter dem aktiven Punkt auf Leistungen & Über uns */
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a.active:before,
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a.active:after,
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a.active::before,
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a.active::after,
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a:hover:before,
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a:hover:after,
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a:hover::before,
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav a:hover::after,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a.active:before,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a.active:after,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a.active::before,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a.active::after,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a:hover:before,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a:hover:after,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a:hover::before,
body.public-info-body .public-info-page > .public-main-header .site-main-nav a:hover::after,
body.public-info-body .svc-premium-page > .svc-main-header .site-main-nav a.active:before,
body.public-info-body .svc-premium-page > .svc-main-header .site-main-nav a.active:after,
body.public-info-body .svc-premium-page > .svc-main-header .site-main-nav a.active::before,
body.public-info-body .svc-premium-page > .svc-main-header .site-main-nav a.active::after{
content:none !important;
display:none !important;
visibility:hidden !important;
opacity:0 !important;
width:0 !important;
height:0 !important;
min-width:0 !important;
min-height:0 !important;
background:transparent !important;
box-shadow:none !important;
filter:none !important;
border:0 !important;
}
/* Der ovale Navigationsrahmen bleibt, aber der gelbe Punkt-Schein ist weg */
body.svc-premium-body .svc-premium-page > .svc-main-header .site-main-nav,
body.public-info-body .public-info-page > .public-main-header .site-main-nav,
body.public-info-body .svc-premium-page > .svc-main-header .site-main-nav{
border:1px solid rgba(245,230,0,.38) !important;
box-shadow:
0 16px 50px rgba(0,0,0,.28),
0 0 0 1px rgba(255,255,255,.025) inset !important;
}
/* ===== FIX: Hero-Titel zweizeilig sauber passend ===== */
.svc-hero-project-overlay{
position:absolute !important;
inset:0 !important;
z-index:12 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
padding:92px 24px 34px !important;
pointer-events:none !important;
}
.svc-hero-project-title{
width:min(920px,calc(100% - 40px)) !important;
max-width:920px !important;
margin:0 auto !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:4px !important;
font-size:clamp(26px,3.15vw,46px) !important;
line-height:1.03 !important;
letter-spacing:-.035em !important;
text-align:center !important;
white-space:normal !important;
overflow-wrap:normal !important;
word-break:normal !important;
}
.svc-hero-project-title span{
display:block !important;
width:max-content !important;
max-width:100% !important;
text-align:center !important;
white-space:nowrap !important;
}
@media(max-width:980px){
.svc-hero-project-overlay{
padding:112px 18px 28px !important;
}
.svc-hero-project-title{
width:calc(100% - 32px) !important;
font-size:clamp(23px,5vw,38px) !important;
gap:3px !important;
}
}
@media(max-width:560px){
.svc-hero-project-overlay{
padding:112px 12px 22px !important;
}
.svc-hero-project-title{
width:calc(100% - 20px) !important;
font-size:clamp(20px,6.4vw,29px) !important;
line-height:1.08 !important;
letter-spacing:-.025em !important;
gap:2px !important;
}
.svc-hero-project-title span{
white-space:normal !important;
}
}
/* ===== UPDATE: Navigation mit Impressum/Datenschutz kompakter ===== */
.login-main-nav.site-main-nav,
.svc-main-header .site-main-nav,
.public-main-header .site-main-nav,
.svc-premium-page > .svc-main-header .site-main-nav{
gap:24px !important;
padding-left:22px !important;
padding-right:22px !important;
}
.login-main-nav.site-main-nav a,
.svc-main-header .site-main-nav a,
.public-main-header .site-main-nav a,
.svc-premium-page > .svc-main-header .site-main-nav a{
font-size:12.5px !important;
}
@media(max-width:980px){
.login-main-nav.site-main-nav,
.svc-main-header .site-main-nav,
.public-main-header .site-main-nav,
.svc-premium-page > .svc-main-header .site-main-nav{
gap:12px 18px !important;
}
}
@media(max-width:560px){
.login-main-nav.site-main-nav,
.svc-main-header .site-main-nav,
.public-main-header .site-main-nav,
.svc-premium-page > .svc-main-header .site-main-nav{
gap:9px 12px !important;
}
.login-main-nav.site-main-nav a,
.svc-main-header .site-main-nav a,
.public-main-header .site-main-nav a,
.svc-premium-page > .svc-main-header .site-main-nav a{
font-size:11.5px !important;
}
}