/* KAAR Consult — Legal Pages Styling */
/* Uses Basier Circle from colors_and_type.css */

:root{
  --velvet:#02322E;
  --velvet-deep:#011f1c;
  --mint:#8CACA0;
  --mint-soft:#b8cec8;
  --sunshine:#F7B240;
  --paper:#FAFAF8;
  --paper-mute:#F5F4F0;
  --ink:#1A1A1A;
  --ink-mute:#5a5a5a;
  --rule:#E5E3DD;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Basier Circle','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-feature-settings:'kern' 1,'liga' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ── HEADER ── */
.site-header{
  background:var(--velvet);
  padding:18px 48px;
}
.header-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.header-logo{display:inline-flex;align-items:center}
.header-logo img{height:26px;width:auto;display:block}
.header-back{
  font-size:12px;font-weight:500;
  color:var(--mint);
  text-decoration:none;
  letter-spacing:0.10em;
  text-transform:uppercase;
  transition:color 180ms ease;
}
.header-back:hover{color:var(--sunshine)}
@media (max-width:768px){
  .site-header{padding:16px 22px}
  .header-logo img{height:22px}
  .header-back{font-size:11px;letter-spacing:0.08em}
}

/* ── PAGE WRAPPER ── */
.page-wrap{
  max-width:760px;
  margin:0 auto;
  padding:88px 48px 120px;
}
@media (max-width:768px){
  .page-wrap{padding:56px 22px 80px}
}

/* ── EYEBROW ── */
.page-eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.20em;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:28px;
  display:flex;align-items:center;gap:14px;
}
.page-eyebrow::before{
  content:'';display:block;
  width:32px;height:1px;
  background:var(--mint);
  flex-shrink:0;
}

/* ── HEADINGS ── */
h1{
  font-family:'Basier Circle',-apple-system,sans-serif;
  font-size:clamp(34px,5vw,52px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:0.02em;
  text-transform:uppercase;
  margin-bottom:56px;
  color:var(--velvet);
}

h2{
  font-family:'Basier Circle',-apple-system,sans-serif;
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:0.01em;
  margin-top:52px;
  margin-bottom:14px;
  color:var(--velvet);
}

h3{
  font-family:'Basier Circle',-apple-system,sans-serif;
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  margin-top:32px;
  margin-bottom:10px;
  color:var(--velvet);
}

/* ── BODY TEXT ── */
p{
  font-size:15.5px;
  line-height:1.75;
  color:var(--ink);
  margin-bottom:14px;
}
p strong, li strong{font-weight:600;color:var(--velvet)}

ul,ol{
  margin:8px 0 18px 22px;
}
li{
  font-size:15.5px;
  line-height:1.7;
  color:var(--ink);
  margin-bottom:6px;
  padding-left:4px;
}
li::marker{color:var(--mint)}

a{
  color:var(--velvet);
  text-decoration:none;
  border-bottom:1px solid var(--mint);
  padding-bottom:1px;
  transition:color 180ms ease,border-color 180ms ease;
}
a:hover{
  color:var(--sunshine);
  border-bottom-color:var(--sunshine);
}

/* ── DIVIDER ── */
.divider{
  width:48px;
  height:2px;
  background:var(--sunshine);
  margin:56px 0;
  border:0;
}

/* ── PAGE INTRO (small subtitle under H1) ── */
.page-intro{
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--mint);
  margin-top:-40px;
  margin-bottom:48px;
  font-weight:500;
}

/* ── META BLOCK (legal sub-info: Rechtsgrundlage, Speicherdauer) ── */
.meta{
  background:var(--paper-mute);
  border-left:2px solid var(--mint);
  padding:14px 18px;
  margin:14px 0 22px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink-mute);
}
.meta strong{color:var(--velvet);font-weight:600}

/* ── HIGHLIGHT BOX (key clauses) ── */
.highlight-box{
  background:var(--velvet);
  color:var(--paper);
  padding:24px 28px;
  margin:32px 0;
}
.highlight-box p{
  color:rgba(255,255,255,0.92);
  font-size:14.5px;
  line-height:1.7;
  margin:0;
}
.highlight-box strong{color:var(--sunshine);font-weight:600}
.highlight-box a{color:var(--sunshine);border-bottom-color:rgba(247,178,64,0.4)}
.highlight-box a:hover{color:#fff;border-bottom-color:#fff}

/* ── TABLES (for Datenschutz) ── */
table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0 24px;
  font-size:14px;
}
thead th{
  background:var(--paper-mute);
  color:var(--velvet);
  text-align:left;
  padding:12px 14px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border-bottom:1px solid var(--rule);
}
tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
  line-height:1.55;
  color:var(--ink);
}
tbody tr:last-child td{border-bottom:0}

/* ── FOOTER ── */
footer.site-footer{
  background:var(--velvet);
  padding:48px 48px 32px;
  color:rgba(255,255,255,0.65);
}
.footer-inner{
  max-width:1200px;margin:0 auto;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:32px;
  padding-bottom:24px;
  margin-bottom:22px;
}
.footer-brand img{height:26px;width:auto;display:block}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
}
.footer-copy{
  font-size:12px;
  color:rgba(255,255,255,0.45);
  letter-spacing:0.02em;
}
.footer-legal{display:flex;gap:22px;flex-wrap:wrap}
.footer-legal a{
  font-size:12px;
  color:rgba(140,172,160,0.65);
  text-decoration:none;
  border:0;
  letter-spacing:0.04em;
  transition:color 180ms ease;
}
.footer-legal a:hover{color:var(--sunshine)}
@media (max-width:768px){
  footer.site-footer{padding:36px 22px 24px}
  .footer-top{flex-direction:column;gap:18px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}