/* RESET & NORMALIZE */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
u,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display: block;
}
body { line-height: 1; }
ol,ul { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; border: 0; }
button { background: none; border: none; cursor: pointer; font: inherit; }
*,*:before,*:after { box-sizing: border-box; }

/* ===== BRAND COLORS ===== */
:root {
  --primary: #273746;
  --secondary: #9AE9E0;
  --accent: #FFFFFF;
  --bg-darker: #222B35;
  --bg-gradient-light: #273746;
  --bg-gradient-dark: #202932;
  --neon: #00ffe7;
  --neon-glow: 0 0 18px #64fff4, 0 0 4px #9AE9E0, 0 0 2px #19ffe2;
  --shadow: 0 2px 14px 0 rgba(61,85,115,0.18);
  --shadow-card: 0 4px 36px 0 rgba(95,255,244,0.08), 0 2px 10px 0 rgba(30,38,58,0.10);
  --radius: 18px;
  --radius-sm: 11px;
}

/* ======= BASE TYPOGRAPHY ======= */
@import url('https://fonts.googleapis.com/css?family=Montserrat:600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap');

body {
  min-height: 100vh;
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  color: var(--accent);
  background: linear-gradient(135deg, var(--bg-gradient-dark) 0%, var(--primary) 100%);
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  background-attachment: fixed;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  color: var(--secondary);
  letter-spacing: 0.015em;
  font-weight: 700;
  margin-bottom: 18px;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.45rem; }
  h3 { font-size: 1.1rem; }
}

p,li,dd {
  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
  color: var(--accent);
  margin-bottom: 13px;
  font-size: 1rem;
}
strong { color: var(--secondary); font-weight: 700; }
a { transition: color 0.22s; }
a:hover, a:focus { color: var(--neon); text-shadow: var(--neon-glow); }

/* ====== LAYOUT WRAPPERS ====== */
.container {
  width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 18px;
  display: flex; flex-direction: column; gap: 0px;
}
.content-wrapper {
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
@media (max-width: 768px) {
  .container { padding: 0 10px; }
  .content-wrapper { gap: 18px; }
}

/* ========== NAVIGATION ========== */
header { width: 100%; box-shadow: 0 4px 20px 0 rgba(39,55,70,0.07); background: var(--bg-gradient-light); }
.main-nav {
  width: 100%; min-height: 70px; display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding: 0 14px; position: relative; z-index: 22;
}
.main-nav ul {
  display: flex; align-items: center; flex-wrap: wrap; gap: 20px;
  margin-left: 24px;
}
.main-nav li { display: flex; align-items: center; }
.main-nav a {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 6px 6px;
  border-radius: 8px;
  color: var(--secondary);
  position: relative;
  transition: color 0.22s, background 0.22s;
}
.main-nav a:hover, .main-nav a:focus {
  color: var(--neon);
  background: rgba(154,233,224,0.07);
  text-shadow: var(--neon-glow);
}
.main-nav .cta.primary {
  margin-left: 30px;
}

/* Logo */
.main-nav img {
  max-height: 40px; transition: filter .2s;
}
.main-nav img:hover { filter: drop-shadow(0 0 10px var(--neon)); }

/* ======= MOBILE NAV ====== */
.mobile-menu-toggle {
  display: none;
  position: relative; z-index: 32;
  background: none; color: var(--secondary); border: none;
  font-size: 2.1rem; padding: 7px 13px; margin-left: auto;
  border-radius: var(--radius-sm);
  transition: background 0.19s, color 0.22s;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus { background: rgba(54, 255, 233, 0.08); color: var(--neon); }

.mobile-menu {
  display: none; /* shown via .active via JS */
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: linear-gradient(135deg, #182028 85%, #212c33 100%);
  z-index: 99;
  flex-direction: column; align-items: flex-start; justify-content: flex-start;
  transition: transform .38s cubic-bezier(.7,.4,.26,1) 0s, opacity .18s;
  transform: translateX(-100%);
  opacity: 0;
}
.mobile-menu.active {
  display: flex;
  opacity: 1; transform: translateX(0);
}
.mobile-menu-close {
  position: absolute; right: 24px; top: 22px;
  background: none; color: var(--secondary);
  font-size: 2.3rem; z-index: 100; padding: 10px 13px;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.25s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  background: rgba(99,255,212,0.06);
  color: var(--neon);
}
.mobile-nav {
  display: flex; flex-direction: column;
  gap: 18px; margin: 85px 0 0 32px;
}
.mobile-nav a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1.18rem; color: var(--secondary);
  border-radius: var(--radius-sm);
  padding: 12px 0 12px 7px;
  transition: color .22s, background .19s;
  min-width: 150px;
}
.mobile-nav a:hover,.mobile-nav a:focus {
  color: var(--neon);
  background: rgba(154,233,224,0.09);
  text-shadow: var(--neon-glow);
}
@media (max-width: 1023px) {
  .main-nav ul, .main-nav .cta.primary { display: none; }
  .mobile-menu-toggle { display: inline-block; }
  .main-nav { padding: 0 8px; }
}
@media (min-width: 1024px) {
  .mobile-menu, .mobile-menu-close, .mobile-menu-toggle { display: none!important; }
  .main-nav ul, .main-nav .cta.primary { display: flex; }
}

/* ========== SECTION STYLES ========== */
section { margin-bottom: 60px; padding: 40px 20px; border-radius: var(--radius); box-shadow: var(--shadow);
  background: rgba(32,41,50,0.92);
}
section.hero {
  background: linear-gradient(135deg, var(--primary) 75%, #232A2F 100%);
  margin-bottom: 60px;
  padding: 67px 0 37px 0;
  display: flex; align-items: center; box-shadow: 0 10px 60px 0 rgba(99,255,240,0.07);
}
.hero .container { align-items: center; }
.hero .content-wrapper { align-items: center; text-align: center; }
.hero h1 { color: #fff; font-size: 2.8rem; }
.hero h1 + p { color: var(--secondary); font-size: 1.28rem; margin-bottom: 28px; }
@media (max-width: 1023px) {
  section.hero { padding: 45px 8px 30px 8px; }
  .hero h1 { font-size: 2.1rem; }
}

.features ul, .services ul {
  width: 100%; display: flex; flex-direction: column; gap: 20px; margin-top: 18px; align-items: flex-start;
}
.features li, .services li {
  display: flex; align-items: center; gap: 14px; font-size: 1.07rem; border-left: 3px solid var(--secondary); padding-left: 15px;
  border-radius: var(--radius-sm); background: rgba(33, 42, 52, 0.16);
  box-shadow: 0 2px 13px 0 rgba(74,249,242,0.03);
}
.features li img { width: 28px; height: 28px; }
@media (max-width: 768px) {
  section { padding: 28px 5px; }
}

/* ======= CARDS & FLEX CONTAINERS ======= */
.card-container {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-bottom: 26px;
}
.card { margin-bottom: 20px; border-radius: var(--radius); box-shadow: var(--shadow-card);
  background: rgba(36,48,66,0.97); position: relative;
  padding: 32px 28px;
  display: flex; flex-direction: column;
}
.card-content {
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.content-grid {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between;
}
.text-image-section {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
@media (max-width: 768px) {
  .card-container { flex-direction: column; gap: 15px; }
  .card { padding: 22px 13px; }
  .content-grid, .text-image-section {
    flex-direction: column; gap: 18px;
  }
}

/* ===== CTA SECTION & BUTTONS ===== */
.cta {
  background: linear-gradient(90deg, #25494d 25%, #233B3F 100%);
  color: var(--secondary); text-align: center;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  margin-bottom: 60px; padding: 44px 10px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
}
.cta.primary,
button.cta.primary,
a.cta.primary {
  display: inline-block;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  outline: none; border: none;
  padding: 14px 34px;
  font-size: 1.17rem;
  border-radius: var(--radius-sm);
  color: #181e23;
  background: var(--secondary);
  box-shadow: 0 0 8px 0px #45fff5cc;
  text-shadow: none;
  font-weight: 700;
  transition: background 0.2s, color 0.19s, box-shadow 0.18s, letter-spacing 0.15s;
  letter-spacing: 0.04em;
  margin-top: 10px;
}
.cta.primary:hover,.cta.primary:focus{
  background: #75ffe7;
  color: var(--primary);
  box-shadow: 0 0 15px #64fff4, 0 0 2px #9AE9E0;
  letter-spacing: 0.08em;
  text-shadow: 0 0 5px #b3fff3, 0 0 2px #abfff5;
}

/* ==== FOOTER ==== */
footer {
  width: 100%; background: #1b2228; box-shadow: 0 -3px 12px 0 rgba(39,55,70,0.10); padding: 0 0 24px 0;
  margin-top: 80px;
}
footer .container { padding-top: 34px; padding-bottom: 8px; }
footer .content-wrapper {
  display: flex; flex-direction: row; align-items: flex-start; gap: 38px;
  justify-content: space-between;
}
footer .text-section { max-width: 340px; }
footer h3 { font-size: 1.14rem; color: var(--secondary); }
footer p, .footer-menu a { color: #fff; font-size: 1rem; }
.footer-menu {
  display: flex; align-items: center; gap: 0px; flex-wrap: wrap; margin-top: 11px;
}
.footer-menu a {
  display: inline-block; color: var(--secondary); font-size: 0.97rem; padding: 4px 7px; border-radius: 7px;
  margin-right: 2px; margin-left: 2px;
  transition: color 0.18s, background 0.13s;
}
.footer-menu a:hover,.footer-menu a:focus {
  color: var(--neon); background: rgba(44,250,231,0.08);
}
@media (max-width: 768px) {
  footer .content-wrapper { flex-direction: column; gap: 19px; }
  footer .container { padding-top: 22px; }
  .footer-menu { flex-direction: column; gap: 7px; }
}

/* ==== TESTIMONIALS ==== */
.testimonial-card {
  display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px;
  margin-bottom: 20px; background: #fff; color: #18232c;
  border-left: 5px solid var(--secondary); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.testimonial-card p { color: #1b2228; font-size: 1.13rem; }
.testimonial-card p:last-child { font-family: 'Montserrat', Arial, Helvetica, sans-serif; color: var(--primary); font-weight: 600; margin-top: 3px; font-size: 0.98rem; }

/* ===== FAQ LIST ===== */
.faq-list {
  width: 100%; display: flex; flex-direction: column; gap: 20px;
}
.faq-list dt {
  font-family: 'Montserrat', Arial, sans-serif; font-weight: 600;
  color: var(--secondary); margin-bottom: 8px; font-size: 1.17rem;
}
.faq-list dd {
  margin-bottom: 18px; color: var(--accent); padding-left: 18px;
}

/* ======= CARDS FOR PROJECTS/REFERENZEN ======= */
.card-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.card-grid .card { min-width: 260px; max-width: 350px; }

/* ===== FEATURE ITEM ===== */
.feature-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 15px;
}

/* ===== TEXT SECTIONS ===== */
.text-section {
  display: flex; flex-direction: column; gap: 13px; max-width: 780px;
}
.text-section ul, .text-section ol {
  margin-left: 0px; padding-left: 18px; display: flex; flex-direction: column; gap: 9px;
}
.text-section li {
  list-style: disc; color: var(--secondary);
  background: none; border: none; padding: 0; margin: 0;
  font-family: 'Source Sans Pro', Arial, sans-serif; font-size: 1.07rem;
}
.text-section a { color: var(--secondary); transition: color 0.18s; }
.text-section a:hover { color: var(--neon); }

/* ==== SECTION SPACING & FLEX ==== */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* === COOKIE CONSENT BANNER === */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: rgba(33,42,52,0.98);
  color: var(--accent);
  border-top: 3px solid var(--secondary);
  box-shadow: 0 -2px 27px #16282a88;
  padding: 18px 10px 15px 10px;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 25px;
  font-size: 1rem;
  animation: cookieSlideIn .52s cubic-bezier(.75,.15,.41,1);
}
@keyframes cookieSlideIn {
  0%{ transform: translateY(120%); opacity: 0;} 60%{ opacity:.6;} 100%{ transform:none; opacity: 1;}
}
.cookie-banner .cookie-actions {
  display: flex; gap: 15px;
}
.cookie-banner button {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: none;
  color: var(--primary);
  background: var(--secondary);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem; font-weight: 700;
  margin-right: 2px;
  box-shadow: 0 2px 12px #2dfde5b6;
  transition: background .2s, color .18s, box-shadow .18s;
}
.cookie-banner button.reject {
  background: #2a3240; color: var(--secondary); box-shadow: 0 2px 8px #53ffef7a;
}
.cookie-banner button.reject:hover { background: #18232c; color: var(--neon); }
.cookie-banner button.settings { background: none; color: var(--secondary); box-shadow: none; border: 1px solid #3efeea; }
.cookie-banner button.settings:hover { background: #19283a; color: var(--neon); }
.cookie-banner button:hover,
.cookie-banner button:focus {
  background: #b5fff7; color: var(--primary); box-shadow: 0 0 18px 0px #9ae9e0;
}

@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column; gap: 12px; align-items: flex-start; padding: 12px 4px 13px 5px;
  }
  .cookie-banner .cookie-actions { gap: 9px; }
}

/* === COOKIE MODAL === */
.cookie-modal {
  position: fixed; z-index: 9999;
  top: 0; left: 0; width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31,41,51,0.92);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.cookie-modal.active {
  opacity: 1; pointer-events: all;
}
.cookie-modal-dialog {
  background: #1f232c; color: #fff; padding: 33px 32px; border-radius: var(--radius);
  box-shadow: 0 7px 33px #23efeeb0, 0 2px 8px #0afbff40;
  min-width: 309px; max-width: 90vw; position: relative; display: flex; flex-direction: column; gap: 18px;
}
.cookie-modal-header { font-size: 1.23rem; color: var(--secondary); margin-bottom: 4px; }
.cookie-modal-close {
  position: absolute; top: 15px; right: 16px;
  background: none; font-size: 1.7rem; color: var(--secondary);
  border: none; cursor: pointer; border-radius: var(--radius-sm); transition: color .13s, background .13s;
  padding: 2px 7px;
}
.cookie-modal-close:hover { background: #202932; color: var(--neon); }
.cookie-category-list {
  display: flex; flex-direction: column; gap: 17px;
}
.cookie-category {
  display: flex; flex-direction: row; align-items: center; gap: 16px; justify-content: space-between;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #222b3b1c;
  font-size: 1rem;
}
.cookie-category label { color: var(--secondary); font-weight: 600; font-family: 'Montserrat', Arial, sans-serif; }
.cookie-category input[type='checkbox'] {
  width: 24px; height: 24px; accent-color: var(--secondary); margin-left: 10px;
}
.cookie-category .always-on {
  font-size: 0.91rem;
  color: #99e8e4; font-weight: 600; margin-left: 7px;
  letter-spacing: 0.03em;
}
.cookie-modal-actions {
  display: flex; gap: 14px; margin-top: 10px;
}
.cookie-modal-actions button {
  border-radius: var(--radius-sm); font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem; padding: 10px 21px; margin-top: 0;
}
@media (max-width: 480px) {
  .cookie-modal-dialog { padding: 16px 7px; min-width: 196px; }
}

/* ====== ANIMATIONS & INTERACTIONS ===== */
.cta.primary, .cookie-banner button, .mobile-menu-close, .mobile-menu-toggle, .footer-menu a, .main-nav a, .mobile-nav a {
  transition: background 0.2s, color 0.16s, box-shadow 0.19s, letter-spacing 0.11s;
}
.card, .testimonial-card {
  transition: box-shadow .21s, transform .18s;
}
.card:hover, .testimonial-card:hover {
  box-shadow: 0 2px 22px 0 #45e6e3af, 0 2px 10px 0 #71f8ffe0;
  transform: scale(1.025);
  z-index: 11;
}
section, .cta { transition: box-shadow .23s; }
section:hover, .cta:hover { box-shadow: 0 2px 32px #10ffe4a4; }

/* ==== RESPONSIVE FIXES & MOBILE LAYOUTS ==== */
@media (max-width: 850px) {
  .content-wrapper, .text-section, .features ul, .services ul {
    gap: 13px;
  }
}
@media (max-width: 600px) {
  h1 { font-size: 1.42rem; }
  .hero h1 { font-size: 1.3rem; }
  footer { margin-top: 38px; }
  .cta.primary, button.cta.primary, a.cta.primary { font-size: 1rem; padding: 11px 13px; }
}

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
  width: 11px; background: var(--bg-gradient-dark);
}
::-webkit-scrollbar-thumb {
  background: #293544; border-radius: 8px; box-shadow: 0 1px 5px #00fff99c;
}

/* ====== PRINT: Remove banners/menus ====== */
@media print {
  header, .mobile-menu, .cookie-banner, .cta, footer { display: none; }
  body { color: #222; background: #fff; }
}