:root{
  --bg:#dfe8f2;
  --bg-soft:#d3dfec;
  --surface:#eef4fb;
  --surface-2:#e2ecf6;
  --text:#071427;
  --muted:#3b4d63;
  --primary:#2563eb;
  --primary-2:#06b6d4;
  --accent:#8b5cf6;
  --warning:#f59e0b;
  --danger:#ef4444;
  --border:rgba(15,23,42,.14);
  --shadow:0 22px 60px rgba(15,23,42,.14);
  --shadow-soft:0 14px 34px rgba(37,99,235,.16);
  --nav:rgba(238,244,251,.92);
}
[data-theme="dark"]{
  --bg:#06101f;
  --bg-soft:#0b1730;
  --surface:#101d33;
  --surface-2:#13243d;
  --text:#f8fafc;
  --muted:#aab8cf;
  --primary:#2dd4bf;
  --primary-2:#3b82f6;
  --accent:#a78bfa;
  --warning:#f59e0b;
  --danger:#f87171;
  --border:rgba(255,255,255,.12);
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --shadow-soft:0 18px 50px rgba(45,212,191,.13);
  --nav:rgba(6,16,31,.82);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% -10%,rgba(6,182,212,.22),transparent 32%),
    radial-gradient(circle at 92% 10%,rgba(37,99,235,.20),transparent 34%),
    linear-gradient(180deg,var(--bg),var(--bg-soft) 55%, #cbd8e6);
  min-height:100vh;
}
a{color:inherit}.topbar{position:sticky;top:0;z-index:50;background:var(--nav);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.nav{max-width:1220px;margin:auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:950;letter-spacing:-.02em}.brand-mark{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:var(--shadow-soft)}
.nav-actions{display:flex;align-items:center;gap:10px}.nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.nav-links a{color:var(--muted);text-decoration:none;font-weight:800;padding:10px 12px;border-radius:999px;font-size:.94rem}.nav-links a:hover,.nav-links a.active{background:rgba(37,99,235,.10);color:var(--primary)}[data-theme="dark"] .nav-links a:hover,[data-theme="dark"] .nav-links a.active{background:rgba(45,212,191,.12)}
.menu-btn,.theme-toggle{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:14px;min-width:42px;height:42px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.05)}.theme-toggle{font-size:1.05rem}.menu-btn{display:none;font-size:1.35rem}.theme-toggle:hover,.menu-btn:hover{transform:translateY(-1px);border-color:rgba(37,99,235,.35)}
.hero{max-width:1220px;margin:auto;padding:92px 22px 70px;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}.hero-text{position:relative}.badge{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--border);background:rgba(255,255,255,.56);padding:9px 14px;border-radius:999px;color:var(--muted);font-weight:850;box-shadow:0 12px 30px rgba(0,0,0,.05)}[data-theme="dark"] .badge{background:rgba(255,255,255,.06)}.pulse{width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 6px rgba(45,212,191,.13)}.kicker{color:var(--primary);font-weight:950;text-transform:uppercase;letter-spacing:.13em;font-size:.80rem}h1{font-size:clamp(2.55rem,6vw,5.7rem);line-height:.98;margin:16px 0 20px;letter-spacing:-.06em}h1 span,.gradient-text{background:linear-gradient(135deg,var(--primary),var(--primary-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}h2{font-size:clamp(1.8rem,3vw,3.15rem);line-height:1.08;margin:8px 0 14px;letter-spacing:-.04em}h3{margin:0 0 10px;letter-spacing:-.02em}p{color:var(--muted);line-height:1.75}.lead{font-size:1.16rem;max-width:720px}.actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}.btn{border:0;border-radius:16px;padding:13px 18px;font-weight:950;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.2s ease;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:var(--shadow-soft)}.ghost{border:1px solid var(--border);background:var(--surface);color:var(--text)}.soft{background:rgba(245,158,11,.14);color:#b45309;border:1px solid rgba(245,158,11,.25)}[data-theme="dark"] .soft{color:#fed7aa}.danger{background:rgba(239,68,68,.14);color:#dc2626;border:1px solid rgba(239,68,68,.28)}[data-theme="dark"] .danger{color:#fecaca}.hero-visual{position:relative}.hero-card{position:relative;min-height:430px;border:1px solid var(--border);border-radius:36px;background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,255,255,.18));box-shadow:var(--shadow);overflow:hidden;padding:28px}[data-theme="dark"] .hero-card{background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035))}.hero-card:before{content:"";position:absolute;inset:-90px -70px auto auto;width:270px;height:270px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));opacity:.28}.hero-card:after{content:"";position:absolute;left:-80px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:linear-gradient(135deg,var(--primary-2),var(--primary));opacity:.18}.screen{position:relative;z-index:1;border:1px solid var(--border);border-radius:26px;background:var(--surface);padding:18px;box-shadow:0 18px 55px rgba(0,0,0,.14)}.screen-top{display:flex;gap:7px;margin-bottom:18px}.dot{width:10px;height:10px;border-radius:50%;background:var(--primary)}.diagram{display:grid;gap:14px}.node{display:flex;justify-content:space-between;align-items:center;padding:15px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2);font-weight:900}.node small{color:var(--muted);font-weight:700}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.stat{padding:16px;border-radius:20px;background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(6,182,212,.09));border:1px solid var(--border)}.stat strong{font-size:1.45rem;display:block}.section,.page{max-width:1220px;margin:auto;padding:62px 22px}.section-head,.page-title{max-width:900px;margin-bottom:32px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.card,.content-card,.info-panel,.project-card,.video-card,.download-item{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));border:1px solid var(--border);border-radius:28px;padding:26px;box-shadow:var(--shadow)}[data-theme="dark"] .card,[data-theme="dark"] .content-card,[data-theme="dark"] .info-panel,[data-theme="dark"] .project-card,[data-theme="dark"] .video-card,[data-theme="dark"] .download-item{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035))}.card:hover,.project-card:hover,.video-card:hover{transform:translateY(-5px);transition:.22s;border-color:rgba(37,99,235,.35)}.icon{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;margin-bottom:16px;font-weight:950}.skill-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.skill-tags span{padding:9px 12px;border-radius:999px;background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.18);color:var(--primary);font-weight:850}.video-grid,.download-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}.video-placeholder{min-height:210px;border-radius:22px;border:1px dashed rgba(37,99,235,.45);display:grid;place-items:center;background:linear-gradient(135deg,rgba(37,99,235,.09),rgba(6,182,212,.10));color:var(--primary);font-weight:950;text-align:center;padding:24px}.video-card video{width:100%;border-radius:18px;background:#000;aspect-ratio:16/9}.download-item{display:flex;justify-content:space-between;gap:15px;align-items:center}.download-actions{display:flex;gap:10px;flex-wrap:wrap}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.upload-layout{display:grid;grid-template-columns:1fr .75fr;gap:24px;align-items:start}label{display:block;color:var(--text);font-weight:850;margin-bottom:15px}input,textarea,select{width:100%;margin-top:8px;padding:14px 15px;border-radius:15px;border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none}option{color:#111}input:focus,textarea:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.12)}.status{min-height:26px;font-weight:800}.admin-only{display:none}.admin-unlocked .admin-only{display:block}.footer{max-width:1220px;margin:42px auto 0;padding:30px 22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:18px;align-items:center}.footer-links{display:flex;gap:14px;flex-wrap:wrap}.footer a{color:var(--muted);text-decoration:none;font-weight:800}.footer a:hover{color:var(--primary)}.mobile-hidden-admin-link{display:none!important}

/* About Accordion */
.skills-expand{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:26px;
}
.skills-expand details{
  background:linear-gradient(180deg,rgba(248,251,255,.95),rgba(237,245,255,.78));
  border:1px solid rgba(37,99,235,.18);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
[data-theme="dark"] .skills-expand details{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border-color:rgba(45,212,191,.22);
}
.skills-expand summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  font-weight:950;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
}
.skills-expand summary::-webkit-details-marker{display:none}
.skills-expand summary::before{
  content:"+";
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  font-weight:950;
  flex:0 0 auto;
}
.skills-expand details[open] summary::before{content:"−"}
.skills-expand details[open] summary{
  border-bottom:1px solid var(--border);
  background:rgba(37,99,235,.06);
}
[data-theme="dark"] .skills-expand details[open] summary{background:rgba(45,212,191,.07)}
.skills-expand ul{
  margin:0;
  padding:16px 20px 18px 58px;
  color:var(--muted);
  line-height:1.75;
}
.skills-expand li{margin-bottom:7px}

/* Stylish Services */
.services-panel{
  border-radius:34px;
  padding:34px;
  background:
    radial-gradient(circle at 0% 0%,rgba(6,182,212,.16),transparent 35%),
    radial-gradient(circle at 100% 0%,rgba(37,99,235,.15),transparent 36%),
    linear-gradient(180deg,rgba(248,251,255,.72),rgba(237,245,255,.58));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
[data-theme="dark"] .services-panel{
  background:
    radial-gradient(circle at 0% 0%,rgba(45,212,191,.10),transparent 35%),
    radial-gradient(circle at 100% 0%,rgba(59,130,246,.13),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
}
.service-card{
  position:relative;
  min-height:245px;
  overflow:hidden;
}
.service-card::after{
  content:"";
  position:absolute;
  right:-38px;
  top:-38px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(37,99,235,.08);
}
[data-theme="dark"] .service-card::after{background:rgba(45,212,191,.08)}
.service-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  font-size:1.45rem;
  background:linear-gradient(135deg,rgba(37,99,235,.15),rgba(6,182,212,.16));
  border:1px solid rgba(37,99,235,.16);
}
.service-list{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
  color:var(--muted);
  font-size:.93rem;
}
.service-list li::before{
  content:"✓";
  color:#22c55e;
  margin-right:8px;
  font-weight:950;
}

@media(max-width:1050px){.hero{grid-template-columns:1fr;padding-top:72px}.hero-card{min-height:330px}.upload-layout{grid-template-columns:1fr}.grid-3,.video-grid,.download-list{grid-template-columns:1fr 1fr}.nav-links{gap:3px}.nav-links a{font-size:.88rem;padding:9px 9px}}
@media(max-width:760px){.skills-expand{grid-template-columns:1fr}.services-panel{padding:20px;border-radius:26px}.nav{padding:12px 16px}.menu-btn{display:inline-flex}.nav-links{display:none;position:absolute;left:14px;right:14px;top:72px;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:14px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}.nav-links.open{display:flex}.nav-links a{padding:13px 14px}.hero{padding:58px 18px 46px}.section,.page{padding:44px 18px}.grid-3,.grid-2,.video-grid,.download-list,.form-grid,.stats{grid-template-columns:1fr}.actions{align-items:stretch}.actions .btn{width:100%}.footer,.download-item{flex-direction:column;align-items:flex-start}.brand span:last-child{font-size:.95rem}h1{font-size:clamp(2.35rem,14vw,4rem)}.hero-card{min-height:280px;border-radius:28px}.screen{padding:14px}.node{flex-direction:column;align-items:flex-start;gap:6px}}

/* =========================================================
   FINAL UI VERBESSERUNGEN
   - dynamische Raster
   - bessere Accordion-Automation ohne Plus-Zeichen
   - Marken-/Logo-Platzhalter
   - Bilderordner vorbereitet: assets/img/
========================================================= */

.brand-mark{
  overflow:hidden;
  background:transparent;
  padding:0;
}

.brand-logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:16px;
}

/* Alle Listen/Karten wachsen automatisch mit der Anzahl der Einträge */
.grid-3,
.video-grid,
.download-list,
.skills-expand{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.grid-2{
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

/* Dateien bleiben auch bei vielen Uploads sauber angeordnet */
.download-list{
  align-items:start;
}

.download-item{
  min-width:0;
}

.download-item strong,
.video-card h3{
  overflow-wrap:anywhere;
}

/* Video-Platzhalter: dynamisch und professioneller */
.video-placeholder{
  min-height:230px;
  position:relative;
  overflow:hidden;
  border-style:solid;
  isolation:isolate;
}

.video-placeholder::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 30% 30%,rgba(45,212,191,.22),transparent 36%),
             radial-gradient(circle at 70% 70%,rgba(37,99,235,.20),transparent 38%);
  z-index:-1;
}

/* Accordion: moderner Button ohne Plus-Zeichen */
.skills-expand{
  display:grid;
  gap:16px;
  margin-top:28px;
}

.skills-expand details{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(37,99,235,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(237,245,255,.56));
  box-shadow:0 16px 36px rgba(15,23,42,.10);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

[data-theme="dark"] .skills-expand details{
  border-color:rgba(45,212,191,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}

.skills-expand details:hover{
  transform:translateY(-3px);
  border-color:rgba(45,212,191,.45);
  box-shadow:0 22px 44px rgba(15,23,42,.16);
}

.skills-expand summary{
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  font-weight:950;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  user-select:none;
}

.skills-expand summary::-webkit-details-marker{
  display:none;
}

.skills-expand summary::before{
  content:"";
  display:none;
}

.skills-expand summary::after{
  content:"⌄";
  width:34px;
  height:34px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:var(--shadow-soft);
  transition:transform .22s ease;
}

.skills-expand details[open] summary::after{
  transform:rotate(180deg);
}

.skills-expand details[open] summary{
  border-bottom:1px solid var(--border);
  background:rgba(37,99,235,.06);
}

[data-theme="dark"] .skills-expand details[open] summary{
  background:rgba(45,212,191,.08);
}

.skills-expand ul{
  margin:0;
  padding:18px 24px 20px 32px;
  color:var(--muted);
  line-height:1.75;
}

.skills-expand li{
  margin-bottom:8px;
}

/* Services behalten den stilistischen Look, aber wachsen dynamisch */
.services-panel .grid-3{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.service-card{
  min-height:250px;
}

/* Auf kleinen Geräten keine festen Breiten */
@media(max-width:760px){
  .grid-3,
  .grid-2,
  .video-grid,
  .download-list,
  .skills-expand,
  .services-panel .grid-3{
    grid-template-columns:1fr;
  }

  .brand-mark{
    width:40px;
    height:40px;
  }
}


/* =========================================================
   FINAL PROFESSIONAL CLEANUP
   - Startseite ruhiger/professioneller
   - Theme-Button klar sichtbar
   - Accordion mit rotierendem Pfeil statt Plus/V
   - Dynamische Raster bleiben erhalten
========================================================= */
body{
  background:
    radial-gradient(circle at 16% -8%,rgba(6,182,212,.14),transparent 28%),
    radial-gradient(circle at 92% 4%,rgba(37,99,235,.14),transparent 30%),
    linear-gradient(180deg,var(--bg),var(--bg-soft));
}
[data-theme="dark"] body{
  background:
    radial-gradient(circle at 16% -8%,rgba(45,212,191,.12),transparent 30%),
    radial-gradient(circle at 90% 0%,rgba(59,130,246,.18),transparent 34%),
    linear-gradient(180deg,#06101f,#0b1730 65%,#07101f);
}
.nav{min-height:74px}.brand{font-size:1.02rem}.brand-mark{width:46px;height:46px;border-radius:18px}.nav-actions{order:3}.nav-links{order:2;margin-left:auto}.theme-toggle{
  min-width:auto;
  height:42px;
  padding:0 14px;
  gap:8px;
  border-radius:999px;
  font-weight:900;
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(6,182,212,.10));
  border:1px solid rgba(37,99,235,.22);
}
[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.07);border-color:rgba(45,212,191,.22)}
.theme-dot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:.86rem}.hero-clean{grid-template-columns:1.05fr .75fr;gap:34px;padding-top:86px;padding-bottom:52px}.hero-clean h1{font-size:clamp(2.4rem,5vw,4.8rem);max-width:820px}.hero-summary{border:1px solid var(--border);border-radius:30px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.45));box-shadow:var(--shadow);align-self:center}
[data-theme="dark"] .hero-summary{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035))}.summary-top{display:flex;gap:14px;align-items:center;margin-bottom:20px}.summary-top img{width:58px;height:58px;border-radius:20px;box-shadow:var(--shadow-soft)}.summary-top strong{display:block;font-size:1.2rem}.summary-top span{display:block;color:var(--muted);font-weight:750;font-size:.92rem;margin-top:4px}.summary-list{display:grid;gap:12px}.summary-list div{display:flex;justify-content:space-between;gap:16px;padding:15px;border-radius:18px;border:1px solid var(--border);background:var(--surface)}.summary-list b{font-weight:950}.summary-list span{color:var(--muted);font-weight:800;text-align:right}.section-compact{padding-top:38px}.center{text-align:center;margin-left:auto;margin-right:auto}.clean-cards .card{min-height:220px}.hero-card{display:none!important}
.skills-expand summary::before{content:none!important}.skills-expand summary{position:relative;padding-right:58px}.skills-expand summary::after{
  content:"›";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  font-size:1.55rem;
  line-height:1;
  transition:transform .28s ease, box-shadow .28s ease;
  box-shadow:0 10px 24px rgba(37,99,235,.18);
}
.skills-expand details[open] summary::after{transform:translateY(-50%) rotate(90deg);box-shadow:0 0 0 6px rgba(37,99,235,.10)}
.skills-expand details{transition:transform .22s ease, border-color .22s ease}.skills-expand details:hover{transform:translateY(-2px);border-color:rgba(37,99,235,.38)}
[data-theme="dark"] .skills-expand details:hover{border-color:rgba(45,212,191,.38)}
@media(max-width:1050px){.hero-clean{grid-template-columns:1fr}.hero-summary{max-width:760px}.nav-links{order:4;margin-left:0}}
@media(max-width:760px){.theme-toggle span:last-child{display:none}.theme-toggle{width:42px;padding:0}.hero-clean{padding-top:50px}.summary-list div{flex-direction:column}.summary-list span{text-align:left}.nav-actions{margin-left:auto}.nav-links{top:74px}.hero-clean h1{letter-spacing:-.045em}.lead{font-size:1.03rem}}


/* =========================================================
   HERO + THEME FINAL
   - Theme-Schalter aus der Navigation entfernt
   - kleiner schwebender Hell/Dunkel-Button
   - professionelle Hero-Typografie mit dezenter Bewegung
========================================================= */
.nav-actions .theme-toggle{
  display:none!important;
}

.floating-theme{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1000;
  width:44px;
  height:44px;
  min-width:44px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(37,99,235,.22);
  background:rgba(248,251,255,.82);
  color:var(--text);
  display:grid;
  place-items:center;
  font-size:1.05rem;
  font-weight:900;
  box-shadow:0 16px 42px rgba(15,23,42,.18);
  backdrop-filter:blur(14px);
}

[data-theme="dark"] .floating-theme{
  background:rgba(6,16,31,.78);
  border-color:rgba(45,212,191,.24);
  color:#fff;
}

.floating-theme:hover{
  transform:translateY(-3px) rotate(8deg);
  border-color:var(--primary);
  box-shadow:0 20px 52px rgba(37,99,235,.22);
}

.hero-title{
  font-size:clamp(2.6rem,5.8vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.07em;
  max-width:900px;
  margin:18px 0 22px;
  animation:heroFadeUp .8s ease both;
}

.hero-title span{
  display:block;
}

.hero-title-main{
  color:var(--text);
}

.hero-title span:nth-child(2){
  color:var(--text);
}

.hero-title-gradient{
  background:linear-gradient(135deg,var(--primary),var(--primary-2),var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 16px 34px rgba(37,99,235,.12));
}

.hero-title-gradient::after{
  content:"";
  display:block;
  width:min(260px,45vw);
  height:5px;
  margin-top:16px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2),transparent);
  animation:heroLine 1.1s ease .25s both;
}

@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes heroLine{
  from{opacity:0;width:0}
  to{opacity:1;width:min(260px,45vw)}
}

.hero-clean .badge{
  animation:badgeFloat 4.5s ease-in-out infinite;
}

@keyframes badgeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media(max-width:760px){
  .floating-theme{
    right:16px;
    bottom:16px;
    width:42px;
    height:42px;
    min-width:42px;
  }
  .hero-title{
    letter-spacing:-.05em;
  }
}

/* Legal pages */
.legal-card{
  max-width:980px;
}
.legal-card h2{
  font-size:clamp(1.35rem,2vw,2rem);
  margin-top:30px;
}
.legal-card p,.legal-card li{
  color:var(--muted);
  line-height:1.8;
}
.legal-card ul{
  padding-left:22px;
}

/* Single-open accordion polish */
.skills-expand details[open]{
  border-color:rgba(37,99,235,.42);
}
[data-theme="dark"] .skills-expand details[open]{
  border-color:rgba(45,212,191,.48);
}


/* =========================================================
   Final Hero Polish: zentriert, ruhiger, moderne Animation
========================================================= */
.hero-centered{
  min-height:calc(100vh - 78px);
  display:flex!important;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:96px 22px 72px!important;
  position:relative;
  overflow:hidden;
}
.hero-centered::before{
  content:"";
  position:absolute;
  width:min(720px,80vw);
  height:min(720px,80vw);
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(45,212,191,.16), transparent 58%),
    radial-gradient(circle at 70% 30%, rgba(59,130,246,.18), transparent 50%);
  filter:blur(12px);
  pointer-events:none;
  animation:heroGlow 8s ease-in-out infinite alternate;
}
[data-theme="light"] .hero-centered::before{
  background:
    radial-gradient(circle, rgba(37,99,235,.12), transparent 58%),
    radial-gradient(circle at 70% 30%, rgba(6,182,212,.14), transparent 50%);
}
.hero-text-centered{
  position:relative;
  z-index:2;
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-badge{
  animation:badgeEntrance .8s cubic-bezier(.2,.8,.2,1) both, badgeFloat 5s ease-in-out 1s infinite!important;
}
.hero-title-modern{
  max-width:980px!important;
  margin:22px auto 24px!important;
  font-size:clamp(3rem,7vw,6.5rem)!important;
  line-height:.94!important;
  letter-spacing:-.075em!important;
  text-wrap:balance;
}
.hero-title-modern span{
  display:block;
}
.hero-title-modern .hero-title-main,
.hero-title-modern span:nth-child(2){
  color:var(--text)!important;
  background:none!important;
  -webkit-text-fill-color:initial!important;
  opacity:0;
  transform:translateY(28px) scale(.985);
  animation:titleReveal .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-title-modern span:nth-child(2){
  animation-delay:.12s;
}
.hero-title-modern .hero-title-gradient{
  background:linear-gradient(110deg,var(--primary),var(--primary-2),var(--accent),var(--primary))!important;
  background-size:260% 260%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  opacity:0;
  transform:translateY(28px) scale(.985);
  animation:titleReveal .9s cubic-bezier(.2,.8,.2,1) .24s forwards, gradientMove 7s ease infinite;
  filter:drop-shadow(0 18px 35px rgba(37,99,235,.18));
}
.hero-title-modern .hero-title-gradient::after{
  content:"";
  display:block;
  width:min(360px,62vw);
  height:6px;
  margin:22px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--primary),var(--primary-2),transparent);
  animation:heroLineCenter 1.1s cubic-bezier(.2,.8,.2,1) .55s both;
}
.hero-lead{
  max-width:860px!important;
  margin:0 auto;
  font-size:clamp(1.05rem,1.65vw,1.35rem)!important;
  line-height:1.75!important;
  opacity:0;
  transform:translateY(16px);
  animation:fadeLift .8s ease .55s forwards;
}
.hero-actions{
  justify-content:center!important;
  gap:16px!important;
  margin-top:36px!important;
  opacity:0;
  transform:translateY(18px);
  animation:fadeLift .8s ease .72s forwards;
}
.cta-btn{
  min-width:190px;
  min-height:56px;
  border-radius:999px!important;
  padding:16px 24px!important;
  font-size:1rem;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.cta-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.24),transparent);
  transform:translateX(-120%);
  transition:transform .55s ease;
  z-index:-1;
}
.cta-btn:hover::before{
  transform:translateX(120%);
}
.cta-btn:hover{
  transform:translateY(-4px) scale(1.015)!important;
}
.cta-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;
  color:#fff!important;
  box-shadow:0 18px 45px rgba(37,99,235,.28)!important;
}
.cta-ghost{
  background:rgba(255,255,255,.08)!important;
  border:1px solid var(--border)!important;
  color:var(--text)!important;
  backdrop-filter:blur(14px);
}
.cta-soft{
  background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(245,158,11,.10))!important;
  color:#f59e0b!important;
  border:1px solid rgba(245,158,11,.32)!important;
}
[data-theme="light"] .cta-soft{
  color:#92400e!important;
}

@keyframes titleReveal{
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeLift{
  to{opacity:1;transform:translateY(0)}
}
@keyframes gradientMove{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes heroLineCenter{
  from{opacity:0;transform:scaleX(.15)}
  to{opacity:1;transform:scaleX(1)}
}
@keyframes heroGlow{
  from{transform:translate(-50%,-50%) scale(.96);opacity:.74}
  to{transform:translate(-50%,-50%) scale(1.05);opacity:1}
}
@keyframes badgeEntrance{
  from{opacity:0;transform:translateY(-12px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:760px){
  .hero-centered{
    min-height:auto;
    padding:72px 18px 54px!important;
  }
  .hero-title-modern{
    font-size:clamp(2.55rem,13vw,4.4rem)!important;
    letter-spacing:-.055em!important;
  }
  .hero-actions{
    width:100%;
    max-width:420px;
  }
  .cta-btn{
    width:100%;
    min-width:0;
  }
}


/* =========================================================
   ADMIN DASHBOARD SAFE EXTENSION
   Ergänzt Admin-Karten, Listen, Kommentare und Nachrichten.
========================================================= */
.admin-login-card{
  max-width:720px;
}

.admin-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin:24px 0 30px;
}

.admin-stat-card{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  border:1px solid var(--border);
  border-radius:24px;
  padding:22px;
  box-shadow:var(--shadow);
}

[data-theme="dark"] .admin-stat-card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}

.admin-stat-card span,
.admin-stat-card small,
.admin-muted{
  color:var(--muted);
  font-weight:800;
}

.admin-stat-card strong{
  display:block;
  font-size:2.2rem;
  margin:8px 0 3px;
  letter-spacing:-.04em;
}

.admin-list{
  display:grid;
  gap:16px;
  margin-top:18px;
}

.admin-row{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  border:1px solid var(--border);
  border-radius:24px;
  padding:20px;
  box-shadow:var(--shadow);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}

[data-theme="dark"] .admin-row{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}

.admin-row h3{
  margin:0 0 8px;
  font-size:1.08rem;
}

.admin-row p{
  margin:5px 0;
}

.admin-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.admin-danger{
  background:rgba(239,68,68,.14)!important;
  color:#dc2626!important;
  border:1px solid rgba(239,68,68,.28)!important;
}

[data-theme="dark"] .admin-danger{
  color:#fecaca!important;
}

.admin-success{
  background:rgba(34,197,94,.15)!important;
  color:#15803d!important;
  border:1px solid rgba(34,197,94,.28)!important;
}

[data-theme="dark"] .admin-success{
  color:#bbf7d0!important;
}

.empty-card{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42));
  border:1px solid var(--border);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow);
}

[data-theme="dark"] .empty-card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}

@media(max-width:760px){
  .admin-row{
    flex-direction:column;
  }
  .admin-actions,
  .admin-actions .btn{
    width:100%;
  }
}


/* =========================================================
   COMMENTS SECTION FINAL
   Abstand + Scrollbereich für viele Kommentare
========================================================= */

.comments-section{
  margin-top:60px;
}

#commentsList{
  margin-top:30px;
  max-height:520px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-right:10px;
  scroll-behavior:smooth;
}

#commentsList::-webkit-scrollbar{
  width:8px;
}

#commentsList::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}

#commentsList::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  border-radius:999px;
}

#commentsList .admin-row{
  margin:0;
  padding:22px;
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  box-shadow:none;
}

#commentsList .admin-row h3{
  margin-bottom:8px;
}

#commentsList .admin-row p{
  margin:6px 0;
}

@media(max-width:760px){
  .comments-section{
    margin-top:42px;
  }

  #commentsList{
    max-height:420px;
  }
}
/* =========================================================
   PROJECTS + COMMENTS FIX
========================================================= */

.projects-grid{
  margin-bottom:70px;
}

.comments-section{
  margin-top:70px;
  clear:both;
}

.comment-form{
  margin-top:28px;
}

.comments-list{
  margin-top:34px;
  max-height:520px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-right:10px;
}

.comments-list::-webkit-scrollbar{
  width:8px;
}

.comments-list::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}

.comments-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  border-radius:999px;
}

.comments-list .admin-row{
  width:100%;
  margin:0;
  padding:22px;
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  box-shadow:none;
  display:block;
}

.comments-list .admin-row h3{
  margin:0 0 8px;
}

.comments-list .admin-row p{
  margin:6px 0;
}

@media(max-width:760px){
  .projects-grid{
    margin-bottom:42px;
  }

  .comments-section{
    margin-top:42px;
  }

  .comments-list{
    max-height:420px;
  }
}

/* =========================================================
   LAYOUT FIX FINAL
   Fix für Projekte/Kommentare + Downloads/Videos Karten
   Wichtig: Dieser Block steht ganz unten und überschreibt ältere Regeln.
========================================================= */

/* Projekte: Karten sauber, danach eigener Kommentarblock */
.projects-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
  margin-bottom:56px !important;
}

.projects-grid .project-card{
  min-height:220px;
  display:flex;
  flex-direction:column;
}

/* Kommentarbereich darf nicht seitlich/merged wirken */
.comments-section{
  width:100% !important;
  display:block !important;
  clear:both !important;
  margin-top:56px !important;
  padding:34px !important;
}

.comment-form{
  margin-top:26px;
}

.comments-list,
#commentsList{
  width:100%;
  margin-top:34px;
  max-height:520px;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-right:10px;
  scroll-behavior:smooth;
}

.comments-list::-webkit-scrollbar,
#commentsList::-webkit-scrollbar{
  width:8px;
}

.comments-list::-webkit-scrollbar-track,
#commentsList::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}

.comments-list::-webkit-scrollbar-thumb,
#commentsList::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  border-radius:999px;
}

.comments-list .admin-row,
#commentsList .admin-row{
  width:100%;
  display:block !important;
  margin:0;
  padding:22px;
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  box-shadow:none;
}

.comments-list .admin-row h3,
#commentsList .admin-row h3{
  margin:0 0 8px;
}

.comments-list .admin-row p,
#commentsList .admin-row p{
  margin:6px 0;
}

/* Downloads: keine überlappenden Buttons bei vielen Dateien */
.download-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
}

.download-item{
  min-width:0 !important;
  min-height:210px;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:18px !important;
  overflow:hidden;
}

.download-item > div:first-child{
  width:100%;
  min-width:0;
}

.download-item h3,
.download-item p,
.download-item strong{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.download-actions{
  width:100%;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:10px;
  margin-top:auto;
}

.download-actions .btn{
  max-width:100%;
}

/* Videos: gleiche saubere Kartenstruktur */
.video-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
}

.video-card{
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px;
  overflow:hidden;
}

.video-card video{
  width:100%;
  max-width:100%;
  border-radius:18px;
}

.video-card h3,
.video-card p,
.video-card small{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Admin-Listen bleiben lesbar */
.admin-list,
.admin-table{
  display:grid;
  gap:18px;
}

@media(max-width:1050px){
  .projects-grid{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:760px){
  .projects-grid,
  .download-list,
  .video-grid{
    grid-template-columns:1fr !important;
  }

  .comments-section{
    margin-top:42px !important;
    padding:24px !important;
  }

  .comments-list,
  #commentsList{
    max-height:420px;
    padding-right:6px;
  }

  .download-actions,
  .download-actions .btn{
    width:100%;
  }
}


/* =========================================================
   ABSOLUTE FINAL LAYOUT FIX
   Projekte, Kommentare, Downloads und Videos sauber getrennt
   Diese Regeln stehen bewusst ganz unten und überschreiben alte Regeln.
========================================================= */

main.page{
  width:100%;
}

/* Projekte: Karten immer als sauberes Raster */
main.page > .projects-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
  margin-bottom:86px !important;
}

main.page > .projects-grid > .project-card{
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
}

/* Kommentare: eigener Block, niemals neben/über Projektkarten */
main.page > .comments-section{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  clear:both !important;
  margin-top:0 !important;
  margin-bottom:42px !important;
  padding:34px !important;
}

.comment-form{
  margin-top:26px !important;
  max-width:100% !important;
}

.comment-form label{
  display:block !important;
  width:100% !important;
}

.comments-list,
#commentsList{
  width:100% !important;
  max-width:100% !important;
  margin-top:34px !important;
  max-height:520px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  padding-right:10px !important;
}

.comments-list .admin-row,
#commentsList .admin-row{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:22px !important;
  box-shadow:none !important;
}

/* Downloads: neue öffentliche Kartenstruktur */
#downloadList.download-list,
.public-downloads{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap:26px !important;
  align-items:stretch !important;
  width:100% !important;
}

#downloadList .download-item,
#downloadList .public-download-card{
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:stretch !important;
  gap:18px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:220px !important;
  overflow:hidden !important;
}

.public-download-card__content{
  min-width:0 !important;
  width:100% !important;
}

.public-download-card__actions,
#downloadList .download-actions{
  width:100% !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

.public-download-card__actions .btn,
#downloadList .download-actions .btn{
  position:static !important;
  width:auto !important;
  max-width:100% !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

/* Videos: gleiche saubere Kartenstruktur */
#videoList.video-grid,
.public-video-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap:26px !important;
  align-items:stretch !important;
  width:100% !important;
}

#videoList .video-card,
#videoList .public-video-card{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  min-width:0 !important;
  width:100% !important;
  min-height:260px !important;
  overflow:hidden !important;
}

#videoList video{
  width:100% !important;
  max-width:100% !important;
}

/* Lange Wörter und Dateinamen immer umbrechen */
#downloadList *,
#videoList *,
#commentsList *,
.projects-grid *{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* Scrollbar für Kommentare */
#commentsList::-webkit-scrollbar{
  width:8px;
}

#commentsList::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}

#commentsList::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  border-radius:999px;
}

/* Tablet */
@media(max-width:1050px){
  main.page > .projects-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  #downloadList.download-list,
  .public-downloads,
  #videoList.video-grid,
  .public-video-grid{
    grid-template-columns:repeat(2, minmax(280px, 1fr)) !important;
  }
}

/* Mobile */
@media(max-width:760px){
  main.page > .projects-grid,
  #downloadList.download-list,
  .public-downloads,
  #videoList.video-grid,
  .public-video-grid{
    grid-template-columns:1fr !important;
  }

  main.page > .projects-grid{
    margin-bottom:46px !important;
  }

  main.page > .comments-section{
    padding:24px !important;
  }

  #commentsList{
    max-height:420px !important;
  }

  #downloadList .download-item,
  #downloadList .public-download-card{
    min-height:auto !important;
  }
}

/* FINAL SCROLL + LAYOUT FIX */
.comments-list,#commentsList{max-height:500px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}
.download-list{max-height:700px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.video-grid{max-height:700px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.projects-grid{margin-bottom:80px!important}
.comments-section{margin-top:80px!important;clear:both}
.download-item,.video-card{overflow:hidden}


/* Projektseite: Phishing Awareness Lab */
.featured-project-card{
  position:relative;
  overflow:hidden;
  border-color:rgba(37,99,235,.28);
}
.featured-project-card:before{
  content:"";
  position:absolute;
  right:-70px;
  top:-70px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  opacity:.14;
}
.featured-project-card > *{position:relative}
.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 18px;
}
.project-tags span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  color:var(--primary);
  font-weight:850;
  font-size:.86rem;
}
.project-link{margin-top:4px}
.featured-project-section{padding-top:16px}
.project-highlight{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.project-detail-page{
  padding-top:54px;
}
.project-hero-detail{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:28px;
  align-items:stretch;
  margin-bottom:28px;
}
.project-hero-detail h1{
  max-width:850px;
}
.project-facts h2{
  font-size:1.55rem;
}
.check-list{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:grid;
  gap:12px;
}
.check-list li{
  position:relative;
  padding-left:30px;
  color:var(--muted);
  line-height:1.65;
}
.check-list li:before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  width:21px;
  height:21px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(37,99,235,.12);
  color:var(--primary);
  font-weight:950;
  font-size:.82rem;
}
.project-metrics{
  margin:28px 0;
}
.lab-diagram{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:14px;
  align-items:center;
  margin-top:26px;
}
.lab-node{
  min-height:145px;
  border:1px solid var(--border);
  border-radius:24px;
  padding:20px;
  background:var(--surface-2);
  box-shadow:0 12px 28px rgba(0,0,0,.06);
}
.lab-node strong{
  display:block;
  font-size:1.08rem;
  margin-bottom:8px;
}
.lab-node span{
  display:inline-flex;
  margin-bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  color:var(--primary);
  font-weight:900;
}
.lab-node small{
  display:block;
  color:var(--muted);
  line-height:1.55;
}
.lab-arrow{
  color:var(--primary);
  font-size:1.6rem;
  font-weight:950;
}
.large-tags span{
  font-size:.95rem;
  padding:9px 12px;
}
.timeline{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-top:24px;
}
.timeline div{
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  background:var(--surface-2);
}
.timeline strong{
  width:34px;
  height:34px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  margin-bottom:12px;
}
.timeline span{
  color:var(--muted);
  font-weight:850;
}
@media (max-width:900px){
  .project-hero-detail,
  .project-highlight{
    grid-template-columns:1fr;
    display:grid;
  }
  .lab-diagram,
  .timeline{
    grid-template-columns:1fr;
  }
  .lab-arrow{
    transform:rotate(90deg);
    text-align:center;
  }
}


/* Saubere Projektseite Phishing Awareness Lab - überschreibt nur diese Seite */
.project-lab-page{max-width:1180px;margin:0 auto;padding:72px 22px 64px;overflow:hidden}.project-lab-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);gap:34px;align-items:center;margin-bottom:26px}.project-lab-copy{min-width:0}.project-lab-copy h1{font-size:clamp(2.6rem,5.8vw,5.1rem);line-height:1.02;margin:14px 0 18px;letter-spacing:-.055em}.project-lab-copy .lead{max-width:700px}.project-lab-visual{border:1px solid var(--border);border-radius:32px;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.35));box-shadow:var(--shadow);overflow:hidden}.project-lab-visual img,.workflow-card img{display:block;width:100%;height:auto;border-radius:24px}.project-lab-card{border:1px solid var(--border);border-radius:30px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.40));box-shadow:var(--shadow);margin:22px 0}.overview-card{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}.clean-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}.clean-list li{position:relative;padding-left:28px;color:var(--muted);line-height:1.65}.clean-list li:before{content:"✓";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:rgba(45,212,191,.14);color:var(--primary);font-weight:950;font-size:.78rem}.project-lab-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:22px 0}.project-lab-metrics article{border:1px solid var(--border);border-radius:28px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.36));box-shadow:var(--shadow)}.project-lab-metrics span{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;margin-bottom:15px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:950}.project-lab-metrics h3{margin-bottom:10px}.system-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}.system-grid article{border:1px solid var(--border);border-radius:22px;padding:20px;background:var(--surface-2)}.system-grid b{display:block;font-size:1.05rem;margin-bottom:8px}.system-grid span{display:inline-flex;border-radius:999px;padding:6px 10px;background:rgba(37,99,235,.10);color:var(--primary);font-weight:900;margin-bottom:8px}.system-grid p{margin:0;font-size:.95rem}.project-lab-split{display:grid;grid-template-columns:1fr 1fr;gap:22px}.project-lab-split .project-lab-card{margin:0}.workflow-card{display:grid;grid-template-columns:.75fr 1.25fr;gap:24px;align-items:center}[data-theme="dark"] .project-lab-visual,[data-theme="dark"] .project-lab-card,[data-theme="dark"] .project-lab-metrics article{background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035))}@media(max-width:980px){.project-lab-page{padding-top:52px}.project-lab-hero,.overview-card,.workflow-card,.project-lab-split{grid-template-columns:1fr}.system-grid{grid-template-columns:1fr 1fr}.project-lab-metrics{grid-template-columns:1fr}}@media(max-width:560px){.project-lab-page{padding-left:16px;padding-right:16px}.project-lab-card,.project-lab-visual,.project-lab-metrics article{border-radius:24px;padding:20px}.system-grid{grid-template-columns:1fr}.project-lab-copy h1{font-size:2.55rem}.actions .btn{width:100%}}


/* =========================================================
   HOMELAB PROJECT INTEGRATION FINAL
   Eigene Projektseite + stabile Karten/Scroll-Layouts
========================================================= */

.homelab-page .project-lab-visual{
  background:
    radial-gradient(circle at 20% 10%,rgba(45,212,191,.12),transparent 35%),
    radial-gradient(circle at 90% 20%,rgba(59,130,246,.14),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}

.homelab-system-grid{
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
}

.featured-project-card{
  position:relative;
  overflow:hidden;
}

.featured-project-card::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-80px;
  top:-80px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(45,212,191,.16),rgba(59,130,246,.18));
  pointer-events:none;
}

.project-link{
  margin-top:14px;
}

.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 8px;
}

.project-tags span{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  color:var(--primary);
  background:rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  font-weight:850;
  font-size:.82rem;
}

/* Projekte und Kommentare sauber trennen */
.projects-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
  margin-bottom:80px !important;
}

.comments-section{
  margin-top:80px !important;
  clear:both !important;
  display:block !important;
  width:100% !important;
}

.comment-form{
  margin-top:28px !important;
}

.comments-list,
#commentsList{
  margin-top:34px !important;
  max-height:520px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  padding-right:10px !important;
}

.comments-list .admin-row,
#commentsList .admin-row{
  width:100% !important;
  margin:0 !important;
  padding:22px !important;
  border-radius:22px !important;
  display:block !important;
  box-shadow:none !important;
}

/* Downloads und Videos scrollbar, ohne Überlappung */
.download-list,
.video-grid{
  max-height:720px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  gap:24px !important;
  padding-right:10px !important;
  align-items:stretch !important;
}

.download-list{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr)) !important;
}

.video-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr)) !important;
}

.download-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  min-height:220px !important;
  width:100% !important;
  overflow:hidden !important;
}

.download-actions{
  width:100% !important;
  display:flex !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
}

.download-actions .btn{
  max-width:100% !important;
  white-space:normal !important;
}

.video-card{
  overflow:hidden !important;
}

.download-item h3,
.download-item p,
.video-card h3,
.video-card p,
.admin-row h3,
.admin-row p{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* Schöne Scrollbars */
.comments-list::-webkit-scrollbar,
#commentsList::-webkit-scrollbar,
.download-list::-webkit-scrollbar,
.video-grid::-webkit-scrollbar{
  width:8px;
}

.comments-list::-webkit-scrollbar-track,
#commentsList::-webkit-scrollbar-track,
.download-list::-webkit-scrollbar-track,
.video-grid::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}

.comments-list::-webkit-scrollbar-thumb,
#commentsList::-webkit-scrollbar-thumb,
.download-list::-webkit-scrollbar-thumb,
.video-grid::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  border-radius:999px;
}

@media(max-width:760px){
  .projects-grid,
  .download-list,
  .video-grid{
    grid-template-columns:1fr !important;
  }

  .comments-section{
    margin-top:46px !important;
  }

  .comments-list,
  #commentsList,
  .download-list,
  .video-grid{
    max-height:460px !important;
  }

  .download-item{
    min-height:auto !important;
  }
}

/* =========================================================
   HOMELAB KALI ISOLATED NETWORK UPDATE
   Kali Linux is intentionally separate from pfSense/AD LAN.
========================================================= */

.isolated-lab-card{
  border-color:rgba(245,158,11,.35) !important;
  background:
    radial-gradient(circle at 12% 10%,rgba(245,158,11,.13),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.40)) !important;
}

[data-theme="dark"] .isolated-lab-card{
  background:
    radial-gradient(circle at 12% 10%,rgba(245,158,11,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035)) !important;
}

.isolated-lab-card .project-tags span{
  border-color:rgba(245,158,11,.28);
  background:rgba(245,158,11,.12);
}

/* Professional icon upgrade - safe visual enhancement */
.professional-feature-cards .feature-card-pro{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.professional-feature-cards .feature-card-pro::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:radial-gradient(circle at 20% 12%,rgba(45,212,191,.18),transparent 34%),
             radial-gradient(circle at 88% 0%,rgba(59,130,246,.16),transparent 30%);
  opacity:.85;
  z-index:-1;
}
.professional-feature-cards .feature-card-pro:hover{
  transform:translateY(-7px);
  border-color:rgba(45,212,191,.42);
  box-shadow:0 22px 70px rgba(6,182,212,.16);
}
.feature-icon-pro{
  width:62px;
  height:62px;
  border-radius:22px;
  margin-bottom:18px;
  background:linear-gradient(135deg,#2dd4bf,#38bdf8 55%,#2563eb);
  box-shadow:0 16px 35px rgba(6,182,212,.28), inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;
  animation:iconFloat 4.6s ease-in-out infinite;
}
.feature-icon-pro::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:28px;
  border:1px solid rgba(45,212,191,.22);
  opacity:0;
  transform:scale(.86);
  transition:.25s ease;
}
.feature-card-pro:hover .feature-icon-pro::after{
  opacity:1;
  transform:scale(1);
}
.feature-icon-pro svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:#fff;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.22));
}
.feature-icon-pro svg path:first-child:not(:only-child){
  fill:rgba(255,255,255,.10);
}
.feature-card-pro:nth-child(2) .feature-icon-pro{animation-delay:.28s;}
.feature-card-pro:nth-child(3) .feature-icon-pro{animation-delay:.56s;}
@keyframes iconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){
  .feature-icon-pro{animation:none;}
  .professional-feature-cards .feature-card-pro{transition:none;}
}

/* Homelab architecture image polish */
.homelab-page .project-lab-visual img{
  background:#06101f;
  border:1px solid rgba(45,212,191,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}


/* =========================================================
   Professional animated project icons - added safely
========================================================= */
.tech-icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:inline-grid;
  place-items:center;
  margin-bottom:16px;
  color:#ecfeff;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.35),transparent 24%),
    linear-gradient(135deg,#2dd4bf,#3b82f6 72%);
  border:1px solid rgba(125,211,252,.42);
  box-shadow:0 18px 38px rgba(37,99,235,.22), inset 0 1px 0 rgba(255,255,255,.22);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}
.tech-icon::after{
  content:"";
  position:absolute;
  inset:-55%;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.30) 48%,transparent 58%);
  transform:translateX(-48%) rotate(12deg);
  opacity:.55;
  animation:iconSheen 4.6s ease-in-out infinite;
  z-index:-1;
}
.tech-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.tech-icon svg path:first-child,.tech-icon svg rect:first-child,.tech-icon svg circle:first-child{fill:rgba(255,255,255,.08)}
.project-card:hover .tech-icon,.project-lab-metrics article:hover .tech-icon,.system-grid article:hover .tech-icon{transform:translateY(-7px) scale(1.04);box-shadow:0 24px 50px rgba(45,212,191,.24),0 0 0 6px rgba(45,212,191,.06)}
.project-card,.project-lab-metrics article,.system-grid article{transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease}
.project-card:hover,.project-lab-metrics article:hover,.system-grid article:hover{transform:translateY(-6px);border-color:rgba(45,212,191,.42);box-shadow:0 24px 60px rgba(2,6,23,.26)}
.project-lab-metrics span.tech-icon{display:inline-grid;margin-bottom:15px;color:#fff;background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.35),transparent 24%),linear-gradient(135deg,#2dd4bf,#3b82f6 72%)}
.system-grid article .tech-icon{width:46px;height:46px;border-radius:16px;margin-bottom:12px}.system-grid article .tech-icon svg{width:25px;height:25px}.system-grid b{font-size:1.08rem}.system-grid span:not(.tech-icon){box-shadow:inset 0 0 0 1px rgba(45,212,191,.12)}
.tech-icon-vpn,.tech-icon-fw,.tech-icon-kali{background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.35),transparent 24%),linear-gradient(135deg,#22c55e,#3b82f6)}
.tech-icon-doc,.tech-icon-log,.tech-icon-file{background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.35),transparent 24%),linear-gradient(135deg,#06b6d4,#2563eb)}
.tech-icon-shield,.tech-icon-gophish{background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.35),transparent 24%),linear-gradient(135deg,#14b8a6,#0ea5e9)}
.tech-icon-mail,.tech-icon-router{background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.35),transparent 24%),linear-gradient(135deg,#38bdf8,#6366f1)}
@keyframes iconSheen{0%,60%{transform:translateX(-60%) rotate(12deg)}82%,100%{transform:translateX(58%) rotate(12deg)}}
@media (prefers-reduced-motion:reduce){.tech-icon::after{animation:none}.tech-icon,.project-card,.project-lab-metrics article,.system-grid article{transition:none}}


/* =========================================================
   HERO TRUST + PROFESSIONAL FEATURE TEXT
   - Ergänzt eine dezente Vertrauenszeile unter den CTA-Buttons
   - Keine bestehenden Funktionen werden verändert
========================================================= */

.hero-trust {
  margin: 22px auto 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
  text-align: center;
  opacity: 0.92;
}

.hero-centered .hero-trust {
  margin-left: auto;
  margin-right: auto;
}

.professional-feature-cards .feature-card-pro h3 {
  letter-spacing: -0.03em;
}

.professional-feature-cards .feature-card-pro p {
  line-height: 1.7;
}

@media (max-width: 760px) {
  .hero-trust {
    font-size: 0.92rem;
    line-height: 1.65;
    padding: 0 6px;
  }
}


/* =========================================================
   PROFESSIONAL FOOTER + 4 FEATURE CARDS
   - Social Links links unter dem Footer-Text
   - rechte Seite bleibt nur Navigation
   - Footer bleibt kompakt und responsiv
========================================================= */

.professional-feature-cards{
  grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
}

.professional-feature-cards .feature-card-pro{
  min-height:300px;
}

.footer-pro{
  align-items:flex-start;
  padding-top:28px;
  padding-bottom:28px;
  gap:28px;
}

.footer-branding{
  max-width:560px;
}

.footer-branding strong{
  display:block;
  font-size:1.08rem;
  letter-spacing:-.02em;
  margin-bottom:8px;
}

.footer-branding p{
  margin:0;
  max-width:560px;
  line-height:1.65;
}

.footer-pro .footer-links{
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  padding-top:4px;
}

.footer-social{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:14px;
}

.social-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(255,255,255,.04);
  color:var(--muted)!important;
  font-weight:850;
  font-size:.88rem;
  text-decoration:none;
  transition:transform .22s ease,color .22s ease,border-color .22s ease,background .22s ease;
}

.social-link:hover{
  transform:translateY(-2px);
  color:var(--primary)!important;
  border-color:rgba(45,212,191,.35);
  background:rgba(45,212,191,.08);
}

.social-link svg{
  width:15px;
  height:15px;
  fill:currentColor;
  stroke:none;
  flex:0 0 auto;
}

@media(max-width:760px){
  .footer-pro{
    gap:20px;
  }

  .footer-pro .footer-links{
    justify-content:flex-start;
    gap:12px;
  }

  .footer-social{
    gap:8px;
  }

  .social-link{
    width:auto;
    justify-content:flex-start;
    font-size:.86rem;
    padding:7px 9px;
  }
}


.footer-social-minimal{
  display:flex;
  gap:14px;
  margin-top:14px;
  align-items:center;
}

.social-icon{
  width:18px;
  height:18px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}

.social-icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

.social-icon:hover{
  color:var(--primary);
  transform:translateY(-2px);
}

/* Footer social icons inline next to brand title */
.footer-title-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.footer-title-row strong{
  margin-bottom:0;
}

.footer-title-row .footer-social-minimal{
  margin-top:0;
  gap:12px;
}

.footer-title-row .social-icon{
  width:16px;
  height:16px;
  opacity:.95;
}

.footer-title-row .social-icon svg{
  width:16px;
  height:16px;
}

@media(max-width:760px){
  .footer-title-row{
    gap:12px;
  }
}


/* =========================================================
   FOOTER SOCIAL ICON COLORS
   - Original brand colors
   - Small icons next to "Yemane InfoTech"
   - No button background, no layout change
========================================================= */
.footer-title-row .social-icon{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  text-decoration:none;
}

.footer-title-row .social-youtube{
  color:#ff0000!important;
}

.footer-title-row .social-x{
  color:#f8fafc!important;
}

.footer-title-row .social-facebook{
  color:#1877f2!important;
}

.footer-title-row .social-icon:hover{
  transform:translateY(-2px);
  opacity:.82;
}

[data-theme="light"] .footer-title-row .social-x,
.footer-title-row .social-x{
  color:#f8fafc!important;
}


/* =========================================================
   FOOTER SOCIAL ICONS - FINAL ORIGINAL BRAND STYLE
   YouTube uses official red rounded shape with white play icon.
   Icons stay inline beside "Yemane InfoTech" with professional spacing.
========================================================= */
.footer-title-row{
  display:flex;
  align-items:center;
  gap:28px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.footer-title-row strong{
  margin-bottom:0;
}

.footer-title-row .footer-social-minimal{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:0;
}

.footer-title-row .social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  text-decoration:none;
  line-height:1;
  transition:transform .22s ease, opacity .22s ease, filter .22s ease;
}

.footer-title-row .social-icon:hover{
  transform:translateY(-2px);
  opacity:.88;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.25));
}

/* YouTube: official-like red rounded rectangle + white play */
.footer-title-row .social-youtube{
  width:34px;
  height:24px;
  color:inherit!important;
}

.footer-title-row .social-youtube svg{
  width:34px;
  height:24px;
  display:block;
  fill:none!important;
}

/* X: clean white brand mark */
.footer-title-row .social-x{
  width:22px;
  height:22px;
  color:#f8fafc!important;
}

.footer-title-row .social-x svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

/* Facebook: original blue */
.footer-title-row .social-facebook{
  width:22px;
  height:22px;
  color:#1877f2!important;
}

.footer-title-row .social-facebook svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

@media(max-width:760px){
  .footer-title-row{
    gap:18px;
  }

  .footer-title-row .footer-social-minimal{
    gap:16px;
  }
}

/* Footer social icon fixes */
.footer-brand-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.footer-socials{
  display:flex;
  align-items:center;
  gap:14px;
}

.footer-socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.youtube-icon{
  width:34px !important;
  height:24px !important;
  background:#ff0000 !important;
  border-radius:8px !important;
  position:relative;
}

.youtube-icon::before{
  content:'';
  position:absolute;
  left:13px;
  top:7px;
  width:0;
  height:0;
  border-left:10px solid white;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}

.youtube-icon i{
  display:none !important;
}

.footer-socials .fa-x-twitter{
  color:#ffffff !important;
  font-size:1.5rem !important;
}

.footer-socials .fa-facebook-f{
  color:#1877f2 !important;
  font-size:1.4rem !important;
}


/* =========================================================
   FINAL FIX: Footer social icons small, inline, brand colors
   - YouTube official-like red rounded rectangle with white play
   - X white/black brand mark depending on theme readability
   - Facebook original blue circle
   - Icons stay next to "Yemane InfoTech" and never become large
========================================================= */
.footer-pro{
  align-items:flex-start;
  gap:28px;
}

.footer-branding{
  max-width:620px;
}

.footer-brand-top{
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  flex-wrap:wrap !important;
  margin-bottom:10px !important;
}

.footer-brand-top strong{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
  font-size:1.08rem !important;
  line-height:1.2 !important;
  letter-spacing:-.02em !important;
}

.footer-social-inline{
  display:inline-flex !important;
  align-items:center !important;
  gap:18px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}

.footer-pro .footer-social-inline .social-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:none !important;
  line-height:1 !important;
  overflow:visible !important;
  transform:none;
  transition:transform .2s ease, opacity .2s ease, filter .2s ease !important;
}

.footer-pro .footer-social-inline .social-icon:hover{
  transform:translateY(-2px) !important;
  opacity:.9 !important;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));
}

.footer-pro .footer-social-inline .social-icon svg{
  display:block !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}

.footer-pro .footer-social-inline .social-youtube,
.footer-pro .footer-social-inline .social-youtube svg{
  width:32px !important;
  height:22px !important;
}

.footer-pro .footer-social-inline .social-x,
.footer-pro .footer-social-inline .social-x svg{
  width:21px !important;
  height:21px !important;
  fill:#f8fafc !important;
  color:#f8fafc !important;
}

[data-theme="light"] .footer-pro .footer-social-inline .social-x,
[data-theme="light"] .footer-pro .footer-social-inline .social-x svg{
  fill:#111827 !important;
  color:#111827 !important;
}

.footer-pro .footer-social-inline .social-facebook,
.footer-pro .footer-social-inline .social-facebook svg{
  width:22px !important;
  height:22px !important;
}

.footer-branding p{
  margin-top:0 !important;
}

@media(max-width:760px){
  .footer-brand-top{
    gap:14px !important;
  }

  .footer-social-inline{
    gap:14px !important;
  }

  .footer-pro .footer-social-inline .social-youtube,
  .footer-pro .footer-social-inline .social-youtube svg{
    width:30px !important;
    height:21px !important;
  }
}


/* EDGE FIX - footer social icons */
.footer-brand-row{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  flex-wrap:wrap !important;
}

.footer-socials{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 !important;
}

.footer-socials a{
  width:auto !important;
  height:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

.footer-socials .youtube-icon{
  width:28px !important;
  height:20px !important;
  min-width:28px !important;
  min-height:20px !important;
  max-width:28px !important;
  max-height:20px !important;
  background:#ff0000 !important;
  border-radius:6px !important;
  position:relative !important;
}

.footer-socials .youtube-icon::before{
  content:'' !important;
  position:absolute !important;
  left:10px !important;
  top:5px !important;
  width:0 !important;
  height:0 !important;
  border-left:8px solid #fff !important;
  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
}

.footer-socials .youtube-icon i{
  display:none !important;
}

.footer-socials .fa-x-twitter{
  color:#ffffff !important;
  font-size:22px !important;
}

.footer-socials .fa-facebook-f{
  color:#1877F2 !important;
  font-size:22px !important;
}


/* =========================================================
   HERO BACKGROUND + FOOTER SOCIALS PROFESSIONAL UPDATE
   - dezente Hero-Grafik ohne Funktion zu ändern
   - kleine Originalfarben-Social-Icons neben Yemane InfoTech
========================================================= */

.hero.hero-clean.hero-centered{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero-bg-orb{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

.hero-bg-orb::before{
  content:"";
  position:absolute;
  left:50%;
  top:47%;
  width:620px;
  height:620px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(45,212,191,.16), transparent 0 34%),
    radial-gradient(circle at 50% 50%, rgba(59,130,246,.18), transparent 0 50%),
    radial-gradient(circle at 50% 50%, rgba(167,139,250,.10), transparent 0 64%);
  filter:blur(6px);
  opacity:.9;
}

.hero-bg-orb::after{
  content:"";
  position:absolute;
  left:50%;
  top:56%;
  width:420px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(45,212,191,.45),rgba(59,130,246,.45),transparent);
  box-shadow:0 0 34px rgba(45,212,191,.30);
  opacity:.75;
}

.footer-brand-row{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}

.footer-socials{
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 !important;
}

.footer-socials a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  min-height:22px !important;
  max-height:22px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:none !important;
  line-height:1 !important;
  overflow:visible !important;
  transition:transform .18s ease, opacity .18s ease;
}

.footer-socials a:hover{
  transform:translateY(-2px);
  opacity:.88;
}

.footer-socials .youtube-icon{
  width:26px !important;
  height:18px !important;
  min-width:26px !important;
  max-width:26px !important;
  min-height:18px !important;
  max-height:18px !important;
  background:#ff0000 !important;
  border-radius:5px !important;
  position:relative !important;
}

.footer-socials .youtube-icon::before{
  content:"" !important;
  position:absolute !important;
  left:10px !important;
  top:4px !important;
  width:0 !important;
  height:0 !important;
  border-left:8px solid #fff !important;
  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
}

.footer-socials .youtube-icon i,
.footer-socials .youtube-icon svg{
  display:none !important;
}

.footer-socials .fa-x-twitter{
  color:#ffffff !important;
  font-size:20px !important;
}

.footer-socials .fa-facebook-f{
  color:#1877f2 !important;
  font-size:20px !important;
}

.footer-socials .fa-tiktok{
  color:#ffffff !important;
  font-size:20px !important;
  filter:drop-shadow(1px 0 0 #25f4ee) drop-shadow(-1px 0 0 #fe2c55);
}

.footer-socials .fa-instagram{
  font-size:20px !important;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

.footer-socials .fa-telegram{
  color:#229ed9 !important;
  font-size:20px !important;
}

@media(max-width:760px){
  .footer-brand-row{ gap:12px !important; }
  .footer-socials{ gap:10px !important; }
  .hero-bg-orb::before{ width:420px; height:420px; }
}


/* ===== FINAL HERO + SOCIAL FIX ===== */

.hero{
  position:relative !important;
  overflow:hidden !important;
}

.hero::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(45,212,191,.12) 0%, rgba(59,130,246,.08) 35%, transparent 70%);
  filter:blur(20px);
  z-index:0;
  pointer-events:none;
}

.hero > *{
  position:relative;
  z-index:1;
}

/* Footer Social Inline */
.footer-brand-row{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  flex-wrap:wrap !important;
}

.footer-socials{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 !important;
}

.footer-socials a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
}

/* YouTube */
.footer-socials .youtube-icon{
  width:28px !important;
  height:20px !important;
  background:#ff0000 !important;
  border-radius:6px !important;
  position:relative !important;
}

.footer-socials .youtube-icon::before{
  content:'' !important;
  position:absolute !important;
  left:10px !important;
  top:5px !important;
  width:0 !important;
  height:0 !important;
  border-left:8px solid white !important;
  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
}

.footer-socials .youtube-icon i{
  display:none !important;
}

/* X */
.footer-socials .fa-x-twitter{
  color:#ffffff !important;
  font-size:18px !important;
}

/* Facebook */
.footer-socials .fa-facebook-f{
  color:#1877f2 !important;
  font-size:18px !important;
}

/* TikTok */
.footer-socials .fa-tiktok{
  color:#ffffff !important;
  font-size:18px !important;
  filter:drop-shadow(1px 0 #25f4ee) drop-shadow(-1px 0 #fe2c55);
}

/* Instagram */
.footer-socials .fa-instagram{
  font-size:18px !important;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

/* Telegram */
.footer-socials .fa-telegram{
  color:#229ED9 !important;
  font-size:18px !important;
}


/* YouTube */
.youtube-icon{
  width:28px !important;
  height:20px !important;
  background:#ff0000 !important;
  border-radius:6px !important;
  position:relative !important;
}

.youtube-icon .yt-play{
  width:0;
  height:0;
  border-left:8px solid white;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}

/* X */
.x-icon i{
  color:#ffffff !important;
  font-size:18px !important;
}

/* Facebook */
.facebook-icon i{
  color:#1877f2 !important;
  font-size:18px !important;
}

/* TikTok */
.tiktok-icon i{
  color:#ffffff !important;
  font-size:18px !important;
  filter:drop-shadow(1px 0 #25f4ee) drop-shadow(-1px 0 #fe2c55);
}

/* Instagram */
.instagram-icon i{
  font-size:18px !important;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

/* Telegram */
.telegram-icon i{
  color:#229ED9 !important;
  font-size:18px !important;
}


/* YouTube */
.youtube-icon{
  width:28px !important;
  height:20px !important;
  background:#ff0000 !important;
  border-radius:6px !important;
}

.youtube-icon .yt-play{
  width:0 !important;
  height:0 !important;
  border-left:8px solid #fff !important;
  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
  margin-left:2px !important;
}

/* X */
.x-icon span{
  color:#fff !important;
  font-size:18px !important;
}

/* Facebook */
.facebook-icon{
  background:#1877F2 !important;
  border-radius:50% !important;
}

.facebook-icon span{
  color:#fff !important;
  font-size:18px !important;
  font-weight:bold !important;
}

/* TikTok */
.tiktok-icon span{
  color:#fff !important;
  font-size:18px !important;
  text-shadow:1px 0 #25F4EE, -1px 0 #FE2C55 !important;
}

/* Instagram */
.instagram-icon span{
  font-size:20px !important;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* Telegram */
.telegram-icon span{
  color:#229ED9 !important;
  font-size:18px !important;
}


/* YouTube: official-style red rounded rectangle with centered white play */
.footer-socials .social-youtube{
  width:34px !important;
  height:24px !important;
  min-width:34px !important;
  max-width:34px !important;
  min-height:24px !important;
  max-height:24px !important;
  background:#ff0000 !important;
  border-radius:7px !important;
  position:relative !important;
}

.footer-socials .social-youtube .yt-triangle{
  display:block !important;
  width:0 !important;
  height:0 !important;
  border-left:10px solid #fff !important;
  border-top:6px solid transparent !important;
  border-bottom:6px solid transparent !important;
  margin-left:3px !important;
}

/* X / Twitter */
.footer-socials .social-x{
  color:#ffffff !important;
  font-size:24px !important;
  background:transparent !important;
}

/* Facebook original blue circle */
.footer-socials .social-facebook{
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  max-width:27px !important;
  min-height:27px !important;
  max-height:27px !important;
  border-radius:50% !important;
  background:#1877F2 !important;
  color:#fff !important;
  font-size:22px !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-weight:900 !important;
  align-items:flex-end !important;
  padding-bottom:0 !important;
}

/* TikTok visual colors */
.footer-socials .social-tiktok{
  color:#ffffff !important;
  font-size:24px !important;
  text-shadow:1.2px 0 #25F4EE, -1.2px 0 #FE2C55 !important;
}

/* Instagram gradient */
.footer-socials .social-instagram{
  font-size:27px !important;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* Telegram original blue */
.footer-socials .social-telegram{
  color:#229ED9 !important;
  font-size:25px !important;
}

.footer-links{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:22px;
  flex-wrap:wrap;
}

@media(max-width:760px){
  .footer{
    flex-direction:column;
    gap:22px;
  }
  .footer-socials{
    gap:18px !important;
    flex-wrap:wrap !important;
  }
  .footer-links{
    justify-content:flex-start;
  }
}


/* Icons stehen direkt UNTER Yemane InfoTech */
.footer-socials{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:22px !important;
  margin:0 0 28px 0 !important;
  padding:0 !important;
  flex-wrap:nowrap !important;
  width:100% !important;
}

.footer-socials a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:none !important;
  line-height:1 !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-weight:900 !important;
  overflow:visible !important;
  transition:transform .18s ease, opacity .18s ease !important;
}

.footer-socials a:hover{
  transform:translateY(-2px) !important;
  opacity:.88 !important;
}

.footer-socials .social-youtube{
  width:34px !important;
  height:24px !important;
  min-width:34px !important;
  max-width:34px !important;
  min-height:24px !important;
  max-height:24px !important;
  background:#ff0000 !important;
  border-radius:7px !important;
  position:relative !important;
}

.footer-socials .social-youtube .yt-triangle{
  display:block !important;
  width:0 !important;
  height:0 !important;
  border-left:10px solid #fff !important;
  border-top:6px solid transparent !important;
  border-bottom:6px solid transparent !important;
  margin-left:3px !important;
}

.footer-socials .social-x{
  color:#ffffff !important;
  font-size:24px !important;
}

.footer-socials .social-facebook{
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  max-width:27px !important;
  min-height:27px !important;
  max-height:27px !important;
  border-radius:50% !important;
  background:#1877F2 !important;
  color:#fff !important;
  font-size:22px !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-weight:900 !important;
  align-items:flex-end !important;
}

.footer-socials .social-tiktok{
  color:#ffffff !important;
  font-size:24px !important;
  text-shadow:1.2px 0 #25F4EE, -1.2px 0 #FE2C55 !important;
}

.footer-socials .social-instagram{
  font-size:27px !important;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

.footer-socials .social-telegram{
  color:#229ED9 !important;
  font-size:25px !important;
}

.footer-links{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  gap:22px !important;
  flex-wrap:wrap !important;
}

@media(max-width:760px){
  .footer{
    flex-direction:column !important;
    gap:22px !important;
  }
  .footer-socials{
    gap:18px !important;
    flex-wrap:wrap !important;
  }
  .footer-links{
    justify-content:flex-start !important;
  }
}


/* YouTube official-style: kleiner roter Button mit Play */
.footer-socials .social-youtube{
  width:28px !important;
  height:20px !important;
  min-width:28px !important;
  max-width:28px !important;
  min-height:20px !important;
  max-height:20px !important;
  background:#ff0000 !important;
  border-radius:6px !important;
  position:relative !important;
}

.footer-socials .social-youtube .yt-triangle{
  display:block !important;
  width:0 !important;
  height:0 !important;
  border-left:8px solid #fff !important;
  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
  margin-left:2px !important;
}

/* X */
.footer-socials .social-x i{
  color:#ffffff !important;
  font-size:20px !important;
}

/* Facebook */
.footer-socials .social-facebook{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  min-height:22px !important;
  max-height:22px !important;
  border-radius:50% !important;
  background:#1877F2 !important;
}

.footer-socials .social-facebook i{
  color:#ffffff !important;
  font-size:14px !important;
}

/* TikTok */
.footer-socials .social-tiktok i{
  color:#ffffff !important;
  font-size:20px !important;
  filter:drop-shadow(1px 0 #25F4EE) drop-shadow(-1px 0 #FE2C55) !important;
}

/* Instagram official-like gradient with correct icon shape */
.footer-socials .social-instagram i{
  font-size:21px !important;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

/* Telegram official-like paper plane */
.footer-socials .social-telegram i{
  color:#229ED9 !important;
  font-size:21px !important;
}

@media(max-width:760px){
  .footer-socials{
    gap:15px !important;
    flex-wrap:wrap !important;
  }
}


/* =========================================================
   FINAL FOOTER SOCIAL FIX - YEMANE INFOTECH
   Diese Regeln stehen absichtlich ganz unten und überschreiben
   ältere Footer-/Social-Regeln.
========================================================= */

.footer.footer-pro,
.footer-pro{
  max-width:1220px !important;
  margin:42px auto 0 !important;
  padding:46px 22px 34px !important;
  border-top:1px solid var(--border) !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:40px !important;
}

.footer-branding{
  max-width:560px !important;
  min-width:0 !important;
}

.footer-brand-top,
.footer-brand-row{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:0 !important;
}

.footer-brand-row > strong,
.footer-branding strong{
  display:block !important;
  margin:0 0 14px 0 !important;
  color:var(--text) !important;
  font-size:1.15rem !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

/* Social Icons direkt unter Yemane InfoTech */
.footer-socials{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:17px !important;
  margin:0 0 24px 0 !important;
  padding:0 !important;
  flex-wrap:nowrap !important;
  width:auto !important;
}

.footer-socials a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:none !important;
  line-height:1 !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-weight:900 !important;
  overflow:visible !important;
  transition:transform .18s ease, opacity .18s ease !important;
}

.footer-socials a:hover{
  transform:translateY(-2px) !important;
  opacity:.88 !important;
}

/* YouTube: rotes Rechteck mit Play-Zeichen */
.footer-socials .social-youtube{
  width:30px !important;
  height:21px !important;
  min-width:30px !important;
  max-width:30px !important;
  min-height:21px !important;
  max-height:21px !important;
  background:#ff0000 !important;
  border-radius:6px !important;
}

.footer-socials .social-youtube .yt-triangle{
  display:block !important;
  width:0 !important;
  height:0 !important;
  border-left:8px solid #fff !important;
  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
  margin-left:2px !important;
}

/* X / Twitter */
.footer-socials .social-x i,
.footer-socials .social-x{
  color:#ffffff !important;
  font-size:20px !important;
}

/* Facebook */
.footer-socials .social-facebook{
  width:23px !important;
  height:23px !important;
  min-width:23px !important;
  max-width:23px !important;
  min-height:23px !important;
  max-height:23px !important;
  border-radius:50% !important;
  background:#1877F2 !important;
}

.footer-socials .social-facebook i{
  color:#ffffff !important;
  font-size:14px !important;
}

/* TikTok */
.footer-socials .social-tiktok i{
  color:#ffffff !important;
  font-size:20px !important;
  filter:drop-shadow(1px 0 #25F4EE) drop-shadow(-1px 0 #FE2C55) !important;
}

/* Instagram: offizieller Icon-Look mit Verlauf */
.footer-socials .social-instagram i{
  font-size:21px !important;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

/* Telegram: Paper-Plane Symbol in blau */
.footer-socials .social-telegram i{
  color:#229ED9 !important;
  font-size:21px !important;
}

.footer-branding p{
  margin:0 !important;
  color:var(--muted) !important;
  font-size:1rem !important;
  line-height:1.85 !important;
  max-width:560px !important;
}

.footer-links{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  gap:22px !important;
  flex-wrap:wrap !important;
  padding-top:10px !important;
}

.footer-links a{
  color:var(--muted) !important;
  font-weight:900 !important;
  text-decoration:none !important;
  font-size:1rem !important;
}

.footer-links a:hover{
  color:var(--primary) !important;
}

/* Leeren alten Social-Container nicht anzeigen */
.footer-social-inline:empty{
  display:none !important;
}

/* Optionaler Copyright-Bereich, falls vorhanden */
.footer-copy,
.footer-copyright{
  color:var(--muted) !important;
  text-align:center !important;
  font-size:.95rem !important;
}

/* Mobile */
@media(max-width:900px){
  .footer.footer-pro,
  .footer-pro{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:28px !important;
    padding:34px 18px 28px !important;
  }

  .footer-links{
    justify-content:flex-start !important;
    gap:16px !important;
    padding-top:0 !important;
  }

  .footer-socials{
    gap:15px !important;
    flex-wrap:wrap !important;
  }
}


/* =========================================================
   FINAL FOOTER SOCIAL FIX - 2026-05
   Fixed: social icons directly under "Yemane InfoTech"
   and all icons visible online after cache-bust.
========================================================= */

.footer.footer-pro,
.footer-pro{
  max-width:1220px !important;
  margin:42px auto 0 !important;
  padding:46px 22px 34px !important;
  border-top:1px solid var(--border) !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:40px !important;
}

.footer-branding{
  max-width:560px !important;
  min-width:0 !important;
}

.footer-brand-top,
.footer-brand-row{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:0 !important;
}

.footer-brand-row > strong,
.footer-branding strong{
  display:block !important;
  margin:0 0 13px 0 !important;
  color:var(--text) !important;
  font-size:1.12rem !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

.footer-socials{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  margin:0 0 24px 0 !important;
  padding:0 !important;
  flex-wrap:nowrap !important;
  width:auto !important;
}

.footer-socials a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:none !important;
  line-height:1 !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-weight:900 !important;
  overflow:visible !important;
  transition:transform .18s ease, opacity .18s ease !important;
}

.footer-socials a:hover{
  transform:translateY(-2px) !important;
  opacity:.88 !important;
}

.footer-socials .social-youtube{
  width:28px !important;
  height:20px !important;
  min-width:28px !important;
  max-width:28px !important;
  min-height:20px !important;
  max-height:20px !important;
  background:#ff0000 !important;
  border-radius:6px !important;
}

.footer-socials .social-youtube .yt-triangle{
  display:block !important;
  width:0 !important;
  height:0 !important;
  border-left:8px solid #fff !important;
  border-top:5px solid transparent !important;
  border-bottom:5px solid transparent !important;
  margin-left:2px !important;
}

.footer-socials .social-x i{
  color:#ffffff !important;
  font-size:19px !important;
}

.footer-socials .social-facebook{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  max-width:22px !important;
  min-height:22px !important;
  max-height:22px !important;
  border-radius:50% !important;
  background:#1877F2 !important;
}

.footer-socials .social-facebook i{
  color:#ffffff !important;
  font-size:13px !important;
}

.footer-socials .social-tiktok i{
  color:#ffffff !important;
  font-size:19px !important;
  filter:drop-shadow(1px 0 #25F4EE) drop-shadow(-1px 0 #FE2C55) !important;
}

.footer-socials .social-instagram i{
  font-size:20px !important;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}

.footer-socials .social-telegram i{
  color:#229ED9 !important;
  font-size:20px !important;
}

.footer-branding p{
  margin:0 !important;
  color:var(--muted) !important;
  font-size:1rem !important;
  line-height:1.85 !important;
  max-width:560px !important;
}

.footer-links{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  gap:22px !important;
  flex-wrap:wrap !important;
  padding-top:10px !important;
}

.footer-links a{
  color:var(--muted) !important;
  font-weight:900 !important;
  text-decoration:none !important;
  font-size:1rem !important;
}

.footer-links a:hover{
  color:var(--primary) !important;
}

.footer-social-inline:empty{
  display:none !important;
}

@media(max-width:900px){
  .footer.footer-pro,
  .footer-pro{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:28px !important;
    padding:34px 18px 28px !important;
  }

  .footer-links{
    justify-content:flex-start !important;
    gap:16px !important;
    padding-top:0 !important;
  }

  .footer-socials{
    gap:14px !important;
    flex-wrap:wrap !important;
  }
}


/* =========================================================
   FINAL SOCIAL SVG ICONS - visible on every page
   No FontAwesome dependency. Icons are inline SVG.
========================================================= */

.footer.footer-pro,
.footer-pro{
  max-width:1220px !important;
  margin:42px auto 0 !important;
  padding:46px 22px 34px !important;
  border-top:1px solid var(--border) !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:40px !important;
}

.footer-branding{
  max-width:560px !important;
  min-width:0 !important;
}

.footer-brand-top,
.footer-brand-row{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:0 !important;
}

.footer-brand-row > strong,
.footer-branding strong{
  display:block !important;
  margin:0 0 13px 0 !important;
  color:var(--text) !important;
  font-size:1.12rem !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  letter-spacing:-.02em !important;
}

.footer-socials{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  margin:0 0 24px 0 !important;
  padding:0 !important;
  flex-wrap:nowrap !important;
}

.footer-socials a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  max-width:24px !important;
  max-height:24px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:none !important;
  overflow:visible !important;
  line-height:1 !important;
  transition:transform .18s ease, opacity .18s ease !important;
}

.footer-socials a:hover{
  transform:translateY(-2px) !important;
  opacity:.9 !important;
}

.footer-socials svg{
  display:block !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
}

/* YouTube is a bit wider, like the real logo */
.footer-socials .social-youtube{
  width:28px !important;
  height:20px !important;
  min-width:28px !important;
  max-width:28px !important;
  min-height:20px !important;
  max-height:20px !important;
}

.footer-socials .social-youtube svg{
  width:28px !important;
  height:20px !important;
  min-width:28px !important;
  max-width:28px !important;
  min-height:20px !important;
  max-height:20px !important;
}

.footer-branding p{
  margin:0 !important;
  color:var(--muted) !important;
  font-size:1rem !important;
  line-height:1.85 !important;
  max-width:560px !important;
}

.footer-links{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  gap:22px !important;
  flex-wrap:wrap !important;
  padding-top:10px !important;
}

.footer-links a{
  color:var(--muted) !important;
  font-weight:900 !important;
  text-decoration:none !important;
  font-size:1rem !important;
}

.footer-links a:hover{
  color:var(--primary) !important;
}

.footer-social-inline:empty{
  display:none !important;
}

@media(max-width:900px){
  .footer.footer-pro,
  .footer-pro{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:28px !important;
    padding:34px 18px 28px !important;
  }

  .footer-links{
    justify-content:flex-start !important;
    gap:16px !important;
    padding-top:0 !important;
  }

  .footer-socials{
    gap:14px !important;
    flex-wrap:wrap !important;
  }
}

/* =========================================================
   FINAL FOOTER FIX - Home page same social layout as other pages
   - brand title starts left
   - all social icons visible in one line
   - responsive without breaking navigation/functionality
========================================================= */
.footer.footer-pro{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:28px !important;
  max-width:1220px !important;
  margin:42px auto 0 !important;
  padding:30px 22px !important;
  border-top:1px solid var(--border) !important;
}

.footer.footer-pro .footer-branding{
  max-width:560px !important;
  text-align:left !important;
  justify-self:flex-start !important;
}

.footer.footer-pro .footer-brand-top,
.footer.footer-pro .footer-brand-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  margin:0 0 16px 0 !important;
  text-align:left !important;
}

.footer.footer-pro .footer-brand-row strong{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
  font-size:1.08rem !important;
  line-height:1.2 !important;
  letter-spacing:-.02em !important;
  color:var(--text) !important;
  white-space:nowrap !important;
}

.footer.footer-pro .footer-socials{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  flex-wrap:nowrap !important;
}

.footer.footer-pro .footer-socials a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:none !important;
  overflow:visible !important;
  line-height:1 !important;
  transition:transform .18s ease, opacity .18s ease !important;
}

.footer.footer-pro .footer-socials a:hover{
  transform:translateY(-2px) !important;
  opacity:.9 !important;
}

.footer.footer-pro .footer-socials svg{
  display:block !important;
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  margin:0 !important;
  padding:0 !important;
}

.footer.footer-pro .footer-socials .social-youtube,
.footer.footer-pro .footer-socials .social-youtube svg{
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:20px !important;
  min-height:20px !important;
  max-height:20px !important;
}

.footer.footer-pro .footer-branding p{
  margin:0 !important;
  max-width:560px !important;
  line-height:1.65 !important;
  text-align:left !important;
}

.footer.footer-pro .footer-links{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  gap:16px 22px !important;
  flex-wrap:wrap !important;
  max-width:440px !important;
  padding-top:8px !important;
  text-align:right !important;
}

.footer.footer-pro .footer-links a{
  white-space:nowrap !important;
}

@media(max-width:760px){
  .footer.footer-pro{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:22px !important;
    padding:28px 16px !important;
  }

  .footer.footer-pro .footer-branding{
    width:100% !important;
    max-width:100% !important;
  }

  .footer.footer-pro .footer-brand-top,
  .footer.footer-pro .footer-brand-row{
    width:100% !important;
    gap:12px !important;
  }

  .footer.footer-pro .footer-socials{
    gap:12px !important;
  }

  .footer.footer-pro .footer-links{
    width:100% !important;
    max-width:100% !important;
    justify-content:flex-start !important;
    text-align:left !important;
    padding-top:0 !important;
  }
}


/* Footer left alignment fix */
.footer-left,
.footer-brand,
.footer-social,
.footer-content {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.footer-social-icons,
.social-icons {
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

.footer-left h3,
.footer-left p {
    text-align: left !important;
}


/* Footer exact alignment like reference image */
.footer-left,
.footer-brand,
.footer-content {
    padding-left: 52px !important;
    margin-left: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
}

.footer-social,
.footer-social-icons,
.social-icons {
    padding-left: 52px !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

.footer-description,
.footer-left p {
    padding-left: 0 !important;
    max-width: 620px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   FINAL FOOTER SOCIAL POSITION - EXACT LIKE REFERENCE IMAGE
   Title + icons stay together on the left block.
   Icons are directly under "Yemane InfoTech".
   Text starts on the same left line.
========================================================= */
.footer.footer-pro{
  max-width: 100% !important;
  width: 100% !important;
  margin: 42px 0 0 0 !important;
  padding: 76px 52px 96px 52px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 48px !important;
  box-sizing: border-box !important;
}

.footer.footer-pro .footer-branding{
  max-width: 620px !important;
  width: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.footer.footer-pro .footer-brand-top{
  display: block !important;
  margin: 0 0 54px 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.footer.footer-pro .footer-brand-row{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  text-align: left !important;
}

.footer.footer-pro .footer-brand-row strong{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.35rem !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.footer.footer-pro .footer-socials{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-wrap: nowrap !important;
}

.footer.footer-pro .footer-socials a{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.footer.footer-pro .footer-socials svg{
  width: 32px !important;
  height: 32px !important;
  display: block !important;
}

.footer.footer-pro .footer-socials .social-youtube svg{
  width: 44px !important;
  height: 32px !important;
}

.footer.footer-pro .footer-branding p{
  margin: 0 !important;
  padding: 0 !important;
  max-width: 620px !important;
  text-align: left !important;
  font-size: 1.35rem !important;
  line-height: 1.75 !important;
}

.footer.footer-pro .footer-links{
  padding-top: 2px !important;
  margin: 0 !important;
  max-width: 560px !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 28px 34px !important;
  flex-wrap: wrap !important;
  text-align: right !important;
}

.footer.footer-pro .footer-links a{
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

@media (max-width: 900px){
  .footer.footer-pro{
    padding: 34px 24px 44px 24px !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .footer.footer-pro .footer-branding{
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer.footer-pro .footer-brand-top{
    margin-bottom: 28px !important;
  }

  .footer.footer-pro .footer-socials{
    gap: 18px !important;
    flex-wrap: wrap !important;
  }

  .footer.footer-pro .footer-socials svg{
    width: 24px !important;
    height: 24px !important;
  }

  .footer.footer-pro .footer-socials .social-youtube svg{
    width: 34px !important;
    height: 24px !important;
  }

  .footer.footer-pro .footer-branding p{
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }

  .footer.footer-pro .footer-links{
    justify-content: flex-start !important;
    text-align: left !important;
    max-width: 100% !important;
    gap: 16px 22px !important;
  }

  .footer.footer-pro .footer-links a{
    font-size: 1rem !important;
  }
}


/* =========================================================
   FOOTER FONT SIZE FIX - smaller/professional footer text
========================================================= */
.footer.footer-pro .footer-links a{
  font-size: 1.02rem !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.footer.footer-pro .footer-branding p{
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
  max-width: 520px !important;
}

.footer.footer-pro .footer-brand-row strong{
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
}

@media (max-width: 900px){
  .footer.footer-pro .footer-links a{
    font-size: 0.95rem !important;
  }

  .footer.footer-pro .footer-branding p{
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .footer.footer-pro .footer-brand-row strong{
    font-size: 1rem !important;
  }
}


/* =========================================================
   MODERN PROFESSIONAL FOOTER - final polish
   Nur Footer: kleinere Links, sauberere Abstände, modernes Layout
========================================================= */
.footer.footer-pro{
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 34px 0 0 0 !important;
  padding: 54px 48px 64px 48px !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 560px) 1fr !important;
  column-gap: 64px !important;
  row-gap: 28px !important;
  align-items: start !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(44, 202, 196, 0.10), transparent 34%),
    linear-gradient(135deg, rgba(7, 18, 35, 0.98), rgba(9, 24, 46, 0.98)) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-sizing: border-box !important;
}

.footer.footer-pro::before{
  content: "" !important;
  position: absolute !important;
  left: 48px !important;
  right: 48px !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(53, 205, 199, 0.45), rgba(59, 130, 246, 0.35), transparent) !important;
  pointer-events: none !important;
}

.footer.footer-pro .footer-branding{
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
}

.footer.footer-pro .footer-brand-top{
  margin: 0 !important;
  padding: 0 !important;
}

.footer.footer-pro .footer-brand-row{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.footer.footer-pro .footer-brand-row strong{
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
}

.footer.footer-pro .footer-socials{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer.footer-pro .footer-socials a{
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 9px !important;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.footer.footer-pro .footer-socials a:hover{
  transform: translateY(-2px) !important;
  filter: brightness(1.15) !important;
}

.footer.footer-pro .footer-socials svg{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

.footer.footer-pro .footer-socials .social-youtube svg{
  width: 28px !important;
  height: 22px !important;
}

.footer.footer-pro .footer-branding p,
.footer.footer-pro .footer-description{
  margin: 0 !important;
  padding: 0 !important;
  max-width: 560px !important;
  color: rgba(210, 225, 246, 0.88) !important;
  font-size: 0.96rem !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.footer.footer-pro .footer-links{
  justify-self: end !important;
  align-self: start !important;
  max-width: 520px !important;
  margin: 0 !important;
  padding: 2px 0 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 14px 22px !important;
  text-align: right !important;
}

.footer.footer-pro .footer-links a{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  color: rgba(219, 234, 254, 0.86) !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color .2s ease, transform .2s ease !important;
}

.footer.footer-pro .footer-links a::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 2px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #36d1c4, #3b82f6) !important;
  opacity: 0 !important;
  transform: scaleX(0.55) !important;
  transition: opacity .2s ease, transform .2s ease !important;
}

.footer.footer-pro .footer-links a:hover{
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.footer.footer-pro .footer-links a:hover::after{
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* Floating button im Footer dezenter */
.footer.footer-pro .theme-toggle,
.footer.footer-pro .floating-theme-toggle,
.footer.footer-pro .floating-action,
.footer.footer-pro .scroll-top{
  width: 40px !important;
  height: 40px !important;
  opacity: .88 !important;
}

@media (max-width: 900px){
  .footer.footer-pro{
    padding: 34px 24px 44px 24px !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 26px !important;
  }

  .footer.footer-pro::before{
    left: 24px !important;
    right: 24px !important;
  }

  .footer.footer-pro .footer-branding{
    max-width: 100% !important;
    gap: 22px !important;
  }

  .footer.footer-pro .footer-brand-row{
    gap: 12px !important;
  }

  .footer.footer-pro .footer-socials{
    gap: 14px !important;
  }

  .footer.footer-pro .footer-branding p,
  .footer.footer-pro .footer-description{
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  .footer.footer-pro .footer-links{
    justify-self: start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    max-width: 100% !important;
    gap: 10px 18px !important;
  }

  .footer.footer-pro .footer-links a{
    font-size: 0.9rem !important;
  }
}

@media (max-width: 520px){
  .footer.footer-pro{
    padding: 30px 18px 42px 18px !important;
  }

  .footer.footer-pro::before{
    left: 18px !important;
    right: 18px !important;
  }

  .footer.footer-pro .footer-socials{
    gap: 12px !important;
  }

  .footer.footer-pro .footer-socials a{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  .footer.footer-pro .footer-socials svg{
    width: 20px !important;
    height: 20px !important;
  }

  .footer.footer-pro .footer-socials .social-youtube svg{
    width: 26px !important;
    height: 20px !important;
  }

  .footer.footer-pro .footer-links{
    gap: 8px 14px !important;
  }
}


/* =========================================================
   FOOTER FIX: Logo/Social links + Footer Navigation sauber ausrichten
   ========================================================= */

/* Header oben: Logo links und Menü rechts professionell in einer Linie */
header,
.navbar,
.site-header,
.header{
  box-sizing:border-box;
}

nav,
.nav,
.navbar .nav-links,
.nav-links{
  align-items:center!important;
}

/* Footer komplette Breite sauber nutzen */
.footer.footer-pro{
  max-width:none!important;
  width:100%!important;
  margin:42px 0 0!important;
  padding:28px clamp(24px,4vw,72px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:40px!important;
  border-top:1px solid rgba(34,230,255,.22)!important;
  background:linear-gradient(90deg,rgba(5,18,32,.98),rgba(7,18,33,.98))!important;
}

/* Linker Footer-Bereich: Titel, Icons und Text ordentlich */
.footer-pro .footer-branding{
  max-width:620px!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
}

.footer-pro .footer-brand-top{
  display:block!important;
}

.footer-pro .footer-brand-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
  flex-wrap:wrap!important;
}

.footer-pro .footer-brand-row strong{
  margin:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  line-height:1!important;
  font-size:1.05rem!important;
  white-space:nowrap!important;
  color:#ffffff!important;
}

/* Social Icons direkt neben Yemane InfoTech, nicht unten versetzt */
.footer-pro .footer-socials{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:13px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}

.footer-pro .footer-socials a{
  width:24px!important;
  height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 24px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  transform:none!important;
}

.footer-pro .footer-socials svg{
  width:22px!important;
  height:22px!important;
  display:block!important;
  flex:0 0 22px!important;
}

/* Beschreibung unter dem Titel/Icons sauber */
.footer-pro .footer-branding p{
  margin:0!important;
  max-width:620px!important;
  line-height:1.65!important;
  color:rgba(226,238,255,.82)!important;
}

/* Rechte Footer Navigation auf gleicher Höhe wie Logo/Social-Bereich */
.footer-pro .footer-links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:24px!important;
  flex-wrap:wrap!important;
  padding:0!important;
  margin:0!important;
  min-width:fit-content!important;
}

.footer-pro .footer-links a{
  display:inline-flex!important;
  align-items:center!important;
  height:28px!important;
  line-height:1!important;
  padding:0!important;
  margin:0!important;
  color:rgba(226,238,255,.86)!important;
  font-weight:800!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

.footer-pro .footer-links a:hover{
  color:#22e6ff!important;
}

/* Heller Modus Footer ebenfalls sauber lesbar */
[data-theme="light"] .footer.footer-pro{
  background:linear-gradient(90deg,#ffffff,#eef8ff)!important;
  border-top:1px solid rgba(37,99,235,.16)!important;
}

[data-theme="light"] .footer-pro .footer-brand-row strong{
  color:#0f172a!important;
}

[data-theme="light"] .footer-pro .footer-branding p,
[data-theme="light"] .footer-pro .footer-links a{
  color:#334155!important;
}

[data-theme="light"] .footer-pro .footer-links a:hover{
  color:#0891b2!important;
}

/* Responsive Footer: auf kleinen Screens untereinander, aber immer gerade */
@media(max-width:900px){
  .footer.footer-pro{
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:22px!important;
    padding:28px 22px!important;
  }

  .footer-pro .footer-links{
    justify-content:flex-start!important;
    gap:18px!important;
  }
}

@media(max-width:560px){
  .footer-pro .footer-brand-row{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
  }

  .footer-pro .footer-links{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    gap:12px 18px!important;
  }
}



/* ===== FOOTER ALIGNMENT FIX ===== */

/* Linke Seite: Titel + Social Icons exakt auf einer Linie */
.footer-brand-top{
  display:flex !important;
  align-items:center !important;
}

.footer-brand-row{
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:14px !important;
}

.footer-brand-row strong{
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  line-height:1 !important;
}

.footer-socials{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
}

.footer-socials a,
.footer-socials svg{
  vertical-align:middle !important;
}

/* Rechte Seite: Videos Downloads Kontakt Impressum Datenschutz */
.footer-links{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
  gap:18px !important;
}

.footer-links a{
  display:flex !important;
  align-items:center !important;
  line-height:1 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Gesamter Footer mittig ausgerichtet */
.footer.footer-pro{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}


/* =========================================================
   FINAL FOOTER WIDE-SCREEN FIX
   Footer bleibt auch bei sehr breitem Browser sauber horizontal
   und in derselben Inhaltsbreite wie die Website.
   ========================================================= */

.footer.footer-pro{
  width:100%!important;
  max-width:1220px!important;
  margin:42px auto 0!important;
  padding:30px 22px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:48px!important;
  box-sizing:border-box!important;
  border-top:1px solid rgba(34,230,255,.22)!important;
  background:transparent!important;
}

/* Linke Seite bleibt ein sauberer Block */
.footer.footer-pro .footer-branding{
  flex:0 1 560px!important;
  max-width:560px!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:14px!important;
}

/* Yemane InfoTech + Social Media exakt eine Linie */
.footer.footer-pro .footer-brand-row{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
  flex-wrap:nowrap!important;
  width:auto!important;
}

.footer.footer-pro .footer-brand-row strong{
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Icons exakt mittig neben dem Titel */
.footer.footer-pro .footer-socials{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  flex-wrap:nowrap!important;
}

.footer.footer-pro .footer-socials a{
  width:24px!important;
  height:24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}

.footer.footer-pro .footer-socials svg{
  width:22px!important;
  height:22px!important;
  display:block!important;
}

/* Beschreibung unterhalb, nicht zwischen den Icons */
.footer.footer-pro .footer-branding p{
  margin:0!important;
  max-width:560px!important;
  line-height:1.65!important;
}

/* Rechte Footer-Links bleiben als eine horizontale Zeile */
.footer.footer-pro .footer-links{
  flex:0 0 auto!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:22px!important;
  flex-wrap:nowrap!important;
  margin:0!important;
  padding-top:4px!important;
  min-width:max-content!important;
}

.footer.footer-pro .footer-links a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:24px!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}

/* Sehr breite Bildschirme: Footer bleibt zentriert, nicht über ganze Breite gestreckt */
@media(min-width:1221px){
  .footer.footer-pro{
    max-width:1220px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Tablet: noch horizontal, solange Platz da ist */
@media(max-width:900px){
  .footer.footer-pro{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:22px!important;
  }

  .footer.footer-pro .footer-links{
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    min-width:0!important;
  }
}

/* Handy */
@media(max-width:560px){
  .footer.footer-pro .footer-brand-row{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
  }

  .footer.footer-pro .footer-links{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    gap:14px 18px!important;
  }
}



/* =========================================================
   MOBILE FIX: Technologie-Badges gerade + Footer-Links direkt unter Text
   ========================================================= */

/* Technologien & Werkzeuge auf Handy: Icon + Text sauber in einer Linie */
@media(max-width:640px){
  .tech-badges,
  .tech-stack,
  .tech-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .tech-badge,
  .tech-pill,
  .tech-badges span,
  .tech-stack span{
    width:100%!important;
    min-height:46px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    text-align:center!important;
    padding:10px 14px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }

  .tech-badge i,
  .tech-pill i,
  .tech-badges span i,
  .tech-stack span i{
    width:22px!important;
    min-width:22px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    line-height:1!important;
    font-size:18px!important;
  }

  .tech-badge span,
  .tech-pill span{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1.1!important;
    margin:0!important;
    padding:0!important;
  }
}

/* Footer Mobile: Links nicht nach unten drücken, direkt unter Beschreibung */
@media(max-width:900px){
  .footer.footer-pro{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:18px!important;
    min-height:auto!important;
    height:auto!important;
    padding:28px 22px!important;
  }

  .footer.footer-pro .footer-branding{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .footer.footer-pro .footer-branding p{
    margin:12px 0 0!important;
    max-width:100%!important;
  }

  .footer.footer-pro .footer-links{
    width:100%!important;
    margin:4px 0 0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px 22px!important;
    min-width:0!important;
  }

  .footer.footer-pro .footer-links a{
    height:auto!important;
    line-height:1.2!important;
    margin:0!important;
    padding:0!important;
  }
}

@media(max-width:560px){
  .footer.footer-pro{
    gap:18px!important;
    padding:28px 10px!important;
  }

  .footer.footer-pro .footer-brand-row{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:12px!important;
  }

  .footer.footer-pro .footer-socials{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:11px!important;
  }

  .footer.footer-pro .footer-links{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:14px 26px!important;
  }
}



/* =========================================================
   FINAL GLOBAL ALIGNMENT FIX
   1) Header-Logo + Navigation vertikal eine Linie
   2) Footer-Socials neben Logo gerade
   3) Footer-Links direkt unter Beschreibung auf Mobile
   4) Technologie-Badges auf Mobile exakt gerade
   ========================================================= */

/* HEADER */
.topbar{
  display:block!important;
}

.nav{
  max-width:1220px!important;
  margin:0 auto!important;
  padding:14px 22px!important;
  min-height:68px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  box-sizing:border-box!important;
}

.brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  height:42px!important;
  flex:0 0 auto!important;
}

.brand img,
.brand .brand-mark{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  display:block!important;
  object-fit:contain!important;
  margin:0!important;
}

.brand span,
.brand strong,
.brand b{
  display:inline-flex!important;
  align-items:center!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}

.nav-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin:0!important;
  padding:0!important;
}

.nav-links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}

.nav-links a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:38px!important;
  line-height:1!important;
  margin:0!important;
  padding:0 12px!important;
  white-space:nowrap!important;
}

/* FOOTER DESKTOP/TABLET */
.footer.footer-pro{
  max-width:1220px!important;
  width:100%!important;
  margin:42px auto 0!important;
  padding:30px 22px!important;
  display:grid!important;
  grid-template-columns:minmax(320px,560px) auto!important;
  align-items:start!important;
  justify-content:space-between!important;
  gap:36px!important;
  box-sizing:border-box!important;
  min-height:0!important;
  height:auto!important;
  background:transparent!important;
}

.footer-branding{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  max-width:560px!important;
  width:100%!important;
  gap:12px!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
}

.footer-brand-top{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

.footer-brand-row{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:14px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}

.footer-brand-row strong{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  height:24px!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}

.footer-socials{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:11px!important;
  margin:0!important;
  padding:0!important;
  height:24px!important;
  line-height:1!important;
}

.footer-socials a{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}

.footer-socials svg{
  width:20px!important;
  height:20px!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
}

.footer-branding p{
  display:block!important;
  margin:0!important;
  padding:0!important;
  max-width:560px!important;
  line-height:1.65!important;
}

/* Footer Links rechts: eine Linie wie Header-Navigation */
.footer-links{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:22px!important;
  margin:0!important;
  padding:3px 0 0!important;
  min-width:max-content!important;
  line-height:1!important;
}

.footer-links a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:24px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* TECHNOLOGIEN & WERKZEUGE */
.tech-badges{
  align-items:center!important;
}

.tech-badge{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  line-height:1!important;
  text-align:center!important;
}

.tech-badge i{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:22px!important;
  min-width:22px!important;
  height:22px!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
}

.tech-badge span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
}

/* MOBILE */
@media(max-width:760px){
  .nav{
    min-height:66px!important;
  }

  .nav-links{
    flex-wrap:wrap!important;
  }

  .footer.footer-pro{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:16px!important;
    padding:28px 10px!important;
    margin-top:36px!important;
    min-height:0!important;
    height:auto!important;
  }

  .footer-branding{
    gap:12px!important;
  }

  .footer-brand-row{
    flex-wrap:wrap!important;
    gap:12px!important;
  }

  .footer-branding p{
    margin:0!important;
    max-width:100%!important;
  }

  /* Links direkt unter Beschreibung, nicht nach unten */
  .footer-links{
    width:100%!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px 26px!important;
    margin:0!important;
    padding:0!important;
    min-width:0!important;
  }

  .footer-links a{
    height:22px!important;
  }

  /* Technologie-Karten auf Handy exakt gerade */
  .tech-badges{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }

  .tech-badge{
    width:100%!important;
    min-height:46px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    padding:10px 14px!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  .tech-badge i{
    width:24px!important;
    min-width:24px!important;
    height:24px!important;
    font-size:18px!important;
  }
}

/* Extra kleine Displays */
@media(max-width:420px){
  .footer-links{
    gap:14px 22px!important;
  }

  .footer-socials{
    gap:10px!important;
  }
}



/* =========================================================
   ABSOLUTE FINAL LAYOUT FIX
   - Header bleibt sauber und Menü überdeckt auf Handy nicht mehr den Inhalt
   - Footer: Social Icons exakt neben Yemane InfoTech
   - Footer: Links direkt unter Beschreibung auf Handy
   - Technologie-Badges: Icon + Text sauber vertikal ausgerichtet
   ========================================================= */

/* ---------- HEADER / NAV ---------- */
.topbar{
  width:100%!important;
  z-index:1000!important;
}

.nav{
  max-width:1220px!important;
  margin:0 auto!important;
  padding:14px 22px!important;
  min-height:68px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  box-sizing:border-box!important;
}

.brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  height:42px!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  text-decoration:none!important;
  flex:0 0 auto!important;
}

.brand-mark,
.brand img,
.brand-logo{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  display:block!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
}

.brand span:last-child{
  display:inline-flex!important;
  align-items:center!important;
  height:42px!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}

.nav-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
}

.nav-links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}

.nav-links a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:38px!important;
  line-height:1!important;
  margin:0!important;
  padding:0 12px!important;
  white-space:nowrap!important;
}

/* Mobile Menü: nicht mehr als feste Box über Inhalt */
@media(max-width:760px){
  .topbar{
    position:relative!important;
    top:auto!important;
  }

  .nav{
    min-height:66px!important;
    padding:12px 16px!important;
    flex-wrap:wrap!important;
    align-items:center!important;
  }

  .menu-btn{
    display:inline-flex!important;
  }

  .nav-actions{
    margin-left:auto!important;
    order:2!important;
  }

  .brand{
    order:1!important;
  }

  .nav-links{
    order:3!important;
    position:static!important;
    inset:auto!important;
    width:100%!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    margin:10px 0 0!important;
    padding:14px!important;
    background:var(--surface)!important;
    border:1px solid var(--border)!important;
    border-radius:22px!important;
    box-shadow:0 16px 38px rgba(0,0,0,.22)!important;
  }

  .nav-links.open{
    display:flex!important;
  }

  .nav-links a{
    width:100%!important;
    height:38px!important;
    padding:0 14px!important;
  }
}

/* ---------- TECHNOLOGIEN & WERKZEUGE ---------- */
.tech-badges,
.tech-stack,
.tech-list{
  align-items:center!important;
}

.tech-badge,
.tech-pill,
.tech-badges span,
.tech-stack span{
  display:grid!important;
  grid-template-columns:28px auto!important;
  align-items:center!important;
  justify-content:center!important;
  column-gap:10px!important;
  text-align:left!important;
  line-height:1!important;
}

.tech-badge i,
.tech-pill i,
.tech-badges span i,
.tech-stack span i{
  grid-column:1!important;
  width:28px!important;
  min-width:28px!important;
  height:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  font-size:18px!important;
}

.tech-badge span,
.tech-pill span{
  grid-column:2!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}

@media(max-width:640px){
  .tech-badges,
  .tech-stack,
  .tech-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }

  .tech-badge,
  .tech-pill,
  .tech-badges span,
  .tech-stack span{
    width:100%!important;
    min-height:46px!important;
    grid-template-columns:30px auto!important;
    justify-content:center!important;
    padding:10px 14px!important;
    white-space:nowrap!important;
  }
}

/* ---------- FOOTER ---------- */
.footer.footer-pro{
  max-width:1220px!important;
  width:100%!important;
  margin:42px auto 0!important;
  padding:30px 22px!important;
  display:grid!important;
  grid-template-columns:minmax(320px,560px) max-content!important;
  align-items:start!important;
  justify-content:space-between!important;
  gap:36px!important;
  box-sizing:border-box!important;
  min-height:auto!important;
  height:auto!important;
  background:transparent!important;
}

.footer.footer-pro .footer-branding{
  max-width:560px!important;
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
}

.footer.footer-pro .footer-brand-top{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

.footer.footer-pro .footer-brand-row{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:14px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}

.footer.footer-pro .footer-brand-row strong,
.footer.footer-pro .footer-branding strong{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  height:24px!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  font-size:1.05rem!important;
}

/* Social Icons exakt neben Titel */
.footer.footer-pro .footer-socials{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:11px!important;
  height:24px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}

.footer.footer-pro .footer-socials a{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  vertical-align:middle!important;
}

.footer.footer-pro .footer-socials svg{
  width:20px!important;
  height:20px!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
}

.footer.footer-pro .footer-socials .social-youtube svg{
  width:26px!important;
  height:20px!important;
}

.footer.footer-pro .footer-branding p{
  display:block!important;
  margin:0!important;
  padding:0!important;
  max-width:560px!important;
  line-height:1.65!important;
}

/* Footer-Rechtsnavigation exakt eine Linie */
.footer.footer-pro .footer-links{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:22px!important;
  margin:0!important;
  padding:3px 0 0!important;
  min-width:max-content!important;
  line-height:1!important;
  align-self:start!important;
}

.footer.footer-pro .footer-links a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:24px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Footer Mobile: Links direkt unter Text */
@media(max-width:900px){
  .footer.footer-pro{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:16px!important;
    padding:28px 10px!important;
    margin-top:36px!important;
    min-height:auto!important;
    height:auto!important;
  }

  .footer.footer-pro .footer-branding{
    max-width:100%!important;
    width:100%!important;
    gap:12px!important;
  }

  .footer.footer-pro .footer-brand-row{
    flex-wrap:wrap!important;
    gap:12px!important;
  }

  .footer.footer-pro .footer-branding p{
    margin:0!important;
    max-width:100%!important;
  }

  .footer.footer-pro .footer-links{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px 26px!important;
    margin:0!important;
    padding:0!important;
  }

  .footer.footer-pro .footer-links a{
    height:22px!important;
  }
}



/* =========================================================
   INLINE ICON FIX: keine externen FontAwesome-Symbole nötig
   ========================================================= */
.local-icon{
  width:1.15em;
  height:1.15em;
  display:inline-block;
  vertical-align:-0.14em;
  color:currentColor;
  fill:currentColor;
  flex:0 0 auto;
}
.tech-badge .local-icon,
.tech-pill .local-icon{
  width:22px!important;
  height:22px!important;
}
.skill-pro .local-icon,
.timeline-icon .local-icon,
.trust-card .local-icon,
.section-title .local-icon,
.tech-title .local-icon{
  width:1.25em;
  height:1.25em;
}



/* ===== FINAL ICON FIX: vollständig lokal, farbig, einheitlich ===== */
.yi-icon{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.15em;flex:0 0 auto;color:currentColor}
.color-cyan{color:#22e6ff!important}.color-green{color:#2ff27b!important}.color-purple{color:#b45cff!important}.color-orange{color:#ff7a1a!important}
.title-icon{width:28px!important;height:28px!important;color:#22e6ff!important;filter:drop-shadow(0 0 14px rgba(34,230,255,.45))}
.stat-icon{width:34px!important;height:34px!important;color:#22e6ff!important;filter:drop-shadow(0 0 14px rgba(34,230,255,.45))}
.badge-icon{width:20px!important;height:20px!important;flex:0 0 20px!important}.tech-badge.badge-cyan .badge-icon{color:#22e6ff!important}.tech-badge.badge-green .badge-icon{color:#2ff27b!important}.tech-badge.badge-orange .badge-icon{color:#ff7a1a!important}.tech-badge span{line-height:1!important}
.skill-icon{display:grid!important;place-items:center!important}.skill-svg{width:30px!important;height:30px!important}.skill-svg.color-cyan{color:#22e6ff!important}.skill-svg.color-green{color:#2ff27b!important}.skill-svg.color-purple{color:#b45cff!important}.skill-svg.color-orange{color:#ff7a1a!important}
.dot-chevron{width:15px!important;height:15px!important;color:#d7f8ff!important}.btn-chevron{width:16px!important;height:16px!important;color:#22e6ff!important}.skill-pro summary:after,.skill-pro:not([open]) summary:after{content:""!important}
.timeline-svg{width:26px!important;height:26px!important}.trust-svg{width:25px!important;height:25px!important;color:#22e6ff!important}.trust-card:nth-child(3) .trust-svg{color:#2ff27b!important}



/* =========================================================
   FINAL FIX 2026-05-29
   1) Footer social icons vertikal mit Yemane InfoTech
   2) Footer links vertikal wie Header Navigation
   3) Mehr erfahren klappt zuverlässig auf
   4) Mein Weg in der IT einheitlich wie Skill-Karten
   ========================================================= */

/* FOOTER AUSRICHTUNG */
.footer.footer-pro{
  max-width:1220px!important;
  width:100%!important;
  margin:42px auto 0!important;
  padding:30px 22px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:40px!important;
  box-sizing:border-box!important;
  min-height:auto!important;
  height:auto!important;
}

.footer.footer-pro .footer-branding{
  max-width:560px!important;
  width:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
}

.footer.footer-pro .footer-brand-top,
.footer.footer-pro .footer-brand-row{
  margin:0!important;
  padding:0!important;
}

.footer.footer-pro .footer-brand-row{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:14px!important;
  line-height:1!important;
  height:24px!important;
}

.footer.footer-pro .footer-brand-row strong{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:24px!important;
  line-height:24px!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
  font-size:1.05rem!important;
}

.footer.footer-pro .footer-socials{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  gap:11px!important;
  height:24px!important;
  line-height:24px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}

.footer.footer-pro .footer-socials a{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
  vertical-align:middle!important;
}

.footer.footer-pro .footer-socials svg{
  width:20px!important;
  height:20px!important;
  display:block!important;
  margin:0!important;
}

.footer.footer-pro .footer-socials .social-youtube svg{
  width:26px!important;
  height:20px!important;
}

.footer.footer-pro .footer-branding p{
  margin:0!important;
  padding:0!important;
  line-height:1.65!important;
  max-width:560px!important;
}

.footer.footer-pro .footer-links{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:22px!important;
  height:24px!important;
  line-height:24px!important;
  margin:0!important;
  padding:0!important;
  min-width:max-content!important;
}

.footer.footer-pro .footer-links a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:24px!important;
  line-height:24px!important;
  margin:0!important;
  padding:0!important;
  white-space:nowrap!important;
}

/* Mobile Footer: Links direkt unter Beschreibung */
@media(max-width:900px){
  .footer.footer-pro{
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:16px!important;
    padding:28px 10px!important;
  }

  .footer.footer-pro .footer-branding{
    width:100%!important;
    max-width:100%!important;
  }

  .footer.footer-pro .footer-brand-row{
    height:auto!important;
    flex-wrap:wrap!important;
    gap:12px!important;
  }

  .footer.footer-pro .footer-links{
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    gap:14px 26px!important;
    margin:0!important;
    padding:0!important;
  }
}

/* MEHR ERFAHREN - ZUVERLÄSSIG AUFKLAPPEN */
.skill-pro .skill-extra{
  display:grid!important;
  grid-template-rows:0fr!important;
  opacity:0!important;
  overflow:hidden!important;
  transition:grid-template-rows .28s ease, opacity .28s ease, margin .28s ease!important;
  margin-top:0!important;
}

.skill-pro .skill-extra > div{
  overflow:hidden!important;
}

.skill-pro.is-open .skill-extra{
  grid-template-rows:1fr!important;
  opacity:1!important;
  margin-top:12px!important;
}

.skill-pro.is-open{
  border-color:rgba(34,230,255,.72)!important;
  box-shadow:0 18px 48px rgba(34,230,255,.12)!important;
}

.skill-pro.is-open .btn-chevron{
  transform:rotate(180deg)!important;
}

.more-btn{
  cursor:pointer!important;
}

/* MEIN WEG IN DER IT - EINHEITLICH WIE SKILL-KARTEN */
.timeline-panel{
  padding:24px!important;
  border-radius:18px!important;
}

.timeline{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  position:relative!important;
}

.timeline::before{
  display:none!important;
}

.timeline-item{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:14px!important;
  min-height:205px!important;
  padding:17px!important;
  border:1px solid rgba(111,157,214,.36)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(13,31,54,.96),rgba(7,17,32,.96))!important;
  box-shadow:0 16px 40px rgba(0,0,0,.24)!important;
  overflow:hidden!important;
  cursor:pointer!important;
}

.timeline-icon{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  background:rgba(32,230,255,.10)!important;
  color:#22e6ff!important;
  box-shadow:inset 0 0 20px rgba(32,230,255,.07)!important;
}

.timeline-item:nth-child(2) .timeline-icon{color:#2ff27b!important;background:rgba(47,242,123,.12)!important}
.timeline-item:nth-child(3) .timeline-icon{color:#b45cff!important;background:rgba(180,92,255,.14)!important}
.timeline-item:nth-child(4) .timeline-icon{color:#2aa8ff!important;background:rgba(42,168,255,.12)!important}

.timeline-icon .timeline-svg{
  width:28px!important;
  height:28px!important;
}

.timeline-item > div:last-child{
  width:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
}

.timeline-item strong{
  display:block!important;
  font-size:18px!important;
  line-height:1.25!important;
  margin:0 0 8px!important;
  color:#fff!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}

.timeline-item p{
  margin:0!important;
  font-size:13.5px!important;
  line-height:1.5!important;
  color:#d8e2f0!important;
}

.timeline-item::after{
  content:"";
  position:absolute;
  right:16px;
  top:18px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(148,177,210,.18);
  border:1px solid rgba(34,230,255,.22);
}

.timeline-item::before{
  content:"";
  position:absolute;
  right:27px;
  top:29px;
  width:8px;
  height:8px;
  border-right:2px solid #dff8ff;
  border-bottom:2px solid #dff8ff;
  transform:rotate(45deg);
  z-index:2;
}

@media(max-width:1050px){
  .timeline{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:640px){
  .timeline{
    grid-template-columns:1fr!important;
  }
  .timeline-item{
    min-height:auto!important;
  }
}



/* =========================================================
   FINAL RESPONSIVE FIX - NAV / TECH LIST / ACCORDION / TIMELINE
   ========================================================= */

/* 1) Technologien & Werkzeuge: Handy/Tablet exakt gerade */
@media(max-width:900px){
  .tech-badges{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }
  .tech-badge{
    width:100%!important;
    min-height:58px!important;
    display:grid!important;
    grid-template-columns:46px minmax(0, 1fr) 46px!important;
    align-items:center!important;
    justify-items:start!important;
    justify-content:stretch!important;
    gap:0!important;
    padding:0 18px!important;
    text-align:left!important;
    box-sizing:border-box!important;
  }
  .tech-badge .badge-icon,
  .tech-badge svg{
    grid-column:1!important;
    width:24px!important;
    height:24px!important;
    justify-self:center!important;
    margin:0!important;
  }
  .tech-badge span{
    grid-column:2!important;
    justify-self:start!important;
    text-align:left!important;
    line-height:1.2!important;
    margin:0!important;
    padding:0!important;
    white-space:normal!important;
  }
}

/* 2) Mehr erfahren: nur Zusatzinhalt wird auf-/zugeklappt */
.skill-pro{
  display:flex!important;
  flex-direction:column!important;
}
.skill-pro .skill-extra{
  display:grid!important;
  grid-template-rows:0fr!important;
  opacity:0!important;
  overflow:hidden!important;
  margin-top:0!important;
  transition:grid-template-rows .28s ease, opacity .28s ease, margin .28s ease!important;
}
.skill-pro .skill-extra > div{
  min-height:0!important;
  overflow:hidden!important;
}
.skill-pro.is-open .skill-extra{
  grid-template-rows:1fr!important;
  opacity:1!important;
  margin-top:12px!important;
}
.skill-pro .more-btn{
  margin-top:auto!important;
  cursor:pointer!important;
  user-select:none!important;
}
.skill-pro.is-open .btn-chevron{
  transform:rotate(180deg)!important;
}

/* 3) Mobile Menü: modern, professionell, nicht kaputt/fest */
@media(max-width:760px){
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:9999!important;
  }
  .nav{
    position:relative!important;
    min-height:70px!important;
    padding:12px 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
  }
  .brand{
    min-width:0!important;
  }
  .brand span:last-child{
    white-space:nowrap!important;
  }
  .menu-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
    font-size:24px!important;
    background:rgba(13,31,54,.92)!important;
    border:1px solid rgba(130,170,220,.32)!important;
    color:#fff!important;
    box-shadow:0 12px 30px rgba(0,0,0,.28)!important;
  }
  .nav-links{
    position:absolute!important;
    top:calc(100% + 10px)!important;
    left:16px!important;
    right:16px!important;
    width:auto!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:18px!important;
    margin:0!important;
    border-radius:22px!important;
    border:1px solid rgba(130,170,220,.28)!important;
    background:linear-gradient(145deg,rgba(13,31,54,.98),rgba(7,17,32,.98))!important;
    box-shadow:0 24px 70px rgba(0,0,0,.48)!important;
    backdrop-filter:blur(18px)!important;
    z-index:10000!important;
  }
  .nav-links.open{
    display:flex!important;
  }
  .nav-links a{
    width:100%!important;
    height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    padding:0 16px!important;
    margin:0!important;
    font-size:1rem!important;
  }
  .nav-links a.active{
    background:rgba(34,230,255,.13)!important;
    color:#22e6ff!important;
  }
}

/* 4) Mein Weg in der IT: wie moderne Kompetenzkarten */
.timeline-panel{
  padding:24px!important;
  border-radius:18px!important;
}
.timeline{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  position:relative!important;
}
.timeline::before{
  display:none!important;
}
.timeline-item{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:14px!important;
  min-height:205px!important;
  padding:17px!important;
  border:1px solid rgba(111,157,214,.36)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(13,31,54,.96),rgba(7,17,32,.96))!important;
  box-shadow:0 16px 40px rgba(0,0,0,.24)!important;
  overflow:hidden!important;
}
.timeline-icon{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  background:rgba(32,230,255,.10)!important;
  color:#22e6ff!important;
}
.timeline-icon .timeline-svg{
  width:28px!important;
  height:28px!important;
}
.timeline-item > div:last-child{
  width:100%!important;
  min-width:0!important;
}
.timeline-item strong{
  display:block!important;
  font-size:18px!important;
  line-height:1.25!important;
  margin:0 0 8px!important;
  color:#fff!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
.timeline-item p{
  margin:0!important;
  font-size:13.5px!important;
  line-height:1.5!important;
  color:#d8e2f0!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
.timeline-item::after,
.timeline-item::before{
  display:none!important;
}

@media(max-width:1050px){
  .timeline{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  .timeline{
    grid-template-columns:1fr!important;
  }
  .timeline-item{
    min-height:auto!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
  }
  .timeline-icon{
    grid-column:1!important;
    grid-row:1 / span 2!important;
  }
  .timeline-item > div:last-child{
    grid-column:2!important;
  }
}

/* Footer bleibt gerade */
.footer.footer-pro .footer-brand-row,
.footer.footer-pro .footer-socials,
.footer.footer-pro .footer-links{
  align-items:center!important;
}



/* =========================================================
   ULTIMATE FINAL FIX: Handy/Tablet Menü, Tech-Liste, Mehr-erfahren, Timeline
   ========================================================= */

/* TECHNOLOGIEN & WERKZEUGE - auf Handy/Tablet immer gleich eingerückt */
@media (max-width: 900px) {
  .tech-badges{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }

  .tech-badge{
    width:100%!important;
    min-height:64px!important;
    display:grid!important;
    grid-template-columns:96px 1fr!important;
    align-items:center!important;
    justify-items:start!important;
    justify-content:stretch!important;
    gap:0!important;
    padding:0 18px!important;
    box-sizing:border-box!important;
    text-align:left!important;
  }

  .tech-badge > svg,
  .tech-badge > i,
  .tech-badge .badge-icon,
  .tech-badge .yi-icon,
  .tech-badge .local-icon{
    grid-column:1!important;
    justify-self:center!important;
    align-self:center!important;
    width:24px!important;
    height:24px!important;
    margin:0!important;
    flex:0 0 24px!important;
  }

  .tech-badge > span{
    grid-column:2!important;
    justify-self:start!important;
    align-self:center!important;
    text-align:left!important;
    margin:0!important;
    padding:0!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
}

/* MEHR ERFAHREN - funktioniert auch wenn mehrere alte Scripts vorhanden waren */
.skill-pro{
  display:flex!important;
  flex-direction:column!important;
}

.skill-pro .skill-extra{
  display:grid!important;
  grid-template-rows:0fr!important;
  opacity:0!important;
  overflow:hidden!important;
  margin-top:0!important;
  transition:grid-template-rows .25s ease, opacity .25s ease, margin-top .25s ease!important;
}

.skill-pro .skill-extra > div{
  overflow:hidden!important;
  min-height:0!important;
}

.skill-pro.is-open .skill-extra{
  grid-template-rows:1fr!important;
  opacity:1!important;
  margin-top:12px!important;
}

.skill-pro.is-open{
  border-color:rgba(34,230,255,.75)!important;
  box-shadow:0 18px 48px rgba(34,230,255,.12)!important;
}

.skill-pro .more-btn{
  cursor:pointer!important;
  user-select:none!important;
}

.skill-pro.is-open .btn-chevron,
.skill-pro.is-open .more-btn svg{
  transform:rotate(180deg)!important;
}

/* MOBILE MENÜ - modern und professionell, wie Karte unter Header */
@media (max-width: 760px) {
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:9999!important;
  }

  .nav{
    position:relative!important;
    min-height:70px!important;
    padding:12px 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:nowrap!important;
  }

  .brand{
    min-width:0!important;
  }

  .brand span:last-child{
    white-space:nowrap!important;
  }

  .menu-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
    font-size:24px!important;
    background:rgba(13,31,54,.96)!important;
    border:1px solid rgba(130,170,220,.36)!important;
    color:#fff!important;
    box-shadow:0 12px 30px rgba(0,0,0,.30)!important;
  }

  .nav-links{
    position:absolute!important;
    top:calc(100% + 10px)!important;
    left:16px!important;
    right:16px!important;
    width:auto!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    margin:0!important;
    padding:18px!important;
    border-radius:22px!important;
    border:1px solid rgba(130,170,220,.30)!important;
    background:linear-gradient(145deg,rgba(13,31,54,.98),rgba(7,17,32,.98))!important;
    box-shadow:0 24px 70px rgba(0,0,0,.50)!important;
    backdrop-filter:blur(18px)!important;
    z-index:10000!important;
  }

  .nav-links.open{
    display:flex!important;
  }

  .nav-links a{
    width:100%!important;
    height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    margin:0!important;
    padding:0 16px!important;
    font-size:1rem!important;
  }

  .nav-links a.active{
    background:rgba(34,230,255,.13)!important;
    color:#22e6ff!important;
  }
}

/* MEIN WEG IN DER IT - modern, sauber, einheitlich mit Karten */
.timeline-panel{
  padding:24px!important;
  border-radius:18px!important;
}

.timeline{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  position:relative!important;
}

.timeline::before{
  display:none!important;
}

.timeline-item{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:14px!important;
  min-height:205px!important;
  padding:17px!important;
  border:1px solid rgba(111,157,214,.36)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(13,31,54,.96),rgba(7,17,32,.96))!important;
  box-shadow:0 16px 40px rgba(0,0,0,.24)!important;
  overflow:hidden!important;
}

.timeline-icon{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  background:rgba(32,230,255,.10)!important;
  color:#22e6ff!important;
  box-shadow:inset 0 0 20px rgba(32,230,255,.07)!important;
}

.timeline-icon svg{
  width:28px!important;
  height:28px!important;
}

.timeline-item > div:last-child{
  width:100%!important;
  min-width:0!important;
}

.timeline-item strong{
  display:block!important;
  font-size:18px!important;
  line-height:1.25!important;
  margin:0 0 8px!important;
  color:#fff!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}

.timeline-item p{
  margin:0!important;
  font-size:13.5px!important;
  line-height:1.5!important;
  color:#d8e2f0!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}

.timeline-item::after,
.timeline-item::before{
  display:none!important;
}

@media (max-width:1050px) {
  .timeline{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:640px) {
  .timeline{
    grid-template-columns:1fr!important;
  }

  .timeline-item{
    min-height:auto!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
  }

  .timeline-icon{
    grid-column:1!important;
    grid-row:1 / span 2!important;
  }

  .timeline-item > div:last-child{
    grid-column:2!important;
  }
}



@media (max-width: 900px){
  .tech-badge,
  .technology-chip,
  .tech-item{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
    padding-left:22px !important;
    gap:14px !important;
  }

  .tech-badge i,
  .tech-badge svg,
  .technology-chip i,
  .technology-chip svg,
  .tech-item i,
  .tech-item svg{
    margin-right:12px !important;
    margin-left:0 !important;
    flex-shrink:0 !important;
  }

  .tech-badge span,
  .technology-chip span,
  .tech-item span{
    text-align:left !important;
    margin-left:0 !important;
  }
}


/* =========================================================
   FIX: Mehr-erfahren Bereich sichtbar auf-/zuklappen
   ========================================================= */
.skill-pro .skill-extra{
  display:grid!important;
  grid-template-rows:0fr!important;
  opacity:0!important;
  overflow:hidden!important;
  margin-top:0!important;
  transition:grid-template-rows .28s ease, opacity .28s ease, margin-top .28s ease!important;
}

.skill-pro .skill-extra > div{
  min-height:0!important;
  overflow:hidden!important;
}

.skill-pro.is-open .skill-extra{
  grid-template-rows:1fr!important;
  opacity:1!important;
  margin-top:12px!important;
}

.skill-pro.is-open{
  border-color:rgba(34,230,255,.75)!important;
  box-shadow:0 18px 48px rgba(34,230,255,.12)!important;
}

.more-btn,
.about-more{
  cursor:pointer!important;
  pointer-events:auto!important;
}

.skill-pro.is-open .btn-chevron,
.skill-pro.is-open .more-btn svg{
  transform:rotate(180deg)!important;
}



/* =========================================================
   MODERNE LEISTUNGEN-SEITE - EINHEITLICH MIT HOME / ÜBER MICH
   ========================================================= */
.services-modern-page{
  max-width:1220px;
  margin:0 auto;
  padding:72px 22px 58px;
}

.services-hero-pro{
  text-align:center;
  margin:0 auto 52px;
}

.services-kicker,
.why-kicker{
  color:#22e6ff;
  text-transform:uppercase;
  letter-spacing:4px;
  font-weight:900;
  font-size:.85rem;
  margin:0 0 14px;
}

.services-hero-pro h1{
  margin:0;
  color:#fff;
  font-size:clamp(44px,6.7vw,82px);
  line-height:1.02;
  letter-spacing:-2.2px;
  text-shadow:0 12px 40px rgba(0,0,0,.42);
}

.services-hero-pro h1 span{
  display:inline-block;
  background:linear-gradient(90deg,#38f2ff,#2f80ff,#6d5cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.services-lead{
  max-width:680px;
  margin:22px auto 0;
  color:#cbd8ee;
  font-size:1.05rem;
  line-height:1.75;
}

.services-hero-line{
  width:72px;
  height:3px;
  margin:26px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,#22e6ff,#2f80ff);
  box-shadow:0 0 18px rgba(34,230,255,.55);
}

.services-grid-pro{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin:0 auto 34px;
}

.service-pro-card{
  position:relative;
  min-height:330px;
  display:flex;
  flex-direction:column;
  padding:24px;
  border-radius:20px;
  border:1px solid rgba(111,157,214,.36);
  background:
    radial-gradient(circle at 88% 0%,rgba(34,230,255,.13),transparent 22%),
    linear-gradient(145deg,rgba(13,31,54,.96),rgba(7,17,32,.96));
  box-shadow:0 18px 48px rgba(0,0,0,.24);
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.service-pro-card:hover{
  transform:translateY(-5px);
  border-color:rgba(34,230,255,.68);
  box-shadow:0 24px 60px rgba(34,230,255,.12);
}

.service-card-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
}

.service-icon{
  width:62px;
  height:62px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(34,230,255,.22),rgba(47,128,255,.70));
  color:#22e6ff;
  box-shadow:0 0 28px rgba(34,230,255,.20), inset 0 0 18px rgba(255,255,255,.06);
}

.service-blue .service-icon{color:#6aa7ff;background:linear-gradient(135deg,rgba(47,128,255,.25),rgba(80,100,255,.65))}
.service-green .service-icon{color:#2ff27b;background:linear-gradient(135deg,rgba(47,242,123,.22),rgba(20,140,110,.62))}
.service-purple .service-icon{color:#b45cff;background:linear-gradient(135deg,rgba(180,92,255,.24),rgba(95,55,160,.62))}
.service-orange .service-icon{color:#ff9f1a;background:linear-gradient(135deg,rgba(255,159,26,.20),rgba(135,82,20,.62))}

.srv-icon-svg{
  width:32px;
  height:32px;
}

.service-pro-card h3{
  color:#fff;
  font-size:1.35rem;
  margin:0;
  line-height:1.2;
}

.service-pro-card p{
  color:#d9e7f7;
  line-height:1.65;
  font-size:1rem;
  margin:0 0 18px;
}

.service-pro-card ul{
  list-style:none;
  padding:0;
  margin:0 0 18px;
}

.service-pro-card li{
  position:relative;
  padding-left:27px;
  margin:9px 0;
  color:#e7f0fb;
  line-height:1.35;
}

.service-pro-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.2em;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid #22e6ff;
  box-shadow:0 0 10px rgba(34,230,255,.25);
}

.service-pro-card li::after{
  content:"";
  position:absolute;
  left:5px;
  top:.48em;
  width:6px;
  height:3px;
  border-left:2px solid #22e6ff;
  border-bottom:2px solid #22e6ff;
  transform:rotate(-45deg);
}

.service-extra{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transition:grid-template-rows .28s ease,opacity .28s ease,margin-top .28s ease;
}

.service-extra > div{
  min-height:0;
  overflow:hidden;
}

.service-pro-card.is-open .service-extra{
  grid-template-rows:1fr;
  opacity:1;
  margin-top:6px;
}

.service-extra p{
  color:#bcd0e8;
  font-size:.95rem;
  margin:0 0 16px;
}

.service-more{
  margin-top:auto;
  height:44px;
  border-radius:10px;
  border:1px solid rgba(34,230,255,.50);
  background:rgba(0,114,190,.12);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:800;
  cursor:pointer;
  transition:.25s ease;
}

.service-more:hover{
  border-color:#22e6ff;
  box-shadow:0 0 20px rgba(34,230,255,.18);
  transform:translateY(-1px);
}

.srv-arrow{
  width:18px;
  height:18px;
  color:#22e6ff;
  transition:transform .25s ease;
}

.service-pro-card.is-open .srv-arrow{
  transform:rotate(90deg);
}

.why-work-pro{
  margin:36px auto 34px;
  padding:28px;
  border-radius:20px;
  border:1px solid rgba(111,157,214,.34);
  background:linear-gradient(145deg,rgba(7,20,38,.92),rgba(8,18,34,.92));
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}

.why-kicker{
  text-align:center;
  margin-bottom:24px;
}

.why-grid-pro{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

.why-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:6px 16px;
  border-right:1px solid rgba(111,157,214,.26);
}

.why-item:last-child{
  border-right:none;
}

.why-icon{
  width:38px;
  height:38px;
  color:#22e6ff;
  flex:0 0 38px;
}

.why-item strong{
  display:block;
  color:#fff;
  margin-bottom:5px;
}

.why-item span{
  color:#cbd8ee;
  line-height:1.45;
  font-size:.92rem;
}

.service-cta-pro{
  text-align:center;
  padding:26px 16px 4px;
}

.cta-orb{
  width:64px;
  height:64px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 18px;
  border:1px solid rgba(34,230,255,.40);
  background:rgba(34,230,255,.08);
  color:#22e6ff;
  box-shadow:0 0 30px rgba(34,230,255,.16);
}

.cta-icon{
  width:32px;
  height:32px;
}

.service-cta-pro h2{
  color:#fff;
  font-size:clamp(24px,3vw,32px);
  margin:0 0 8px;
}

.service-cta-pro p{
  color:#cbd8ee;
  margin:0 0 22px;
}

.cta-main-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:280px;
  height:54px;
  border-radius:999px;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  background:linear-gradient(90deg,#38d4d4,#3b82f6);
  box-shadow:0 18px 42px rgba(47,128,255,.22);
}

@media(max-width:1050px){
  .services-grid-pro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-grid-pro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-item{border-right:none}
}

@media(max-width:640px){
  .services-modern-page{padding:44px 14px 42px}
  .services-hero-pro{margin-bottom:34px}
  .services-hero-pro h1{font-size:42px;letter-spacing:-1px}
  .services-lead{font-size:.95rem}
  .services-grid-pro{grid-template-columns:1fr;gap:16px}
  .service-pro-card{min-height:auto;padding:20px}
  .why-work-pro{padding:20px 14px}
  .why-grid-pro{grid-template-columns:1fr;gap:12px}
  .why-item{padding:12px;border:1px solid rgba(111,157,214,.22);border-radius:14px;background:rgba(13,31,54,.50)}
  .cta-main-button{width:100%;min-width:0}
}



/* =========================================================
   NAVIGATION ACTIVE UNDERLINE - einheitlich auf allen Seiten
   ========================================================= */
.nav-links a{
  position:relative!important;
}

.nav-links a.active,
.nav-links a[aria-current="page"]{
  color:#22e6ff!important;
  background:rgba(34,230,255,.10)!important;
}

.nav-links a.active::after,
.nav-links a[aria-current="page"]::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:-18px!important;
  width:86px!important;
  height:3px!important;
  transform:translateX(-50%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#22e6ff,#2f80ff)!important;
  box-shadow:0 0 16px rgba(34,230,255,.65)!important;
}

/* Im Handy-Menü keine Unterlinie, nur moderner Button-Hintergrund */
@media(max-width:760px){
  .nav-links a.active::after,
  .nav-links a[aria-current="page"]::after{
    display:none!important;
  }

  .nav-links a.active,
  .nav-links a[aria-current="page"]{
    background:rgba(34,230,255,.13)!important;
    color:#22e6ff!important;
  }
}



/* =========================================================
   MODERNE PROJEKTE-SEITE - skalierbar, einheitlich mit Website
   ========================================================= */
.projects-modern-page{
  max-width:1220px;
  margin:0 auto;
  padding:72px 22px 64px;
}

.projects-hero-pro{
  max-width:620px;
  margin-bottom:40px;
}

.project-kicker{
  color:#22e6ff;
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:900;
  font-size:.85rem;
  margin:0 0 12px;
}

.projects-hero-pro h1{
  margin:0;
  color:#fff;
  font-size:clamp(48px,6vw,76px);
  line-height:1;
  letter-spacing:-2px;
}

.project-lead{
  color:#cbd8ee;
  line-height:1.75;
  font-size:1.05rem;
  margin:22px 0 0;
}

.project-stats-pro{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin:0 0 44px;
}

.project-stat{
  min-height:105px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px;
  border:1px solid rgba(111,157,214,.34);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(7,20,38,.92),rgba(8,18,34,.88));
  box-shadow:0 18px 46px rgba(0,0,0,.18);
}

.project-stat-icon{
  width:44px;
  height:44px;
  color:#22e6ff;
  padding:10px;
  border-radius:50%;
  background:rgba(34,230,255,.08);
  border:1px solid rgba(34,230,255,.22);
  flex:0 0 44px;
}

.project-stat span{
  display:block;
  color:#d8e6f7;
  font-weight:800;
  font-size:.92rem;
}

.project-stat strong{
  display:block;
  color:#fff;
  font-size:1.85rem;
  line-height:1.05;
  margin-top:3px;
}

.project-stat small{
  color:#b9c9dc;
}

.project-filter-pro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px;
  border:1px solid rgba(111,157,214,.34);
  border-radius:16px;
  background:rgba(7,20,38,.76);
  margin-bottom:32px;
}

.project-filter-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.project-filter-btn{
  height:42px;
  border-radius:999px;
  border:1px solid rgba(111,157,214,.38);
  background:rgba(13,31,54,.70);
  color:#fff;
  font-weight:800;
  padding:0 18px;
  cursor:pointer;
  transition:.22s ease;
}

.project-filter-btn.active,
.project-filter-btn:hover{
  background:linear-gradient(90deg,#38d4d4,#3b82f6);
  border-color:transparent;
  color:#06111f;
  box-shadow:0 0 22px rgba(34,230,255,.20);
}

.project-search-wrap{
  position:relative;
  min-width:270px;
}

.project-search-wrap input{
  width:100%;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(111,157,214,.34);
  background:rgba(5,14,28,.62);
  color:#fff;
  padding:0 48px 0 18px;
  outline:none;
}

.project-search-wrap input::placeholder{
  color:#7f91aa;
}

.project-search-icon{
  width:22px;
  height:22px;
  color:#fff;
  position:absolute;
  right:17px;
  top:50%;
  transform:translateY(-50%);
}

.projects-grid-pro{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.project-pro-card{
  position:relative;
  min-height:365px;
  display:flex;
  flex-direction:column;
  padding:28px;
  border-radius:18px;
  border:1px solid rgba(111,157,214,.34);
  background:
    radial-gradient(circle at 88% 0%,rgba(34,230,255,.12),transparent 22%),
    linear-gradient(145deg,rgba(13,31,54,.96),rgba(7,17,32,.96));
  box-shadow:0 18px 48px rgba(0,0,0,.22);
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.project-pro-card:hover{
  transform:translateY(-5px);
  border-color:rgba(34,230,255,.64);
  box-shadow:0 24px 60px rgba(34,230,255,.12);
}

.project-featured{
  position:absolute;
  right:18px;
  top:18px;
  background:linear-gradient(90deg,#38d4d4,#37f1d2);
  color:#06111f;
  font-weight:900;
  font-size:.78rem;
  padding:7px 13px;
  border-radius:999px;
}

.project-icon{
  width:62px;
  height:62px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#22e6ff;
  background:linear-gradient(135deg,rgba(34,230,255,.22),rgba(47,128,255,.70));
  box-shadow:0 0 28px rgba(34,230,255,.18);
  margin-bottom:28px;
}

.project-icon-svg{
  width:32px;
  height:32px;
}

.project-green .project-icon{color:#2ff27b;background:linear-gradient(135deg,rgba(47,242,123,.22),rgba(20,140,110,.62))}
.project-purple .project-icon{color:#b45cff;background:linear-gradient(135deg,rgba(180,92,255,.24),rgba(95,55,160,.62))}
.project-orange .project-icon{color:#ff9f1a;background:linear-gradient(135deg,rgba(255,159,26,.20),rgba(135,82,20,.62))}

.project-pro-card h3{
  margin:0 0 8px;
  color:#fff;
  font-size:1.35rem;
  line-height:1.25;
}

.project-category{
  color:#8aa0bd;
  margin:0 0 18px;
  font-weight:700;
}

.project-desc{
  color:#cbd8ee;
  line-height:1.65;
  margin:0 0 24px;
}

.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:auto 0 22px;
}

.project-tags span{
  color:#22e6ff;
  font-size:.82rem;
  font-weight:800;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(34,230,255,.45);
  background:rgba(34,230,255,.06);
}

.project-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:46px;
  border-top:1px solid rgba(111,157,214,.22);
  padding-top:22px;
  color:#22e6ff;
  text-decoration:none;
  font-weight:900;
  margin-top:auto;
}

.project-arrow{
  width:18px;
  height:18px;
}

.load-more-wrap{
  display:flex;
  justify-content:center;
  margin:34px 0 46px;
}

.project-load-more{
  min-width:310px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(111,157,214,.40);
  background:rgba(7,20,38,.76);
  color:#eaf4ff;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.project-down{
  width:20px;
  height:20px;
  color:#22e6ff;
}

.project-cta-pro{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
  padding:32px;
  border-radius:18px;
  border:1px solid rgba(34,230,255,.38);
  background:
    radial-gradient(circle at 8% 50%,rgba(34,230,255,.12),transparent 24%),
    linear-gradient(145deg,rgba(7,20,38,.92),rgba(8,18,34,.92));
}

.project-cta-icon{
  width:96px;
  height:96px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#22e6ff;
  border:1px solid rgba(34,230,255,.52);
  background:rgba(34,230,255,.07);
}

.project-cta-svg{
  width:48px;
  height:48px;
}

.project-cta-pro h2{
  color:#fff;
  margin:0 0 8px;
  font-size:clamp(24px,3vw,34px);
}

.project-cta-pro p{
  color:#cbd8ee;
  margin:0;
  line-height:1.6;
}

.project-cta-button{
  min-width:240px;
  height:56px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  font-weight:900;
  text-decoration:none;
  background:linear-gradient(90deg,#38d4d4,#4b73ff);
  box-shadow:0 18px 42px rgba(47,128,255,.22);
}

@media(max-width:1050px){
  .project-stats-pro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projects-grid-pro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-filter-pro{flex-direction:column;align-items:stretch}
  .project-search-wrap{min-width:0}
}

@media(max-width:680px){
  .projects-modern-page{padding:44px 14px 48px}
  .projects-hero-pro h1{font-size:48px}
  .project-stats-pro{grid-template-columns:1fr;gap:12px}
  .projects-grid-pro{grid-template-columns:1fr;gap:16px}
  .project-pro-card{min-height:auto;padding:22px}
  .project-filter-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-filter-btn{width:100%;padding:0 10px}
  .project-cta-pro{grid-template-columns:1fr;text-align:center}
  .project-cta-icon{margin:0 auto}
  .project-cta-button{width:100%;min-width:0}
}



/* Projektseite: skalierbar mit Load-More und echte Detailseiten */
.project-pro-card.future-project{
  animation: projectFadeIn .25s ease both;
}
@keyframes projectFadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.project-pro-card .project-link[href="contact.html"]{
  color:#8fdcff;
}
.project-proof-panel{
  margin-top:32px;
  padding:28px;
  border-radius:20px;
  border:1px solid rgba(111,157,214,.34);
  background:linear-gradient(145deg,rgba(13,31,54,.96),rgba(7,17,32,.96));
}
.project-proof-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
.project-proof-card{
  border:1px solid rgba(111,157,214,.30);
  border-radius:16px;
  background:rgba(7,20,38,.65);
  overflow:hidden;
}
.project-proof-card img{
  width:100%;
  height:180px;
  object-fit:contain;
  background:rgba(5,14,28,.65);
  display:block;
  padding:12px;
}
.project-proof-card div{
  padding:14px;
}
.project-proof-card strong{
  color:#fff;
  display:block;
  margin-bottom:6px;
}
.project-proof-card p{
  color:#cbd8ee;
  margin:0;
  line-height:1.5;
  font-size:.92rem;
}
@media(max-width:900px){
  .project-proof-grid{grid-template-columns:1fr}
}



/* =========================================================
   PROJECT DETAIL PAGES FINAL - Jede Projektseite separat
   ========================================================= */
.project-detail-modern{
  max-width:1220px;
  margin:0 auto;
  padding:58px 22px 70px;
}
.project-back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#cbd8ee;
  text-decoration:none;
  font-weight:800;
  margin-bottom:34px;
}
.project-back-link svg{width:18px;height:18px}
.project-detail-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,520px);
  gap:44px;
  align-items:center;
  margin-bottom:36px;
}
.project-detail-kicker{
  color:#22e6ff;
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:900;
  font-size:.82rem;
  margin:0 0 14px;
}
.project-detail-hero h1{
  color:#fff;
  font-size:clamp(42px,5vw,72px);
  line-height:1.04;
  letter-spacing:-2px;
  margin:0 0 18px;
}
.project-detail-lead{
  color:#cbd8ee;
  line-height:1.75;
  font-size:1.05rem;
  margin:0 0 24px;
}
.project-detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:26px;
}
.project-detail-tags span{
  color:#22e6ff;
  border:1px solid rgba(34,230,255,.45);
  background:rgba(34,230,255,.07);
  padding:8px 12px;
  border-radius:999px;
  font-weight:850;
  font-size:.86rem;
}
.project-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.project-action-primary,
.project-action-secondary{
  min-height:44px;
  padding:0 18px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  font-weight:900;
}
.project-action-primary{
  color:#fff;
  background:linear-gradient(90deg,#38d4d4,#3b82f6);
  box-shadow:0 14px 32px rgba(47,128,255,.2);
}
.project-action-secondary{
  color:#fff;
  border:1px solid rgba(111,157,214,.38);
  background:rgba(13,31,54,.68);
}
.project-visual-card,
.project-detail-panel,
.project-gallery-panel{
  border:1px solid rgba(111,157,214,.35);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(13,31,54,.96),rgba(7,17,32,.96));
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}
.project-visual-card{
  padding:22px;
  overflow:hidden;
}
.project-visual-card img{
  width:100%;
  display:block;
  border-radius:14px;
  background:rgba(5,14,28,.65);
}
.project-detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  margin-bottom:24px;
}
.project-detail-panel{
  padding:26px;
}
.project-detail-panel.full{
  grid-column:1 / -1;
}
.project-detail-panel h2,
.project-gallery-panel h2{
  color:#fff;
  font-size:clamp(26px,3vw,38px);
  margin:0 0 14px;
}
.project-detail-panel p,
.project-gallery-panel p{
  color:#cbd8ee;
  line-height:1.7;
}
.project-check-list{
  list-style:none;
  padding:0;
  margin:16px 0 0;
}
.project-check-list li{
  position:relative;
  padding-left:30px;
  color:#e7f0fb;
  margin:12px 0;
  line-height:1.45;
}
.project-check-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#22e6ff;
  font-weight:900;
}
.project-mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.project-mini-card{
  border:1px solid rgba(111,157,214,.28);
  border-radius:16px;
  padding:18px;
  background:rgba(7,20,38,.58);
}
.project-mini-card svg{
  width:30px;
  height:30px;
  color:#22e6ff;
  margin-bottom:10px;
}
.project-mini-card strong{
  color:#fff;
  display:block;
  margin-bottom:8px;
}
.project-mini-card p{
  margin:0;
  font-size:.94rem;
}
.project-gallery-panel{
  padding:28px;
  margin-top:24px;
}
.project-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:20px;
}
.project-gallery-card{
  border:1px solid rgba(111,157,214,.30);
  border-radius:16px;
  background:rgba(7,20,38,.62);
  overflow:hidden;
}
.project-gallery-card img{
  width:100%;
  height:180px;
  object-fit:contain;
  background:rgba(5,14,28,.65);
  display:block;
  padding:12px;
}
.project-gallery-card div{
  padding:14px;
}
.project-gallery-card strong{
  color:#fff;
  display:block;
  margin-bottom:6px;
}
.project-gallery-card p{
  color:#cbd8ee;
  margin:0;
  font-size:.92rem;
  line-height:1.5;
}
.project-tech-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.project-tech-pills span{
  color:#22e6ff;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(34,230,255,.42);
  background:rgba(34,230,255,.06);
  font-weight:850;
}
@media(max-width:980px){
  .project-detail-hero{grid-template-columns:1fr}
  .project-detail-grid{grid-template-columns:1fr}
  .project-mini-grid{grid-template-columns:1fr}
  .project-gallery-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .project-detail-modern{padding:40px 14px 52px}
  .project-detail-hero h1{font-size:42px}
}



/* =========================================================
   MODERNE VIDEO-SEITE - integriert mit Yemane InfoTech Design
   ========================================================= */
.videos-modern-page{
  max-width:1220px;
  margin:0 auto;
  padding:72px 22px 62px;
}
.videos-hero-pro{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:54px;
  align-items:center;
  margin-bottom:52px;
}
.video-kicker{
  color:#22e6ff;
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:900;
  font-size:.85rem;
  margin:0 0 14px;
}
.videos-hero-pro h1{
  color:#fff;
  font-size:clamp(48px,6.2vw,78px);
  line-height:1.02;
  letter-spacing:-2px;
  margin:0 0 22px;
}
.video-lead{
  color:#cbd8ee;
  max-width:650px;
  line-height:1.75;
  font-size:1.05rem;
  margin:0 0 34px;
}
.video-stats-pro{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(111,157,214,.32);
  border-radius:14px;
  background:rgba(7,20,38,.68);
  overflow:hidden;
}
.video-stat{
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 18px;
  border-right:1px solid rgba(111,157,214,.18);
}
.video-stat:last-child{border-right:none}
.video-stat-icon{
  width:42px;
  height:42px;
  color:#22e6ff;
  padding:9px;
  border-radius:50%;
  background:rgba(34,230,255,.08);
  flex:0 0 42px;
}
.video-stat strong{
  display:block;
  color:#fff;
  font-size:1.45rem;
  line-height:1.1;
}
.video-stat span{
  color:#cbd8ee;
  font-size:.86rem;
}
.video-hero-visual{
  min-height:330px;
  display:grid;
  place-items:center;
  position:relative;
}
.video-hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,rgba(34,230,255,.18),transparent 58%);
  filter:blur(8px);
}
.video-screen-illustration{
  position:relative;
  width:min(420px,100%);
  aspect-ratio:1.45/1;
  border-radius:24px;
  border:1px solid rgba(34,230,255,.45);
  background:linear-gradient(145deg,rgba(15,38,75,.90),rgba(8,15,32,.96));
  box-shadow:0 0 45px rgba(34,230,255,.18), inset 0 0 30px rgba(120,90,255,.12);
  transform:perspective(900px) rotateY(-10deg);
  overflow:hidden;
}
.video-screen-illustration::after{
  content:"";
  position:absolute;
  inset:auto 16% -34px;
  height:38px;
  background:linear-gradient(90deg,transparent,#22e6ff,transparent);
  opacity:.42;
  filter:blur(11px);
}
.screen-glow{
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  width:96px;
  height:96px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  border:1px solid rgba(34,230,255,.60);
  background:rgba(34,230,255,.09);
  box-shadow:0 0 36px rgba(34,230,255,.25);
}
.screen-play{width:44px;height:44px;color:#9eefff}
.screen-line{
  position:absolute;
  left:13%;
  right:13%;
  bottom:24%;
  height:7px;
  border-radius:999px;
  background:linear-gradient(90deg,#22e6ff 0 38%,rgba(255,255,255,.18) 38%);
}
.screen-controls{
  position:absolute;
  left:13%;
  bottom:13%;
  display:flex;
  gap:12px;
}
.screen-controls span{
  width:34px;
  height:5px;
  border-radius:999px;
  background:rgba(120,160,220,.42);
}
.video-filter-pro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px;
  border:1px solid rgba(111,157,214,.34);
  border-radius:16px;
  background:rgba(7,20,38,.76);
  margin-bottom:34px;
}
.video-filter-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.video-filter-btn{
  height:44px;
  border-radius:999px;
  border:1px solid rgba(111,157,214,.38);
  background:rgba(13,31,54,.70);
  color:#fff;
  font-weight:850;
  padding:0 18px;
  cursor:pointer;
  transition:.22s ease;
}
.video-filter-btn.active,
.video-filter-btn:hover{
  background:linear-gradient(90deg,#38d4d4,#3b82f6);
  color:#06111f;
  border-color:transparent;
}
.video-search-wrap{
  position:relative;
  min-width:275px;
}
.video-search-wrap input{
  width:100%;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(111,157,214,.34);
  background:rgba(5,14,28,.62);
  color:#fff;
  padding:0 48px 0 18px;
  outline:none;
}
.video-search-icon{
  width:22px;
  height:22px;
  color:#fff;
  position:absolute;
  right:17px;
  top:50%;
  transform:translateY(-50%);
}
.latest-videos-panel,
.video-categories-panel,
.video-cta-pro{
  border:1px solid rgba(111,157,214,.34);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(13,31,54,.92),rgba(7,17,32,.92));
  box-shadow:0 18px 48px rgba(0,0,0,.20);
}
.latest-videos-panel{
  padding:28px;
  margin-bottom:32px;
}
.latest-videos-panel h2,
.video-categories-panel h2{
  color:#fff;
  margin:0 0 24px;
  display:flex;
  align-items:center;
  gap:12px;
}
.section-mini-icon{
  width:25px;
  height:25px;
  color:#22e6ff;
}
.featured-video-layout{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(270px,.9fr);
  gap:30px;
}
.featured-video-frame{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(195,0,100,.65),rgba(55,0,120,.60));
  min-height:360px;
}
.video-dynamic-mount{
  width:100%;
  height:100%;
  min-height:360px;
}
.video-dynamic-mount video,
.video-dynamic-mount iframe{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  display:block;
}
.video-play-overlay{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:78px;
  height:78px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(34,230,255,.70);
  color:#fff;
  pointer-events:none;
  box-shadow:0 0 30px rgba(34,230,255,.35);
}
.video-overlay-icon{
  width:38px;
  height:38px;
}
.video-duration{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:5px 8px;
  border-radius:6px;
  background:rgba(0,0,0,.70);
  color:#fff;
  font-size:.82rem;
  font-weight:800;
}
.featured-video-card h3{
  color:#fff;
  margin:18px 0 7px;
}
.video-meta{
  color:#aebcd0;
  margin:0 0 12px;
}
.video-meta span:first-child{
  color:#22e6ff;
  font-weight:800;
}
.featured-video-card > p:last-child{
  color:#cbd8ee;
}
.video-side-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.video-side-item{
  display:grid;
  grid-template-columns:116px 1fr;
  gap:14px;
  align-items:center;
}
.video-side-item .thumb{
  position:relative;
  height:72px;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(34,230,255,.14),rgba(120,50,255,.28));
  border:1px solid rgba(111,157,214,.30);
  display:grid;
  place-items:center;
}
.thumb-play{
  width:32px;
  height:32px;
  color:#22e6ff;
  background:rgba(7,20,38,.70);
  border-radius:50%;
  padding:8px;
}
.video-side-item .thumb span{
  position:absolute;
  right:5px;
  bottom:5px;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:.72rem;
  border-radius:4px;
  padding:2px 5px;
}
.video-side-item h3{
  color:#fff;
  font-size:.98rem;
  margin:0 0 6px;
  line-height:1.3;
}
.video-side-item p{
  color:#cbd8ee;
  margin:0;
  font-size:.86rem;
}
.video-side-item p::first-letter{color:#22e6ff}
.video-categories-panel{
  padding:28px;
  margin-bottom:32px;
}
.video-category-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
}
.video-category-card{
  min-height:155px;
  border:1px solid rgba(111,157,214,.30);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(7,20,38,.58);
  text-align:center;
}
.category-icon{
  width:56px;
  height:56px;
  color:#22e6ff;
}
.category-icon.purple{color:#7c5cff}
.category-icon.blue{color:#2f80ff}
.category-icon.orange{color:#ffbf2f}
.video-category-card strong{
  color:#fff;
}
.video-category-card span{
  color:#cbd8ee;
}
.video-cta-pro{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:28px;
  align-items:center;
  padding:32px;
}
.video-cta-icon{
  width:86px;
  height:86px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#22e6ff;
  background:radial-gradient(circle,#254cff,rgba(34,230,255,.08));
  border:1px solid rgba(34,230,255,.30);
}
.video-cta-svg{
  width:42px;
  height:42px;
}
.video-cta-pro h2{
  color:#fff;
  margin:0 0 8px;
}
.video-cta-pro p{
  color:#cbd8ee;
  margin:0;
}
.video-cta-button{
  min-width:230px;
  height:54px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#fff;
  font-weight:900;
  text-decoration:none;
  background:linear-gradient(90deg,#38d4d4,#4b73ff);
}
.video-external{
  width:18px;
  height:18px;
}
.video-status-modern{
  display:none!important;
}
.videos-hidden-original{
  display:none!important;
}
@media(max-width:1050px){
  .videos-hero-pro{grid-template-columns:1fr}
  .video-stats-pro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .featured-video-layout{grid-template-columns:1fr}
  .video-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .video-filter-pro{flex-direction:column;align-items:stretch}
  .video-search-wrap{min-width:0}
}
@media(max-width:680px){
  .videos-modern-page{padding:44px 14px 48px}
  .videos-hero-pro h1{font-size:48px}
  .video-stats-pro{grid-template-columns:1fr}
  .video-stat{border-right:none;border-bottom:1px solid rgba(111,157,214,.18)}
  .video-filter-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-filter-btn{width:100%;padding:0 10px}
  .latest-videos-panel,.video-categories-panel{padding:18px}
  .featured-video-frame,.video-dynamic-mount,.video-dynamic-mount video,.video-dynamic-mount iframe{min-height:230px}
  .video-side-item{grid-template-columns:92px 1fr}
  .video-side-item .thumb{height:60px}
  .video-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-cta-pro{grid-template-columns:1fr;text-align:center}
  .video-cta-icon{margin:0 auto}
  .video-cta-button{width:100%;min-width:0}
}



/* =========================================================
   FIX: Hochgeladenes Video nur im Bereich "Neueste Videos"
   ========================================================= */
.public-video-grid.videos-hidden-original{
  display:none !important;
}

.video-dynamic-mount{
  width:100% !important;
  height:100% !important;
  min-height:360px !important;
}

.video-dynamic-mount video,
.video-dynamic-mount iframe{
  width:100% !important;
  height:100% !important;
  min-height:360px !important;
  object-fit:cover !important;
  display:block !important;
  border:0 !important;
  border-radius:12px !important;
}

.featured-video-frame .video-play-overlay.has-real-video{
  display:none !important;
}

@media(max-width:680px){
  .video-dynamic-mount,
  .video-dynamic-mount video,
  .video-dynamic-mount iframe{
    min-height:230px !important;
  }
}



/* =========================================================
   FINAL FIX: Alle hochgeladenen Videos in "Neueste Videos"
   keine extra zweite Video-Karte unter dem Bereich
   ========================================================= */
#videoList.public-video-grid,
#videoList.videos-hidden-original,
.public-video-grid.videos-hidden-original{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

.featured-video-frame .video-play-overlay.has-real-video{
  display:none !important;
}

.video-dynamic-mount{
  width:100% !important;
  height:100% !important;
  min-height:360px !important;
}

.video-dynamic-mount video,
.video-dynamic-mount iframe{
  width:100% !important;
  height:100% !important;
  min-height:360px !important;
  object-fit:cover !important;
  display:block !important;
  border:0 !important;
  border-radius:12px !important;
}

.video-side-item.is-uploaded{
  cursor:pointer;
}

.video-side-item.is-uploaded.active{
  border-color:rgba(34,230,255,.55);
  background:rgba(34,230,255,.08);
}

@media(max-width:680px){
  .video-dynamic-mount,
  .video-dynamic-mount video,
  .video-dynamic-mount iframe{
    min-height:230px !important;
  }
}



/* =========================================================
   FINAL: Videos nur im Bereich "Neueste Videos"
   ========================================================= */
#videoList,
#videoList.public-video-grid,
#videoList.videos-hidden-original,
.public-video-grid.videos-hidden-original{
  display:none!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

.video-empty-modern{
  min-height:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  color:#cbd8ee;
  background:linear-gradient(135deg,rgba(34,230,255,.08),rgba(130,40,180,.15));
}

.video-empty-modern strong{
  color:#fff;
  font-size:1.2rem;
}

.video-empty-modern span{
  color:#9fb1c9;
}

.video-side-item.is-uploaded{
  cursor:pointer;
  border-radius:10px;
  padding:6px;
  transition:.2s ease;
}

.video-side-item.is-uploaded:hover,
.video-side-item.is-uploaded.active{
  background:rgba(34,230,255,.08);
}

.video-dynamic-mount video,
.video-dynamic-mount iframe{
  width:100%!important;
  height:100%!important;
  min-height:360px!important;
  object-fit:cover!important;
  display:block!important;
  border:0!important;
  border-radius:12px!important;
}

@media(max-width:680px){
  .video-empty-modern,
  .video-dynamic-mount video,
  .video-dynamic-mount iframe{
    min-height:230px!important;
  }
}



/* =========================================================
   MODERNE DOWNLOAD-SEITE - komplett integriert
   ========================================================= */
.downloads-modern-page{max-width:1220px;margin:0 auto;padding:72px 22px 62px}
.downloads-hero-pro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:48px;align-items:center;margin-bottom:46px}
.download-kicker{color:#22e6ff;text-transform:uppercase;letter-spacing:3px;font-weight:900;font-size:.85rem;margin:0 0 14px}
.downloads-hero-pro h1{color:#fff;font-size:clamp(46px,6vw,76px);line-height:1.03;letter-spacing:-2px;margin:0 0 22px}
.download-lead{color:#cbd8ee;font-size:1.05rem;line-height:1.75;max-width:660px;margin:0 0 34px}
.download-stats-pro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.download-stat{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid rgba(111,157,214,.32);border-radius:14px;background:rgba(7,20,38,.68)}
.download-stat-icon{width:42px;height:42px;color:#22e6ff;padding:9px;border-radius:50%;background:rgba(34,230,255,.08);flex:0 0 42px}
.download-stat strong{display:block;color:#fff;font-size:1.55rem;line-height:1.1}.download-stat span{color:#cbd8ee;font-size:.84rem}
.downloads-hero-visual{position:relative;min-height:330px;display:grid;place-items:center}
.downloads-hero-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(34,230,255,.20),transparent 60%);filter:blur(10px)}
.download-folder-illustration{position:relative;width:min(420px,100%);height:300px;perspective:900px}
.folder-back,.folder-front{position:absolute;border:1px solid rgba(34,230,255,.45);box-shadow:0 0 45px rgba(34,230,255,.18)}
.folder-back{left:34px;top:90px;width:310px;height:160px;border-radius:24px;background:linear-gradient(135deg,rgba(25,130,255,.45),rgba(115,55,255,.26));transform:rotate(-3deg)}
.folder-front{left:54px;top:116px;width:320px;height:150px;border-radius:24px;background:linear-gradient(145deg,rgba(13,85,160,.96),rgba(13,31,54,.96));display:grid;place-items:center}
.folder-cloud{width:92px;height:92px;color:#22e6ff}
.doc-card{position:absolute;width:92px;height:136px;border-radius:12px;border:1px solid rgba(125,170,255,.35);background:linear-gradient(145deg,rgba(30,105,210,.50),rgba(115,55,255,.40))}
.doc-card.one{right:92px;top:20px;transform:rotate(-10deg)}.doc-card.two{right:24px;top:58px;transform:rotate(8deg)}
.download-filter-pro{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border:1px solid rgba(111,157,214,.34);border-radius:16px;background:rgba(7,20,38,.76);margin-bottom:32px}
.download-filter-buttons{display:flex;flex-wrap:wrap;gap:10px}
.download-filter-btn{height:44px;border-radius:999px;border:1px solid rgba(111,157,214,.38);background:rgba(13,31,54,.70);color:#fff;font-weight:850;padding:0 18px;cursor:pointer;transition:.22s ease}
.download-filter-btn.active,.download-filter-btn:hover{background:linear-gradient(90deg,#38d4d4,#3b82f6);color:#06111f;border-color:transparent}
.download-search-wrap{position:relative;min-width:280px}.download-search-wrap input{width:100%;height:46px;border-radius:999px;border:1px solid rgba(111,157,214,.34);background:rgba(5,14,28,.62);color:#fff;padding:0 48px 0 18px;outline:none}
.download-search-icon{width:22px;height:22px;color:#fff;position:absolute;right:17px;top:50%;transform:translateY(-50%)}
.downloads-panel-pro,.download-security-pro{border:1px solid rgba(111,157,214,.34);border-radius:18px;background:linear-gradient(145deg,rgba(13,31,54,.92),rgba(7,17,32,.92));box-shadow:0 18px 48px rgba(0,0,0,.20)}
.downloads-panel-pro{padding:28px;margin-bottom:32px}.downloads-panel-pro h2{color:#fff;margin:0 0 24px;display:flex;align-items:center;gap:12px}.section-mini-icon{width:25px;height:25px;color:#22e6ff}
.modern-download-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}
.modern-download-list .download-item,.modern-download-list .public-download-card{position:relative;min-height:230px;display:grid;grid-template-columns:112px 1fr;gap:22px;align-items:start;padding:24px!important;border:1px solid rgba(111,157,214,.34)!important;border-radius:16px!important;background:radial-gradient(circle at 88% 0%,rgba(34,230,255,.10),transparent 22%),linear-gradient(145deg,rgba(13,31,54,.96),rgba(7,17,32,.96))!important;box-shadow:0 14px 38px rgba(0,0,0,.18)}
.modern-download-list .public-download-card__content{display:contents!important}
.modern-download-list h3{color:#fff!important;font-size:1.35rem!important;margin:0 0 10px!important;grid-column:2}
.modern-download-list p,.modern-download-list small,.modern-download-list .admin-muted{color:#cbd8ee!important;line-height:1.55!important;grid-column:2}
.modern-download-list .btn,.modern-download-list a[href*="/api/files"],.modern-download-list a[download],.modern-download-list a.btn{height:44px!important;min-width:150px!important;border-radius:10px!important;background:linear-gradient(90deg,#38d4d4,#3b82f6)!important;color:#fff!important;border:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;font-weight:900!important;margin-top:16px!important;grid-column:2;justify-self:end}
.modern-download-list .download-item::before,.modern-download-list .public-download-card::before{content:"";grid-column:1;grid-row:1 / span 4;width:86px;height:86px;border-radius:18px;background:linear-gradient(135deg,rgba(34,230,255,.18),rgba(47,128,255,.42));box-shadow:inset 0 0 20px rgba(255,255,255,.05)}
.modern-download-list .download-item::after,.modern-download-list .public-download-card::after{content:"↓";position:absolute;left:55px;top:54px;color:#22e6ff;font-size:34px;font-weight:900}
.download-pagination{display:flex;justify-content:center;gap:10px;margin-top:24px}.download-pagination button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(111,157,214,.38);background:rgba(13,31,54,.70);color:#fff}.download-pagination button.active{background:#22e6ff;color:#06111f;border-color:#22e6ff}
.download-security-pro{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:32px}.security-icon{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;color:#22e6ff;background:rgba(34,230,255,.08);border:1px solid rgba(34,230,255,.30)}.security-svg{width:46px;height:46px}.download-security-pro h2{color:#fff;margin:0 0 8px}.download-security-pro p{color:#cbd8ee;margin:0;line-height:1.6}.download-contact-btn{height:54px;min-width:220px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-weight:900;text-decoration:none;background:linear-gradient(90deg,#38d4d4,#4b73ff)}.download-mail{width:18px;height:18px}
.download-status-modern{display:none!important}
@media(max-width:1050px){.downloads-hero-pro{grid-template-columns:1fr}.download-stats-pro{grid-template-columns:repeat(2,minmax(0,1fr))}.download-filter-pro{flex-direction:column;align-items:stretch}.download-search-wrap{min-width:0}.modern-download-list{grid-template-columns:1fr!important}}
@media(max-width:680px){.downloads-modern-page{padding:44px 14px 48px}.downloads-hero-pro h1{font-size:44px}.download-stats-pro{grid-template-columns:1fr}.download-filter-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.download-filter-btn{width:100%;padding:0 10px}.downloads-panel-pro{padding:18px}.modern-download-list .download-item,.modern-download-list .public-download-card{grid-template-columns:1fr!important}.modern-download-list .download-item::before,.modern-download-list .public-download-card::before{display:none}.modern-download-list .download-item::after,.modern-download-list .public-download-card::after{display:none}.modern-download-list h3,.modern-download-list p,.modern-download-list small,.modern-download-list .admin-muted,.modern-download-list .btn,.modern-download-list a{grid-column:1!important}.download-security-pro{grid-template-columns:1fr;text-align:center}.security-icon{margin:0 auto}.download-contact-btn{width:100%;min-width:0}}



/* FINAL: Video placeholders entfernen + echte Pagination */
#videoList{display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
.video-empty-modern{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;color:#cbd8ee;background:linear-gradient(135deg,rgba(34,230,255,.08),rgba(130,40,180,.15));border-radius:12px}
.video-empty-modern strong{color:#fff;font-size:1.15rem}
.video-dynamic-mount video{width:100%!important;height:100%!important;min-height:360px!important;object-fit:cover!important;border-radius:12px!important;display:block!important}
.video-side-item.is-uploaded{cursor:pointer;border-radius:10px;padding:6px}
.video-side-item.is-uploaded.active,.video-side-item.is-uploaded:hover{background:rgba(34,230,255,.08)}
.download-pagination button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:680px){.video-empty-modern,.video-dynamic-mount video{min-height:230px!important}}



/* =========================================================
   FINAL SMALL FIX: Download-Hero responsive + Pagination nur wenn nötig
   ========================================================= */

/* Hero darf bei kleiner/großer Breite nicht kaputtgehen */
.downloads-hero-pro{
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr) !important;
  gap: clamp(20px, 4vw, 48px) !important;
  align-items: center !important;
}

.download-stats-pro{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
  gap: 12px !important;
  width:100% !important;
}

.download-stat{
  min-width:0 !important;
  overflow:hidden !important;
  align-items:center !important;
}

.download-stat strong,
.download-stat span{
  word-break:normal !important;
  overflow-wrap:normal !important;
}

.download-stat strong{
  font-size: clamp(1rem, 2vw, 1.55rem) !important;
}

.download-stat span{
  font-size: clamp(.72rem, 1.3vw, .86rem) !important;
}

.downloads-hero-text{
  min-width:0 !important;
}

.downloads-hero-pro h1{
  font-size: clamp(38px, 6vw, 76px) !important;
}

.downloads-hero-visual{
  min-width:0 !important;
}

@media(max-width: 900px){
  .downloads-hero-pro{
    grid-template-columns:1fr !important;
  }

  .downloads-hero-visual{
    min-height:220px !important;
  }

  .download-folder-illustration{
    transform:scale(.86);
    transform-origin:center;
  }
}

@media(max-width: 520px){
  .download-stats-pro{
    grid-template-columns:1fr 1fr !important;
  }

  .download-stat{
    padding:12px !important;
    gap:10px !important;
  }

  .download-stat-icon{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
    padding:7px !important;
  }
}

/* Pagination komplett ausblenden, wenn JS sie nicht benötigt */
.download-pagination:empty,
.download-pagination[hidden]{
  display:none !important;
}


/* =========================================================
   HOME REDESIGN 2026 - modern, responsive, ohne Funktionsänderung
   ========================================================= */
.home-modern-page{
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 20%,rgba(0,132,255,.18),transparent 30%),
    radial-gradient(circle at 20% 10%,rgba(34,230,255,.10),transparent 28%),
    linear-gradient(180deg,#071426 0%,#08172d 54%,#071426 100%);
}
.home-hero-pro,
.home-stats-pro,
.home-tech-pro{
  width:min(1320px,calc(100% - 44px));
  margin-inline:auto;
}
.home-hero-pro{
  min-height:calc(100svh - 78px);
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  padding:clamp(70px,8vw,118px) 0 clamp(38px,6vw,80px);
}
.home-hero-copy{position:relative;z-index:2;max-width:720px;}
.home-pill{
  width:max-content;max-width:100%;display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:999px;color:#22e6ff;font-weight:900;font-size:clamp(.82rem,1.2vw,.98rem);
  border:1px solid rgba(34,230,255,.32);background:rgba(34,230,255,.08);box-shadow:0 0 30px rgba(34,230,255,.10);
}
.home-hero-pro h1{
  margin:30px 0 24px;color:#fff;font-size:clamp(3.2rem,6.2vw,7.25rem);line-height:.95;letter-spacing:-.075em;font-weight:1000;
  text-shadow:0 18px 60px rgba(0,0,0,.35);
}
.home-hero-pro h1 span{display:inline-block;background:linear-gradient(90deg,#22e6ff,#2f80ff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.home-lead{max-width:680px;color:#d8e6f7;font-size:clamp(1.03rem,1.45vw,1.28rem);line-height:1.75;margin:0;}
.home-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px;}
.home-btn{
  min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 26px;border-radius:14px;
  text-decoration:none!important;font-weight:950;line-height:1;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.home-btn:hover{transform:translateY(-3px);}
.home-btn-primary{color:#fff!important;background:linear-gradient(135deg,#21e4ff,#3478ff);box-shadow:0 20px 45px rgba(33,161,255,.26);}
.home-btn-ghost{color:#fff!important;border:1px solid rgba(142,177,221,.42);background:rgba(255,255,255,.035);}
.home-btn-accent{color:#ffb22d!important;border:1px solid rgba(255,168,32,.70);background:rgba(255,168,32,.045);}
.home-btn-outline{color:#22e6ff!important;border:1px solid rgba(34,230,255,.45);background:rgba(34,230,255,.04);margin-top:26px;}
.home-hero-visual{position:relative;min-width:0;isolation:isolate;}
.home-hero-visual::before{content:"";position:absolute;inset:9% 2% 4% 1%;border-radius:50%;background:radial-gradient(circle,rgba(34,144,255,.33),transparent 62%);filter:blur(28px);z-index:-1;}
.home-hero-visual img{width:100%;height:auto;display:block;max-width:760px;margin-inline:auto;border-radius:28px;object-fit:contain;filter:drop-shadow(0 30px 70px rgba(0,0,0,.36));}
.home-status-card{position:absolute;right:0;bottom:10%;width:min(340px,72%);display:flex;gap:16px;padding:22px;border-radius:22px;border:1px solid rgba(129,174,230,.30);background:rgba(7,20,38,.78);backdrop-filter:blur(14px);box-shadow:0 25px 70px rgba(0,0,0,.35);}
.home-status-card i{color:#22e6ff;font-size:2rem;}.home-status-card strong{display:block;color:#fff;font-size:1rem;margin-bottom:7px}.home-status-card span{display:block;color:#b7c7db;line-height:1.45}.home-status-card small{display:flex;align-items:center;gap:8px;color:#fff;margin-top:12px;font-weight:900}.home-status-card b{display:inline-block;width:10px;height:10px;border-radius:50%;background:#20df62;box-shadow:0 0 12px rgba(32,223,98,.75)}
.home-stats-pro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:0;margin-bottom:70px;padding:26px;border:1px solid rgba(129,174,230,.28);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:0 22px 70px rgba(0,0,0,.25);}
.home-stats-pro article{display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:center;min-width:0;padding:8px 26px;border-right:1px solid rgba(129,174,230,.22);}
.home-stats-pro article:last-child{border-right:0}.home-stats-pro i{font-size:2.4rem;color:#22dfff}.home-stats-pro strong{display:block;color:#fff;font-size:clamp(1.8rem,2.8vw,2.55rem);line-height:1;margin-bottom:10px}.home-stats-pro span{display:block;color:#d7e3f4;line-height:1.45;font-weight:700;}
.home-tech-pro{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:42px;align-items:center;padding-bottom:72px;}
.home-tech-text h2{color:#fff;font-size:clamp(2rem,3.5vw,3.25rem);line-height:1.05;letter-spacing:-.04em;margin:8px 0 16px}.home-tech-text p:not(.kicker){color:#bfd0e6;font-size:1.08rem;line-height:1.65}.home-tech-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;}
.home-tech-grid article{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;border:1px solid rgba(129,174,230,.24);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:inset 0 0 35px rgba(34,230,255,.025);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.home-tech-grid article:hover{transform:translateY(-5px);border-color:rgba(34,230,255,.48);box-shadow:0 20px 55px rgba(0,0,0,.22),0 0 28px rgba(34,230,255,.07)}.home-tech-grid i{font-size:2.65rem;color:#22e6ff}.home-tech-grid span{color:#fff;font-weight:950;}
@media(max-width:1180px){.home-hero-pro{grid-template-columns:1fr;min-height:auto;text-align:center}.home-hero-copy{max-width:900px;margin:auto}.home-pill,.home-actions{margin-left:auto;margin-right:auto;justify-content:center}.home-lead{margin:auto}.home-hero-visual{max-width:780px;margin:auto}.home-stats-pro{grid-template-columns:repeat(2,1fr)}.home-stats-pro article:nth-child(2){border-right:0}.home-stats-pro article:nth-child(-n+2){border-bottom:1px solid rgba(129,174,230,.22);padding-bottom:26px}.home-stats-pro article:nth-child(n+3){padding-top:26px}.home-tech-pro{grid-template-columns:1fr;text-align:center}.home-tech-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.home-hero-pro,.home-stats-pro,.home-tech-pro{width:min(100% - 28px,1320px)}.home-hero-pro{padding-top:48px;gap:28px}.home-hero-pro h1{font-size:clamp(2.8rem,15vw,4.6rem);letter-spacing:-.065em}.home-actions{display:grid;grid-template-columns:1fr;width:100%;}.home-btn{width:100%;min-height:54px}.home-hero-visual img{border-radius:18px}.home-status-card{position:relative;right:auto;bottom:auto;width:100%;margin-top:14px}.home-stats-pro{grid-template-columns:1fr;padding:16px;margin-bottom:48px}.home-stats-pro article{border-right:0!important;border-bottom:1px solid rgba(129,174,230,.22);padding:18px 10px!important;grid-template-columns:56px 1fr;text-align:left}.home-stats-pro article:last-child{border-bottom:0}.home-stats-pro i{font-size:2rem}.home-tech-grid{grid-template-columns:repeat(2,1fr);gap:12px}.home-tech-grid article{min-height:128px;border-radius:16px}.home-tech-grid i{font-size:2.1rem}}
@media(max-width:430px){.home-tech-grid{grid-template-columns:1fr}.home-pill{font-size:.78rem}.home-lead{font-size:1rem}.home-status-card{padding:18px}.home-hero-pro h1{font-size:2.65rem}.home-stats-pro article{grid-template-columns:46px 1fr}.home-stats-pro strong{font-size:1.85rem}}

/* =========================================================
   HOME FINAL RESPONSIVE FIX - keine Screenshot-Duplikate
   ========================================================= */
*{box-sizing:border-box;}
html,body{max-width:100%;overflow-x:hidden;}
body{margin:0;background:#071426;color:#fff;}
.home-modern-page{
  width:100%;
  max-width:none;
  padding:clamp(32px,5vw,70px) 0 70px;
  background:
    radial-gradient(circle at 82% 14%,rgba(47,128,255,.18),transparent 34%),
    radial-gradient(circle at 16% 22%,rgba(34,230,255,.10),transparent 32%),
    linear-gradient(180deg,#071426 0%,#08172b 48%,#071426 100%);
}
.home-hero-pro,
.home-stats-pro,
.home-tech-pro{
  width:min(100% - 40px,1320px);
  margin-inline:auto;
}
.home-hero-pro{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(360px,1fr);
  align-items:center;
  gap:clamp(32px,5vw,70px);
  min-height:auto!important;
  padding:clamp(38px,5vw,80px) 0 42px;
}
.home-hero-copy{min-width:0;max-width:690px;}
.home-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border:1px solid rgba(34,230,255,.35);
  border-radius:999px;background:rgba(34,230,255,.08);
  color:#22e6ff;font-weight:800;font-size:.95rem;margin-bottom:26px;
}
.home-hero-pro h1{
  margin:0 0 24px!important;
  font-size:clamp(3rem,5.2vw,5.9rem)!important;
  line-height:.98!important;
  letter-spacing:-.06em!important;
  color:#fff!important;
  text-wrap:balance;
}
.home-hero-pro h1 span{
  background:linear-gradient(90deg,#22e6ff,#2f80ff,#8b5cff);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.home-lead{
  max-width:720px;margin:0 0 34px!important;
  color:#c9d7ec!important;font-size:clamp(1rem,1.2vw,1.18rem)!important;
  line-height:1.75!important;
}
.home-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.home-btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 24px;border-radius:12px;text-decoration:none!important;
  font-weight:850!important;white-space:nowrap;border:1px solid rgba(127,174,230,.35);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.home-btn:hover{transform:translateY(-2px);}
.home-btn-primary{background:linear-gradient(135deg,#23e6ff,#377dff);color:#fff!important;box-shadow:0 16px 38px rgba(34,230,255,.18);}
.home-btn-ghost{background:rgba(255,255,255,.035);color:#fff!important;}
.home-btn-accent{background:rgba(255,163,26,.06);border-color:rgba(255,163,26,.65);color:#ffa31a!important;}
.home-btn-outline{background:rgba(34,230,255,.04);border-color:rgba(34,230,255,.55);color:#22e6ff!important;margin-top:22px;}
.home-hero-visual{position:relative;min-width:0;isolation:isolate;}
.home-hero-visual::before{content:"";position:absolute;inset:4% -2%;border-radius:50%;background:radial-gradient(circle,rgba(34,144,255,.34),transparent 65%);filter:blur(34px);z-index:-1;}
.home-hero-visual img{
  display:block!important;width:100%!important;height:auto!important;max-width:710px!important;
  margin-inline:auto!important;border:0!important;border-radius:0!important;object-fit:contain!important;
  filter:drop-shadow(0 28px 70px rgba(0,0,0,.46));
}
.home-status-card{
  position:absolute;right:0;bottom:20px;width:min(310px,48%);display:flex;gap:14px;align-items:flex-start;
  padding:20px;border:1px solid rgba(127,174,230,.34);border-radius:22px;
  background:rgba(8,20,38,.76);backdrop-filter:blur(14px);box-shadow:0 22px 60px rgba(0,0,0,.32);
}
.home-status-card i{color:#22e6ff;font-size:1.7rem;margin-top:3px;}
.home-status-card strong{display:block;font-size:1rem;margin-bottom:8px;}
.home-status-card span{display:block;color:#c9d7ec;font-size:.9rem;line-height:1.5;}
.home-status-card small{display:block;margin-top:12px;color:#fff;font-weight:800;}
.home-status-card b{display:inline-block;width:9px;height:9px;border-radius:50%;background:#24e66a;margin-right:8px;box-shadow:0 0 14px rgba(36,230,106,.9);}
.home-stats-pro{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:26px;margin-bottom:70px;
  padding:28px;border:1px solid rgba(127,174,230,.34);border-radius:24px;background:rgba(9,22,42,.72);
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}
.home-stats-pro article{display:grid;grid-template-columns:70px 1fr;gap:18px;align-items:center;padding:0 24px;border-right:1px solid rgba(127,174,230,.24);min-width:0;}
.home-stats-pro article:last-child{border-right:0;}
.home-stats-pro i{color:#22e6ff;font-size:2.35rem;}
.home-stats-pro strong{display:block;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:#fff;}
.home-stats-pro span{display:block;color:#c9d7ec;line-height:1.55;margin-top:8px;}
.home-tech-pro{display:grid!important;grid-template-columns:minmax(280px,390px) 1fr;gap:44px;align-items:center;}
.home-tech-text{min-width:0;}
.home-tech-text .kicker{color:#22e6ff;text-transform:uppercase;letter-spacing:.18em;font-weight:900;font-size:.85rem;margin:0 0 16px;}
.home-tech-text h2{font-size:clamp(2rem,3vw,3rem);line-height:1.08;margin:0 0 18px!important;color:#fff!important;letter-spacing:-.04em;}
.home-tech-text > p:not(.kicker){color:#c9d7ec;font-size:1.05rem;line-height:1.7;margin:0;}
.home-tech-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;min-width:0;}
.home-tech-grid article{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;text-align:center;border:1px solid rgba(127,174,230,.28);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.home-tech-grid i{font-size:2.6rem;color:#22e6ff;filter:drop-shadow(0 0 16px rgba(34,230,255,.35));}
.home-tech-grid span{font-weight:850;color:#fff;}
@media(max-width:1180px){
  .home-hero-pro{grid-template-columns:1fr;text-align:center;padding-top:42px;}
  .home-hero-copy{max-width:900px;margin-inline:auto;}
  .home-pill,.home-actions{justify-content:center;margin-left:auto;margin-right:auto;}
  .home-lead{margin-left:auto!important;margin-right:auto!important;}
  .home-hero-visual{max-width:760px;margin-inline:auto;}
  .home-stats-pro{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-stats-pro article{border-right:0;padding:22px!important;}
  .home-stats-pro article:nth-child(odd){border-right:1px solid rgba(127,174,230,.24);}
  .home-stats-pro article:nth-child(-n+2){border-bottom:1px solid rgba(127,174,230,.24);}
  .home-tech-pro{grid-template-columns:1fr;text-align:center;}
  .home-tech-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px){
  .home-modern-page{padding-top:22px;}
  .home-hero-pro,.home-stats-pro,.home-tech-pro{width:min(100% - 28px,1320px);}
  .home-hero-pro{gap:22px;padding:34px 0 26px;}
  .home-hero-pro h1{font-size:clamp(2.4rem,12vw,4rem)!important;letter-spacing:-.055em!important;}
  .home-lead{font-size:1rem!important;line-height:1.65!important;}
  .home-actions{display:grid!important;grid-template-columns:1fr;width:100%;gap:12px;}
  .home-btn{width:100%;white-space:normal;text-align:center;}
  .home-hero-visual img{max-width:100%!important;}
  .home-status-card{position:relative;right:auto;bottom:auto;width:100%;margin-top:12px;text-align:left;}
  .home-stats-pro{grid-template-columns:1fr;padding:14px;margin-bottom:48px;}
  .home-stats-pro article{border-right:0!important;border-bottom:1px solid rgba(127,174,230,.24)!important;grid-template-columns:54px 1fr;text-align:left;padding:18px 10px!important;}
  .home-stats-pro article:last-child{border-bottom:0!important;}
  .home-tech-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .home-tech-grid article{min-height:128px;border-radius:16px;padding:16px 10px;}
  .home-tech-grid i{font-size:2.1rem;}
}
@media(max-width:430px){
  .home-pill{font-size:.78rem;padding:9px 12px;}
  .home-hero-pro h1{font-size:2.45rem!important;}
  .home-tech-grid{grid-template-columns:1fr;}
  .home-stats-pro strong{font-size:1.85rem;}
}


/* Final Home polish: creative badge and clean responsive image */
.home-pill{
  position:relative;
  overflow:hidden;
  gap:10px;
  background:linear-gradient(135deg,rgba(34,230,255,.18),rgba(47,128,255,.12),rgba(139,92,246,.12))!important;
  border-color:rgba(34,230,255,.42)!important;
  box-shadow:0 0 0 1px rgba(34,230,255,.08),0 16px 42px rgba(34,230,255,.12)!important;
}
.home-pill::after{
  content:"";
  position:absolute;
  inset:-60% auto -60% -40%;
  width:45%;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  animation:homeBadgeShine 4.5s ease-in-out infinite;
}
.home-pill i,.home-pill span{position:relative;z-index:1}
@keyframes homeBadgeShine{0%,55%{left:-55%}100%{left:125%}}
.home-hero-visual img{
  aspect-ratio:16/10;
  object-fit:cover!important;
  object-position:center;
  display:block;
}
.home-status-card{display:none!important;}
@media(max-width:760px){
  .home-hero-visual img{aspect-ratio:4/3;object-fit:cover!important;border-radius:18px;}
}
@media(max-width:430px){
  .home-pill{font-size:.74rem!important;line-height:1.25;max-width:100%;}
}



/* --- Final Home polish: animated badge, professional tech cards, clean responsive visual --- */
.home-pill.modern-pulse{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:999px;border:1px solid rgba(34,230,255,.62);
  background:linear-gradient(135deg,rgba(34,230,255,.12),rgba(55,125,255,.10),rgba(144,92,255,.10));
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 14px 45px rgba(34,230,255,.14);
  color:#dffcff;font-weight:900;letter-spacing:.01em;animation:pillFloat 4.8s ease-in-out infinite;
}
.home-pill.modern-pulse::before{content:"";position:absolute;inset:-2px;background:linear-gradient(90deg,transparent,rgba(34,230,255,.38),rgba(94,105,255,.35),transparent);transform:translateX(-115%);animation:pillShine 3.2s ease-in-out infinite;}
.home-pill.modern-pulse > *{position:relative;z-index:1}.home-pill.modern-pulse .pill-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#20e6ff,#3478ff);color:#061428;box-shadow:0 0 24px rgba(34,230,255,.45)}
.home-pill.modern-pulse b{font-weight:950;color:#22e6ff}.home-pill.modern-pulse i{font-size:.95rem}
@keyframes pillShine{0%,45%{transform:translateX(-115%)}70%,100%{transform:translateX(115%)}}
@keyframes pillFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.home-hero-visual{overflow:hidden;border-radius:26px}.home-hero-visual img{width:100%;max-width:760px;display:block;border-radius:26px;object-fit:cover;object-position:center;}
.home-tech-grid.home-tech-grid-polished{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.home-tech-grid.home-tech-grid-polished article{
  min-height:132px;align-items:flex-start;justify-content:center;text-align:left;padding:22px 24px;gap:8px;
  border-color:rgba(127,174,230,.28);background:linear-gradient(145deg,rgba(16,36,62,.86),rgba(7,20,38,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 42px rgba(0,0,0,.18);
}
.home-tech-grid.home-tech-grid-polished article:hover{border-color:rgba(34,230,255,.62);transform:translateY(-4px);box-shadow:0 20px 55px rgba(0,0,0,.25),0 0 28px rgba(34,230,255,.10)}
.home-tech-grid.home-tech-grid-polished .tech-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:8px;background:linear-gradient(135deg,rgba(34,230,255,.22),rgba(52,120,255,.12));border:1px solid rgba(34,230,255,.32);}
.home-tech-grid.home-tech-grid-polished i{font-size:1.55rem;color:#22e6ff;filter:drop-shadow(0 0 12px rgba(34,230,255,.42));}
.home-tech-grid.home-tech-grid-polished span:not(.tech-icon){font-size:1.08rem;font-weight:950;color:#fff;line-height:1.2}
.home-tech-grid.home-tech-grid-polished small{color:#aebed3;font-weight:700;line-height:1.45;font-size:.86rem}
@media(max-width:1180px){.home-tech-grid.home-tech-grid-polished{grid-template-columns:repeat(2,minmax(0,1fr));}.home-tech-grid.home-tech-grid-polished article{text-align:left}}
@media(max-width:760px){.home-pill.modern-pulse{padding:10px 14px;font-size:.82rem;gap:8px;flex-wrap:wrap;justify-content:center}.home-hero-visual{border-radius:18px}.home-hero-visual img{border-radius:18px}.home-tech-grid.home-tech-grid-polished{grid-template-columns:1fr}.home-tech-grid.home-tech-grid-polished article{min-height:112px;padding:18px;display:grid;grid-template-columns:54px 1fr;column-gap:14px;align-items:center}.home-tech-grid.home-tech-grid-polished .tech-icon{grid-row:1 / span 2;margin-bottom:0}.home-tech-grid.home-tech-grid-polished small{grid-column:2}}
@media (prefers-reduced-motion: reduce){.home-pill.modern-pulse,.home-pill.modern-pulse::before{animation:none}}


/* =========================================================
   Home final clean-up: no orange artefact, creative visual label,
   professional technology cards, animated color badge.
   ========================================================= */
.home-hero-visual{
  position:relative!important;
  overflow:hidden!important;
  border-radius:30px!important;
  border:1px solid rgba(64,132,210,.20);
  background:linear-gradient(145deg,rgba(5,16,32,.55),rgba(7,24,44,.75));
  box-shadow:0 28px 80px rgba(0,0,0,.28),0 0 45px rgba(34,230,255,.06) inset;
}
.home-hero-visual img{
  width:100%!important;
  max-width:760px!important;
  aspect-ratio:16/10!important;
  height:auto!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:30px!important;
}
.hero-visual-badge{
  position:absolute;
  left:clamp(16px,3vw,28px);
  bottom:clamp(16px,3vw,28px);
  display:flex;
  align-items:center;
  gap:14px;
  max-width:min(420px,calc(100% - 32px));
  padding:15px 18px;
  border-radius:20px;
  color:#fff;
  border:1px solid rgba(34,230,255,.34);
  background:linear-gradient(135deg,rgba(3,16,32,.82),rgba(6,33,55,.64));
  box-shadow:0 18px 50px rgba(0,0,0,.34),0 0 28px rgba(34,230,255,.10) inset;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.hero-visual-badge i{
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:14px;
  color:#071426;background:linear-gradient(135deg,#22e6ff,#3478ff,#8b5cff);
  box-shadow:0 0 24px rgba(34,230,255,.38);
}
.hero-visual-badge strong{display:block;font-weight:950;font-size:clamp(.95rem,1.4vw,1.08rem);letter-spacing:-.01em;}
.hero-visual-badge span{display:block;color:#bdd3ec;font-size:.9rem;line-height:1.35;margin-top:3px;}

.home-pill.modern-pulse{
  border:1px solid rgba(34,230,255,.60)!important;
  background:linear-gradient(90deg,rgba(34,230,255,.12),rgba(52,120,255,.12),rgba(139,92,255,.12),rgba(0,255,195,.10))!important;
  background-size:300% 300%!important;
  animation:pillFloat 4.8s ease-in-out infinite, pillColorFlow 7s ease-in-out infinite!important;
}
.home-pill.modern-pulse span:not(.pill-icon),
.home-pill.modern-pulse b{
  background:linear-gradient(90deg,#22e6ff,#6aa7ff,#b17cff,#20ffc8);
  background-size:250% 250%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  animation:pillTextFlow 6s ease-in-out infinite;
}
@keyframes pillColorFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes pillTextFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.home-tech-grid.home-tech-grid-polished{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
.home-tech-grid.home-tech-grid-polished article{
  position:relative!important;
  min-height:124px!important;
  padding:20px 20px 18px!important;
  display:grid!important;
  grid-template-columns:52px 1fr!important;
  grid-template-rows:auto auto!important;
  column-gap:16px!important;
  row-gap:4px!important;
  align-items:center!important;
  text-align:left!important;
  border-radius:22px!important;
  overflow:hidden!important;
  border:1px solid rgba(119,172,230,.30)!important;
  background:
    radial-gradient(circle at 12% 8%,rgba(34,230,255,.16),transparent 34%),
    linear-gradient(145deg,rgba(17,39,67,.82),rgba(7,18,34,.84))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.18)!important;
}
.home-tech-grid.home-tech-grid-polished article::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(34,230,255,.65),rgba(52,120,255,.12),rgba(139,92,255,.38));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;pointer-events:none;
}
.home-tech-grid.home-tech-grid-polished article:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(34,230,255,.70)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 34px rgba(34,230,255,.12)!important;
}
.home-tech-grid.home-tech-grid-polished .tech-icon{
  grid-row:1 / span 2!important;
  width:52px!important;height:52px!important;margin:0!important;border-radius:16px!important;
  background:linear-gradient(135deg,rgba(34,230,255,.22),rgba(52,120,255,.20),rgba(139,92,255,.14))!important;
  border:1px solid rgba(34,230,255,.36)!important;
}
.home-tech-grid.home-tech-grid-polished i{
  font-size:1.55rem!important;
  color:#22e6ff!important;
  filter:drop-shadow(0 0 10px rgba(34,230,255,.45))!important;
}
.home-tech-grid.home-tech-grid-polished span:not(.tech-icon){
  align-self:end!important;
  font-size:1.02rem!important;
  font-weight:950!important;
  color:#fff!important;
  line-height:1.18!important;
}
.home-tech-grid.home-tech-grid-polished small{
  align-self:start!important;
  color:#aebed3!important;
  font-weight:650!important;
  line-height:1.35!important;
  font-size:.8rem!important;
}
@media(max-width:1180px){
  .home-tech-grid.home-tech-grid-polished{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  .home-hero-visual,
  .home-hero-visual img{border-radius:20px!important;}
  .hero-visual-badge{
    left:12px;right:12px;bottom:12px;max-width:none;padding:12px 13px;border-radius:16px;
  }
  .hero-visual-badge i{width:36px;height:36px;flex-basis:36px;border-radius:12px;}
  .hero-visual-badge span{font-size:.78rem;}
  .home-tech-grid.home-tech-grid-polished{grid-template-columns:1fr!important;}
  .home-tech-grid.home-tech-grid-polished article{min-height:104px!important;padding:16px!important;}
}


/* =========================================================
   HOME V4 FINAL: stabile SVG-Icons + mittiges animiertes Badge
   ========================================================= */
.home-hero-copy .home-pill.modern-pulse{
  margin-left:auto!important;
  margin-right:auto!important;
  margin-bottom:28px!important;
  justify-content:center!important;
  text-align:center!important;
  width:max-content!important;
  max-width:min(100%,720px)!important;
  padding:12px 24px!important;
  gap:12px!important;
  transform-origin:center!important;
}
.home-pill.modern-pulse .pill-icon{
  width:30px!important;height:30px!important;flex:0 0 30px!important;
  animation:pillIconColor 5.5s ease-in-out infinite!important;
}
@keyframes pillIconColor{
  0%,100%{background:linear-gradient(135deg,#22e6ff,#3478ff);box-shadow:0 0 24px rgba(34,230,255,.50)}
  35%{background:linear-gradient(135deg,#20ffc8,#22e6ff);box-shadow:0 0 28px rgba(32,255,200,.45)}
  70%{background:linear-gradient(135deg,#8b5cff,#2f80ff);box-shadow:0 0 28px rgba(139,92,255,.45)}
}
.home-tech-grid.home-tech-grid-polished{
  align-items:stretch!important;
}
.home-tech-grid.home-tech-grid-polished article{
  min-height:118px!important;
  grid-template-columns:58px 1fr!important;
  column-gap:17px!important;
  padding:18px 20px!important;
}
.home-tech-grid.home-tech-grid-polished .tech-icon{
  width:54px!important;
  height:54px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.20),transparent 24%),
    linear-gradient(135deg,rgba(34,230,255,.28),rgba(52,120,255,.18),rgba(139,92,255,.15))!important;
  border:1px solid rgba(34,230,255,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 28px rgba(34,230,255,.08)!important;
}
.home-tech-grid.home-tech-grid-polished .tech-icon svg{
  width:29px!important;
  height:29px!important;
  display:block!important;
  fill:#22e6ff!important;
  filter:drop-shadow(0 0 10px rgba(34,230,255,.52))!important;
}
.home-tech-grid.home-tech-grid-polished article span:not(.tech-icon){
  font-size:1rem!important;
  letter-spacing:-.01em!important;
}
.home-tech-grid.home-tech-grid-polished article small{
  font-size:.78rem!important;
  opacity:.94!important;
}
.home-tech-grid.home-tech-grid-polished article:hover .tech-icon{
  transform:scale(1.04)!important;
  border-color:rgba(34,230,255,.75)!important;
}
.home-tech-grid.home-tech-grid-polished article:hover .tech-icon svg{
  fill:#8ff8ff!important;
}
@media(max-width:1180px){
  .home-hero-copy .home-pill.modern-pulse{margin-left:auto!important;margin-right:auto!important;}
}
@media(max-width:760px){
  .home-hero-copy .home-pill.modern-pulse{
    width:100%!important;
    max-width:100%!important;
    padding:11px 14px!important;
    font-size:.82rem!important;
    line-height:1.25!important;
  }
  .home-tech-grid.home-tech-grid-polished article{
    grid-template-columns:54px 1fr!important;
    min-height:100px!important;
    padding:15px!important;
  }
  .home-tech-grid.home-tech-grid-polished .tech-icon{width:50px!important;height:50px!important;}
  .home-tech-grid.home-tech-grid-polished .tech-icon svg{width:27px!important;height:27px!important;}
}
@media(max-width:430px){
  .home-pill.modern-pulse b{display:inline!important;}
  .home-tech-grid.home-tech-grid-polished article span:not(.tech-icon){font-size:.96rem!important;}
}


/* Suchergebnis-Hinweis für Projekte, Videos und Downloads */
.search-result-info{
  margin: 0 auto 18px;
  max-width: 980px;
  padding: 10px 14px;
  border: 1px solid rgba(34,230,255,.32);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34,230,255,.10), rgba(47,128,255,.07));
  color: #dffbff;
  font-weight: 800;
  font-size: .95rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
.search-result-info[hidden]{
  display:none!important;
}

/* Enterprise Homelab refinements */
.enterprise-homelab,.enterprise-card{border:1px solid rgba(0,220,255,.35)!important;box-shadow:none!important}
.stats-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:16px!important}

/* ChatGPT patch */
.enterprise-homelab,.enterprise-card,.homelab-diagram,.hero-diagram{
 border:1px solid rgba(0,220,255,.25)!important;
 box-shadow:none!important;
}
.enterprise-homelab::before,.enterprise-card::before,.enterprise-homelab::after,.enterprise-card::after{
 display:none!important;
}
.stats-grid,.hero-stats,.enterprise-stats{
 display:grid!important;
 grid-template-columns:repeat(4,minmax(180px,1fr))!important;
 gap:12px!important;
 margin-top:24px!important;
}
.stat-card{
 min-height:110px!important;
 border-radius:14px!important;
}


/* =========================================================
   VIDEO HERO MODERN RESPONSIVE OVERRIDE
   nur oberer Videos-Bereich; Icons sind Inline-SVG
   ========================================================= */
.videos-modern-page{
  max-width:1520px!important;
  padding:clamp(44px,5vw,76px) clamp(18px,4vw,64px) 62px!important;
}
.videos-hero-pro{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(360px,.95fr) minmax(420px,1.05fr)!important;
  gap:clamp(38px,6vw,92px)!important;
  align-items:center!important;
  margin-bottom:clamp(42px,5vw,72px)!important;
  padding:clamp(18px,2vw,36px) 0!important;
}
.video-kicker{
  color:#18b8ff!important;
  letter-spacing:.22em!important;
  font-size:clamp(.78rem,.9vw,.95rem)!important;
  margin-bottom:18px!important;
}
.videos-hero-pro h1{
  color:#fff!important;
  font-size:clamp(3.1rem,6.3vw,6rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  margin:0 0 30px!important;
  text-shadow:0 18px 45px rgba(0,0,0,.34)!important;
}
.videos-hero-pro h1 span{
  background:linear-gradient(90deg,#27c9ff 5%,#2f80ff 45%,#9b54ff 92%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
.video-lead{
  max-width:650px!important;
  color:#eef6ff!important;
  font-size:clamp(1rem,1.25vw,1.25rem)!important;
  line-height:1.65!important;
  margin:0 0 30px!important;
}
.video-hero-cta{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:58px!important;
  padding:0 28px!important;
  border-radius:14px!important;
  color:#fff!important;
  text-decoration:none!important;
  font-weight:900!important;
  background:linear-gradient(100deg,#1689ff 0%,#2e86ff 45%,#8b35ff 100%)!important;
  box-shadow:0 18px 46px rgba(47,128,255,.26), inset 0 1px 0 rgba(255,255,255,.22)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  margin:0 0 clamp(28px,4vw,54px)!important;
  transition:transform .22s ease, box-shadow .22s ease!important;
}
.video-hero-cta:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 24px 60px rgba(47,128,255,.34),0 0 26px rgba(139,53,255,.25)!important;
}
.video-hero-cta svg{width:22px!important;height:22px!important;flex:0 0 22px!important}
.video-stats-pro{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.video-stat{
  position:relative!important;
  min-height:220px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:18px!important;
  padding:30px 26px 24px!important;
  border:1px solid rgba(95,136,198,.44)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 18% 10%,rgba(36,142,255,.22),transparent 36%),
    linear-gradient(180deg,rgba(19,41,75,.74),rgba(5,14,28,.82))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 55px rgba(0,0,0,.22)!important;
  overflow:hidden!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
.video-stat:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(34,230,255,.65)!important;
  box-shadow:0 24px 68px rgba(0,0,0,.34),0 0 32px rgba(34,230,255,.13)!important;
}
.video-stat::after{
  content:""!important;
  position:absolute!important;
  left:-8%!important;
  right:-8%!important;
  bottom:-32px!important;
  height:72px!important;
  opacity:.78!important;
  background:
    radial-gradient(85% 62% at 50% 0%,transparent 57%,currentColor 58%,transparent 60%),
    linear-gradient(90deg,transparent,currentColor,transparent)!important;
  filter:drop-shadow(0 0 18px currentColor)!important;
}
.video-stat-icon-wrap{
  width:82px!important;
  height:82px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  border:2px solid currentColor!important;
  background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.015))!important;
  box-shadow:0 0 24px color-mix(in srgb,currentColor 35%,transparent)!important;
}
.video-stat-icon{
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:currentColor!important;
  flex:none!important;
}
.video-stat-content strong{
  display:block!important;
  margin:0!important;
  color:currentColor!important;
  font-size:clamp(2.4rem,3.2vw,3.6rem)!important;
  line-height:.9!important;
  font-weight:950!important;
}
.video-stat-content span{
  display:block!important;
  color:#fff!important;
  font-size:clamp(1.02rem,1.25vw,1.3rem)!important;
  font-weight:900!important;
  margin-top:10px!important;
}
.video-stat-content small{
  display:block!important;
  color:#e1eafe!important;
  font-size:clamp(.92rem,1vw,1.05rem)!important;
  line-height:1.45!important;
  margin-top:24px!important;
}
.video-stat-arrow{
  position:absolute!important;
  left:50%!important;
  bottom:20px!important;
  transform:translateX(-50%)!important;
  width:50px!important;
  height:50px!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  z-index:2!important;
}
.video-stat-blue{color:#1689ff!important}
.video-stat-cyan{color:#22e6ff!important}
.video-stat-purple{color:#8e55ff!important}
.video-stat-pink{color:#ff58bf!important}
.video-hero-visual{
  min-height:420px!important;
  display:grid!important;
  place-items:center!important;
  position:relative!important;
}
.video-hero-visual::before{
  content:""!important;
  position:absolute!important;
  inset:-8% -4%!important;
  background:
    radial-gradient(circle at 28% 46%,rgba(24,137,255,.28),transparent 34%),
    radial-gradient(circle at 72% 58%,rgba(155,84,255,.24),transparent 38%)!important;
  filter:blur(18px)!important;
  opacity:.9!important;
}
.video-screen-illustration{
  position:relative!important;
  width:min(100%,680px)!important;
  aspect-ratio:1.68/1!important;
  border-radius:22px!important;
  border:1px solid rgba(156,96,255,.88)!important;
  background:
    radial-gradient(circle at 70% 43%,rgba(132,64,255,.18),transparent 32%),
    linear-gradient(145deg,rgba(8,25,58,.96),rgba(3,9,20,.98))!important;
  box-shadow:0 22px 70px rgba(0,0,0,.34),0 0 48px rgba(132,64,255,.18),inset 0 0 52px rgba(29,112,255,.12)!important;
  transform:none!important;
  overflow:hidden!important;
}
.video-screen-illustration::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(70,137,255,.1),transparent 32%),
    repeating-radial-gradient(circle at 66% 50%,rgba(73,118,255,.32) 0 1px,transparent 1px 10px)!important;
  opacity:.42!important;
}
.video-screen-illustration::after{
  content:""!important;
  position:absolute!important;
  left:-8%!important;
  right:-8%!important;
  top:48%!important;
  height:34%!important;
  opacity:.88!important;
  background:
    radial-gradient(70% 90% at 18% 46%,rgba(22,137,255,.95),transparent 48%),
    radial-gradient(70% 90% at 84% 52%,rgba(142,85,255,.9),transparent 52%),
    linear-gradient(90deg,transparent,rgba(34,230,255,.45),rgba(142,85,255,.45),transparent)!important;
  clip-path:polygon(0 46%,8% 42%,16% 47%,25% 56%,35% 50%,45% 40%,55% 48%,66% 60%,78% 52%,90% 41%,100% 48%,100% 100%,0 100%)!important;
  filter:blur(.4px) drop-shadow(0 0 28px rgba(39,147,255,.35))!important;
}
.video-wave{
  position:absolute!important;
  inset:22% 0 20%!important;
  background:
    linear-gradient(90deg,transparent,rgba(24,137,255,.2),rgba(142,85,255,.18),transparent),
    repeating-radial-gradient(circle at 50% 50%,rgba(45,128,255,.42) 0 1px,transparent 1px 9px)!important;
  opacity:.44!important;
  transform:skewY(-6deg)!important;
}
.screen-glow{
  position:absolute!important;
  left:50%!important;
  top:44%!important;
  transform:translate(-50%,-50%)!important;
  width:128px!important;
  height:128px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
  border:3px solid transparent!important;
  background:linear-gradient(#08172e,#08172e) padding-box,linear-gradient(135deg,#1689ff,#9b54ff) border-box!important;
  box-shadow:0 0 45px rgba(47,128,255,.34),inset 0 0 24px rgba(255,255,255,.04)!important;
  z-index:3!important;
}
.screen-play{
  width:56px!important;
  height:56px!important;
  color:#fff!important;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.25))!important;
}
.screen-timeline{
  position:absolute!important;
  left:48px!important;
  right:48px!important;
  bottom:34px!important;
  display:grid!important;
  grid-template-columns:24px 1fr auto 84px!important;
  gap:22px!important;
  align-items:center!important;
  z-index:4!important;
}
.play-mini{
  width:0!important;
  height:0!important;
  border-top:10px solid transparent!important;
  border-bottom:10px solid transparent!important;
  border-left:14px solid #eaf2ff!important;
}
.screen-line{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  height:5px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.13)!important;
}
.screen-line i{
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:36%!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#1689ff,#2f80ff)!important;
}
.screen-line i::after{
  content:""!important;
  position:absolute!important;
  right:-8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:16px!important;
  height:16px!important;
  border-radius:50%!important;
  background:#1689ff!important;
  box-shadow:0 0 18px rgba(47,128,255,.65)!important;
}
.screen-time{
  color:#dfe9ff!important;
  font-size:.95rem!important;
  white-space:nowrap!important;
}
.screen-mini-icons{
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
}
.screen-mini-icons::before,
.screen-mini-icons::after{
  content:""!important;
  width:18px!important;
  height:18px!important;
  display:block!important;
  border:2px solid #dfe9ff!important;
  border-radius:4px!important;
  opacity:.9!important;
}
@media(max-width:1180px){
  .videos-hero-pro{grid-template-columns:1fr!important;gap:34px!important}
  .video-hero-visual{min-height:auto!important}
  .video-screen-illustration{width:100%!important;max-width:760px!important}
  .video-stats-pro{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .videos-modern-page{padding:38px 14px 48px!important}
  .videos-hero-pro{gap:26px!important;margin-bottom:38px!important}
  .videos-hero-pro h1{font-size:clamp(2.55rem,13vw,4.2rem)!important;letter-spacing:-.04em!important}
  .video-lead{font-size:1rem!important;line-height:1.55!important}
  .video-hero-cta{width:100%!important;justify-content:center!important;margin-bottom:22px!important}
  .video-stats-pro{grid-template-columns:1fr!important;gap:10px!important}
  .video-stat{
    min-height:auto!important;
    display:grid!important;
    grid-template-columns:54px 1fr!important;
    padding:14px 16px!important;
    gap:12px!important;
    border-radius:12px!important;
  }
  .video-stat::after,.video-stat-arrow{display:none!important}
  .video-stat-icon-wrap{width:48px!important;height:48px!important;border-width:1px!important}
  .video-stat-icon{width:26px!important;height:26px!important}
  .video-stat-content strong{font-size:1.65rem!important;display:inline-block!important;margin-right:8px!important}
  .video-stat-content span{font-size:.96rem!important;display:inline-block!important;margin:0!important}
  .video-stat-content small{display:none!important}
  .video-screen-illustration{border-radius:16px!important;aspect-ratio:1.55/1!important}
  .screen-glow{width:72px!important;height:72px!important;border-width:2px!important}
  .screen-play{width:34px!important;height:34px!important}
  .screen-timeline{left:16px!important;right:16px!important;bottom:14px!important;grid-template-columns:18px 1fr auto!important;gap:10px!important}
  .screen-time{font-size:.72rem!important}
  .screen-mini-icons{display:none!important}
}


/* =========================================================
   NEST HUB MAX / TABLET RESPONSIVE FIX
   Videos-Hero: verhindert abgeschnittene Statistik-Karten
   Icons bleiben Inline-SVG und damit nach Git-Push sichtbar
   ========================================================= */
@media (max-width:1320px) and (min-width:1051px){
  .videos-modern-page{
    max-width:1280px!important;
    padding:42px 44px 56px!important;
    overflow-x:hidden!important;
  }
  .videos-hero-pro{
    grid-template-columns:minmax(0,1fr) minmax(430px,1fr)!important;
    gap:36px!important;
    align-items:center!important;
  }
  .videos-hero-pro h1{
    font-size:clamp(3rem,5vw,4.8rem)!important;
    margin-bottom:22px!important;
  }
  .video-lead{
    font-size:1.02rem!important;
    line-height:1.55!important;
    margin-bottom:24px!important;
  }
  .video-hero-cta{
    min-height:54px!important;
    margin-bottom:28px!important;
  }
  .video-stats-pro{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    width:100%!important;
  }
  .video-stat{
    min-height:138px!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
    padding:18px 18px!important;
    border-radius:18px!important;
  }
  .video-stat::after{
    height:48px!important;
    bottom:-28px!important;
    opacity:.42!important;
  }
  .video-stat-icon-wrap{
    width:58px!important;
    height:58px!important;
    border-width:1.5px!important;
  }
  .video-stat-icon{
    width:30px!important;
    height:30px!important;
  }
  .video-stat-content strong{
    font-size:2.1rem!important;
    display:inline-block!important;
    margin-right:8px!important;
    vertical-align:baseline!important;
  }
  .video-stat-content span{
    font-size:1rem!important;
    display:inline-block!important;
    margin-top:0!important;
    vertical-align:baseline!important;
  }
  .video-stat-content small{
    font-size:.9rem!important;
    line-height:1.35!important;
    margin-top:9px!important;
  }
  .video-stat-arrow{
    display:none!important;
  }
  .video-hero-visual{
    min-height:330px!important;
  }
  .video-screen-illustration{
    width:100%!important;
    max-width:580px!important;
    border-radius:20px!important;
  }
  .screen-glow{
    width:100px!important;
    height:100px!important;
  }
  .screen-play{
    width:44px!important;
    height:44px!important;
  }
  .screen-timeline{
    left:34px!important;
    right:34px!important;
    bottom:26px!important;
    grid-template-columns:22px 1fr auto 54px!important;
    gap:16px!important;
  }
  .screen-mini-icons{
    gap:8px!important;
  }
  .screen-mini-icons::before,
  .screen-mini-icons::after{
    width:16px!important;
    height:16px!important;
  }
}

@media (max-width:1050px){
  .videos-modern-page{
    overflow-x:hidden!important;
  }
  .videos-hero-pro{
    grid-template-columns:1fr!important;
  }
  .video-stats-pro{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
  }
  .video-stat{
    min-width:0!important;
  }
}

@media (max-width:560px){
  .video-stats-pro{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   FINAL RESPONSIVE ALIGNMENT FIX - Videos Hero
   - Hauptcontainer wieder auf gleiche Breite wie Header/Footer
   - Stats laufen nicht mehr aus dem Layout
   - Icons bleiben Inline-SVG im HTML
   ========================================================= */
.videos-modern-page{
  width:100%!important;
  max-width:1220px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:72px 22px 62px!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
}
.videos-hero-pro{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:clamp(34px,5vw,70px)!important;
  align-items:center!important;
  margin-bottom:48px!important;
  padding:0!important;
  width:100%!important;
  box-sizing:border-box!important;
}
.videos-hero-text{
  display:contents!important;
}
.video-kicker,
.videos-hero-pro h1,
.video-lead,
.video-hero-cta{
  grid-column:1!important;
  min-width:0!important;
}
.video-hero-visual{
  grid-column:2!important;
  grid-row:1 / span 4!important;
  min-width:0!important;
  width:100%!important;
  min-height:360px!important;
}
.video-screen-illustration{
  width:100%!important;
  max-width:620px!important;
  justify-self:end!important;
}
.video-stats-pro{
  grid-column:1 / -1!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  margin-top:8px!important;
  box-sizing:border-box!important;
}
.video-stat{
  min-width:0!important;
  min-height:190px!important;
  padding:24px 22px 22px!important;
  box-sizing:border-box!important;
}
.video-stat-content strong{
  overflow-wrap:anywhere!important;
}
.video-stat-content small{
  overflow-wrap:anywhere!important;
}

@media (max-width:1100px){
  .videos-modern-page{
    padding:54px 22px 56px!important;
  }
  .videos-hero-pro{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .videos-hero-text{
    display:block!important;
  }
  .video-kicker,
  .videos-hero-pro h1,
  .video-lead,
  .video-hero-cta,
  .video-stats-pro,
  .video-hero-visual{
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .video-hero-visual{
    min-height:auto!important;
  }
  .video-screen-illustration{
    max-width:100%!important;
    justify-self:stretch!important;
  }
  .video-stats-pro{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-top:22px!important;
  }
  .video-stat{
    min-height:150px!important;
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
  }
  .video-stat-icon-wrap{width:64px!important;height:64px!important}
  .video-stat-icon{width:32px!important;height:32px!important}
  .video-stat-arrow{display:none!important}
}

@media (max-width:760px){
  .videos-modern-page{
    padding:42px 16px 48px!important;
  }
  .videos-hero-pro h1{
    font-size:clamp(2.45rem,12vw,4rem)!important;
  }
  .video-lead{
    font-size:1rem!important;
  }
  .video-hero-cta{
    width:100%!important;
    justify-content:center!important;
  }
  .video-stats-pro{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .video-stat{
    min-height:auto!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    padding:14px 16px!important;
    border-radius:14px!important;
  }
  .video-stat-icon-wrap{width:52px!important;height:52px!important}
  .video-stat-icon{width:28px!important;height:28px!important}
  .video-stat-content strong{font-size:1.7rem!important;display:inline-block!important;margin-right:8px!important}
  .video-stat-content span{font-size:.96rem!important;display:inline-block!important;margin:0!important}
  .video-stat-content small{display:none!important}
  .video-screen-illustration{aspect-ratio:16/9!important;border-radius:16px!important}
}

@media (max-width:420px){
  .videos-modern-page{padding-left:14px!important;padding-right:14px!important}
  .video-stat{grid-template-columns:48px minmax(0,1fr)!important;padding:12px 14px!important}
  .video-stat-icon-wrap{width:48px!important;height:48px!important}
}


/* =========================================================
   FINAL UNIFIED VIDEO COLOR SYSTEM - whole website
   - gleiche Dark/Neon-Farbwelt wie der neue Video-Bereich
   - keine HTML-/JS-Funktionen geändert
   - Icons bleiben unverändert/Inline-SVG sichtbar beim Git-Push
========================================================= */
:root,
[data-theme="light"],
[data-theme="dark"]{
  --bg:#030b18!important;
  --bg-soft:#071426!important;
  --surface:#0b1930!important;
  --surface-2:#10213c!important;
  --text:#f8fbff!important;
  --muted:#c7d4e8!important;
  --primary:#16c8ff!important;
  --primary-2:#2577ff!important;
  --accent:#8b5cf6!important;
  --accent-2:#ff4fc3!important;
  --warning:#ffb020!important;
  --danger:#ff5c7a!important;
  --border:rgba(80,150,255,.24)!important;
  --shadow:0 28px 80px rgba(0,0,0,.45)!important;
  --shadow-soft:0 18px 48px rgba(22,200,255,.22)!important;
  --nav:rgba(3,8,18,.88)!important;
}

html,
body{
  background:
    radial-gradient(circle at 18% 8%,rgba(37,119,255,.22),transparent 30%),
    radial-gradient(circle at 88% 14%,rgba(139,92,246,.18),transparent 34%),
    radial-gradient(circle at 50% 100%,rgba(22,200,255,.08),transparent 42%),
    linear-gradient(180deg,#030813 0%,#061323 46%,#071426 100%)!important;
  color:var(--text)!important;
}

.topbar,
[data-theme="light"] .topbar,
[data-theme="dark"] .topbar{
  background:rgba(3,8,18,.88)!important;
  border-bottom:1px solid rgba(80,150,255,.20)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.30)!important;
}
.nav-links a{color:#dce8fb!important}
.nav-links a:hover,
.nav-links a.active{
  color:#16c8ff!important;
  background:rgba(22,200,255,.12)!important;
  box-shadow:inset 0 -2px 0 rgba(22,200,255,.65),0 10px 28px rgba(22,200,255,.10)!important;
}
.brand span,
.brand strong{color:#ffffff!important}
.brand span:last-child,
.brand .gradient-text,
.footer strong .gradient-text{color:#16c8ff!important}

.card,
.content-card,
.info-panel,
.project-card,
.video-card,
.download-item,
.about-panel,
.skill-pro,
.timeline-item,
.trust-card,
.stat-card,
.tech-badge,
.contact-modern-card,
.contact-info-card,
.contact-form-card,
.services-panel,
.service-card,
.video-category,
.category-card,
.upload-card,
.legal-card,
.admin-card,
.panel,
.box,
section .card{
  color:var(--text)!important;
  background:
    linear-gradient(180deg,rgba(18,36,65,.88),rgba(6,16,31,.74))!important;
  border:1px solid rgba(80,150,255,.24)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.card:hover,
.project-card:hover,
.video-card:hover,
.download-item:hover,
.service-card:hover,
.skill-pro:hover,
.trust-card:hover,
.stat-card:hover{
  border-color:rgba(22,200,255,.48)!important;
  box-shadow:0 28px 72px rgba(0,0,0,.42),0 0 34px rgba(22,200,255,.10)!important;
}

h1,h2,h3,h4,.section-title,.page-title,.tech-title,.about-hero-text h1,.project-title,.contact-title{
  color:#ffffff!important;
  text-shadow:0 10px 32px rgba(0,0,0,.35)!important;
}
h1 span,
.gradient-text,
.accent,
.about-kicker,
.kicker,
.video-kicker{
  background:linear-gradient(135deg,#16c8ff 0%,#2577ff 48%,#8b5cf6 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
}
p,li,small,.lead,.about-lead,.skill-basic,.muted,.footer p,.footer a,.card p,.content-card p{
  color:#c7d4e8!important;
}

.btn.primary,
.primary,
.video-hero-cta,
button[type="submit"],
input[type="submit"]{
  color:#ffffff!important;
  background:linear-gradient(135deg,#16c8ff 0%,#2577ff 48%,#8b5cf6 100%)!important;
  box-shadow:0 16px 44px rgba(37,119,255,.32)!important;
}
.btn.ghost,
.ghost,
.filter-btn,
.category-filter,
.search-box,
.theme-toggle,
.menu-btn{
  color:#f8fbff!important;
  background:rgba(10,25,48,.78)!important;
  border:1px solid rgba(80,150,255,.26)!important;
}
.btn.ghost:hover,
.ghost:hover,
.filter-btn:hover,
.category-filter:hover{
  border-color:rgba(22,200,255,.55)!important;
  color:#16c8ff!important;
}

input,textarea,select{
  color:#f8fbff!important;
  background:rgba(5,14,28,.82)!important;
  border:1px solid rgba(80,150,255,.28)!important;
}
input::placeholder,textarea::placeholder{color:#8fa4c4!important}
input:focus,textarea:focus,select:focus{
  border-color:#16c8ff!important;
  box-shadow:0 0 0 4px rgba(22,200,255,.14)!important;
}

.icon,.service-icon,.stat-icon,.brand-mark{
  background:linear-gradient(135deg,#0f6bff,#16c8ff)!important;
  box-shadow:0 14px 34px rgba(22,200,255,.18)!important;
}
.skill-tags span,.badge,.availability,.more-btn{
  color:#16c8ff!important;
  background:rgba(22,200,255,.10)!important;
  border:1px solid rgba(22,200,255,.24)!important;
}

.footer{
  border-top:1px solid rgba(80,150,255,.22)!important;
  background:transparent!important;
}
.footer a:hover{color:#16c8ff!important}

/* Einheitliche Video-Farbwelt auch auf rechtlichen/Projekt-Seiten */
.page,.section,.hero,.about-page,.project-detail-page,.contact-modern-page,.downloads-page,.services-page{
  background:transparent!important;
}

@media(max-width:760px){
  .nav-links.open{
    background:rgba(5,14,28,.96)!important;
    border-color:rgba(80,150,255,.28)!important;
  }
}

/* =========================================================
   HOME FINAL FIX 2026-06: neues Hero-Bild, echte Responsive-Layouts,
   mittiges Badge und push-sichere Inline-SVG Icons
========================================================= */
.home-modern-page{
  overflow-x:hidden!important;
}
.home-hero-pro,
.home-stats-pro,
.home-tech-pro{
  width:min(100% - 40px,1320px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.home-hero-pro{
  display:grid!important;
  grid-template-columns:minmax(0,0.92fr) minmax(440px,1.08fr)!important;
  gap:clamp(34px,5vw,72px)!important;
  align-items:center!important;
  padding-top:clamp(58px,7vw,96px)!important;
}
.home-hero-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  justify-self:center!important;
  width:100%!important;
  max-width:760px!important;
  min-width:0!important;
}
.home-hero-copy .home-pill.modern-pulse{
  align-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  transform:none!important;
  width:max-content!important;
  max-width:min(100%,680px)!important;
}
.home-hero-pro h1{
  text-align:center!important;
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  font-size:clamp(3.1rem,5.25vw,6.1rem)!important;
  line-height:.96!important;
  text-wrap:balance!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.home-lead{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:820px!important;
}
.home-actions{
  justify-content:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.home-btn .btn-svg,
.btn-svg{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  display:block!important;
}
.home-hero-visual{
  width:100%!important;
  max-width:820px!important;
  justify-self:center!important;
  overflow:visible!important;
}
.home-hero-visual img{
  width:100%!important;
  max-width:820px!important;
  height:auto!important;
  display:block!important;
  aspect-ratio:16/10!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:30px!important;
  border:1px solid rgba(55,125,255,.34)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.34),0 0 36px rgba(34,230,255,.10)!important;
}
.hero-visual-badge{
  position:absolute!important;
  left:clamp(16px,4vw,42px)!important;
  bottom:clamp(16px,3vw,34px)!important;
  right:auto!important;
  width:min(470px,calc(100% - 32px))!important;
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  padding:16px 20px!important;
  border-radius:22px!important;
  border:1px solid rgba(34,230,255,.46)!important;
  background:linear-gradient(135deg,rgba(7,20,38,.88),rgba(18,44,77,.78))!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 26px rgba(34,230,255,.16)!important;
  text-align:left!important;
  z-index:2!important;
}
.badge-svg-icon{
  width:48px!important;
  height:48px!important;
  flex:0 0 48px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:16px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#22e6ff,#3478ff,#8b5cff)!important;
  box-shadow:0 0 24px rgba(34,230,255,.42)!important;
}
.badge-svg-icon svg{width:27px!important;height:27px!important;display:block!important;}
.home-stats-pro{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:0!important;
  overflow:hidden!important;
}
.home-stats-pro article{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr)!important;
  align-items:center!important;
  gap:16px!important;
  min-width:0!important;
}
.home-stats-pro .stat-svg{
  width:50px!important;
  height:50px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  color:#22e6ff!important;
  background:linear-gradient(135deg,rgba(34,230,255,.20),rgba(52,120,255,.15),rgba(139,92,255,.12))!important;
  border:1px solid rgba(34,230,255,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 28px rgba(34,230,255,.08)!important;
}
.home-stats-pro .stat-svg svg{width:28px!important;height:28px!important;display:block!important;}
@media (max-width:1180px){
  .home-hero-pro{
    grid-template-columns:1fr!important;
    gap:34px!important;
    text-align:center!important;
  }
  .home-hero-copy{max-width:920px!important;}
  .home-hero-visual{max-width:860px!important;}
  .home-hero-pro h1{font-size:clamp(3rem,8vw,5.6rem)!important;}
}
@media (min-width:761px) and (max-width:1024px){
  .home-hero-pro,.home-stats-pro,.home-tech-pro{width:min(100% - 56px,1320px)!important;}
  .home-hero-pro{padding-top:44px!important;}
  .home-hero-visual img{aspect-ratio:16/9!important;}
  .home-stats-pro{grid-template-columns:repeat(2,minmax(0,1fr))!important;border-radius:24px!important;}
  .home-stats-pro article{padding:20px 24px!important;border-right:0!important;border-bottom:1px solid rgba(127,174,230,.24)!important;}
  .home-stats-pro article:nth-child(odd){border-right:1px solid rgba(127,174,230,.24)!important;}
  .home-stats-pro article:nth-child(n+3){border-bottom:0!important;}
}
@media (max-width:760px){
  .home-hero-pro,.home-stats-pro,.home-tech-pro{width:min(100% - 28px,1320px)!important;}
  .home-hero-pro{padding-top:28px!important;gap:24px!important;}
  .home-hero-copy .home-pill.modern-pulse{
    width:max-content!important;
    max-width:100%!important;
    padding:10px 12px!important;
    font-size:.78rem!important;
    gap:8px!important;
  }
  .home-hero-pro h1{
    font-size:clamp(2.45rem,12vw,3.9rem)!important;
    line-height:1.02!important;
    letter-spacing:-.055em!important;
  }
  .home-lead{font-size:1rem!important;line-height:1.65!important;}
  .home-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:12px!important;}
  .home-hero-visual img{
    aspect-ratio:16/11!important;
    border-radius:22px!important;
  }
  .hero-visual-badge{
    left:10px!important;
    bottom:10px!important;
    width:calc(100% - 20px)!important;
    padding:11px 12px!important;
    border-radius:16px!important;
    gap:10px!important;
  }
  .badge-svg-icon{width:40px!important;height:40px!important;flex-basis:40px!important;border-radius:13px!important;}
  .badge-svg-icon svg{width:23px!important;height:23px!important;}
  .hero-visual-badge strong{font-size:.88rem!important;}
  .hero-visual-badge span{font-size:.74rem!important;}
  .home-stats-pro{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;}
  .home-stats-pro article{
    grid-template-columns:42px 1fr!important;
    gap:10px!important;
    padding:14px!important;
    border:1px solid rgba(127,174,230,.28)!important;
    border-radius:16px!important;
    background:linear-gradient(145deg,rgba(17,39,67,.82),rgba(7,18,34,.84))!important;
  }
  .home-stats-pro .stat-svg{width:38px!important;height:38px!important;border-radius:12px!important;}
  .home-stats-pro .stat-svg svg{width:22px!important;height:22px!important;}
  .home-stats-pro strong{font-size:1.7rem!important;margin-bottom:4px!important;}
  .home-stats-pro span{font-size:.78rem!important;line-height:1.35!important;}
}
@media (max-width:430px){
  .home-hero-pro h1{font-size:2.35rem!important;}
  .home-stats-pro{grid-template-columns:1fr!important;}
  .home-hero-visual img{aspect-ratio:4/3!important;}
}

/* =========================================================
   HOME HERO BADGE FINAL CENTER FIX
   - Badge bleibt immer exakt über der Headline zentriert
   - Kein Überlappen mit dem Titel bei breiten Browserfenstern
   - Keine Verschiebung durch ältere Animation/Transform-Regeln
========================================================= */
.home-hero-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  text-align:center!important;
  min-width:0!important;
}
.home-hero-copy .home-pill.modern-pulse{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  translate:none!important;
  margin:0 auto clamp(28px,3.2vw,46px)!important;
  align-self:center!important;
  justify-self:center!important;
  display:inline-flex!important;
  width:fit-content!important;
  max-width:min(100%,620px)!important;
  z-index:3!important;
}
.home-hero-copy .home-pill.modern-pulse::before{
  pointer-events:none!important;
}
.home-hero-pro h1{
  margin-top:0!important;
  padding-top:0!important;
  position:relative!important;
  z-index:2!important;
  clear:both!important;
}
@media (min-width:1181px){
  .home-hero-pro{
    grid-template-columns:minmax(0,0.98fr) minmax(460px,1.02fr)!important;
  }
  .home-hero-copy{
    max-width:820px!important;
    justify-self:center!important;
  }
  .home-hero-copy .home-pill.modern-pulse{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
@media (max-width:760px){
  .home-hero-copy .home-pill.modern-pulse{
    margin-bottom:22px!important;
    white-space:normal!important;
    text-align:center!important;
  }
}

/* =========================================================
   EMERGENCY FINAL FIX 2026-05-31
   - Home badge never overlaps headline (Nest Hub Max + wide browser)
   - Brand/logo text color animation with fire sweep
   - No functionality changes, CSS only
========================================================= */
.home-hero-pro .home-hero-copy{
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-items:start!important;
  text-align:center!important;
  overflow:visible!important;
  contain:none!important;
}
.home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
  grid-row:1!important;
  position:static!important;
  float:none!important;
  inset:auto!important;
  left:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  translate:0 0!important;
  margin:0 auto clamp(52px,5.8vw,92px)!important;
  align-self:start!important;
  justify-self:center!important;
  width:max-content!important;
  max-width:min(100%,700px)!important;
  min-height:46px!important;
  z-index:20!important;
}
.home-hero-pro .home-hero-copy > h1{
  grid-row:2!important;
  position:relative!important;
  z-index:5!important;
  margin:0 auto clamp(22px,2.4vw,34px)!important;
  padding:0!important;
  clear:both!important;
  max-width:780px!important;
  font-size:clamp(3rem,4.75vw,5.35rem)!important;
  line-height:1.08!important;
  letter-spacing:-.055em!important;
  text-align:center!important;
  transform:none!important;
  translate:0 0!important;
}
.home-hero-pro .home-lead{
  grid-row:3!important;
  margin:0 auto clamp(28px,3vw,40px)!important;
}
.home-hero-pro .home-actions{
  grid-row:4!important;
}
@media (min-width:1181px){
  .home-hero-pro{
    align-items:center!important;
    grid-template-columns:minmax(0,.96fr) minmax(500px,1.04fr)!important;
  }
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
    margin-bottom:clamp(58px,5vw,86px)!important;
  }
}
@media (min-width:761px) and (max-width:1180px){
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
    margin-bottom:56px!important;
  }
  .home-hero-pro .home-hero-copy > h1{
    font-size:clamp(3rem,7.2vw,5rem)!important;
    line-height:1.08!important;
  }
}
@media (max-width:760px){
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
    width:min(100%,470px)!important;
    margin-bottom:34px!important;
    min-height:44px!important;
    white-space:normal!important;
  }
  .home-hero-pro .home-hero-copy > h1{
    font-size:clamp(2.45rem,11vw,3.8rem)!important;
    line-height:1.08!important;
  }
}
@media (max-width:420px){
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
    margin-bottom:28px!important;
    font-size:.76rem!important;
  }
  .home-hero-pro .home-hero-copy > h1{
    font-size:2.35rem!important;
  }
}

/* Animated Yemane InfoTech brand: color shift + fire sweep */
.brand span:last-child,
.footer-brand-row strong,
.footer-brand-top strong{
  position:relative!important;
  display:inline-block!important;
  overflow:hidden!important;
  background:linear-gradient(90deg,#ffffff 0%,#22e6ff 28%,#2f80ff 55%,#8b5cff 78%,#ffb22d 100%)!important;
  background-size:260% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  animation:brandColorFlow 7s ease-in-out infinite!important;
  text-shadow:0 0 18px rgba(34,230,255,.14)!important;
}
.brand span:last-child::after,
.footer-brand-row strong::after,
.footer-brand-top strong::after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:-45%!important;
  width:42%!important;
  background:linear-gradient(90deg,transparent,rgba(255,94,0,.12),rgba(255,178,45,.55),rgba(255,255,255,.86),rgba(255,94,0,.18),transparent)!important;
  transform:skewX(-18deg)!important;
  animation:brandFireSweep 5.8s ease-in-out infinite!important;
  pointer-events:none!important;
  mix-blend-mode:screen!important;
}
.brand-mark{
  position:relative!important;
  overflow:hidden!important;
  box-shadow:0 0 22px rgba(34,230,255,.18)!important;
  animation:brandLogoGlow 7s ease-in-out infinite!important;
}
.brand-mark::after{
  content:""!important;
  position:absolute!important;
  inset:-35%!important;
  background:conic-gradient(from 0deg,transparent,rgba(34,230,255,.20),rgba(139,92,255,.18),rgba(255,178,45,.22),transparent)!important;
  animation:brandLogoRing 6.5s linear infinite!important;
  pointer-events:none!important;
}
.brand-logo{position:relative!important;z-index:2!important;}
@keyframes brandColorFlow{
  0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 3px rgba(34,230,255,.20));}
  35%{background-position:70% 50%;filter:drop-shadow(0 0 7px rgba(139,92,255,.24));}
  70%{background-position:100% 50%;filter:drop-shadow(0 0 8px rgba(255,178,45,.20));}
}
@keyframes brandFireSweep{
  0%,62%,100%{left:-50%;opacity:0;}
  70%{opacity:1;}
  88%{left:112%;opacity:.85;}
}
@keyframes brandLogoGlow{
  0%,100%{filter:saturate(1);}
  45%{filter:saturate(1.25) hue-rotate(18deg);}
  72%{filter:saturate(1.35) hue-rotate(-12deg);}
}
@keyframes brandLogoRing{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .brand span:last-child,
  .footer-brand-row strong,
  .footer-brand-top strong,
  .brand span:last-child::after,
  .footer-brand-row strong::after,
  .footer-brand-top strong::after,
  .brand-mark,
  .brand-mark::after{animation:none!important;}
}

/* =========================================================
   FINAL HOME/NAV POLISH 2026-06-01
   - Home badge remains separated from headline and keeps moving shine
   - Brand/logo stays vertically stable on every page
   - Brand text only changes colors in a smooth loop; no layout-shifting sweep
========================================================= */
.header,
.nav{
  min-height:74px!important;
}
.nav{
  align-items:center!important;
}
.brand{
  min-height:46px!important;
  height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
  align-self:center!important;
  line-height:1!important;
  transform:none!important;
  translate:0 0!important;
}
.brand-mark{
  flex:0 0 46px!important;
  width:46px!important;
  height:46px!important;
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  transform:none!important;
  translate:0 0!important;
  animation:none!important;
}
.brand-mark::after{
  display:none!important;
  content:none!important;
  animation:none!important;
}
.brand-logo{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  transform:none!important;
  translate:0 0!important;
}
.brand span:last-child{
  display:inline-block!important;
  line-height:1!important;
  vertical-align:middle!important;
  transform:none!important;
  translate:0 0!important;
  position:relative!important;
  overflow:visible!important;
  background:linear-gradient(90deg,#22e6ff 0%,#2f80ff 22%,#8b5cff 42%,#ffb22d 63%,#ff7a18 78%,#22e6ff 100%)!important;
  background-size:320% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  animation:brandOnlyColorLoop 8s ease-in-out infinite!important;
  text-shadow:0 0 18px rgba(34,230,255,.16)!important;
}
.brand span:last-child::after{
  display:none!important;
  content:none!important;
  animation:none!important;
}
.footer-brand-row strong,
.footer-brand-top strong{
  background:linear-gradient(90deg,#22e6ff 0%,#2f80ff 22%,#8b5cff 42%,#ffb22d 63%,#ff7a18 78%,#22e6ff 100%)!important;
  background-size:320% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  animation:brandOnlyColorLoop 8s ease-in-out infinite!important;
  transform:none!important;
  translate:0 0!important;
}
.footer-brand-row strong::after,
.footer-brand-top strong::after{
  display:none!important;
  content:none!important;
}
@keyframes brandOnlyColorLoop{
  0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 3px rgba(34,230,255,.16));}
  25%{background-position:35% 50%;filter:drop-shadow(0 0 5px rgba(47,128,255,.18));}
  50%{background-position:68% 50%;filter:drop-shadow(0 0 6px rgba(139,92,255,.18));}
  75%{background-position:100% 50%;filter:drop-shadow(0 0 7px rgba(255,178,45,.18));}
}

/* Badge: clean center, no overlap, moving highlight stays active */
.home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
  position:relative!important;
  overflow:hidden!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  white-space:nowrap!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-bottom:clamp(54px,5.4vw,90px)!important;
  z-index:30!important;
}
.home-pill.modern-pulse::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:-2px!important;
  background:linear-gradient(90deg,transparent,rgba(34,230,255,.08),rgba(34,230,255,.42),rgba(139,92,255,.34),transparent)!important;
  transform:translateX(-120%)!important;
  animation:pillShineMove 3.2s ease-in-out infinite!important;
  pointer-events:none!important;
}
.home-pill.modern-pulse > *{
  position:relative!important;
  z-index:1!important;
}
@keyframes pillShineMove{
  0%{transform:translateX(-120%);opacity:0;}
  18%{opacity:1;}
  52%{transform:translateX(120%);opacity:.9;}
  100%{transform:translateX(120%);opacity:0;}
}
@media (min-width:1181px){
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
    margin-bottom:clamp(62px,5.2vw,94px)!important;
  }
}
@media (max-width:760px){
  .header,.nav{min-height:72px!important;}
  .brand{height:44px!important;min-height:44px!important;}
  .brand-mark{width:42px!important;height:42px!important;flex-basis:42px!important;}
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
    white-space:normal!important;
    max-width:min(100%,470px)!important;
    margin-bottom:38px!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .brand span:last-child,
  .footer-brand-row strong,
  .footer-brand-top strong,
  .home-pill.modern-pulse::before{animation:none!important;}
}

/* =========================================================
   FINAL FIX 2026-06-01: Navigation logo alignment + moving badge
   - Logo/Yemane InfoTech keeps the same lower vertical position on all pages
   - Brand text only color-loops (orange/gold/blue/purple), no vertical jump
   - Home pill/badge stays separated from headline and has visible motion again
========================================================= */
.topbar{
  min-height:82px!important;
  display:flex!important;
  align-items:center!important;
}
.topbar .nav{
  min-height:82px!important;
  height:82px!important;
  padding-top:10px!important;
  padding-bottom:8px!important;
  display:flex!important;
  align-items:center!important;
}
.topbar .brand{
  height:54px!important;
  min-height:54px!important;
  display:inline-flex!important;
  align-items:center!important;
  align-self:center!important;
  gap:12px!important;
  margin-top:6px!important;
  padding:0!important;
  line-height:1!important;
  transform:none!important;
  translate:0 0!important;
}
.topbar .brand .brand-mark{
  width:48px!important;
  height:48px!important;
  flex:0 0 48px!important;
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  margin:0!important;
  transform:none!important;
  translate:0 0!important;
}
.topbar .brand .brand-logo{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  transform:none!important;
  translate:0 0!important;
}
.topbar .brand > span:last-child{
  line-height:1!important;
  display:inline-block!important;
  align-self:center!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  translate:0 0!important;
  background:linear-gradient(90deg,#20e6ff 0%,#2f80ff 22%,#8b5cff 44%,#ffb22d 66%,#ff7a18 82%,#20e6ff 100%)!important;
  background-size:340% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  animation:brandStableColorLoopFinal 7.5s ease-in-out infinite!important;
  overflow:visible!important;
}
.topbar .brand > span:last-child::after,
.topbar .brand .brand-mark::after{
  display:none!important;
  content:none!important;
}
@keyframes brandStableColorLoopFinal{
  0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 4px rgba(32,230,255,.18));}
  25%{background-position:35% 50%;filter:drop-shadow(0 0 5px rgba(47,128,255,.20));}
  50%{background-position:66% 50%;filter:drop-shadow(0 0 6px rgba(139,92,255,.20));}
  75%{background-position:100% 50%;filter:drop-shadow(0 0 7px rgba(255,178,45,.22));}
}

/* Home: badge centered, no overlap, but visually moving again */
.home-hero-pro .home-hero-copy{
  display:grid!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
  align-items:start!important;
  text-align:center!important;
  row-gap:0!important;
}
.home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
  grid-row:1!important;
  position:relative!important;
  inset:auto!important;
  float:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:fit-content!important;
  max-width:min(100%,680px)!important;
  min-height:46px!important;
  margin:0 auto clamp(42px,4.2vw,68px)!important;
  z-index:25!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  box-shadow:0 0 0 1px rgba(34,230,255,.55),0 18px 42px rgba(34,230,255,.12)!important;
  animation:badgeGlowMoveFinal 3.8s ease-in-out infinite!important;
}
.home-hero-pro .home-hero-copy > .home-pill.modern-pulse > *{
  position:relative!important;
  z-index:2!important;
  animation:badgeInnerMoveFinal 3.8s ease-in-out infinite!important;
}
.home-hero-pro .home-hero-copy > .home-pill.modern-pulse::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:-4px!important;
  background:linear-gradient(90deg,transparent,rgba(34,230,255,.10),rgba(34,230,255,.55),rgba(139,92,255,.44),rgba(255,178,45,.18),transparent)!important;
  transform:translateX(-125%)!important;
  animation:badgeShineMoveFinal 2.8s ease-in-out infinite!important;
  pointer-events:none!important;
  z-index:1!important;
}
.home-hero-pro .home-hero-copy > h1{
  grid-row:2!important;
  margin:0 auto clamp(20px,2vw,32px)!important;
  padding:0!important;
  position:relative!important;
  z-index:4!important;
  clear:both!important;
}
@keyframes badgeShineMoveFinal{
  0%{transform:translateX(-125%);opacity:0;}
  18%{opacity:1;}
  55%{transform:translateX(125%);opacity:.95;}
  100%{transform:translateX(125%);opacity:0;}
}
@keyframes badgeGlowMoveFinal{
  0%,100%{box-shadow:0 0 0 1px rgba(34,230,255,.50),0 18px 42px rgba(34,230,255,.10);}
  50%{box-shadow:0 0 0 1px rgba(139,92,255,.70),0 22px 56px rgba(139,92,255,.20),0 0 26px rgba(34,230,255,.16);}
}
@keyframes badgeInnerMoveFinal{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.18);}
}
@media (min-width:761px) and (max-width:1180px){
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
    margin-bottom:clamp(38px,4vw,58px)!important;
  }
}
@media (max-width:760px){
  .topbar,.topbar .nav{min-height:78px!important;height:78px!important;}
  .topbar .brand{height:50px!important;min-height:50px!important;margin-top:5px!important;}
  .topbar .brand .brand-mark{width:44px!important;height:44px!important;flex-basis:44px!important;}
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse{
    white-space:normal!important;
    max-width:min(100%,470px)!important;
    margin-bottom:30px!important;
    padding:10px 13px!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .topbar .brand > span:last-child,
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse,
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse > *,
  .home-hero-pro .home-hero-copy > .home-pill.modern-pulse::before{animation:none!important;}
}

/* =========================================================
   ABSOLUTE FINAL HOME ALIGNMENT + STATS GLOW FIX
   - Header logo, home sections and footer share the same content rail
   - Social media starts on the same left line as the page content
   - Home stat cards are illuminated and inline SVG icons stay visible after push
   - No HTML functionality changed
========================================================= */
:root{--site-rail:1220px;--site-pad:clamp(18px,4vw,36px);}
.topbar .nav,
.home-modern-page > .home-hero-pro,
.home-modern-page > .home-stats-pro,
.home-modern-page > .home-tech-pro,
.footer.footer-pro{
  width:min(calc(100% - (var(--site-pad) * 2)), var(--site-rail))!important;
  max-width:var(--site-rail)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
.topbar{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  padding-left:0!important;
  padding-right:0!important;
}
.topbar .nav{
  padding-left:0!important;
  padding-right:0!important;
}
.topbar .brand{
  margin-left:0!important;
  flex-shrink:0!important;
}
.home-modern-page > .home-hero-pro{
  padding-left:0!important;
  padding-right:0!important;
}
.footer.footer-pro{
  padding-left:0!important;
  padding-right:0!important;
  align-items:flex-start!important;
}
.footer-branding,
.footer-brand-top,
.footer-brand-row,
.footer-socials{
  text-align:left!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.footer-socials{
  width:auto!important;
  max-width:100%!important;
  margin-left:0!important;
  padding-left:0!important;
}

/* Push-sichere Inline-SVG Icons und leuchtende Statistik-Karten */
.home-stats-pro{
  border:1px solid rgba(58,129,217,.42)!important;
  background:linear-gradient(135deg,rgba(9,28,52,.72),rgba(7,20,39,.88))!important;
  box-shadow:0 0 0 1px rgba(34,230,255,.06),0 20px 60px rgba(0,0,0,.28), inset 0 0 40px rgba(34,230,255,.035)!important;
  overflow:hidden!important;
}
.home-stats-pro article{
  position:relative!important;
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  padding:18px 22px!important;
  min-width:0!important;
  border-right:1px solid rgba(127,174,230,.24)!important;
  background:linear-gradient(145deg,rgba(25,74,123,.22),rgba(7,18,34,.10))!important;
}
.home-stats-pro article:last-child{border-right:0!important;}
.home-stats-pro article::before{
  content:""!important;
  position:absolute!important;
  inset:8px!important;
  border-radius:18px!important;
  background:radial-gradient(circle at 18% 20%,rgba(34,230,255,.16),transparent 44%),radial-gradient(circle at 85% 85%,rgba(139,92,255,.14),transparent 46%)!important;
  opacity:.9!important;
  pointer-events:none!important;
}
.home-stats-pro article:hover{
  box-shadow:inset 0 0 28px rgba(34,230,255,.10),0 12px 34px rgba(34,230,255,.08)!important;
}
.home-stats-pro .stat-svg{
  position:relative!important;
  z-index:2!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  border-radius:14px!important;
  display:grid!important;
  place-items:center!important;
  color:#dff6ff!important;
  background:linear-gradient(135deg,#15d6ff 0%,#2f80ff 48%,#8b5cff 100%)!important;
  box-shadow:0 0 22px rgba(34,230,255,.25), inset 0 0 14px rgba(255,255,255,.12)!important;
}
.home-stats-pro .stat-svg svg,
.home-stats-pro .stat-svg svg *{
  display:block!important;
  width:24px!important;
  height:24px!important;
  color:currentColor!important;
  fill:currentColor!important;
  opacity:1!important;
  visibility:visible!important;
}
.home-stats-pro article div{position:relative!important;z-index:2!important;min-width:0!important;}
.home-stats-pro strong{
  display:block!important;
  color:#fff!important;
  font-size:clamp(1.75rem,2.4vw,2.35rem)!important;
  line-height:1!important;
  text-shadow:0 0 16px rgba(34,230,255,.18)!important;
}
.home-stats-pro article span:not(.stat-svg){
  color:#d9ecff!important;
  font-weight:850!important;
  line-height:1.28!important;
}

@media (min-width:1181px){
  .home-modern-page > .home-hero-pro{
    grid-template-columns:minmax(0,.98fr) minmax(500px,1.02fr)!important;
  }
}
@media (max-width:980px){
  .topbar .nav,
  .home-modern-page > .home-hero-pro,
  .home-modern-page > .home-stats-pro,
  .home-modern-page > .home-tech-pro,
  .footer.footer-pro{
    width:min(calc(100% - 32px), var(--site-rail))!important;
  }
  .home-stats-pro{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .home-stats-pro article{
    border:1px solid rgba(58,129,217,.42)!important;
    border-radius:18px!important;
  }
}
@media (max-width:560px){
  .topbar .nav,
  .home-modern-page > .home-hero-pro,
  .home-modern-page > .home-stats-pro,
  .home-modern-page > .home-tech-pro,
  .footer.footer-pro{
    width:min(calc(100% - 24px), var(--site-rail))!important;
  }
  .home-stats-pro{grid-template-columns:1fr!important;}
  .footer.footer-pro{padding-top:24px!important;}
}

/* =========================================================
   ABOUT PAGE FINAL RESPONSIVE FIX
   - Trust icons visible on phone/tablet
   - Technology icons aligned alone on the right on phone/tablet
   - Removed extra hero grid/lines
   ========================================================= */
.about-hero-modern::after,
[data-theme="light"] .about-hero-modern::after{
  display:none!important;
  content:none!important;
  background:none!important;
}

.about-hero-modern,
.about-panel,
.trust-panel,
.tech-badges,
.trust-grid,
.hero-stats{
  min-width:0!important;
  box-sizing:border-box!important;
}

.trust-card{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
  overflow:visible!important;
}
.trust-card .trust-svg,
.trust-card .yi-icon,
.trust-card svg,
.trust-card i{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  flex:0 0 28px!important;
  color:#22e6ff!important;
  filter:drop-shadow(0 0 12px currentColor)!important;
}
.trust-card .color-green,
.trust-card:nth-child(3) .trust-svg{color:#2ff27b!important;}
.trust-card span{display:block!important;min-width:0!important;}

.tech-badge{
  min-width:0!important;
  box-sizing:border-box!important;
}
.tech-badge .badge-icon,
.tech-badge .yi-icon,
.tech-badge svg,
.tech-badge i{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  flex:0 0 22px!important;
  filter:drop-shadow(0 0 12px currentColor)!important;
}

@media (max-width:1050px){
  .about-page{overflow-x:hidden!important;}
  .about-hero-modern{overflow:hidden!important;}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .stat-card{min-width:0!important;}

  .tech-badges{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .tech-badge{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 34px!important;
    align-items:center!important;
    justify-content:stretch!important;
    text-align:left!important;
    padding:14px 18px!important;
    min-height:58px!important;
  }
  .tech-badge > span{
    order:1!important;
    justify-self:start!important;
    text-align:left!important;
    white-space:normal!important;
  }
  .tech-badge .badge-icon,
  .tech-badge .yi-icon,
  .tech-badge > svg,
  .tech-badge > i{
    order:2!important;
    justify-self:end!important;
    margin-left:auto!important;
    margin-right:0!important;
  }

  .trust-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .trust-card{
    min-height:70px!important;
    padding:14px 16px!important;
  }
}

@media (max-width:640px){
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .trust-grid{grid-template-columns:1fr!important;}
  .trust-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 32px!important;
    align-items:center!important;
    text-align:left!important;
    min-height:66px!important;
    padding:14px 16px!important;
  }
  .trust-card span{order:1!important;justify-self:start!important;text-align:left!important;}
  .trust-card .trust-svg,
  .trust-card .yi-icon,
  .trust-card svg,
  .trust-card i{
    order:2!important;
    justify-self:end!important;
    margin-left:auto!important;
  }
}

@media (max-width:380px){
  .hero-stats{grid-template-columns:1fr!important;}
}



/* =========================================================
   Yemane InfoTech - unified professional header/footer
   responsive, cross-page, inline-SVG safe
   ========================================================= */
:root{--yi-cyan:#22d8ff;--yi-blue:#2b7cff;--yi-purple:#7c3cff;--yi-bg:#06111f;--yi-panel:rgba(7,18,34,.82);--yi-border:rgba(34,216,255,.28);--yi-muted:#aebed2;}
.topbar.yi-header{position:sticky!important;top:0!important;z-index:999!important;background:rgba(3,8,18,.88)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border-bottom:1px solid rgba(34,216,255,.22)!important;box-shadow:0 14px 45px rgba(0,0,0,.25)!important;}
.yi-nav{width:min(100% - 32px, 1480px)!important;margin:0 auto!important;min-height:88px!important;padding:10px 0!important;display:grid!important;grid-template-columns:minmax(245px,auto) 1fr auto!important;align-items:center!important;gap:24px!important;}
.yi-brand{display:flex!important;align-items:center!important;gap:14px!important;text-decoration:none!important;min-width:0!important;line-height:1!important;transform:none!important;align-self:center!important;}
.yi-brand-mark{width:58px!important;height:58px!important;border-radius:18px!important;display:grid!important;place-items:center!important;background:linear-gradient(145deg,rgba(34,216,255,.18),rgba(43,124,255,.1))!important;border:1px solid rgba(34,216,255,.32)!important;box-shadow:0 0 22px rgba(34,216,255,.22)!important;overflow:hidden!important;flex:0 0 auto!important;}
.yi-brand-mark img,.yi-brand .brand-logo{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:inherit!important;}
.yi-brand-text{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:5px!important;min-width:0!important;}
.yi-brand-text strong{font-size:clamp(1.05rem,1.35vw,1.7rem)!important;line-height:1!important;font-weight:900!important;color:#fff!important;letter-spacing:-.02em!important;text-shadow:0 0 18px rgba(34,216,255,.18)!important;white-space:nowrap!important;}
.yi-brand-text strong span{color:var(--yi-cyan)!important;animation:yiLogoHue 8s linear infinite!important;}
.yi-brand-text small{font-size:.9rem!important;color:var(--yi-muted)!important;font-weight:500!important;white-space:nowrap!important;}
@keyframes yiLogoHue{0%{filter:hue-rotate(0deg);color:#22d8ff}25%{color:#34f5c5}50%{color:#ffb020}75%{color:#ff7a2f}100%{filter:hue-rotate(360deg);color:#22d8ff}}
.yi-nav-links{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-width:0!important;}
.yi-nav-links .site-nav-link{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;min-height:48px!important;padding:0 13px!important;border-radius:999px!important;color:#d9e3f1!important;text-decoration:none!important;font-weight:800!important;font-size:clamp(.82rem,.9vw,1rem)!important;letter-spacing:.01em!important;white-space:nowrap!important;transition:transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease!important;}
.yi-nav-links .site-nav-link:hover,.yi-nav-links .site-nav-link.active{color:#19e9ff!important;background:rgba(34,216,255,.1)!important;box-shadow:inset 0 0 0 1px rgba(34,216,255,.18),0 12px 28px rgba(34,216,255,.08)!important;transform:translateY(-1px)!important;}
.yi-nav-links .site-nav-link.active::after{content:""!important;position:absolute!important;left:18px!important;right:18px!important;bottom:-18px!important;height:3px!important;border-radius:999px!important;background:linear-gradient(90deg,var(--yi-cyan),var(--yi-blue),var(--yi-purple))!important;box-shadow:0 0 18px rgba(34,216,255,.8)!important;}
.nav-ico{width:21px!important;height:21px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;}
.nav-ico svg,.yi-header-cta svg,.yi-theme-toggle svg,.yi-footer svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;}
.yi-header-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important;}
.yi-theme-toggle{width:48px!important;height:48px!important;border-radius:50%!important;background:rgba(13,28,50,.7)!important;border:1px solid rgba(185,208,255,.28)!important;color:#fff!important;display:grid!important;place-items:center!important;font-size:1.15rem!important;box-shadow:inset 0 0 20px rgba(255,255,255,.04)!important;cursor:pointer!important;}
.yi-header-cta{height:48px!important;padding:0 22px!important;border-radius:14px!important;display:inline-flex!important;align-items:center!important;gap:10px!important;text-decoration:none!important;color:#bff8ff!important;font-weight:900!important;border:1px solid var(--yi-cyan)!important;background:linear-gradient(135deg,rgba(34,216,255,.08),rgba(124,60,255,.12))!important;box-shadow:0 0 22px rgba(34,216,255,.12)!important;white-space:nowrap!important;}
.yi-menu-btn{display:none!important;width:48px!important;height:48px!important;border-radius:14px!important;align-items:center!important;justify-content:center!important;border:1px solid rgba(34,216,255,.32)!important;background:rgba(8,24,44,.72)!important;color:#fff!important;font-size:1.8rem!important;line-height:1!important;}
/* footer */
.footer.yi-footer{width:min(100% - 32px, 1480px)!important;margin:72px auto 28px!important;padding:0!important;background:transparent!important;border:0!important;color:#d8e6f7!important;}
.yi-footer-inner{border:1px solid rgba(34,216,255,.28)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(6,16,31,.94),rgba(6,21,38,.74))!important;box-shadow:0 0 45px rgba(34,216,255,.08), inset 0 0 60px rgba(43,124,255,.04)!important;overflow:hidden!important;}
.yi-footer-main{display:grid!important;grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(160px,.75fr)) minmax(220px,.9fr)!important;gap:0!important;padding:44px 44px 38px!important;align-items:start!important;}
.yi-footer-brand,.yi-footer-col,.yi-footer-contact{min-width:0!important;padding-right:30px!important;}
.yi-footer-col,.yi-footer-contact{padding-left:30px!important;border-left:1px solid rgba(34,216,255,.12)!important;}
.yi-footer-logo-row{display:flex!important;align-items:center!important;gap:16px!important;margin-bottom:22px!important;}
.yi-footer-logo-row img{width:76px!important;height:76px!important;border-radius:22px!important;object-fit:cover!important;border:1px solid rgba(34,216,255,.35)!important;box-shadow:0 0 26px rgba(34,216,255,.2)!important;}
.yi-footer-logo-row strong{font-size:clamp(1.45rem,1.8vw,2.15rem)!important;color:#fff!important;line-height:1!important;font-weight:900!important;}
.yi-footer-logo-row strong span,.yi-footer h3,.yi-footer-bottom span,.yi-footer-slogan{color:var(--yi-cyan)!important;}
.yi-footer-brand p{max-width:430px!important;color:#c6d5e8!important;line-height:1.7!important;font-size:1rem!important;margin:0 0 28px!important;}
.yi-socials{display:flex!important;flex-wrap:wrap!important;gap:13px!important;align-items:center!important;}
.yi-social{width:46px!important;height:46px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(210,230,255,.16)!important;color:#fff!important;text-decoration:none!important;transition:transform .22s ease, box-shadow .22s ease!important;}
.yi-social:hover{transform:translateY(-3px)!important;box-shadow:0 0 24px rgba(34,216,255,.22)!important;}
.yi-social svg{width:22px!important;height:22px!important;fill:currentColor!important;stroke:none!important;}
.yi-social.yt{color:#ff2b2b!important}.yi-social.fb{color:#338bff!important}.yi-social.tt{color:#fff!important}.yi-social.ig{color:#ff58b5!important}.yi-social.tg{color:#33bfff!important}
.yi-footer h3{display:flex!important;align-items:center!important;gap:12px!important;font-size:1.05rem!important;margin:0 0 22px!important;font-weight:900!important;}
.yi-footer h3 svg{width:24px!important;height:24px!important;}
.yi-footer h3::after{content:"";display:block;width:88px;height:1px;background:linear-gradient(90deg,rgba(34,216,255,.7),transparent);position:absolute;transform:translate(40px,27px)}
.yi-footer ul{list-style:none!important;margin:0!important;padding:0!important;display:grid!important;gap:13px!important;}
.yi-footer li{margin:0!important;padding:0!important;}
.yi-footer a{color:#d8e6f7!important;text-decoration:none!important;}
.yi-footer-col a{display:inline-flex!important;align-items:center!important;gap:9px!important;font-size:.98rem!important;line-height:1.25!important;transition:color .2s ease, transform .2s ease!important;}
.yi-footer-col a:hover{color:var(--yi-cyan)!important;transform:translateX(3px)!important;}
.yi-footer-col a svg{width:15px!important;height:15px!important;opacity:.8!important;}
.yi-footer-contact p{display:flex!important;align-items:center!important;gap:12px!important;color:#d8e6f7!important;margin:0 0 18px!important;}
.yi-footer-contact p svg{width:21px!important;height:21px!important;color:var(--yi-cyan)!important;}
.yi-footer-cta{margin-top:18px!important;height:54px!important;border-radius:14px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;padding:0 24px!important;border:1px solid var(--yi-cyan)!important;color:#bff8ff!important;font-weight:900!important;background:rgba(34,216,255,.05)!important;}
.yi-footer-bottom{border-top:1px solid rgba(210,230,255,.16)!important;padding:26px 44px!important;display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:24px!important;}
.yi-footer-bottom p{margin:0!important;color:#d8e6f7!important;}
.yi-footer-bottom nav{display:flex!important;align-items:center!important;gap:36px!important;justify-content:center!important;}
.yi-footer-bottom nav a{display:inline-flex!important;align-items:center!important;gap:10px!important;color:#d8e6f7!important;}
.yi-footer-bottom nav svg{width:18px!important;height:18px!important;}
.yi-footer-slogan{text-align:right!important;font-weight:700!important;}
@media (max-width:1180px){
  .yi-nav{grid-template-columns:auto 1fr auto!important;gap:14px!important;width:min(100% - 24px, 1000px)!important;}
  .yi-brand-text small{display:none!important}.yi-header-cta span{display:none!important}.yi-header-cta{width:48px!important;padding:0!important;justify-content:center!important}.yi-nav-links .site-nav-link{padding:0 10px!important}.nav-ico{display:none!important}
  .yi-footer-main{grid-template-columns:1.2fr 1fr 1fr!important}.yi-footer-contact,.yi-footer-col{border-left:0!important;padding-left:0!important}.yi-footer-brand,.yi-footer-col,.yi-footer-contact{padding-right:0!important}.yi-footer-contact{grid-column:auto}.yi-footer-bottom{grid-template-columns:1fr!important;text-align:center!important}.yi-footer-slogan{text-align:center!important}
}
@media (max-width:860px){
  .yi-nav{min-height:76px!important;grid-template-columns:1fr auto!important;position:relative!important;}
  .yi-brand-mark{width:52px!important;height:52px!important}.yi-brand-text strong{font-size:1.15rem!important}.yi-menu-btn{display:flex!important;order:3!important}.yi-header-actions{display:none!important}
  .yi-nav-links{position:absolute!important;top:calc(100% + 10px)!important;left:0!important;right:0!important;display:none!important;flex-direction:column!important;align-items:stretch!important;padding:14px!important;border:1px solid rgba(34,216,255,.25)!important;border-radius:20px!important;background:rgba(3,9,20,.96)!important;box-shadow:0 24px 50px rgba(0,0,0,.48)!important;z-index:1000!important;}
  .yi-nav-links.open{display:flex!important}.yi-nav-links .site-nav-link{justify-content:flex-start!important;padding:0 18px!important;min-height:48px!important}.yi-nav-links .site-nav-link.active::after{display:none!important}.nav-ico{display:inline-flex!important}
  .footer.yi-footer{width:min(100% - 24px, 720px)!important;margin-top:48px!important}.yi-footer-main{grid-template-columns:1fr!important;padding:30px 22px!important;gap:30px!important}.yi-footer-col,.yi-footer-contact{border-top:1px solid rgba(34,216,255,.12)!important;padding-top:24px!important}.yi-footer-bottom{padding:24px 22px!important}.yi-footer-bottom nav{gap:18px!important;flex-wrap:wrap!important}.yi-footer-logo-row img{width:62px!important;height:62px!important}.yi-footer-logo-row{align-items:center!important}
}
@media (max-width:520px){
  .yi-nav{width:min(100% - 18px, 480px)!important}.yi-brand{gap:10px!important}.yi-brand-mark{width:48px!important;height:48px!important;border-radius:16px!important}.yi-brand-text strong{font-size:1rem!important}.yi-menu-btn{width:46px!important;height:46px!important}.yi-footer-logo-row{flex-direction:column!important;align-items:flex-start!important}.yi-socials{gap:10px!important}.yi-footer h3::after{display:none!important}.yi-footer-col a,.yi-footer-contact p{font-size:.95rem!important}.yi-footer-bottom p{font-size:.92rem!important}
}



/* Header/Footer Clean Responsive Final */
.yi-clean-header{position:sticky!important;top:0!important;z-index:9999!important;background:rgba(3,9,18,.92)!important;backdrop-filter:blur(18px)!important;border-bottom:1px solid rgba(34,230,255,.22)!important;box-shadow:0 10px 30px rgba(0,0,0,.24)!important;margin:0!important;padding:0!important;width:100%!important;overflow:visible!important}.yi-clean-nav{max-width:1240px!important;margin:0 auto!important;height:72px!important;padding:0 22px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important;position:relative!important}.yi-clean-brand{display:flex!important;align-items:center!important;gap:12px!important;min-width:220px!important;flex:0 0 auto!important;text-decoration:none!important;transform:none!important}.yi-clean-brand .brand-mark,.yi-clean-brand .yi-brand-mark{width:48px!important;height:48px!important;border-radius:50%!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:linear-gradient(135deg,rgba(0,229,255,.2),rgba(47,128,255,.2))!important;box-shadow:0 0 22px rgba(0,213,255,.26)!important;flex:0 0 48px!important}.yi-clean-brand img,.yi-clean-brand .brand-logo{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}.yi-clean-brand .yi-brand-text{display:block!important;line-height:1!important;white-space:nowrap!important}.yi-clean-brand strong{font-size:1.15rem!important;color:#fff!important;font-weight:900!important;letter-spacing:-.02em!important}.yi-clean-brand strong span{color:#20e6ff!important;text-shadow:0 0 16px rgba(32,230,255,.35)!important}.yi-clean-brand small{display:none!important}.yi-clean-nav .yi-nav-links{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex:1 1 auto!important;min-width:0!important;position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}.yi-clean-nav .site-nav-link{height:42px!important;padding:0 14px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;color:#dce8f8!important;text-decoration:none!important;font-weight:850!important;font-size:.95rem!important;line-height:1!important;position:relative!important;white-space:nowrap!important;border:1px solid transparent!important;transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease!important}.yi-clean-nav .site-nav-link:hover,.yi-clean-nav .site-nav-link.active{color:#22e6ff!important;background:rgba(0,194,255,.12)!important;border-color:rgba(34,230,255,.25)!important;box-shadow:0 0 18px rgba(0,213,255,.16)!important}.yi-clean-nav .site-nav-link.active:after{content:""!important;position:absolute!important;left:18px!important;right:18px!important;bottom:-16px!important;height:3px!important;border-radius:99px!important;background:linear-gradient(90deg,#22e6ff,#2f80ff,#7b5cff)!important;box-shadow:0 0 16px rgba(34,230,255,.65)!important}.yi-clean-nav .nav-ico{width:18px!important;height:18px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 18px!important}.yi-clean-nav .nav-ico svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}.yi-clean-nav .yi-menu-btn{display:none!important;width:44px!important;height:44px!important;border-radius:14px!important;align-items:center!important;justify-content:center!important;background:rgba(7,28,49,.95)!important;border:1px solid rgba(34,230,255,.35)!important;color:#fff!important;font-size:1.5rem!important}.yi-header-actions,.yi-theme-toggle,.yi-header-cta,.theme-toggle{display:none!important}
.yi-clean-footer{max-width:1240px!important;margin:72px auto 20px!important;padding:0!important;border:1px solid rgba(34,230,255,.20)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(5,17,31,.96),rgba(7,25,42,.92))!important;box-shadow:0 22px 70px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04)!important;overflow:hidden!important}.yi-clean-footer .yi-footer-inner{padding:34px!important}.yi-clean-footer .yi-footer-main{display:grid!important;grid-template-columns:minmax(260px,1.15fr) minmax(180px,.8fr) minmax(240px,.9fr)!important;gap:32px!important;align-items:start!important}.yi-clean-footer .yi-footer-brand,.yi-clean-footer .yi-footer-col,.yi-clean-footer .yi-footer-contact{min-width:0!important}.yi-clean-footer .yi-footer-logo-row{display:flex!important;align-items:center!important;gap:14px!important;margin:0 0 18px!important}.yi-clean-footer .yi-footer-logo-row img{width:58px!important;height:58px!important;border-radius:16px!important;object-fit:cover!important;box-shadow:0 0 22px rgba(0,213,255,.23)!important}.yi-clean-footer .yi-footer-logo-row strong{font-size:1.45rem!important;line-height:1.05!important;color:#fff!important;font-weight:900!important}.yi-clean-footer .yi-footer-logo-row span{color:#20e6ff!important}.yi-clean-footer p{color:#c9d7ea!important;line-height:1.7!important;margin:0 0 18px!important;font-size:1rem!important}.yi-clean-footer h3{display:flex!important;align-items:center!important;gap:10px!important;color:#20e6ff!important;font-size:1.05rem!important;margin:0 0 18px!important}.yi-clean-footer h3 svg{width:22px!important;height:22px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}.yi-clean-footer ul{list-style:none!important;margin:0!important;padding:0!important;display:grid!important;gap:11px!important}.yi-clean-footer li{margin:0!important;padding:0!important}.yi-clean-footer a{text-decoration:none!important}.yi-clean-footer .yi-footer-col a,.yi-clean-footer .yi-footer-contact p{display:flex!important;align-items:center!important;gap:10px!important;color:#e8f2ff!important;font-weight:760!important}.yi-clean-footer .yi-footer-col a:hover{color:#20e6ff!important}.yi-clean-footer .yi-footer-col a svg,.yi-clean-footer .yi-footer-contact p svg{width:16px!important;height:16px!important;fill:none!important;stroke:#20e6ff!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;flex:0 0 16px!important}.yi-clean-footer .yi-socials{display:flex!important;flex-wrap:wrap!important;gap:12px!important;margin-top:22px!important}.yi-clean-footer .yi-social{width:42px!important;height:42px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;transition:transform .2s ease,box-shadow .2s ease!important}.yi-clean-footer .yi-social:hover{transform:translateY(-3px)!important;box-shadow:0 0 20px rgba(34,230,255,.2)!important}.yi-clean-footer .yi-social svg{width:20px!important;height:20px!important;fill:currentColor!important;stroke:none!important}.yi-clean-footer .yt{color:#ff3434!important}.yi-clean-footer .x{color:#e8f2ff!important}.yi-clean-footer .fb{color:#3b82f6!important}.yi-clean-footer .tt{color:#fff!important}.yi-clean-footer .ig{color:#ff4fd8!important}.yi-clean-footer .tg{color:#37b7ff!important}.yi-clean-footer .yi-footer-cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;margin-top:8px!important;padding:13px 18px!important;border-radius:14px!important;color:#fff!important;border:1px solid rgba(34,230,255,.55)!important;background:rgba(0,213,255,.08)!important;font-weight:900!important}.yi-clean-footer .yi-footer-cta svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important}.yi-clean-footer .yi-footer-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;margin-top:30px!important;padding-top:22px!important;border-top:1px solid rgba(255,255,255,.10)!important}.yi-clean-footer .yi-footer-bottom p{margin:0!important;font-size:.95rem!important}.yi-clean-footer .yi-footer-bottom span{color:#20e6ff!important}.yi-clean-footer .yi-footer-bottom nav{display:flex!important;align-items:center!important;gap:24px!important}.yi-clean-footer .yi-footer-bottom a{color:#e8f2ff!important;font-weight:800!important}.yi-clean-footer .yi-footer-bottom a:hover{color:#20e6ff!important}
@media (max-width:1180px){.yi-clean-nav{height:68px!important;padding:0 18px!important;gap:16px!important}.yi-clean-brand{min-width:200px!important}.yi-clean-nav .site-nav-link{padding:0 10px!important;font-size:.88rem!important}.yi-clean-nav .nav-ico{display:none!important}.yi-clean-footer{margin-left:18px!important;margin-right:18px!important}.yi-clean-footer .yi-footer-main{grid-template-columns:1fr 1fr!important}.yi-clean-footer .yi-footer-contact{grid-column:1 / -1!important}}
@media (max-width:900px){.yi-clean-nav{height:72px!important}.yi-clean-brand{min-width:0!important}.yi-clean-brand strong{font-size:1.05rem!important}.yi-clean-nav .yi-menu-btn{display:flex!important;margin-left:auto!important}.yi-clean-nav .yi-nav-links{display:none!important;position:absolute!important;top:calc(100% + 10px)!important;left:18px!important;right:18px!important;z-index:99999!important;grid-template-columns:1fr!important;gap:8px!important;padding:14px!important;border:1px solid rgba(34,230,255,.24)!important;border-radius:18px!important;background:rgba(4,13,24,.98)!important;box-shadow:0 25px 60px rgba(0,0,0,.45)!important}.yi-clean-nav .yi-nav-links.open{display:grid!important}.yi-clean-nav .site-nav-link{width:100%!important;justify-content:flex-start!important;height:44px!important}.yi-clean-nav .nav-ico{display:inline-flex!important}.yi-clean-nav .site-nav-link.active:after{display:none!important}.yi-clean-footer .yi-footer-inner{padding:24px!important}.yi-clean-footer .yi-footer-main{grid-template-columns:1fr!important;gap:28px!important}.yi-clean-footer .yi-footer-bottom{flex-direction:column!important;align-items:flex-start!important}.yi-clean-footer .yi-footer-bottom nav{gap:18px!important;flex-wrap:wrap!important}}
@media (max-width:520px){.yi-clean-nav{padding:0 14px!important}.yi-clean-brand .brand-mark{width:44px!important;height:44px!important;flex-basis:44px!important}.yi-clean-brand strong{font-size:.98rem!important}.yi-clean-footer{border-radius:18px!important;margin:48px 12px 16px!important}.yi-clean-footer .yi-footer-inner{padding:20px!important}.yi-clean-footer .yi-footer-logo-row{align-items:center!important}.yi-clean-footer .yi-footer-logo-row img{width:50px!important;height:50px!important}.yi-clean-footer .yi-footer-logo-row strong{font-size:1.2rem!important}.yi-clean-footer p{font-size:.93rem!important}.yi-clean-footer .yi-social{width:40px!important;height:40px!important}.yi-clean-footer .yi-footer-bottom nav{width:100%!important;justify-content:flex-start!important}}




/* =========================================================
   FINAL HEADER + FOOTER FIX 2026-06-01
   - Logo + Yemane InfoTech stays on one horizontal line
   - No star/theme button in header
   - Footer only Branding + Navigation + Kontakt + Impressum/Datenschutz
   - Social icons use correct brand colors and stay visible
   - Tablet/Nest Hub: 3 clean columns, Mobile: 1 vertical column
   ========================================================= */

.topbar.yi-header,
.topbar.yi-clean-header{
  position:sticky!important;top:0!important;z-index:9999!important;
  background:rgba(3,8,18,.94)!important;
  border-bottom:1px solid rgba(34,230,255,.22)!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
}
.yi-clean-nav,
.yi-nav{
  width:min(100% - 32px, 1240px)!important;
  height:76px!important;min-height:76px!important;
  margin:0 auto!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:22px!important;overflow:visible!important;
}
.yi-clean-brand,
.yi-brand{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:12px!important;flex:0 0 auto!important;min-width:max-content!important;max-width:none!important;
  white-space:nowrap!important;line-height:1!important;text-decoration:none!important;
  transform:none!important;position:relative!important;top:0!important;margin:0!important;padding:0!important;
}
.yi-clean-brand .brand-mark,
.yi-clean-brand .yi-brand-mark,
.yi-brand .brand-mark,
.yi-brand .yi-brand-mark{
  width:54px!important;height:54px!important;min-width:54px!important;flex:0 0 54px!important;
  border-radius:18px!important;display:grid!important;place-items:center!important;overflow:hidden!important;
  background:linear-gradient(145deg,rgba(34,230,255,.17),rgba(43,124,255,.10))!important;
  border:1px solid rgba(34,230,255,.28)!important;
  box-shadow:0 0 22px rgba(34,230,255,.22)!important;
}
.yi-clean-brand img,.yi-brand img,.yi-clean-brand .brand-logo,.yi-brand .brand-logo{
  width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:inherit!important;
}
.yi-clean-brand .yi-brand-text,
.yi-brand .yi-brand-text{
  display:block!important;white-space:nowrap!important;line-height:1!important;min-width:max-content!important;max-width:none!important;
}
.yi-clean-brand strong,
.yi-brand strong,
.yi-clean-brand .yi-brand-text strong,
.yi-brand .yi-brand-text strong{
  display:inline-flex!important;align-items:baseline!important;gap:.25em!important;flex-wrap:nowrap!important;
  white-space:nowrap!important;word-break:keep-all!important;overflow:visible!important;
  font-size:clamp(1.05rem,1.25vw,1.32rem)!important;font-weight:950!important;line-height:1!important;
  color:#fff!important;letter-spacing:-.025em!important;text-shadow:0 0 16px rgba(34,230,255,.18)!important;
}
.yi-clean-brand strong span,.yi-brand strong span{color:#20e6ff!important;display:inline!important;white-space:nowrap!important;animation:yiNameColorLoop 9s linear infinite!important;}
@keyframes yiNameColorLoop{0%{color:#20e6ff}25%{color:#28f6c8}50%{color:#ffb020}75%{color:#ff7a22}100%{color:#20e6ff}}
.yi-clean-brand small,.yi-brand small{display:none!important;}
.yi-header-actions,.yi-theme-toggle,.theme-toggle,.yi-header-cta,.nav-actions{display:none!important;visibility:hidden!important;}
.yi-clean-nav .yi-menu-btn,.yi-nav .yi-menu-btn{
  display:none!important;width:46px!important;height:46px!important;min-width:46px!important;margin-left:auto!important;
  align-items:center!important;justify-content:center!important;border-radius:15px!important;
  border:1px solid rgba(34,230,255,.34)!important;background:rgba(7,24,42,.9)!important;
  color:#fff!important;font-size:1.55rem!important;line-height:1!important;
}
.yi-clean-nav .yi-nav-links,.yi-nav .yi-nav-links{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:6px!important;flex:1 1 auto!important;min-width:0!important;max-width:100%!important;
  margin:0!important;padding:0!important;position:static!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
.yi-clean-nav .site-nav-link,.yi-nav .site-nav-link{
  height:42px!important;min-height:42px!important;padding:0 12px!important;border-radius:999px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  white-space:nowrap!important;text-decoration:none!important;font-size:clamp(.82rem,.86vw,.95rem)!important;
  font-weight:900!important;color:#dce8f8!important;line-height:1!important;position:relative!important;
  background:transparent!important;border:1px solid transparent!important;
}
.yi-clean-nav .site-nav-link:hover,.yi-clean-nav .site-nav-link.active,
.yi-nav .site-nav-link:hover,.yi-nav .site-nav-link.active{
  color:#22e6ff!important;background:rgba(0,194,255,.12)!important;border-color:rgba(34,230,255,.25)!important;
}
.yi-clean-nav .site-nav-link.active::after,.yi-nav .site-nav-link.active::after{
  content:""!important;position:absolute!important;left:18px!important;right:18px!important;bottom:-18px!important;height:3px!important;border-radius:999px!important;
  background:linear-gradient(90deg,#22e6ff,#2f80ff,#7b5cff)!important;box-shadow:0 0 15px rgba(34,230,255,.7)!important;
}
.yi-clean-nav .nav-ico,.yi-nav .nav-ico{width:17px!important;height:17px!important;flex:0 0 17px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.yi-clean-nav .nav-ico svg,.yi-nav .nav-ico svg{width:17px!important;height:17px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;}

/* footer clean */
.footer.yi-clean-footer,.footer.yi-footer{
  width:min(100% - 32px,1240px)!important;max-width:1240px!important;margin:70px auto 24px!important;padding:0!important;
  border:1px solid rgba(34,230,255,.24)!important;border-radius:24px!important;
  background:linear-gradient(145deg,rgba(5,17,31,.98),rgba(7,25,42,.94))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)!important;
  overflow:hidden!important;color:#e8f3ff!important;
}
.yi-footer-inner{padding:34px!important;border:0!important;background:transparent!important;}
.yi-footer-main{
  display:grid!important;grid-template-columns:minmax(260px,1fr) minmax(180px,.7fr) minmax(230px,.8fr)!important;
  gap:34px!important;align-items:start!important;
}
.yi-footer-col:not(.yi-footer-nav),
.yi-footer-resources,
.yi-footer-services,
.yi-footer-main > section:not(.yi-footer-brand):not(.yi-footer-nav):not(.yi-footer-contact){display:none!important;}
.yi-footer-brand,.yi-footer-nav,.yi-footer-contact{min-width:0!important;}
.yi-footer-logo-row{display:flex!important;align-items:center!important;gap:13px!important;margin:0 0 18px!important;white-space:nowrap!important;}
.yi-footer-logo-row img{width:58px!important;height:58px!important;min-width:58px!important;border-radius:16px!important;object-fit:cover!important;box-shadow:0 0 22px rgba(0,213,255,.23)!important;}
.yi-footer-logo-row strong{font-size:clamp(1.2rem,1.6vw,1.55rem)!important;line-height:1.05!important;color:#fff!important;font-weight:950!important;white-space:nowrap!important;}
.yi-footer-logo-row span{color:#20e6ff!important;}
.yi-footer-brand p{color:#d4e3f4!important;line-height:1.65!important;font-size:1rem!important;margin:0 0 20px!important;max-width:420px!important;}
.yi-footer h3{display:flex!important;align-items:center!important;gap:10px!important;color:#20e6ff!important;font-size:1.05rem!important;margin:0 0 18px!important;font-weight:950!important;}
.yi-footer h3 svg,.yi-footer-contact p svg,.yi-footer-col a svg,.yi-footer-cta svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;flex:0 0 18px!important;}
.yi-footer ul{list-style:none!important;margin:0!important;padding:0!important;display:grid!important;gap:11px!important;}
.yi-footer li{margin:0!important;padding:0!important;}
.yi-footer a{text-decoration:none!important;}
.yi-footer-nav a{display:flex!important;align-items:center!important;gap:10px!important;color:#f0f7ff!important;font-weight:850!important;white-space:nowrap!important;}
.yi-footer-nav a:hover{color:#20e6ff!important;}
.yi-footer-nav a svg{color:#20e6ff!important;width:14px!important;height:14px!important;}
.yi-footer-contact p{display:flex!important;align-items:center!important;gap:12px!important;margin:0 0 16px!important;color:#f0f7ff!important;font-weight:800!important;line-height:1.5!important;}
.yi-footer-contact p svg{color:#20e6ff!important;}
.yi-footer-cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;margin-top:8px!important;padding:12px 18px!important;border-radius:14px!important;color:#fff!important;border:1px solid rgba(34,230,255,.55)!important;background:rgba(0,213,255,.08)!important;font-weight:900!important;}
.yi-footer-cta:hover{background:rgba(0,213,255,.16)!important;}
.yi-socials{display:flex!important;flex-wrap:wrap!important;gap:12px!important;margin-top:22px!important;}
.yi-social{width:42px!important;height:42px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.14)!important;transition:transform .2s ease,box-shadow .2s ease!important;}
.yi-social:hover{transform:translateY(-3px)!important;box-shadow:0 0 22px rgba(34,230,255,.18)!important;}
.yi-social svg{width:21px!important;height:21px!important;display:block!important;fill:currentColor!important;stroke:none!important;}
.yi-social.yt{color:#ff2d2d!important;background:rgba(255,45,45,.10)!important;border-color:rgba(255,45,45,.28)!important;}
.yi-social.x{color:#f7fbff!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.22)!important;}
.yi-social.fb{color:#1877f2!important;background:rgba(24,119,242,.10)!important;border-color:rgba(24,119,242,.28)!important;}
.yi-social.tt{color:#ffffff!important;background:linear-gradient(135deg,rgba(0,242,234,.13),rgba(255,0,80,.13))!important;border-color:rgba(255,255,255,.18)!important;}
.yi-social.ig{color:#ff4fd8!important;background:linear-gradient(135deg,rgba(245,133,41,.14),rgba(221,42,123,.14),rgba(81,91,212,.14))!important;border-color:rgba(255,79,216,.28)!important;}
.yi-social.tg{color:#37b7ff!important;background:rgba(55,183,255,.10)!important;border-color:rgba(55,183,255,.28)!important;}
.yi-footer-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;margin-top:30px!important;padding-top:22px!important;border-top:1px solid rgba(255,255,255,.10)!important;}
.yi-footer-bottom p{margin:0!important;color:#e8f3ff!important;font-size:.95rem!important;}
.yi-footer-bottom span{color:#20e6ff!important;}
.yi-footer-bottom nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:24px!important;}
.yi-footer-bottom nav a{color:#fff!important;font-weight:900!important;}
.yi-footer-bottom nav a:hover{color:#20e6ff!important;}

/* Tablet / Nest Hub / iPad: three clean footer columns, no overflow */
@media (max-width:1180px){
  .yi-clean-nav,.yi-nav{width:min(100% - 28px,1040px)!important;height:72px!important;gap:14px!important;}
  .yi-clean-brand .brand-mark,.yi-brand .brand-mark,.yi-clean-brand .yi-brand-mark,.yi-brand .yi-brand-mark{width:48px!important;height:48px!important;min-width:48px!important;flex-basis:48px!important;}
  .yi-clean-brand strong,.yi-brand strong{font-size:1.05rem!important;}
  .yi-clean-nav .site-nav-link,.yi-nav .site-nav-link{padding:0 9px!important;font-size:.83rem!important;}
  .yi-clean-nav .nav-ico,.yi-nav .nav-ico{display:none!important;}
  .footer.yi-clean-footer,.footer.yi-footer{width:min(100% - 28px,980px)!important;}
  .yi-footer-main{grid-template-columns:minmax(240px,1.05fr) minmax(170px,.7fr) minmax(230px,.85fr)!important;gap:28px!important;}
}

/* Switch header to hamburger before it becomes chaotic */
@media (max-width:980px){
  .yi-clean-nav,.yi-nav{width:min(100% - 28px,760px)!important;height:72px!important;}
  .yi-clean-nav .yi-menu-btn,.yi-nav .yi-menu-btn{display:flex!important;}
  .yi-clean-nav .yi-nav-links,.yi-nav .yi-nav-links{
    display:none!important;position:absolute!important;top:calc(100% + 10px)!important;left:14px!important;right:14px!important;z-index:99999!important;
    grid-template-columns:1fr!important;gap:8px!important;padding:14px!important;border:1px solid rgba(34,230,255,.24)!important;border-radius:18px!important;
    background:rgba(4,13,24,.98)!important;box-shadow:0 25px 60px rgba(0,0,0,.45)!important;
  }
  .yi-clean-nav .yi-nav-links.open,.yi-nav .yi-nav-links.open{display:grid!important;}
  .yi-clean-nav .site-nav-link,.yi-nav .site-nav-link{width:100%!important;justify-content:flex-start!important;height:44px!important;font-size:.95rem!important;}
  .yi-clean-nav .nav-ico,.yi-nav .nav-ico{display:inline-flex!important;}
  .yi-clean-nav .site-nav-link.active::after,.yi-nav .site-nav-link.active::after{display:none!important;}
  .yi-footer-main{grid-template-columns:1fr 1fr!important;}
  .yi-footer-contact{grid-column:1 / -1!important;}
}

/* Mobile footer single column */
@media (max-width:640px){
  .yi-clean-nav,.yi-nav{width:min(100% - 24px,520px)!important;height:70px!important;}
  .yi-clean-brand .brand-mark,.yi-brand .brand-mark,.yi-clean-brand .yi-brand-mark,.yi-brand .yi-brand-mark{width:46px!important;height:46px!important;min-width:46px!important;flex-basis:46px!important;border-radius:16px!important;}
  .yi-clean-brand strong,.yi-brand strong{font-size:1rem!important;}
  .footer.yi-clean-footer,.footer.yi-footer{width:calc(100% - 24px)!important;margin:48px auto 16px!important;border-radius:20px!important;}
  .yi-footer-inner{padding:22px!important;}
  .yi-footer-main{grid-template-columns:1fr!important;gap:26px!important;}
  .yi-footer-contact{grid-column:auto!important;}
  .yi-footer-logo-row img{width:52px!important;height:52px!important;min-width:52px!important;}
  .yi-footer-logo-row strong{font-size:1.25rem!important;}
  .yi-footer-brand p{font-size:.95rem!important;}
  .yi-footer-bottom{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;}
  .yi-footer-bottom nav{justify-content:flex-start!important;gap:20px!important;flex-wrap:wrap!important;}
}
@media (max-width:380px){
  .yi-clean-brand strong,.yi-brand strong{font-size:.92rem!important;}
  .yi-social{width:39px!important;height:39px!important;}
}


/* =========================================================
   FINAL HEADER + FOOTER RESPONSIVE FIX 2026-06-01
   - Brand stays on one horizontal line
   - Footer columns: Brand | Navigation | Kontakt on tablets/desktops
   - Mobile stacks cleanly
   - Social icons are inline SVG and always visible after Git push
   ========================================================= */
:root{--yi-cyan:#20e6ff;--yi-blue:#2f80ff;--yi-bg:#061525;--yi-panel:#071827;--yi-line:rgba(32,230,255,.26);--yi-text:#f5fbff;--yi-muted:#cfe0f3}

html,body{overflow-x:hidden!important;}

/* HEADER: keep logo + name together and aligned with menu */
.topbar.yi-clean-header,
.topbar,
.site-header{
  width:100%!important;
  overflow:visible!important;
}
.yi-clean-nav,.yi-nav,.nav{
  box-sizing:border-box!important;
  width:min(100% - 32px,1240px)!important;
  max-width:1240px!important;
  margin-inline:auto!important;
  min-height:72px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:clamp(14px,2vw,28px)!important;
  padding:10px 0!important;
  position:relative!important;
}
.yi-clean-brand,.yi-brand,.brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  flex:0 0 auto!important;
  min-width:max-content!important;
  max-width:none!important;
  height:52px!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  overflow:visible!important;
}
.yi-clean-brand .brand-mark,.yi-clean-brand .yi-brand-mark,
.yi-brand .brand-mark,.yi-brand .yi-brand-mark,
.brand .brand-mark,.brand img,.yi-clean-brand img,.yi-brand img{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  flex:0 0 52px!important;
  object-fit:cover!important;
  display:block!important;
  margin:0!important;
}
.yi-clean-brand .yi-brand-text,.yi-brand .yi-brand-text,
.yi-clean-brand strong,.yi-brand strong,.brand strong,.brand span{
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  overflow:visible!important;
  width:auto!important;
  max-width:none!important;
  line-height:1!important;
  word-break:normal!important;
  hyphens:none!important;
}
.yi-clean-brand strong,.yi-brand strong,.brand strong{
  font-size:clamp(1.05rem,1.35vw,1.38rem)!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
}
.yi-clean-brand strong span,.yi-brand strong span,.brand strong span{color:var(--yi-cyan)!important;}
.yi-clean-brand small,.yi-brand small,.brand small{display:none!important;}

.yi-clean-nav .yi-nav-links,.yi-nav .yi-nav-links,.nav-links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:clamp(4px,.7vw,10px)!important;
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
.yi-clean-nav .site-nav-link,.yi-nav .site-nav-link,.nav-links a{
  white-space:nowrap!important;
  flex:0 0 auto!important;
}

/* FOOTER: no empty right area, clean vertical alignment */
.footer.yi-clean-footer,.footer.yi-footer,.footer.footer-pro{
  box-sizing:border-box!important;
  width:min(100% - 32px,1240px)!important;
  max-width:1240px!important;
  margin:64px auto 24px!important;
  padding:0!important;
  border:1px solid var(--yi-line)!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(5,17,31,.98),rgba(6,24,40,.95))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)!important;
  overflow:hidden!important;
  color:var(--yi-text)!important;
}
.yi-footer-inner{
  width:100%!important;
  box-sizing:border-box!important;
  padding:clamp(22px,3vw,36px)!important;
  background:transparent!important;
}
.yi-footer-main{
  width:100%!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(260px,1.15fr) minmax(170px,.75fr) minmax(240px,.9fr)!important;
  gap:clamp(26px,4vw,54px)!important;
  align-items:start!important;
}
.yi-footer-brand,.yi-footer-nav,.yi-footer-contact{
  min-width:0!important;
  width:100%!important;
  box-sizing:border-box!important;
}
.yi-footer-logo-row{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:13px!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  margin:0 0 18px!important;
  min-width:0!important;
}
.yi-footer-logo-row img{
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
  flex:0 0 56px!important;
  border-radius:16px!important;
  object-fit:cover!important;
  display:block!important;
  box-shadow:0 0 22px rgba(32,230,255,.25)!important;
}
.yi-footer-logo-row strong{
  display:inline-flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:0!important;
  white-space:nowrap!important;
  overflow:visible!important;
  font-size:clamp(1.2rem,1.5vw,1.55rem)!important;
  line-height:1!important;
  color:#fff!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
}
.yi-footer-logo-row strong span{color:var(--yi-cyan)!important;}
.yi-footer-brand p{
  max-width:430px!important;
  margin:0 0 22px!important;
  color:var(--yi-muted)!important;
  line-height:1.65!important;
  font-size:clamp(.94rem,1vw,1rem)!important;
}

.yi-socials{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  margin:20px 0 0!important;
  padding:0!important;
}
.yi-social{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:50%!important;
  display:inline-grid!important;
  place-items:center!important;
  text-decoration:none!important;
  border:1px solid rgba(255,255,255,.15)!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
}
.yi-social svg{
  width:21px!important;
  height:21px!important;
  display:block!important;
  fill:currentColor!important;
  stroke:none!important;
  opacity:1!important;
  visibility:visible!important;
}
.yi-social.yt{color:#ff2d2d!important;background:rgba(255,45,45,.13)!important;border-color:rgba(255,45,45,.35)!important;}
.yi-social.x{color:#ffffff!important;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.28)!important;}
.yi-social.fb{color:#1877f2!important;background:rgba(24,119,242,.13)!important;border-color:rgba(24,119,242,.35)!important;}
.yi-social.tt{color:#ffffff!important;background:linear-gradient(135deg,rgba(0,242,234,.18),rgba(255,0,80,.18))!important;border-color:rgba(255,255,255,.22)!important;}
.yi-social.ig{color:#ff4fd8!important;background:linear-gradient(135deg,rgba(245,133,41,.18),rgba(221,42,123,.18),rgba(81,91,212,.18))!important;border-color:rgba(255,79,216,.35)!important;}
.yi-social.tg{color:#37b7ff!important;background:rgba(55,183,255,.13)!important;border-color:rgba(55,183,255,.35)!important;}

.yi-footer h3{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin:0 0 16px!important;
  color:var(--yi-cyan)!important;
  font-size:1.05rem!important;
  font-weight:950!important;
}
.yi-footer h3 svg,.yi-footer-contact p svg,.yi-footer-nav a svg,.yi-footer-cta svg{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.yi-footer ul{list-style:none!important;margin:0!important;padding:0!important;display:grid!important;gap:11px!important;}
.yi-footer li{margin:0!important;padding:0!important;}
.yi-footer a{text-decoration:none!important;}
.yi-footer-nav a{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#f0f7ff!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
.yi-footer-nav a svg{color:var(--yi-cyan)!important;width:14px!important;height:14px!important;min-width:14px!important;}
.yi-footer-contact p{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 16px!important;
  color:#f0f7ff!important;
  font-weight:800!important;
  line-height:1.5!important;
  word-break:normal!important;
}
.yi-footer-contact p svg{color:var(--yi-cyan)!important;}
.yi-footer-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  margin-top:8px!important;
  padding:12px 18px!important;
  border-radius:14px!important;
  color:#fff!important;
  border:1px solid rgba(34,230,255,.55)!important;
  background:rgba(0,213,255,.08)!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.yi-footer-bottom{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin-top:30px!important;
  padding-top:22px!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
.yi-footer-bottom p{margin:0!important;color:#e8f3ff!important;font-size:.95rem!important;}
.yi-footer-bottom span{color:var(--yi-cyan)!important;}
.yi-footer-bottom nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:24px!important;flex-wrap:wrap!important;}
.yi-footer-bottom nav a{color:#fff!important;font-weight:900!important;text-decoration:none!important;}

/* Large tablets / Nest Hub / iPad: keep exactly 3 columns when width allows */
@media (min-width:760px) and (max-width:1180px){
  .yi-clean-nav,.yi-nav,.nav{width:min(100% - 28px,1040px)!important;}
  .yi-clean-brand,.yi-brand,.brand{min-width:max-content!important;}
  .yi-clean-brand .brand-mark,.yi-brand .brand-mark,.brand .brand-mark,.brand img{width:48px!important;height:48px!important;min-width:48px!important;flex-basis:48px!important;}
  .yi-clean-brand strong,.yi-brand strong,.brand strong{font-size:1.05rem!important;}
  .yi-clean-nav .site-nav-link,.yi-nav .site-nav-link,.nav-links a{font-size:.84rem!important;padding-inline:8px!important;}
  .yi-clean-nav .nav-ico,.yi-nav .nav-ico{display:none!important;}

  .footer.yi-clean-footer,.footer.yi-footer,.footer.footer-pro{width:min(100% - 32px,980px)!important;margin-top:56px!important;}
  .yi-footer-inner{padding:28px!important;}
  .yi-footer-main{grid-template-columns:minmax(230px,1.05fr) minmax(150px,.7fr) minmax(220px,.85fr)!important;gap:26px!important;}
  .yi-footer-logo-row img{width:50px!important;height:50px!important;min-width:50px!important;flex-basis:50px!important;}
  .yi-footer-logo-row strong{font-size:1.22rem!important;}
  .yi-footer-brand p{font-size:.92rem!important;line-height:1.55!important;}
  .yi-social{width:38px!important;height:38px!important;min-width:38px!important;}
  .yi-social svg{width:19px!important;height:19px!important;}
  .yi-footer-nav a,.yi-footer-contact p{font-size:.92rem!important;}
}

/* Hamburger before navigation becomes crowded */
@media (max-width:980px){
  .yi-clean-nav .yi-menu-btn,.yi-nav .yi-menu-btn{display:flex!important;margin-left:auto!important;}
  .yi-clean-nav .yi-nav-links,.yi-nav .yi-nav-links{
    display:none!important;position:absolute!important;top:calc(100% + 10px)!important;left:14px!important;right:14px!important;z-index:99999!important;
    grid-template-columns:1fr!important;gap:8px!important;padding:14px!important;border:1px solid var(--yi-line)!important;border-radius:18px!important;
    background:rgba(4,13,24,.98)!important;box-shadow:0 25px 60px rgba(0,0,0,.45)!important;
  }
  .yi-clean-nav .yi-nav-links.open,.yi-nav .yi-nav-links.open{display:grid!important;}
  .yi-clean-nav .site-nav-link,.yi-nav .site-nav-link{width:100%!important;justify-content:flex-start!important;height:44px!important;font-size:.95rem!important;}
  .yi-clean-nav .nav-ico,.yi-nav .nav-ico{display:inline-flex!important;}
  .yi-clean-nav .site-nav-link.active::after,.yi-nav .site-nav-link.active::after{display:none!important;}
}

/* Mobile: vertical footer, no overflow */
@media (max-width:759px){
  .yi-clean-nav,.yi-nav,.nav{width:calc(100% - 24px)!important;min-height:70px!important;padding:9px 0!important;}
  .yi-clean-brand .brand-mark,.yi-brand .brand-mark,.brand .brand-mark,.brand img{width:46px!important;height:46px!important;min-width:46px!important;flex-basis:46px!important;}
  .yi-clean-brand strong,.yi-brand strong,.brand strong{font-size:1rem!important;}
  .footer.yi-clean-footer,.footer.yi-footer,.footer.footer-pro{width:calc(100% - 24px)!important;margin:48px auto 16px!important;border-radius:20px!important;}
  .yi-footer-inner{padding:22px!important;}
  .yi-footer-main{grid-template-columns:1fr!important;gap:26px!important;}
  .yi-footer-logo-row img{width:50px!important;height:50px!important;min-width:50px!important;}
  .yi-footer-logo-row strong{font-size:1.18rem!important;}
  .yi-footer-brand p{max-width:100%!important;font-size:.94rem!important;}
  .yi-footer-bottom{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;}
  .yi-footer-bottom nav{justify-content:flex-start!important;gap:20px!important;}
}

@media (max-width:380px){
  .yi-clean-brand strong,.yi-brand strong,.brand strong{font-size:.92rem!important;}
  .yi-social{width:39px!important;height:39px!important;min-width:39px!important;}
}


.yi-clean-header{width:100%!important;overflow:visible!important;background:rgba(3,9,18,.96)!important;border-bottom:1px solid rgba(34,230,255,.22)!important}.yi-clean-nav{width:min(100% - 40px,1240px)!important;margin:0 auto!important;height:72px!important;padding:0!important;display:flex!important;align-items:center!important;gap:28px!important}.yi-clean-brand{display:flex!important;align-items:center!important;gap:12px!important;min-width:220px!important;white-space:nowrap!important;text-decoration:none!important;line-height:1!important}.yi-clean-brand .brand-mark,.yi-clean-brand .yi-brand-mark{width:48px!important;height:48px!important;flex:0 0 48px!important;border-radius:50%!important;overflow:hidden!important}.yi-clean-brand img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}.yi-clean-brand .yi-brand-text,.yi-clean-brand strong{display:inline-flex!important;align-items:center!important;white-space:nowrap!important;line-height:1!important}.yi-clean-brand strong{font-size:1.12rem!important;font-weight:900!important;color:#fff!important;letter-spacing:-.02em!important}.yi-clean-brand strong span{color:#20e6ff!important;margin-left:.22em!important}.yi-clean-nav .yi-nav-links{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex:1 1 auto!important;min-width:0!important}.yi-clean-nav .site-nav-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;height:42px!important;line-height:1!important}
.footer.footer-pro.yi-footer,.yi-clean-footer.yi-footer-final-v7{width:min(100% - 40px,1240px)!important;max-width:1240px!important;margin:72px auto 24px!important;padding:0!important;border:1px solid rgba(34,230,255,.22)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(5,17,31,.98),rgba(7,25,42,.94))!important;box-shadow:0 22px 70px rgba(0,0,0,.30)!important;overflow:hidden!important}.yi-footer-final-v7 .yi-footer-inner{padding:34px clamp(28px,4vw,56px)!important}.yi-footer-final-v7 .yi-footer-main{display:grid!important;grid-template-columns:minmax(260px,1.12fr) minmax(180px,.72fr) minmax(250px,.9fr)!important;gap:42px!important;align-items:start!important;width:100%!important}.yi-footer-final-v7 .yi-footer-brand,.yi-footer-final-v7 .yi-footer-nav,.yi-footer-final-v7 .yi-footer-contact{min-width:0!important}.yi-footer-final-v7 .yi-footer-nav,.yi-footer-final-v7 .yi-footer-contact{border-left:1px solid rgba(34,230,255,.16)!important;padding-left:34px!important}.yi-footer-final-v7 .yi-footer-logo-row{display:flex!important;align-items:center!important;gap:14px!important;margin:0 0 20px!important;white-space:nowrap!important}.yi-footer-final-v7 .yi-footer-logo-row img{width:58px!important;height:58px!important;flex:0 0 58px!important;border-radius:16px!important;object-fit:cover!important;display:block!important;box-shadow:0 0 22px rgba(0,213,255,.24)!important}.yi-footer-final-v7 .yi-footer-logo-row strong{display:inline-flex!important;align-items:center!important;line-height:1!important;font-size:1.45rem!important;color:#fff!important;font-weight:900!important;white-space:nowrap!important;letter-spacing:-.03em!important}.yi-footer-final-v7 .yi-footer-logo-row strong span{color:#20e6ff!important;margin-left:.22em!important}.yi-footer-final-v7 p{margin:0 0 18px!important;color:#c9d7ea!important;line-height:1.65!important;font-size:1rem!important}.yi-footer-final-v7 h3{display:flex!important;align-items:center!important;gap:10px!important;margin:0 0 18px!important;color:#20e6ff!important;font-size:1.08rem!important;line-height:1.2!important;font-weight:900!important}.yi-footer-final-v7 h3 svg{width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}.yi-footer-final-v7 ul{list-style:none!important;margin:0!important;padding:0!important;display:grid!important;gap:12px!important}.yi-footer-final-v7 a{text-decoration:none!important}.yi-footer-final-v7 .yi-footer-nav a,.yi-footer-final-v7 .yi-footer-contact p{display:flex!important;align-items:center!important;gap:10px!important;color:#e8f2ff!important;font-weight:820!important;line-height:1.25!important}.yi-footer-final-v7 .yi-footer-nav a:hover{color:#20e6ff!important}.yi-footer-final-v7 .yi-footer-nav a svg,.yi-footer-final-v7 .yi-footer-contact p svg{width:16px!important;height:16px!important;flex:0 0 16px!important;fill:none!important;stroke:#20e6ff!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}.yi-footer-final-v7 .yi-socials{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:12px!important;margin:22px 0 0!important;padding:0!important}.yi-footer-final-v7 .yi-social{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;min-height:42px!important;max-height:42px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;padding:0!important;overflow:hidden!important}.yi-footer-final-v7 .yi-social:hover{transform:translateY(-3px)!important;box-shadow:0 0 20px rgba(34,230,255,.22)!important}.yi-footer-final-v7 .yi-social svg{display:block!important;width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;min-width:24px!important;min-height:24px!important;fill:none!important;stroke:none!important;overflow:visible!important}.yi-footer-final-v7 .yi-youtube svg,.yi-footer-final-v7 .yi-facebook svg,.yi-footer-final-v7 .yi-instagram svg,.yi-footer-final-v7 .yi-telegram svg{width:26px!important;height:26px!important;max-width:26px!important;max-height:26px!important}.yi-footer-final-v7 .yi-social svg *{visibility:visible!important;opacity:1!important}.yi-footer-final-v7 .yi-footer-cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;margin-top:8px!important;padding:13px 18px!important;border-radius:14px!important;color:#fff!important;border:1px solid rgba(34,230,255,.55)!important;background:rgba(0,213,255,.08)!important;font-weight:900!important}.yi-footer-final-v7 .yi-footer-cta svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important}.yi-footer-final-v7 .yi-footer-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important;margin-top:32px!important;padding-top:22px!important;border-top:1px solid rgba(255,255,255,.11)!important}.yi-footer-final-v7 .yi-footer-bottom p{margin:0!important;font-size:.95rem!important}.yi-footer-final-v7 .yi-footer-bottom span{color:#20e6ff!important}.yi-footer-final-v7 .yi-footer-bottom nav{display:flex!important;align-items:center!important;gap:28px!important}.yi-footer-final-v7 .yi-footer-bottom a{color:#e8f2ff!important;font-weight:850!important}
@media (min-width:901px) and (max-width:1180px){.yi-clean-nav{width:min(100% - 32px,1040px)!important;gap:16px!important}.yi-clean-brand{min-width:210px!important}.yi-clean-brand strong{font-size:1.02rem!important}.yi-clean-nav .site-nav-link{padding:0 9px!important;font-size:.86rem!important}.yi-clean-nav .nav-ico{display:none!important}.footer.footer-pro.yi-footer,.yi-clean-footer.yi-footer-final-v7{width:min(100% - 32px,1040px)!important}.yi-footer-final-v7 .yi-footer-inner{padding:32px!important}.yi-footer-final-v7 .yi-footer-main{grid-template-columns:1fr 1fr 1fr!important;gap:24px!important}.yi-footer-final-v7 .yi-footer-nav,.yi-footer-final-v7 .yi-footer-contact{padding-left:22px!important}.yi-footer-final-v7 .yi-footer-logo-row img{width:50px!important;height:50px!important;flex-basis:50px!important}.yi-footer-final-v7 .yi-footer-logo-row strong{font-size:1.22rem!important}.yi-footer-final-v7 p,.yi-footer-final-v7 .yi-footer-nav a,.yi-footer-final-v7 .yi-footer-contact p{font-size:.92rem!important}}
@media (max-width:900px){.yi-clean-nav{width:calc(100% - 28px)!important;height:72px!important;gap:14px!important}.yi-clean-brand{min-width:0!important}.yi-clean-brand .brand-mark,.yi-clean-brand .yi-brand-mark{width:46px!important;height:46px!important;flex-basis:46px!important}.yi-clean-brand strong{font-size:1.03rem!important}.yi-clean-nav .yi-menu-btn{display:flex!important;margin-left:auto!important}.yi-clean-nav .yi-nav-links{display:none!important;position:absolute!important;top:calc(100% + 10px)!important;left:0!important;right:0!important;grid-template-columns:1fr!important;background:rgba(4,13,24,.98)!important;border:1px solid rgba(34,230,255,.24)!important;border-radius:18px!important;padding:14px!important;box-shadow:0 25px 60px rgba(0,0,0,.45)!important}.yi-clean-nav .yi-nav-links.open{display:grid!important}.yi-clean-nav .site-nav-link{justify-content:flex-start!important;width:100%!important;height:44px!important}.yi-clean-nav .site-nav-link.active:after{display:none!important}.footer.footer-pro.yi-footer,.yi-clean-footer.yi-footer-final-v7{width:calc(100% - 28px)!important;margin:54px auto 22px!important;border-radius:22px!important}.yi-footer-final-v7 .yi-footer-inner{padding:28px 24px 24px!important}.yi-footer-final-v7 .yi-footer-main{grid-template-columns:1fr!important;gap:28px!important}.yi-footer-final-v7 .yi-footer-nav,.yi-footer-final-v7 .yi-footer-contact{border-left:0!important;border-top:1px solid rgba(34,230,255,.16)!important;padding-left:0!important;padding-top:24px!important}.yi-footer-final-v7 .yi-footer-bottom{flex-direction:column!important;align-items:flex-start!important;gap:14px!important}.yi-footer-final-v7 .yi-footer-bottom nav{gap:22px!important;flex-wrap:wrap!important}}
@media (max-width:520px){.yi-clean-nav{width:calc(100% - 20px)!important}.yi-clean-brand strong{font-size:.98rem!important}.yi-clean-brand .brand-mark,.yi-clean-brand .yi-brand-mark{width:42px!important;height:42px!important;flex-basis:42px!important}.yi-footer-final-v7 .yi-footer-inner{padding:24px 20px 22px!important}.yi-footer-final-v7 .yi-footer-logo-row img{width:48px!important;height:48px!important;flex-basis:48px!important}.yi-footer-final-v7 .yi-footer-logo-row strong{font-size:1.18rem!important}.yi-footer-final-v7 .yi-social{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}}

/* =========================================================
   EMERGENCY FINAL HEADER RESPONSIVE FIX - 2026-06-02
   Ziel: Desktop/Tablet Buttons sauber nebeneinander, keine Icons,
   Logo + Text exakt auf einer Linie, Mobile Menu nur auf kleinen Geräten.
========================================================= */
.topbar,
.topbar.yi-header,
.topbar.yi-clean-header{
  width:100%!important;
  min-height:72px!important;
  height:72px!important;
  display:flex!important;
  align-items:center!important;
  overflow:visible!important;
  background:rgba(3,9,18,.96)!important;
  border-bottom:1px solid rgba(34,230,255,.20)!important;
}
.nav,
.yi-nav,
.yi-clean-nav{
  width:min(100% - 44px,1240px)!important;
  max-width:1240px!important;
  height:72px!important;
  min-height:72px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:clamp(18px,3vw,64px)!important;
  position:relative!important;
  overflow:visible!important;
}
.brand,
.yi-brand,
.yi-clean-brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  flex:0 0 auto!important;
  min-width:max-content!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
.brand-mark,
.yi-brand-mark,
.yi-clean-brand .brand-mark,
.yi-brand .brand-mark{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  flex:0 0 48px!important;
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  border-radius:50%!important;
  overflow:hidden!important;
  margin:0!important;
  transform:none!important;
}
.brand-logo,
.brand img,
.yi-brand img,
.yi-clean-brand img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  border-radius:inherit!important;
}
.yi-brand-text,
.yi-clean-brand .yi-brand-text{
  display:flex!important;
  align-items:center!important;
  line-height:1!important;
  white-space:nowrap!important;
  min-width:max-content!important;
}
.brand span:last-child,
.yi-brand strong,
.yi-clean-brand strong,
.yi-brand-text strong{
  display:inline-flex!important;
  align-items:center!important;
  gap:.22em!important;
  white-space:nowrap!important;
  line-height:1!important;
  font-size:clamp(1.02rem,1.25vw,1.28rem)!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
.yi-brand small,
.yi-clean-brand small{display:none!important;}
.nav-actions,
.yi-header-actions,
.theme-toggle,
.yi-theme-toggle,
.yi-header-cta{display:none!important;visibility:hidden!important;}
.nav-links,
.yi-nav-links,
.yi-clean-nav .yi-nav-links,
.yi-nav .yi-nav-links{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex:1 1 auto!important;
  min-width:0!important;
  gap:clamp(16px,2.25vw,34px)!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
.nav-ico,
.nav-links svg,
.yi-nav-links svg,
.site-nav-link svg{
  display:none!important;
  width:0!important;
  height:0!important;
  margin:0!important;
}
.nav-links a,
.site-nav-link,
.yi-nav-links .site-nav-link,
.yi-clean-nav .site-nav-link,
.yi-nav .site-nav-link{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#e7eefb!important;
  text-decoration:none!important;
  font-size:clamp(.86rem,1vw,.98rem)!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links a[aria-current="page"],
.site-nav-link:hover,
.site-nav-link.active{
  color:#20e6ff!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
}
.nav-links a.active::after,
.nav-links a[aria-current="page"]::after,
.site-nav-link.active::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-20px!important;
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#22e6ff,#2f80ff,#7b5cff)!important;
  box-shadow:0 0 14px rgba(34,230,255,.55)!important;
}
.menu-btn,
.yi-menu-btn,
.yi-clean-nav .yi-menu-btn,
.yi-nav .yi-menu-btn{
  display:none!important;
}
@media (min-width:821px) and (max-width:1180px){
  .nav,.yi-nav,.yi-clean-nav{width:min(100% - 36px,1040px)!important;gap:18px!important;}
  .brand,.yi-brand,.yi-clean-brand{gap:10px!important;}
  .brand-mark,.yi-brand-mark,.yi-clean-brand .brand-mark,.yi-brand .brand-mark{width:44px!important;height:44px!important;min-width:44px!important;flex-basis:44px!important;}
  .brand span:last-child,.yi-brand strong,.yi-clean-brand strong,.yi-brand-text strong{font-size:1.02rem!important;}
  .nav-links,.yi-nav-links{gap:clamp(12px,1.55vw,20px)!important;}
  .nav-links a,.site-nav-link{font-size:.84rem!important;}
}
@media (max-width:820px){
  .topbar,.topbar.yi-header,.topbar.yi-clean-header{height:72px!important;min-height:72px!important;}
  .nav,.yi-nav,.yi-clean-nav{width:calc(100% - 28px)!important;height:72px!important;min-height:72px!important;gap:12px!important;}
  .brand,.yi-brand,.yi-clean-brand{min-width:0!important;max-width:calc(100% - 62px)!important;}
  .brand-mark,.yi-brand-mark,.yi-clean-brand .brand-mark,.yi-brand .brand-mark{width:44px!important;height:44px!important;min-width:44px!important;flex-basis:44px!important;}
  .brand span:last-child,.yi-brand strong,.yi-clean-brand strong,.yi-brand-text strong{font-size:1rem!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .menu-btn,.yi-menu-btn,.yi-clean-nav .yi-menu-btn,.yi-nav .yi-menu-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    margin-left:auto!important;
    border-radius:14px!important;
    border:1px solid rgba(34,230,255,.35)!important;
    background:rgba(5,22,40,.94)!important;
    color:#fff!important;
    font-size:24px!important;
    line-height:1!important;
    cursor:pointer!important;
  }
  .nav-links,.yi-nav-links,.yi-clean-nav .yi-nav-links,.yi-nav .yi-nav-links{
    display:none!important;
    position:absolute!important;
    top:calc(100% + 10px)!important;
    left:0!important;
    right:0!important;
    z-index:99999!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    padding:10px!important;
    border:1px solid rgba(34,230,255,.28)!important;
    border-radius:18px!important;
    background:rgba(3,10,22,.98)!important;
    box-shadow:0 22px 55px rgba(0,0,0,.45)!important;
  }
  .nav-links.open,.yi-nav-links.open,.yi-clean-nav .yi-nav-links.open,.yi-nav .yi-nav-links.open{display:flex!important;}
  .nav-links a,.site-nav-link,.yi-nav-links .site-nav-link,.yi-clean-nav .site-nav-link,.yi-nav .site-nav-link{
    width:100%!important;
    height:44px!important;
    justify-content:flex-start!important;
    padding:0 14px!important;
    font-size:.95rem!important;
  }
  .nav-links a.active::after,.site-nav-link.active::after{display:none!important;}
}
@media (max-width:380px){
  .brand span:last-child,.yi-brand strong,.yi-clean-brand strong,.yi-brand-text strong{font-size:.9rem!important;}
  .brand-mark,.yi-brand-mark,.yi-clean-brand .brand-mark,.yi-brand .brand-mark{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important;}
}

/* yi ultimate header fix */
/* ULTIMATE HEADER FIX: keine Icons, Desktop sauber nebeneinander, Tablet/Mobile Hamburger geschlossen */
html,body{overflow-x:hidden!important;}
.topbar.yi-clean-header,.topbar.yi-header,.topbar{height:72px!important;min-height:72px!important;width:100%!important;display:flex!important;align-items:center!important;background:rgba(3,9,18,.97)!important;border-bottom:1px solid rgba(34,230,255,.22)!important;overflow:visible!important;position:sticky!important;top:0!important;z-index:99999!important;}
.nav.yi-clean-nav,.nav.yi-nav,.nav{width:min(100% - 40px,1240px)!important;height:72px!important;margin:0 auto!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:28px!important;position:relative!important;flex-wrap:nowrap!important;}
.brand.yi-clean-brand,.brand.yi-brand,.brand{display:flex!important;align-items:center!important;gap:12px!important;min-width:230px!important;max-width:310px!important;flex:0 0 auto!important;text-decoration:none!important;white-space:nowrap!important;line-height:1!important;margin:0!important;padding:0!important;}
.brand-mark,.yi-brand-mark,.yi-clean-brand .brand-mark,.yi-clean-brand .yi-brand-mark{width:48px!important;height:48px!important;min-width:48px!important;flex:0 0 48px!important;border-radius:50%!important;overflow:hidden!important;display:block!important;}
.brand-logo,.yi-clean-brand img,.yi-brand img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;}
.yi-brand-text,.brand span:last-child,.yi-clean-brand strong,.yi-brand strong{display:inline-flex!important;align-items:center!important;line-height:1!important;white-space:nowrap!important;font-size:1.12rem!important;font-weight:900!important;color:#fff!important;letter-spacing:-.02em!important;margin:0!important;padding:0!important;}
.yi-brand-text span,.yi-clean-brand strong span,.yi-brand strong span{color:#20e6ff!important;margin-left:.22em!important;}
.nav-ico,.nav-links svg,.yi-nav-links svg,.site-nav-link svg{display:none!important;width:0!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important;}
.nav-links.yi-nav-links,.nav-links,.yi-nav-links{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:clamp(14px,1.75vw,30px)!important;flex:1 1 auto!important;min-width:0!important;margin:0!important;padding:0!important;position:static!important;background:transparent!important;border:0!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;transform:none!important;}
.nav-links a,.site-nav-link,.yi-nav-links .site-nav-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#e7eefb!important;font-size:clamp(.86rem,.95vw,.98rem)!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important;text-decoration:none!important;position:relative!important;transform:none!important;}
.nav-links a:hover,.nav-links a.active,.nav-links a[aria-current="page"],.site-nav-link:hover,.site-nav-link.active,.site-nav-link[aria-current="page"]{color:#20e6ff!important;background:transparent!important;border:0!important;box-shadow:none!important;}
.nav-links a.active::after,.nav-links a[aria-current="page"]::after,.site-nav-link.active::after,.site-nav-link[aria-current="page"]::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-22px!important;height:3px!important;border-radius:999px!important;background:linear-gradient(90deg,#22e6ff,#2f80ff,#7b5cff)!important;box-shadow:0 0 14px rgba(34,230,255,.55)!important;}
.menu-btn.yi-menu-btn,.menu-btn,.yi-menu-btn{display:none!important;}
@media (min-width:1181px){.nav-links.yi-nav-links,.nav-links,.yi-nav-links{display:flex!important;} .menu-btn.yi-menu-btn,.menu-btn,.yi-menu-btn{display:none!important;}}
@media (max-width:1180px){
  .nav.yi-clean-nav,.nav.yi-nav,.nav{width:calc(100% - 28px)!important;gap:12px!important;}
  .brand.yi-clean-brand,.brand.yi-brand,.brand{min-width:0!important;max-width:calc(100% - 64px)!important;gap:10px!important;}
  .brand-mark,.yi-brand-mark,.yi-clean-brand .brand-mark,.yi-clean-brand .yi-brand-mark{width:44px!important;height:44px!important;min-width:44px!important;flex-basis:44px!important;}
  .yi-brand-text,.brand span:last-child,.yi-clean-brand strong,.yi-brand strong{font-size:1rem!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .menu-btn.yi-menu-btn,.menu-btn,.yi-menu-btn{display:flex!important;align-items:center!important;justify-content:center!important;width:46px!important;height:46px!important;min-width:46px!important;margin-left:auto!important;border-radius:14px!important;border:1px solid rgba(34,230,255,.38)!important;background:rgba(5,22,40,.96)!important;color:#fff!important;font-size:24px!important;line-height:1!important;cursor:pointer!important;position:relative!important;z-index:100001!important;}
  .nav-links.yi-nav-links,.nav-links,.yi-nav-links,.yi-clean-nav .yi-nav-links,.yi-nav .yi-nav-links{display:none!important;position:absolute!important;top:calc(100% + 8px)!important;left:0!important;right:0!important;z-index:100000!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:0!important;padding:10px!important;border:1px solid rgba(34,230,255,.28)!important;border-radius:16px!important;background:rgba(3,10,22,.98)!important;box-shadow:0 22px 55px rgba(0,0,0,.48)!important;}
  .nav-links.yi-nav-links.open,.nav-links.open,.yi-nav-links.open,.yi-clean-nav .yi-nav-links.open,.yi-nav .yi-nav-links.open{display:flex!important;}
  .nav-links a,.site-nav-link,.yi-nav-links .site-nav-link{width:100%!important;height:44px!important;justify-content:flex-start!important;padding:0 14px!important;font-size:.95rem!important;}
  .nav-links a.active::after,.nav-links a[aria-current="page"]::after,.site-nav-link.active::after,.site-nav-link[aria-current="page"]::after{display:none!important;}
}
@media (max-width:420px){.yi-brand-text,.brand span:last-child,.yi-clean-brand strong,.yi-brand strong{font-size:.92rem!important}.brand-mark,.yi-brand-mark,.yi-clean-brand .brand-mark,.yi-clean-brand .yi-brand-mark{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important;}}



/* =========================================================
   FINAL FIX: About - "Darauf kannst du zählen" responsive
   Prevents broken words on iPad Air / iPad Mini / tablets
   ========================================================= */
.about-panel.trust-panel,
.trust-panel{
  overflow:hidden!important;
}
.trust-panel .trust-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
  width:100%!important;
}
.trust-panel .trust-card{
  min-width:0!important;
  width:100%!important;
  min-height:150px!important;
  padding:24px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  text-align:center!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
.trust-panel .trust-card span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  color:#fff!important;
  font-weight:800!important;
  line-height:1.35!important;
  font-size:clamp(14px,1.7vw,17px)!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  text-align:center!important;
}
.trust-panel .trust-card svg,
.trust-panel .trust-card .yi-icon,
.trust-panel .trust-card .trust-svg{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  flex:0 0 auto!important;
  margin:0!important;
  order:0!important;
}
@media (max-width:900px){
  .trust-panel .trust-grid{
    grid-template-columns:repeat(2,minmax(220px,1fr))!important;
    gap:14px!important;
  }
  .trust-panel .trust-card{
    min-height:132px!important;
    padding:22px 16px!important;
  }
}
@media (max-width:560px){
  .trust-panel .trust-grid{
    grid-template-columns:1fr!important;
  }
  .trust-panel .trust-card{
    min-height:92px!important;
    flex-direction:row!important;
    justify-content:flex-start!important;
    text-align:left!important;
    padding:18px!important;
  }
  .trust-panel .trust-card span{
    text-align:left!important;
    font-size:15px!important;
  }
}

/* =========================================================
   FINAL FIX: Mobile-Menü ohne Dauer-Highlight beim Aufklappen
   - Aktuelle Seite wird im geöffneten Handy-Menü nicht eingefärbt
   - Kurzer Effekt nur beim Tippen/Drücken
   ========================================================= */
@media (max-width:760px){
  .nav-links.open a,
  .nav-links.open a.active,
  .nav-links.open a[aria-current="page"]{
    background:transparent!important;
    box-shadow:none!important;
    color:#eaf2ff!important;
  }

  .nav-links.open a::after,
  .nav-links.open a.active::after,
  .nav-links.open a[aria-current="page"]::after{
    display:none!important;
    content:none!important;
  }

  .nav-links.open a:hover,
  .nav-links.open a:focus{
    background:transparent!important;
    box-shadow:none!important;
    color:#eaf2ff!important;
    outline:none!important;
  }

  .nav-links.open a:active{
    background:rgba(34,230,255,.14)!important;
    color:#22e6ff!important;
  }
}