/**
 * ITSecure Template – template.css
 * Basis, Layout, Navigation, Footer
 * Farbschema: Orange (#E8570C) + Dunkelblau (#0E3D6B)
 */

/* ═══════════════════════════════════════════════════════
   CSS VARIABLEN (Fallback – werden per PHP überschrieben)
═══════════════════════════════════════════════════════ */
:root {
  --clr-primary:         #E8570C;
  --clr-primary-rgb:     232,87,12;
  --clr-primary-hover:   #F26D28;
  --clr-secondary:       #0E3D6B;
  --clr-secondary-rgb:   14,61,107;
  --clr-secondary-hover: #1A5F8A;
  --clr-bg:              #F8F7F4;
  --clr-surface:         #FFFFFF;
  --clr-bg-soft:         #F2EFE9;
  --clr-text:            #1C2B3A;
  --clr-text-mid:        #3D5166;
  --clr-text-muted:      #6B7E91;
  --clr-text-pale:       #9BAAB7;
  --clr-border:          #E4DDD5;
  --clr-border-light:    #EDE8E2;
  --clr-footer-bg:       #0E3D6B;
  --clr-topic1:          #E8570C;
  --clr-topic2:          #0E3D6B;
  --clr-topic3:          #1A9E5A;
  --clr-topic4:          #7C3AED;
  --cta-grad-start:      #E8570C;
  --cta-grad-end:        #0E3D6B;
  --font-body:           'Plus Jakarta Sans', sans-serif;
  --font-accent:         'Fraunces', serif;
  --font-size-base:      16px;
  --radius-sm:           8px;
  --radius-md:           14px;
  --radius-lg:           20px;
  --radius-xl:           28px;
  --shadow-sm:           0 2px 8px rgba(14,61,107,.07);
  --shadow-md:           0 6px 24px rgba(14,61,107,.10);
  --shadow-lg:           0 16px 48px rgba(14,61,107,.14);
  --nav-h:               68px;
  --container:           1160px;
  --section-y:           88px;
}

/* ═══════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--clr-bg);
  color: var(--clr-text);
  font-size: var(--font-size-base);
  line-height: 1.65;
  overflow-x: hidden;
}
body::before {
  content:'';
  position:fixed; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(14,61,107,.04) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events:none; z-index:0;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
button { font-family:var(--font-body); }

/* ═══════════════════════════════════════════════════════
   LAYOUT HELPERS
═══════════════════════════════════════════════════════ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 5.5%;
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-weight:600; font-size:.9rem;
  text-decoration:none; border:none; cursor:pointer; line-height:1;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn-primary {
  background:var(--clr-primary); color:#fff;
  box-shadow:0 4px 16px rgba(var(--clr-primary-rgb),.32);
}
.btn-primary:hover {
  background:var(--clr-primary-hover); color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(var(--clr-primary-rgb),.42);
}
.btn-secondary {
  background:var(--clr-secondary); color:#fff;
  box-shadow:0 4px 16px rgba(var(--clr-secondary-rgb),.28);
}
.btn-secondary:hover {
  background:var(--clr-secondary-hover); color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(var(--clr-secondary-rgb),.38);
}
.btn-outline {
  background:var(--clr-surface); color:var(--clr-text-mid);
  border:1.5px solid var(--clr-border);
  box-shadow:var(--shadow-sm);
}
.btn-outline:hover {
  border-color:var(--clr-primary); color:var(--clr-primary);
  transform:translateY(-2px); box-shadow:var(--shadow-md);
}
.btn-white { background:#fff; color:var(--clr-primary); box-shadow:0 4px 14px rgba(0,0,0,.13); }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.2); }
.btn-ghost-white { background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.32); }
.btn-ghost-white:hover { background:rgba(255,255,255,.23); color:#fff; }

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
═══════════════════════════════════════════════════════ */
.section-tag {
  display:inline-block; font-size:.71rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--clr-primary); margin-bottom:12px;
}
.section-header { text-align:center; margin-bottom:52px; }
.section-header h2 {
  font-size:clamp(1.65rem,2.7vw,2.5rem); font-weight:800;
  color:var(--clr-text); letter-spacing:-.03em; line-height:1.15;
  margin-bottom:12px;
}
.section-header h2 em {
  font-style:italic; font-family:var(--font-accent);
  font-weight:600; color:var(--clr-primary);
}
.section-header p { font-size:.97rem; color:var(--clr-text-muted); max-width:500px; margin:0 auto; line-height:1.75; }

/* ═══════════════════════════════════════════════════════
   ANIMATIONS (AOS Lite)
═══════════════════════════════════════════════════════ */
.aos-enabled [data-aos] { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.aos-enabled [data-aos].is-visible { opacity:1; transform:translateY(0); }
.aos-enabled [data-aos="fade-left"] { transform:translateX(28px); }
.aos-enabled [data-aos="fade-left"].is-visible { transform:translateX(0); }
.aos-enabled [data-aos="fade-right"] { transform:translateX(-28px); }
.aos-enabled [data-aos="fade-right"].is-visible { transform:translateX(0); }

/* ═══════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════ */
.site-header {
  position:relative; z-index:200;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:none;
  transition:box-shadow .3s, background .3s;
}
.site-header.scrolled { box-shadow:0 2px 16px rgba(0,0,0,.06); }
.site-header.nav-is-sticky, .nav-is-sticky .site-header {
  position:fixed; top:0; left:0; right:0;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
/* Dark nav style */
.nav-style-dark .site-header {
  background:rgba(14,61,107,.97);
  border-color:rgba(255,255,255,.1);
}
.nav-style-dark .logo-wordmark { color:#fff; }
.nav-style-dark .site-nav-menu a { color:rgba(255,255,255,.7); }
.nav-style-dark .site-nav-menu a:hover { color:#fff; }
.nav-style-dark .nav-hamburger span { background:#fff; }

.nav-inner {
  max-width:var(--container); margin:0 auto; padding:0 5.5%;
  height:var(--nav-h); display:flex; align-items:center; gap:28px;
}
.site-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo-box {
  width:36px; height:36px; background:var(--clr-primary); border-radius:10px;
  display:grid; place-items:center; font-size:1rem; flex-shrink:0;
  box-shadow:0 3px 10px rgba(var(--clr-primary-rgb),.3);
}
.logo-box-sm { width:30px; height:30px; border-radius:8px; font-size:.85rem; }
.logo-wordmark { font-weight:800; font-size:1.18rem; letter-spacing:-.02em; color:var(--clr-text); line-height:1; }
.logo-accent { color:var(--clr-primary); }
.logo-img { height:36px; width:auto; }

/* Accessibility helpers */
.visually-hidden {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}

/* Joomla menu */
.site-nav-menu { flex:1; display:flex; justify-content:center; }
.site-nav-menu > ul, .site-nav-menu > .nav { display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.site-nav-menu a { font-size:.875rem; font-weight:500; color:var(--clr-text-muted); text-decoration:none; transition:color .2s; white-space:nowrap; }
.site-nav-menu a:hover, .site-nav-menu a.active { color:var(--clr-text); }
.site-nav-menu .active > a { color:var(--clr-primary); }

/* Joomla menu module overrides */
.site-nav-menu .mod-menu__toggle-sub { display:none; }
.site-nav-menu .icon-chevron-down { display:none; }
.site-nav-menu .list-unstyled { list-style:none; }

/* Dropdown-Menüs */
.site-nav-menu > ul > li, .site-nav-menu > .nav > li { position:relative; }
.site-nav-menu li ul {
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--clr-surface); border:1px solid var(--clr-border-light);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  padding:8px 0; min-width:220px; z-index:300;
  flex-direction:column; gap:0; margin-top:12px;
  list-style:none;
}
.site-nav-menu li ul::before {
  content:''; position:absolute; top:-12px; left:0; right:0; height:12px;
}
.site-nav-menu li:hover > ul { display:flex; }
.site-nav-menu li ul li { width:100%; }
.site-nav-menu li ul a {
  display:block; padding:8px 18px; font-size:.82rem; font-weight:500;
  color:var(--clr-text-mid); white-space:nowrap; transition:background .15s, color .15s;
}
.site-nav-menu li ul a:hover { background:var(--clr-bg); color:var(--clr-primary); }

/* Dark nav dropdown */
.nav-style-dark .site-nav-menu li ul { background:rgba(14,61,107,.97); border-color:rgba(255,255,255,.1); }
.nav-style-dark .site-nav-menu li ul a { color:rgba(255,255,255,.65); }
.nav-style-dark .site-nav-menu li ul a:hover { background:rgba(255,255,255,.08); color:#fff; }

.nav-phone {
  display:flex; align-items:center; gap:6px; text-decoration:none;
  font-size:.875rem; font-weight:600; color:var(--clr-primary);
  transition:color .2s; flex-shrink:0; white-space:nowrap;
}
.nav-phone:hover { color:var(--clr-primary-hover); }
.nav-phone svg { flex-shrink:0; }
.nav-style-dark .nav-phone { color:rgba(255,255,255,.85); }
.nav-style-dark .nav-phone:hover { color:#fff; }
.nav-cta-btn { flex-shrink:0; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; margin-left:auto; }
.nav-hamburger span { display:block; width:22px; height:2px; background:var(--clr-text); border-radius:2px; transition:transform .25s, opacity .25s; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu { background:var(--clr-surface); border-top:1px solid var(--clr-border-light); padding:14px 5.5% 20px; }
.mobile-menu > ul, .mobile-menu > .nav { flex-direction:column; align-items:flex-start; gap:2px; list-style:none; padding:0; margin:0 0 14px 0; display:flex; }
.mobile-menu li ul { list-style:none; padding:0 0 0 16px; margin:0; display:flex; flex-direction:column; gap:2px; }
.mobile-menu li ul a { font-size:.85rem; color:var(--clr-text-pale); }
.mobile-menu a { display:block; padding:10px 12px; font-size:.95rem; font-weight:500; color:var(--clr-text-mid); text-decoration:none; border-radius:var(--radius-sm); transition:background .2s, color .2s; }
.mobile-menu a:hover { background:var(--clr-bg); color:var(--clr-primary); }
.mobile-cta { width:100%; justify-content:center; }

/* Sticky padding */
.nav-is-sticky main, .nav-is-sticky #content { padding-top:var(--nav-h); }

/* ═══════════════════════════════════════════════════════
   SECTION WRAPPERS
═══════════════════════════════════════════════════════ */
.pos-hero    { position:relative; z-index:1; overflow:hidden; }
.pos-trust-bar { position:relative; z-index:1; background:var(--clr-surface); border-top:1px solid var(--clr-border-light); border-bottom:1px solid var(--clr-border-light); box-shadow:var(--shadow-sm); }
.pos-topics  { position:relative; z-index:1; padding:var(--section-y) 0; background:var(--clr-bg); }
.pos-section { position:relative; z-index:1; padding:80px 0; background:var(--clr-surface); border-top:1px solid var(--clr-border-light); }
.pos-section.section-alt { background:var(--clr-bg); border:none; }
.pos-cta     { position:relative; z-index:1; padding:var(--section-y) 0; background:var(--clr-bg); border-top:1px solid var(--clr-border-light); }
.pos-content-top, .pos-content-bottom, .pos-fullwidth { position:relative; z-index:1; }

/* Flexible Inhaltsbereiche */
.component-area { position:relative; z-index:1; padding:var(--section-y) 0; }
.component-grid { display:grid; gap:32px; }
.component-grid.has-sidebar-left  { grid-template-columns:280px 1fr; }
.component-grid.has-sidebar-right { grid-template-columns:1fr 280px; }
.component-grid.has-sidebar-left.has-sidebar-right { grid-template-columns:260px 1fr 260px; }
.sidebar { min-width:0; }

/* itsecure_module Chrome */
.itsecure-module { background:var(--clr-surface); border:1.5px solid var(--clr-border-light); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm); margin-bottom:20px; }
.itsecure-module h3.moduleTitle { font-size:1rem; font-weight:700; color:var(--clr-text); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--clr-border-light); }

/* ═══════════════════════════════════════════════════════
   ARTIKEL-CONTENT (Unterseiten)
═══════════════════════════════════════════════════════ */
.component-main .com-content-article {
  max-width:820px; margin:0 auto;
}

/* "Home" Seitentitel auf Startseite verstecken */
.com-content-featured .page-header { display:none; }

/* Artikel-Titel (H1) */
.component-main .page-header h1,
.component-main .article-info + h2,
.component-main .com-content-article > h2:first-child {
  font-size:clamp(1.8rem, 3vw, 2.6rem); font-weight:800;
  color:var(--clr-text); letter-spacing:-.03em; line-height:1.15;
  margin-bottom:24px; padding-bottom:20px;
  border-bottom:3px solid var(--clr-primary);
}

/* Abschnitts-Überschriften (H3) */
.component-main h3 {
  font-size:clamp(1.15rem, 1.8vw, 1.45rem); font-weight:700;
  color:var(--clr-text); letter-spacing:-.02em; line-height:1.25;
  margin:40px 0 16px; padding-top:20px;
  border-top:1px solid var(--clr-border-light);
}
.component-main h3:first-of-type { border-top:none; padding-top:0; }

/* Unter-Überschriften (H4) */
.component-main h4 {
  font-size:1.05rem; font-weight:700; color:var(--clr-secondary);
  margin:28px 0 8px; line-height:1.3;
}

/* Fließtext */
.component-main p {
  font-size:.95rem; line-height:1.8; color:var(--clr-text-mid);
  margin-bottom:16px;
}
.component-main p strong { color:var(--clr-text); }

/* Listen */
.component-main ul, .component-main ol {
  margin:0 0 20px 0; padding:0 0 0 8px; list-style:none;
}
.component-main ul li, .component-main ol li {
  position:relative; padding:10px 0 10px 28px;
  font-size:.92rem; line-height:1.65; color:var(--clr-text-mid);
  border-bottom:1px solid var(--clr-border-light);
}
.component-main ul li:last-child, .component-main ol li:last-child { border-bottom:none; }
.component-main ul li::before {
  content:''; position:absolute; left:0; top:16px;
  width:10px; height:10px; border-radius:50%;
  background:rgba(var(--clr-primary-rgb),.15); border:2px solid var(--clr-primary);
}
.component-main ul li strong { color:var(--clr-text); display:block; font-size:.95rem; margin-bottom:2px; }
.component-main ol { counter-reset:item; }
.component-main ol li { counter-increment:item; }
.component-main ol li::before {
  content:counter(item); position:absolute; left:0; top:10px;
  width:24px; height:24px; border-radius:50%; font-size:.75rem; font-weight:700;
  background:var(--clr-primary); color:#fff;
  display:grid; place-items:center;
}

/* CTA-Links am Ende (nur wenn der Link das einzige Kind im letzten p ist) */
.component-main p:last-child:has(> a:only-child) a {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--clr-primary); color:#fff;
  padding:14px 28px; border-radius:var(--radius-md);
  text-decoration:none; font-weight:600; font-size:.92rem;
  box-shadow:0 4px 16px rgba(var(--clr-primary-rgb),.28);
  transition:transform .2s, box-shadow .2s, background .2s;
  margin-top:16px;
}
.component-main p:last-child:has(> a:only-child) a:hover {
  background:var(--clr-primary-hover); transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(var(--clr-primary-rgb),.38);
}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.site-footer { background:var(--clr-footer-bg); padding:40px 0 28px; position:relative; z-index:1; }
.footer-inner { max-width:var(--container); margin:0 auto; padding:0 5.5%; }

.footer-top {
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-logo { display:inline-flex; align-items:center; gap:9px; text-decoration:none; flex-shrink:0; }
.footer-tagline { font-size:.85rem; color:rgba(255,255,255,.5); line-height:1.75; font-weight:300; flex:1; min-width:200px; margin:0; }

.footer-social { display:flex; gap:8px; flex-shrink:0; }
.social-btn { width:34px; height:34px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:8px; display:grid; place-items:center; color:rgba(255,255,255,.6); text-decoration:none; transition:background .2s, color .2s, border-color .2s; }
.social-btn:hover { background:var(--clr-primary); color:#fff; border-color:transparent; }
.social-btn svg { display:block; }

.footer-bottom { padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.footer-copyright { font-size:.77rem; color:rgba(255,255,255,.3); }
.footer-legal-links { display:flex; gap:18px; }
.footer-legal-links a { font-size:.77rem; color:rgba(255,255,255,.3); text-decoration:none; transition:color .2s; }
.footer-legal-links a:hover { color:rgba(255,255,255,.7); }

/* ═══════════════════════════════════════════════════════
   BACK TO TOP + PRELOADER
═══════════════════════════════════════════════════════ */
.back-to-top { position:fixed; bottom:28px; right:28px; width:44px; height:44px; background:var(--clr-secondary); color:#fff; border:none; border-radius:50%; cursor:pointer; display:grid; place-items:center; box-shadow:0 4px 16px rgba(var(--clr-secondary-rgb),.4); transition:transform .2s, opacity .3s; z-index:300; }
.back-to-top:hover { transform:translateY(-3px); background:var(--clr-secondary-hover); }
.back-to-top[hidden] { display:none; }

#itsecure-preloader { position:fixed; inset:0; background:var(--clr-surface); display:grid; place-items:center; z-index:9999; transition:opacity .4s .2s; }
#itsecure-preloader.done { opacity:0; pointer-events:none; }
.preloader-logo { font-size:3rem; animation:plPulse 1s ease-in-out infinite; }
@keyframes plPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .component-grid.has-sidebar-left,
  .component-grid.has-sidebar-right { grid-template-columns:1fr; }
  .component-grid.has-sidebar-left.has-sidebar-right { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  :root { --nav-h:60px; --section-y:60px; }
  .site-nav-menu { display:none; }
  .nav-cta-btn { display:none; }
  .nav-phone span { display:none; }
  .nav-hamburger { display:flex; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; }
}
@media (max-width:480px) {
  :root { --section-y:48px; }
}