:root{
  --bg:#0b0f14;
  --card:#111722;
  --elev:#0d1420;
  --text:#eaf1ff;
  --muted:#a9b4c7;
  --primary:#0b4aa6;
  --primary-2:#0e6eea;
  --accent:#16a34a;
  --warn:#f59e0b;
  --border:#1b283b;
  --shadow: 0 10px 30px rgb(0 0 0 / 35%);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,#06090f, #09101b 40%, #09121e);color:var(--text);font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";}
a{color:var(--primary-2);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1150px, 92vw);margin:0 auto}

header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgb(9 16 27 / 85%), rgb(9 18 30 / 65%));
  border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:700;letter-spacing:.3px}
.brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;box-shadow:var(--shadow)}
.brand .logo svg{width:20px;height:20px;fill:white}
.brand span{font-family:inherit;font-weight:700;letter-spacing:.3px}
/* Consistent blue focus ring for links and buttons (incl. Safari) */
a:focus, a:focus-visible,
.btn:focus, .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgb(14 110 234 / 50%);
  border-color:rgb(14 110 234 / 70%);
  border-radius:10px;
}

/* Disable focus ring for links inside the Imprint content only */
.imprint-block a:focus,
.imprint-block a:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
.h2-sub{margin:-.2rem 0 1rem;color:var(--muted);font-size:1rem}
.expertise{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.expertise .pill{font-size:.8rem}
.nav a{color:var(--text);opacity:.9}
.nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
.nav .cta{padding:.6rem .9rem;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary-2));font-weight:600}
.nav .cta:hover{filter:brightness(1.08)}
.nav .lang{font-size:1.2rem;line-height:1}

@media (width <=880px){
  .nav ul li.hide-sm{display:none}
}

/* Hero */
.hero{padding:56px 0 32px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}

@media (width <=980px){.hero-grid{grid-template-columns:1fr;gap:1.2rem}}
.kicker{display:inline-flex;align-items:center;gap:.5rem;background:rgb(27 40 59 / 50%);border:1px solid var(--border);padding:.35rem .6rem;border-radius:999px;font-size:.8rem;color:var(--muted)}
.title{font-size:clamp(1.9rem, 2.2rem + .8vw, 3.1rem);line-height:1.05;margin:.6rem 0 .8rem;font-weight:800;letter-spacing:.2px}
.subtitle{font-size:1.1rem;color:var(--muted);max-width:58ch}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem}
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.05rem;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,#0d1420,#0b1220);color:var(--text);font-weight:600}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent}
.btn.ghost{background:transparent}
.badges{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;color:var(--muted);font-size:.9rem}
.card{background:linear-gradient(180deg, #0c121c, #0b101a);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}

/* Section skeletons */
section{padding:44px 0;border-top:1px solid var(--border)}
h2{font-size:1.8rem;margin:0 0 1rem}
.muted{color:var(--muted)}

/* Services */
.grid{display:grid;gap:1rem}
.grid.cols-3{grid-template-columns:repeat(3, 1fr)}
.grid.cols-2{grid-template-columns:repeat(2, 1fr)}

@media (width <=980px){.grid.cols-3{grid-template-columns:1fr 1fr}}

@media (width <=680px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

/* Tighter vertical rhythm on smaller screens */
@media (width <=980px){
  section{padding:36px 0}
  .hero{padding:44px 0 28px}
}
@media (width <=680px){
  section{padding:28px 0}
  .hero{padding:36px 0 24px}
}
.service{padding:1rem;border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(180deg,#0d1420,#0a0f18)}
.service h3{margin:.2rem 0 .4rem;font-size:1.1rem}
.service p{margin:0;color:var(--muted)}
.service .icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,#12315a,#0b4aa6);margin-bottom:.3rem}

/* About */
.about{display:block}
.about .panel{padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,#0d1420,#0b101a)}

/* (Testimonials CSS can be removed later if ungenutzt)
.testimonial{padding:1rem;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,#0d1420,#0a0f18);position:relative}
.quote{font-style:italic}
.who{margin-top:.8rem;color:var(--muted);font-size:.95rem}
*/

/* Code blocks for DNS examples */
pre{background:#0d1420;border:1px solid var(--border);border-radius:12px;padding:.9rem;overflow:auto;color:var(--muted)}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Contact */
form{display:grid;gap:.8rem}
input, textarea{width:100%;padding:.9rem;border-radius:12px;border:1px solid var(--border);background:#0d1420;color:var(--text);font-size:1rem;line-height:1.4}
label{font-size:.95rem;color:var(--muted)}
.small{font-size:.85rem;color:var(--muted)}

/* Improve label-to-field spacing in contact form */
#contactForm label:not(.checkbox){display:block;margin-bottom:.7rem}

/* Larger placeholder text to match input size */
input::placeholder, textarea::placeholder{font-size:inherit;color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}

@media (width <=680px){.row{grid-template-columns:1fr}}

.checkbox{
  display:grid;
  grid-template-columns: 20px 1fr; /* checkbox + text */
  gap:.6rem;
  align-items:start;
  font-size:.95rem;
  color:var(--muted);
  line-height:1.45;
  margin-top:.2rem;
}

.checkbox input{
  width:18px;
  height:18px;
  margin-top:.15rem; /* aligns with first line of text */
}

.checkbox span{
  display:block;
}
/* moved above with contact form tweaks */

/* Contact submit: slimmer, sleeker */

/* Prevent full-width stretch in grid */
#contactForm .btn{ justify-self:start; }

#contactForm .btn.primary{
  padding:.55rem .9rem;
  border-radius:999px;
  font-size:.9rem;
  line-height:1.1;
  border-color:rgb(255 255 255 / 6%);
  box-shadow:0 2px 10px rgb(14 110 234 / 16%);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}

#contactForm .btn.primary:hover{
  filter:brightness(1.07);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgb(14 110 234 / 18%);
}

#contactForm .btn.primary:active{
  transform:none;
  filter:brightness(1.02);
  box-shadow:0 2px 10px rgb(14 110 234 / 16%);
}

/* Ensure consistent text color in About lists */
.about .panel ul{color:var(--muted)}
.about .panel ul li{color:inherit}

/* Obfuscation reveal styles */
.reveal-link{cursor:pointer;text-decoration:underline;color:var(--primary-2)}
.obf{user-select:none}
.revealed{user-select:text}

/* Dialog styling */
dialog{
  padding:0;
  width:min(640px, 92vw);
  border:1px solid var(--border);
  border-radius:12px;
  background:linear-gradient(180deg,#0c121c,#0b101a);
  color:var(--text);
  box-shadow: var(--shadow);
}
dialog::backdrop{ background: rgb(0 0 0 / 60%); }
dialog .content{ padding:1rem 1rem .5rem; }
dialog h3{ margin:0 0 .5rem; }
dialog p, dialog address{ color:var(--muted); }
dialog .actions{ display:flex; justify-content:flex-end; padding:.5rem 1rem 1rem; }
dialog .actions .btn{ padding:.5rem .8rem; font-size:.9rem; border-radius:8px; }

/* Imprint block */
.imprint-block{ padding:.2rem 0 0; }
.imprint-block strong{ display:block; margin:.6rem 0 .2rem; }
.imprint-block address{ font-style:normal; line-height:1.5; }

/* Gate / hint text (for future Turnstile; not active yet) */
.gate-info{ margin:.4rem 0 0; }

/* Footer */
footer{padding:26px 0;border-top:1px solid var(--border);color:var(--muted);font-size:.95rem}
.foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.foot a{color:var(--muted);text-decoration:underline dotted}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.on{opacity:1;transform:none}

/* Utility */
.pill{display:inline-flex;gap:.4rem;align-items:center;padding:.35rem .6rem;border-radius:999px;border:1px solid var(--border);background:#0d1420;color:var(--muted);font-size:.85rem}
.spacer{height:12px}
/* Inline-style replacements */
.card-padding{padding:1rem}
.h3-spacing{margin:.2rem 0 .6rem}
.list-compact{margin:0;padding-left:1.1rem;line-height:1.5}
.grid-top-margin{margin-top:1rem}
.list-relaxed{line-height:1.6}
.small-top-spacing{margin-top:.6rem}
.main-pad-lg{padding:60px 0}