/* ==========================================================================
   styles.css — CN Security & Systems
   Gemeinsame Basis-Styles für alle Seiten (Design-Tokens, Reset, Navigation,
   Footer, Theme-Toggle, Cookie-Banner). Seiten-spezifische Styles bleiben
   inline in der jeweiligen .html-Datei.
   ========================================================================== */

/* --- Design-Tokens (Farbschema, Dark/Light) --- */
:root{
  --bg:#0C1418; --panel:#121C21; --panel-2:#182329; --line:#233038;
  --text:#EAF1F0; --text-soft:#8FA3A8; --coral:#FF5468; --coral-soft:#3A1E24;
  --green:#3DDC84; --green-soft:#132A1E; --yellow:#FFC24B; --purple:#9B7BFF;
  --nav-bg:rgba(12,20,24,0.85);
}
[data-theme="light"]{
  --bg:#F1F3F5; --panel:#FFFFFF; --panel-2:#EDEFF2; --line:#D8DCE1;
  --text:#10151F; --text-soft:#57707A; --coral:#D6483F; --coral-soft:#FBE4E2;
  --green:#1E8E6F; --green-soft:#DFF3EA; --yellow:#B8860B; --purple:#6B4FBB;
  --nav-bg:rgba(255,255,255,0.85);
}

/* --- Reset & Basistypografie --- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
.mono{font-family:'JetBrains Mono',monospace;}
.display{font-family:'Rubik',sans-serif; font-weight:700; letter-spacing:-0.01em;}
a{color:inherit; text-decoration:none;}

/* --- Layout-Container --- */
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }
@media (max-width:400px){ .wrap{padding:0 16px;} }

/* --- Navigation (einfache Unterseiten: Logo + Zurück-Link) --- */
nav{position:sticky; top:0; z-index:50; background:var(--nav-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
nav .navwrap{max-width:1120px; margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; height:68px;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Rubik'; font-weight:700; font-size:15px;}
.logo-mark{width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg, var(--coral), #FF8A6B); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono'; font-weight:700; font-size:13px; color:#0C1418;}
.back{font-size:13px; color:var(--text-soft);}
.back:hover{color:var(--coral);}

/* --- Theme-Toggle-Button (Hell/Dunkel) --- */
.theme-toggle{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; color:var(--text); transition:border-color 0.15s;
}
.theme-toggle:hover{border-color:var(--coral);}
.theme-toggle #theme-icon-moon, .theme-toggle .ti-moon-mobile{display:none;}
[data-theme="light"] .theme-toggle #theme-icon-sun, [data-theme="light"] .theme-toggle .ti-sun-mobile{display:none;}
[data-theme="light"] .theme-toggle #theme-icon-moon, [data-theme="light"] .theme-toggle .ti-moon-mobile{display:block;}

/* --- Footer --- */
footer{padding:36px 0; font-family:'JetBrains Mono'; font-size:12px; color:var(--text-soft); border-top:1px solid var(--line);}
footer a:hover{color:var(--text);}
.social-icon{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; border:1px solid var(--line); color:var(--text-soft); transition:color .15s, border-color .15s, background .15s;}
.social-icon.icon-linkedin:hover{color:#0A66C2; border-color:#0A66C2;}
.social-icon.icon-discord:hover{color:#5865F2; border-color:#5865F2;}
.social-icon.icon-github:hover{color:#FFFFFF; border-color:#FFFFFF; background:#181717;}

/* --- Cookie-Consent-Banner --- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--panel); border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(0,0,0,0.25);
  transform:translateY(110%); transition:transform 0.35s ease;
}
.cookie-banner.show{ transform:translateY(0); }
.cookie-banner-inner{
  max-width:1120px; margin:0 auto; padding:20px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cookie-banner-inner p{ font-size:13px; color:var(--text-soft); line-height:1.6; max-width:640px; margin:0; }
.cookie-banner-inner a{ color:var(--coral); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-btn{
  font-family:'Rubik','Inter',sans-serif; font-size:13px; font-weight:600;
  padding:11px 20px; border-radius:999px; cursor:pointer; border:1px solid var(--line);
  background:transparent; color:var(--text); white-space:nowrap;
}
.cookie-btn-primary{ background:var(--coral); border-color:var(--coral); color:#0C1418; }
.cookie-btn:hover{ opacity:0.88; }
@media (max-width:640px){
  .cookie-banner-inner{ padding:18px 20px; flex-direction:column; align-items:stretch; }
  .cookie-banner-actions{ justify-content:stretch; }
  .cookie-btn{ flex:1; }
}