:root{
  --ink:#233141;
  --accent:#184e7e;
  --bg:#ffffff;
  --panel:#f6f8fb;
  --border:#e6ebf1;
  --muted:#5a6a7a;
  --text:var(--ink);
  --radius:16px;
  --max:1020px;
  --brandblue:#141450;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration: underline; }

.wrap{ max-width:var(--max); margin:0 auto; padding:28px 18px 0; }

.top{ padding-bottom:18px; }

/* Header */
.header-hero{
  position: relative;
  padding-top:16px;
  margin-bottom:18px;
}

.header-hero .header-bg{
  position:relative;
  height:150px;
  border-radius:18px;
  background-image:url('innenalster.jpg');
  background-size:cover;
  background-position:center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.header-hero .header-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(245,247,250,0.25);
  border-radius:18px;
}

.header-hero .header-content{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:150px;
  pointer-events:none;
  display:flex;
  align-items:flex-start;
}

.logo-badge{
  pointer-events:auto;
  background:#ffffff;
  border-radius:16px;
  padding:10px 12px;
  margin-left:-8px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.logo-badge img{
  display:block;
  height:56px;
  width:auto;
}

/* Hero */
.hero{ padding: 12px 0 10px; }

.hero h1{
  font-size:clamp(34px,4.2vw,52px);
  letter-spacing:-0.02em;
  line-height:1.05;
  margin:0 0 14px;
  font-weight:760;
}

.hero-lead{ font-size:18px; margin:0 0 10px; max-width:76ch; }
.hero-sub{ color:var(--muted); font-size:16px; margin:0; max-width:100%; }

.statement{
  margin-top:16px;
  padding:12px 14px;
  background:var(--panel);
  border: 1px solid var(--border);
  border-radius:var(--radius);
  text-align:center;
  color:var(--brandblue);
}

.statement p{ margin:0; color:inherit; font-weight:400; }

.brand{
  color:var(--accent);
  font-weight:650;
  font-size:0.95em;
  letter-spacing:0.01em;
}

/* Chapters */
.chapter{
  margin-top:22px;
  padding:18px;
  background:var(--panel);
  border: 1px solid var(--border);
  border-radius:calc(var(--radius) + 2px);
}

.chapterhead{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}

.chaptertag{
  background:var(--accent);
  color:#fff;
  font-weight:750;
  padding:6px 10px;
  border-radius:10px;
  line-height:1;
  margin-top:4px;
  height: fit-content;
}

.kicker{
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
  letter-spacing:0.08em;
  margin:0 0 8px;
}

h2{ font-size:24px; margin:0 0 8px; letter-spacing:-0.01em; }
h3{ margin:0 0 6px; font-size:16px; letter-spacing:-0.01em; }

p{ margin:0 0 10px; }
p:last-child{ margin-bottom:0; }

.lead{ max-width:92ch; }

/* Grids and cards */
.grid2, .tilegrid, .contactgrid{ display:grid; gap:12px; }

.tile, .stile, .contactcard, .contactform{
  background:#fff;
  padding:16px;
  border: 1px solid var(--border);
  border-radius:var(--radius);
}

.tile{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.ticon, .sicon{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin-top:1px;
}

.ticon svg{
  width:20px;
  height:20px;
  stroke: var(--accent);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sicon svg{
  width:20px;
  height:20px;
  stroke: var(--accent);
  stroke-width:2.0;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.stile{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

/* Inline term tooltip */
.term{
  color:var(--accent);
  border-bottom:1px dotted rgba(24,78,126,0.55);
  cursor:help;
  position:relative;
}

.term:hover::after{
  content:attr(data-tip);
  position:absolute;
  left:0;
  top:1.6em;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--border);
  padding:6px 8px;
  border-radius:8px;
  font-size:12px;
  white-space:nowrap;
  z-index:10;
}

/* Lines with plus/minus icons (Variante 1) */
.lines{ margin-top:10px; }

.lines .line{
  position:relative;
  margin:0 0 8px 0;
  line-height:1.35;
  font-size:14.5px;
}

.tile.tile--before .lines .line::before,
.tile.tile--after  .lines .line::before{
  content:"";
  position:absolute;
  left:-18px;
  top:0.22em;
  width:12px;
  height:12px;
  background-repeat:no-repeat;
  background-size:12px 12px;
}

.tile.tile--before .lines .line::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%238b1d1d' stroke-width='2'/%3E%3Cline x1='7' y1='12' x2='17' y2='12' stroke='%238b1d1d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.tile.tile--after .lines .line::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%231f6f3f' stroke-width='2'/%3E%3Cline x1='12' y1='7' x2='12' y2='17' stroke='%231f6f3f' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='7' y1='12' x2='17' y2='12' stroke='%231f6f3f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 760px){
  .header-hero .header-bg{ height:130px; }
  .header-hero .header-content{ height:130px; }
  .logo-badge img{ height:52px; }
  .lines .line{ font-size:14px; }
}

/* Quiz */
.quiz{
  margin-top:10px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
}

.qrow{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 8px;
  border-radius:12px;
}

.qrow:hover{ background:var(--panel); }

.qtext{ flex:1 1 auto; color:var(--ink); }

.qyes{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-weight:650;
  user-select:none;
}

.qyes input{
  width:18px;
  height:18px;
  accent-color: var(--accent);
}

.quizbar{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  padding:8px;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--border);
}

.quizhint{ color:var(--muted); font-size:13px; }

.result{ margin-top:12px; }

.resultbox{
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
}

.resulttitle{
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}

/* Contact */
/* Contact card content */
.contactcard p{ max-width:none; margin:0; padding:0; }
.contactcard .citem{ padding-top:12px; }
.contactcard .citem:first-child{ padding-top:0; }
.contactcard .ctitle{ font-weight:650; }
.contactcard .cbody{ color: var(--text); margin-top:4px; }
.contactform .hint{ max-width:none; margin-top:10px; padding:0; font-size:12px; }
.formstatus{ margin-top:10px; font-size:13px; color:var(--muted); }
.formstatus[data-ok="1"]{ color: var(--accent); }

.mail{ color: var(--accent); }

.contactcard .closing{
  margin-top:10px;
  font-weight:650;
}

.frow{ display:grid; gap:6px; margin-bottom:10px; }

label{ font-size:13px; color:var(--muted); font-weight:650; }

.checkrow{ display:flex; align-items:center; gap:8px; font-weight:400; color:var(--muted); }
.checkrow input{ width:18px; height:18px; accent-color: var(--accent); }
.frow-check{ margin-top:-2px; }

input, textarea{
  width:100%;
  padding:7px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  font:inherit;
  background:#fff;
  color:var(--ink);
}

input:focus, textarea:focus{
  outline:2px solid rgba(24,78,126,0.18);
  outline-offset:0;
}

.cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:12px;
  border:1px solid var(--accent);
  font-weight:400;
  font-size:14px;
  text-decoration:none;
}

.btn.invert{
  background: var(--accent);
  color:#fff;
}

.btn.invert:hover{ filter: brightness(0.98); }

.hint{
  color:var(--muted);
  font-size:13px;
  margin-top:8px;
}

/* Footer and legal drawer */
.footer-dark{
  margin-top:18px;
  background: var(--accent);
  color:#fff;
  border-radius:0;
}

.footrow{
  max-width:var(--max);
  margin:0 auto;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.footlinks{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:flex-end;
}

.footlinks a{
  color:#fff;
  font-size:13px;
  text-decoration:none;
}

.footlinks a:hover{ text-decoration: underline; }

.copy{ font-size:12px; }

.legal-drawer{
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px 12px;
}

.legal-inner{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px 12px;
  margin-top:10px;
}

.legal-title{
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

.legal-body p{ margin:0 0 10px; }
.legal-body p:last-child{ margin-bottom:0; }
.legal-body .mail{ color:var(--accent); }

.legal-section{ margin-top:16px; }

/* Service tiles as expandable details (no scroll jump) */
.svc-details{
  display:flex;
  flex-direction:column;
  height:100%;
  margin:0;
  padding:0;
}

.svc-details > summary{
  list-style:none;
}

.svc-details > summary::-webkit-details-marker{
  display:none;
}

.svc-summary{
  cursor:pointer;
  flex:1 1 auto;
}

/* Equal tile heights within a row on desktop */
/* Hover and open state: invert colors (including CompliTech) */
.svc-summary:hover{
  text-decoration:none;
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
}

.svc-summary:hover .sicon svg,
.svc-summary:hover .brand{
  color:#fff;
}

.svc-details[open] > summary{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
}

.svc-details[open] > summary .sicon svg,
.svc-details[open] > summary .brand{
  color:#fff;
}

/* Detail box appears directly under the clicked service tile (same column) */
.svc-detailwrap{
  margin-top:12px;
}

.svc-detail{
  width:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.svc-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0;
  padding:16px 16px 0;
}

.svc-detail-title{
  font-weight:750;
  font-size:16px;
  letter-spacing:-0.01em;
}

.svc-close{
  color:var(--accent);
  font-weight:650;
  font-size:13px;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  white-space:nowrap;
}

.svc-close:hover{
  text-decoration:underline;
}

.svc-detail-body{
  padding:0 16px 12px;
}

.svc-detail-h{
  margin:12px 0 6px;
  font-size:14px;
  color:var(--accent);
}

.svc-detail-list{
  margin:0 0 10px 18px;
  padding:0;
}

.svc-detail-list li{
  margin:0 0 6px;
  color:var(--ink);
  font-size:14px;
  line-height:1.35;
}

/* Equal heights for service tiles per row (desktop) */

/* Prevent open details from stretching the service tile height */
/* Stable equal tile heights (desktop) */
@media(min-width:920px){
  .grid2, .tilegrid, .contactgrid{ grid-template-columns:1fr 1fr; }

  .tilegrid > .svc-details{ align-self:stretch; }
  .svc-details{ display:block; }
  .svc-summary{ height:auto; min-height:180px; }
}

/* Schnelltest Nummerierung */
.qnum{
  font-weight:700;
  color:#141450;
  margin-right:8px;
}




/* Kontakt (IV) - linke Karte: klare Gliederung ohne Layoutbruch */
.contactcard .citem + .citem{
  margin-top:18px;
}

.contactcard .ctitle{
  color:var(--accent);
  font-weight:650;
  font-size:0.88rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin:0 0 6px 0;
}

.contactcard .cbody{
  margin:0;
}


.form-hint {
  font-size: 0.85em;
  opacity: 0.8;
}