:root{
  --bg:#0b1220;
  --card:#0f1a2e;
  --text:#e9eef8;
  --muted:#b7c2d6;
  --line:rgba(255,255,255,.10);
  --btn:#e9eef8;
  --btnText:#0b1220;
  --shadow: 0 18px 55px rgba(0,0,0,.35);
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  background:radial-gradient(1200px 700px at 20% -10%, #1a2a4a 0%, var(--bg) 55%) fixed;
  color:var(--text)
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:22px}

.nav{
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.55);
  border-bottom:1px solid var(--line);
}
.navInner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;flex-direction:column;line-height:1;letter-spacing:-.02em}
.brand b{font-size:18px}
.brand span{font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:.10em}

.menu{display:flex;gap:16px;align-items:center}
.menu a{font-size:14px;color:var(--muted);padding:10px 10px;border-radius:12px}
.menu a:hover{background:rgba(255,255,255,.06);color:var(--text)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;
  border:1px solid rgba(233,238,248,.35);
  background:rgba(233,238,248,.08);
  color:var(--text);font-weight:600;font-size:14px;
}
.btnPrimary{
  background:var(--btn);color:var(--btnText);border-color:var(--btn);
  box-shadow: 0 10px 28px rgba(233,238,248,.12);
}

.hero{padding:54px 0 26px}
.heroGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:stretch}
.h1{font-size:44px;letter-spacing:-.04em;line-height:1.05;margin:0 0 14px}
.lead{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 22px;max-width:58ch}

.pillRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.pill{
  font-size:12px;color:var(--muted);
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.cardPad{padding:18px}

.kicker{color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
.miniTitle{font-size:16px;margin:0 0 10px}
.list{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}
.ctaRow{display:flex;gap:12px;flex-wrap:wrap}

.section{padding:30px 0}
.sectionTitle{font-size:24px;margin:0 0 14px;letter-spacing:-.02em}
.sectionText{margin:0 0 18px;color:var(--muted);line-height:1.7;max-width:78ch}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.serviceBox{padding:16px}
.serviceBox ul{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.75}

.item h3{margin:0 0 8px;font-size:16px}
.item p{margin:0;color:var(--muted);line-height:1.65;font-size:14px}

.divider{height:1px;background:var(--line);margin:14px 0}

label{display:block;font-size:13px;color:var(--muted);margin:0 0 8px}
input, textarea{
  width:100%;padding:12px 12px;border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);outline:none;
}
input:focus,textarea:focus{border-color:rgba(233,238,248,.45)}
textarea{min-height:130px;resize:vertical}

.footer{padding:28px 0 40px;color:var(--muted);font-size:13px}
.small{font-size:12px;color:var(--muted)}

@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .h1{font-size:38px}
  .menu{gap:6px}
}
/* === Lesbarkeit verbessern === */

/* Grundtext heller */
body, p, li {
  color: #eef2fb;
}

/* Sekundärer Text (nicht zu dunkel) */
.sectionText,
.lead,
.list,
.serviceBox ul,
.footer,
.small {
  color: #cfd7ea;
}

/* Überschriften klarer */
h1, h2, h3, h4 {
  color: #ffffff;
}

/* Karten-Inhalt */
.card p,
.card li {
  color: #dbe2f3;
}

/* Links besser sichtbar */
a {
  color: #f1f5ff;
}
a:hover {
  opacity: 0.85;
}
/* === Joomla Cassiopeia Header komplett ausblenden === */
header.header,
.header,
.site-header {
  display: none !important;
}
/* Joomla Cassiopeia Header entfernen */
header.header,
.site-header,
.header {
  display: none !important;
}
/* === Cassiopeia Header/Topbar komplett entfernen === */
header.header,
.site-header,
.header,
.top-bar,
.topbar,
.navbar,
.container-header {
  display: none !important;
}

/* Rest-Abstände oben entfernen */
body,
.main,
.site,
#site,
.container,
.container-component,
#system-message-container,
#system-debug,
.com-content-article {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Falls Cassiopeia ein "page header" ausgibt */
.page-header,
h1.page-title,
.page-title {
  display: none !important;
}
/* Letzter Fix: Cassiopeia Wrapper oben entfernen */
#wrap,
.wrapper,
.site-grid,
.grid-child,
.container-top,
header + .container,
header + .site,
header + main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* "Aktuelle Seite: Startseite" entfernen */
.page-header,
.page-header .page-title,
.page-title,
.page-heading,
div.page-header,
h1.page-title,
h1, .current-page, .current {
  display: none !important;
}
/* ===== FINAL: Cassiopeia Page Header & Seitentitel komplett entfernen ===== */

/* Page Header (Aktuelle Seite: …) */
.page-header,
.page-header h1,
.page-header .page-title,
.page-title,
.page-heading,
.current-page,
div.page-header,
header.page-header {
  display: none !important;
}

/* Breadcrumb / Seitentext oben */
.breadcrumb,
.breadcrumbs,
nav.breadcrumb,
ol.breadcrumb {
  display: none !important;
}

/* Container, der den Header trägt */
.container-header,
.container-top,
.site-header,
header.header {
  display: none !important;
}

/* Sicherheits-Fallback: oberer Abstand */
body,
main,
#main,
.container,
.container-component {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.contact-form {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.25);
  color: #fff;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255,255,255,0.6);
}

.contact-consent {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}

.contact-consent a {
  color: #fff;
  text-decoration: underline;
}
.small { font-size: 12.5px; line-height: 1.65; }
.small p { margin: 0 0 12px; }
/* ===== Legal (Impressum/Datenschutz) ===== */
.legal .legalHead { margin-bottom: 10px; }
.legalCard { position: relative; overflow: hidden; }
.legalTop {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom: 10px;
}
.legalTitle { margin:0; font-size:16px; letter-spacing:-.01em; }
.legalTag {
  font-size:12px; color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 6px 10px; border-radius: 999px;
}
.legalBody { display:grid; gap: 10px; }
.legalStrong { margin:0; font-weight:700; }
.legalLine { margin:0; color: rgba(255,255,255,.78); line-height:1.6; }
.legalGrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.legalLabel { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.55); margin-bottom:4px; }
.legalSmall { margin:0; color: rgba(255,255,255,.72); line-height:1.65; font-size: 12.5px; }

.legalDetails {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px 12px;
}
.legalDetails summary {
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  color: rgba(255,255,255,.9);
}
.legalDetails summary::-webkit-details-marker { display:none; }
.legalDetails summary::after{
  content:"+";
  float:right;
  opacity:.75;
}
.legalDetails[open] summary::after{ content:"–"; }
.legalDetails p { margin-top: 10px; }

@media (max-width: 980px){
  .legalGrid { grid-template-columns: 1fr; }
}