/* style.css
   Mobile-first, saubere und kommentierte Styles
   Farben: Dunkelblau (Haupt), Weiß (Hintergrund), Grün (Akzent)
*/

/* =========================
   Root variables & reset
   ========================= */
:root{
  --color-bg: #ffffff;
  --color-text: #111416;
  --color-primary: #0b2545; /* dunkles Blau */
  --color-accent: #2ea44f;  /* freundliches Grün */
  --color-muted: #6b6f76;
  --radius: 10px;
  --max-width: 1100px;
  --gap: 1rem;
  --container-padding: 1rem;
  --bar-width: 56px; /* Accent bar width */
  --progress: 0; /* 0..1, updated by JS */
  --header-height: 0px; /* set by JS */
}

*,
*::before,
*::after { box-sizing: border-box; }

html,body{
  height:100%;
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
  /* ensure content isn't covered by fixed header; JS will set a precise value */
  padding-top: var(--header-height);
}

/* Utility container */
.container{
  width:100%;
  padding-left:var(--container-padding);
  padding-right:var(--container-padding);
  margin-left:auto;
  margin-right:auto;
}

/* Constrain on larger screens */
@media (min-width: 700px){
  .container{
    max-width:var(--max-width);
  }
}

/* =========================
   Header / Navigation
   ========================= */
.header{
  border-bottom:2px solid rgba(11,37,69,0.08);
  background:#ffffff;
  box-shadow: 0 3px 10px rgba(11,37,69,0.03);
  position:fixed; /* sticky */
  top:0; left:0; right:0;
  z-index:1200;
}

/* small accent bar at the bottom of header; position is animated via --progress (0..1) */
.header::after{
  content: '';
  position:absolute;
  left:0; /* base position; transform moves it */
  bottom:-3px;
  width:var(--bar-width);
  height:4px;
  background:var(--color-accent);
  border-radius:3px;
  transform: translateX(calc(var(--container-padding) + var(--progress) * (100vw - var(--bar-width) - (2 * var(--container-padding)))));
  transition: transform .35s cubic-bezier(.2,.9,.3,1), background .15s ease;
  pointer-events:none;
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 0;
}

.brand__name{
  font-weight:800;
  color:var(--color-primary);
  font-size:1.15rem;
  letter-spacing:0.2px;
}

/* Logo in header */
.brand__link{ display:inline-flex; align-items:center; margin-right:0.6rem; }
.brand__logo{ display:block; width:48px; height:auto; max-height:48px; }

@media (min-width:700px){
  .brand__logo{ width:64px; max-height:64px; }
}

/* Navigation */
.nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:0.8rem;
}

.nav__link{
  text-decoration:none;
  color:var(--color-primary);
  font-weight:600;
  padding:10px 12px;
  border-radius:10px;
  transition: background-color .15s ease, color .12s ease, transform .06s ease, box-shadow .12s ease;
}

.nav__link:hover,
.nav__link:focus-visible{
  background:var(--color-primary);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(11,37,69,0.06);
  outline: none;
}

/* active nav link */
.nav__link.active{
  background:var(--color-primary);
  color:#fff;
}

/* =========================
   Hero
   ========================= */
.hero{
  padding:2.25rem 0;
  background:linear-gradient(180deg, rgba(11,37,69,0.02), transparent 50%);
}

.hero__inner{
  text-align:left;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
}

.hero__title{
  margin:0 0 0.5rem 0;
  font-size:1.5rem;
  line-height:1.05;
  color:var(--color-primary);
}

.hero__subtitle{
  margin:0 0 1.25rem 0;
  color:var(--color-muted);
  font-size:1rem;
}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-block;
  text-decoration:none;
  text-align:center;
  border-radius:10px;
  padding:12px 16px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .15s ease, transform .05s ease, box-shadow .12s ease;
  border: none;
  color:var(--color-primary);
  background:transparent;
}

.btn:focus-visible{
  outline:3px solid rgba(46,164,79,0.18);
  outline-offset:2px;
}

.btn--primary{
  background:var(--color-accent);
  color:#fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.03);
}

.btn--primary:hover,
.btn--primary:focus-visible{
  background:#269a44; /* etwas dunklerer Ton */
  transform:translateY(-1px);
}

.btn--outline{
  border:1px solid var(--color-primary);
  color:var(--color-primary);
  background:transparent;
  font-weight:700;
  padding:10px 14px;
  border-radius:10px;
  transition: background-color .12s ease, transform .06s ease, box-shadow .12s ease;
}

.btn--outline:hover,
.btn--outline:focus-visible{
  background:var(--color-primary);
  color:#fff;
  transform:translateY(-1px);
  box-shadow: 0 4px 12px rgba(11,37,69,0.08);
}

/* keep previous subtle variant for small buttons */
.btn--outline.btn--small{ padding:8px 12px; }


.btn--large{
  padding:14px 20px;
  font-size:1.05rem;
}

.btn--small{
  padding:8px 12px;
  font-size:0.95rem;
}

/* =========================
   Services grid & cards
   ========================= */
.section__title{
  font-size:1.125rem;
  margin:0 0 0.75rem 0;
  color:var(--color-primary);
  font-weight:700;
}

.services{
  padding:1rem 0 0;
}

.services__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:0.75rem;
}

/* Two-column at medium screens */
@media (min-width:700px){
  .services__grid{
    grid-template-columns:repeat(2, 1fr);
    gap:1rem;
  }
}

/* Card */
.card{
  background: #fbfeff; /* subtle off-white to lift cards */
  border:1px solid rgba(11,37,69,0.08);
  padding:1.1rem;
  border-radius: calc(var(--radius) + 2px);
  display:flex;
  gap:1rem;
  align-items:flex-start;
  box-shadow: 0 4px 10px rgba(11,37,69,0.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover,
.card:focus-within{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(11,37,69,0.06);
}

.service-card__icon{
  width:54px;
  height:54px;
  min-width:54px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid rgba(11,37,69,0.04);
  flex-shrink:0;
}

.service-card__svg{ display:block; width:40px; height:40px; }

.service-card__svg{ display:block; width:40px; height:40px; }


/* Title & description */
.service-card__title{
  font-size:1rem;
  margin:0 0 0.35rem 0;
  color:var(--color-primary);
  font-weight:700;
}

.service-card__desc{
  margin:0;
  color:var(--color-muted);
  font-size:0.95rem;
}

.service-card__more{ margin-top:0.75rem; }

.btn--small{
  padding:8px 12px;
  font-size:0.95rem;
  border-radius:8px;
  font-weight:700;
}

/* =========================
   Trust section
   ========================= */
.trust{
  margin-top:1.5rem;
  padding:1rem 0;
}

.trust__inner{
  text-align:left;
}

.trust__list{
  list-style:none;
  margin:0.5rem 0 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.trust__item{
  display:flex;
  gap:0.6rem;
  align-items:center;
  color:var(--color-muted);
  font-weight:600;
}

/* small check mark using pseudo element */
.trust__item::before{
  content: "";
  display:inline-block;
  color:var(--color-accent);
  font-size:0.9rem;
  line-height:1;
}
/* Über uns / Preisbereich */
.about{
  margin-top:1.25rem;
  padding:0.75rem 0;
}
.about__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0.75rem;
}
.about__item-title{
  font-size:0.98rem;
  margin:0 0 0.25rem 0;
  color:var(--color-primary);
  font-weight:700;
}
.about__item p{ margin:0; color:var(--color-muted); }
@media (min-width:700px){
  .about__grid{ grid-template-columns:repeat(2,1fr); }
}

.pricing{
  margin-top:1.25rem;
  padding:0.75rem 0;
}
.pricing__lead{ color:var(--color-muted); margin:0 0 0.5rem 0; }
.pricing__list{ margin:0 0 0 1.1rem; color:var(--color-muted); }
.pricing__list li{ margin:0.35rem 0; }
.pricing__note{ font-size:0.95rem; color:var(--color-muted); margin-top:0.5rem; }
/* =========================
   Contact CTA
   ========================= */
.contact-cta{
  margin-top:1.5rem;
  padding:1rem 0 2rem;
  border-top:1px solid #f3f4f6;
}

.contact-cta__actions{
  margin-top:0.75rem;
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
}

/* =========================
   Footer
   ========================= */
.footer{
  border-top:1px solid #eef0f2;
  padding:1rem 0;
  margin-top:2rem;
}

.footer__inner{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  justify-content:space-between;
  flex-direction:column;
}

.brand--small{
  font-weight:700;
  color:var(--color-primary);
  margin-bottom:0.5rem;
}

.contact{
  font-size:0.95rem;
  color:var(--color-muted);
  line-height:1.4;
}

.footer__links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1rem;
}

.footer__links a{
  color:var(--color-muted);
  text-decoration:none;
  font-size:0.95rem;
}

/* Larger screens: footer layout */
@media (min-width:700px){
  .footer__inner{
    flex-direction:row;
    align-items:center;
  }
}

/* =========================
   Accessibility & fine tuning
   ========================= */
/* Make text non-selectable to discourage copying via mouse
   Note: this only prevents selection in the UI; it does not prevent
   copying via view-source, dev tools, or other methods. */
html, body, .site, .container, .header, .nav, main, footer, h1, h2, h3, h4, p, li, a, address {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
  user-select: none;         /* Standard */
  -webkit-touch-callout: none; /* iOS Safari */
}

/* Allow selecting inside form controls if present */
input, textarea { 
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Prevent image dragging */
img{ -webkit-user-drag: none; user-drag: none; }

a{ color:inherit; }

@media (min-width:1000px){
  .hero__title{ font-size:2rem; }
  .hero__subtitle{ font-size:1.125rem; }
  .service-card__desc{ font-size:1rem; }
}

/* =========================
   Theme toggle & Dark mode
   ========================= */
html, body { transition: background-color .18s ease, color .15s ease; }

/* screen-reader helper */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Toggle button: improved visibility in light mode and vertical centering of knob */
.theme-toggle{ position:absolute; right:var(--container-padding); top:50%; transform:translateY(-50%); width:48px; height:28px; background: rgba(11,37,69,0.14); border-radius:999px; padding:4px; border:1px solid rgba(11,37,69,0.18); display:inline-flex; align-items:center; cursor:pointer; transition: background .12s ease, border-color .12s ease; z-index:1300; }
.theme-toggle:focus{ outline:3px solid rgba(46,164,79,0.18); outline-offset:2px; }
.theme-toggle .toggle-track{ display:block; width:100%; height:100%; position:relative; border-radius:999px; }
.theme-toggle .toggle-knob{ position:absolute; left:4px; top:50%; width:18px; height:18px; border-radius:50%; background:#fff; transition: transform .18s ease, background .12s ease; box-shadow:0 3px 6px rgba(0,0,0,0.09); transform: translate(0, -50%); }
.theme-toggle[aria-pressed="true"]{ background:var(--color-accent); border-color:transparent; }
.theme-toggle[aria-pressed="true"] .toggle-knob{ transform: translate(20px, -50%); background:#fff; }

/* Small screens: use a single clickable dot (no track/knob) to avoid visual clutter */
@media (max-width:600px){
  .theme-toggle{ position:static; right:auto; top:auto; transform:none; order:2; margin-left:0.6rem; margin-right:0.4rem; width:24px; height:24px; padding:0; align-self:center; background:transparent; border-radius:50%; border:0; display:inline-flex; align-items:center; justify-content:center; }
  /* hide desktop track/knob visuals on mobile */
  .theme-toggle .toggle-track, .theme-toggle .toggle-knob{ display:none !important; }
  /* Indicator dot */
  .theme-toggle::before{ content:''; width:12px; height:12px; border-radius:50%; background: rgba(11,37,69,0.10); display:block; transition: background .12s ease, transform .12s ease; box-shadow:none; }
  /* pressed = dark mode active -> filled accent */
  .theme-toggle[aria-pressed="true"]::before{ background:var(--color-accent); }
  .theme-toggle:focus::before{ outline:3px solid rgba(46,164,79,0.18); outline-offset:3px; }
  .brand{ order:1; }
  .nav{ order:3; margin-left:auto; }
  .header__inner{ gap:0.5rem; }
  .nav__list{ gap:0.5rem; align-items:center; }
  .nav__list li:last-child{ margin-right:0.4rem; }
}

/* Very small screens: stack card content and center for better legibility */
@media (max-width:480px){
  .card{ flex-direction:column; align-items:center; text-align:center; padding:1rem; }
  .service-card__icon{ margin-bottom:0.6rem; width:64px; height:64px; min-width:64px; border-radius:14px; }
  .service-card__svg{ width:44px; height:44px; }
  .service-card__title{ margin-top:0; }
  .service-card__more{ margin-top:0.85rem; }
}

/* Dark theme variables: applied by setting data-theme="dark" on <html> */
[data-theme="dark"]{
  --color-bg:#041219; /* darker background for stronger contrast */
  --color-text:#eaf6ff; /* brighter text */
  --color-primary:#cfeeff; /* brighter primary */
  --color-muted:#9bb4bd; /* slightly warmer muted color */
  --color-accent:#39b96a; /* slightly greener accent for better contrast */
}
[data-theme="dark"] .header{ background:#041219; border-bottom-color: rgba(255,255,255,0.04); box-shadow: 0 6px 18px rgba(0,0,0,0.45); }

/* Cards & services in dark mode */
[data-theme="dark"] .card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.006)); border-color: rgba(255,255,255,0.03); box-shadow:none; }
[data-theme="dark"] .service-card__icon{ background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); }
[data-theme="dark"] .service-card__title{ color:var(--color-primary); }
[data-theme="dark"] .service-card__desc{ color:var(--color-muted); }
[data-theme="dark"] .hero{ background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 50%); }
[data-theme="dark"] .btn--outline{ border-color: rgba(255,255,255,0.08); color:var(--color-primary); }

/* UE5 image gallery */
.ue-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; margin-top:1rem; }
@media (min-width:700px){ .ue-gallery{ grid-template-columns:repeat(3,1fr); gap:0.75rem; } }
.ue-gallery figure{ margin:0; border-radius:8px; overflow:hidden; background: #fff; }
.ue-gallery img{ display:block; width:100%; height:auto; aspect-ratio:16/9; min-height:120px; object-fit:cover; object-position:center; transition: transform .18s ease; }
.ue-gallery a{ display:block; text-decoration:none; color:inherit; }
.ue-gallery figure:hover img{ transform: scale(1.03); }

/* Lightbox overlay (progressive enhancement) */
.lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(4,6,7,0.8); z-index:1600; padding:1rem; }
.lightbox[aria-hidden="false"]{ display:flex; }
.lightbox__img{ max-width:90%; max-height:80%; box-shadow:0 10px 30px rgba(0,0,0,0.6); border-radius:8px; }
.lightbox__caption{ color:rgba(255,255,255,0.92); margin-top:0.6rem; text-align:center; font-size:0.95rem; }
.lightbox__close{ position:absolute; right:1rem; top:1rem; background:transparent; border:1px solid rgba(255,255,255,0.12); color:#fff; padding:6px 8px; border-radius:6px; cursor:pointer; }

[data-theme="dark"] .lightbox{ background: rgba(4,6,7,0.92); }
@media (max-width:480px){ .ue-gallery img{ min-height:100px; } .lightbox__img{ max-width:100%; max-height:70%; } }

/* Ensure the accent bar uses the accent variable */
.header::after{ background: var(--color-accent); }