/* ============================================================
   B&S Beratung & Service Ost UG
   Gemeinsames Stylesheet für die Unterseiten
   (Impressum, Datenschutz, Danke)
   Farbwelt und Typografie aus Entwurf A.
   ============================================================ */

:root{
  --navy:#0A2A6B; --navy-2:#123C8C; --blue:#1565C0; --sky:#12A3E8;
  --amber:#EF9F14; --amber-2:#FFB93E; --amber-ink:#2B1D00;

  --bg:#FFFFFF; --bg-2:#F2F6FC; --surface:#FFFFFF;
  --ink:#0B1D3A; --ink-2:#4C6183; --ink-3:#7C8DA8;
  --line:#DEE7F3; --line-2:#C6D4E8;
  --navy-ink:#0A2A6B;
  --shadow:0 1px 2px rgba(10,42,107,.05), 0 18px 40px -24px rgba(10,42,107,.35);

  --f-d:"Newsreader",Georgia,"Times New Roman",serif;
  --f-b:"Karla","Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:900px; --pad:clamp(1.1rem,4vw,3rem); --r:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#08182E; --bg-2:#0C2138; --surface:#0E2740;
    --ink:#E9F1F9; --ink-2:#A3B8D0; --ink-3:#7F97B4;
    --line:#1B3A5C; --line-2:#26527C; --blue:#4E9BE0; --navy-ink:#8FC2F0;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#08182E; --bg-2:#0C2138; --surface:#0E2740;
  --ink:#E9F1F9; --ink-2:#A3B8D0; --ink-3:#7F97B4;
  --line:#1B3A5C; --line-2:#26527C; --blue:#4E9BE0; --navy-ink:#8FC2F0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-b); font-size:1.0625rem; line-height:1.7;
  display:flex; flex-direction:column; min-height:100vh;
}
img{max-width:100%; display:block}
p{margin:0}
h1,h2,h3{font-family:var(--f-d); font-weight:400; line-height:1.15; letter-spacing:-.012em; text-wrap:balance; margin:0}
a{color:var(--blue)}
a:hover{color:var(--ink)}
:where(a,button):focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

/* Kopf */
.hdr{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:10}
.hdr__in{display:flex; align-items:center; gap:1rem; height:84px}
.brand{flex:none; display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--ink)}
.brand picture{display:block}
.brand img{height:42px; width:auto}
.brand__t{display:flex; flex-direction:column; line-height:1.18}
.brand__t b{font-family:var(--f-d); font-weight:500; font-size:1.16rem; color:var(--ink); letter-spacing:-.012em}
.brand__t > span{font-size:.72rem; color:var(--ink-3)}
.back{margin-left:auto; text-decoration:none; color:var(--ink-2); font-weight:600; font-size:.94rem; white-space:nowrap}
.back:hover{color:var(--blue)}

/* Inhalt */
main{flex:1; padding-block:clamp(2.4rem,5vw,4rem) clamp(3rem,6vw,5rem)}
.eyebrow{font-size:.76rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--blue)}
h1{font-size:clamp(2rem,4.2vw,3rem); font-weight:500; margin-top:1rem}
.lead{font-size:1.14rem; color:var(--ink-2); max-width:62ch; margin-top:1.2rem}
h2{font-size:clamp(1.35rem,2.4vw,1.75rem); font-weight:500; margin-top:2.8rem}
h3{font-size:1.1rem; font-weight:600; font-family:var(--f-b); margin-top:1.9rem; color:var(--ink)}
main p{margin-top:.9rem; color:var(--ink-2); max-width:72ch}
main ul{margin-top:.9rem; color:var(--ink-2); max-width:72ch; padding-left:1.2rem}
main li{margin-bottom:.3rem}
main a{overflow-wrap:anywhere}

.card{
  background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--amber);
  border-radius:var(--r); padding:clamp(1.4rem,3vw,2.1rem); margin-top:2rem; max-width:72ch;
  box-shadow:var(--shadow);
}
.card dl{display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.5rem; margin:0}
.card dt{font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding-top:.32rem}
.card dd{margin:0; color:var(--ink)}

.note{
  margin-top:2.6rem; padding:1.1rem 1.3rem; border-radius:var(--r);
  background:var(--bg-2); border:1px solid var(--line); font-size:.92rem; color:var(--ink-2); max-width:72ch;
}

.btn{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:2.4rem;
  font-family:var(--f-b); font-weight:700; font-size:.95rem;
  padding:.9rem 1.6rem; border-radius:100px; text-decoration:none;
  background:var(--amber); color:var(--amber-ink);
  box-shadow:0 10px 24px -12px rgba(239,159,20,.9);
  transition:transform .18s ease, background .18s ease;
}
.btn:hover{background:var(--amber-2); color:var(--amber-ink); transform:translateY(-2px)}

/* Fuß */
.foot{background:var(--navy); color:#B7CDEA; padding-block:2.4rem 1.8rem; font-size:.92rem}
.foot__in{display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between}
.foot a{color:#DDE9F7; text-decoration:none}
.foot a:hover{color:var(--amber-2)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important} html{scroll-behavior:auto}}
@media (max-width:600px){
  .brand img{height:36px}
  .brand__t b{font-size:1rem}
  .brand__t > span{display:none}
  .card dl{grid-template-columns:1fr; gap:.15rem}
  .card dt{padding-top:.7rem}
}

/* ---------- Schaltflächen (auch für die Cookie-Auswahl) ---------- */
.btn--line{
  background:var(--surface); color:var(--ink); border:2px solid var(--line-2); box-shadow:none;
}
.btn--line:hover{background:var(--surface); color:var(--blue); border-color:var(--blue)}
.btn--primary{background:var(--amber); color:var(--amber-ink)}

/* ---------- Cookie-Zustimmung ---------- */
.cc{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  background:var(--surface); border-top:1px solid var(--line-2);
  box-shadow:0 -24px 60px -34px rgba(10,42,107,.75); padding:1.3rem var(--pad);
}
.cc.on{display:block}
.cc__in{max-width:1200px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.4rem 2rem; align-items:center}
.cc h2{font-family:var(--f-d); font-size:1.2rem; font-weight:500; margin:0}
.cc__lead{margin-top:.4rem; font-size:.93rem; color:var(--ink-2); max-width:74ch}
.cc__btns{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end}
.cc .btn{margin-top:0; padding:.75rem 1.3rem; font-size:.9rem}
.cc__link{background:none; border:0; padding:.75rem .4rem; font:inherit; font-size:.9rem; font-weight:700;
  color:var(--ink-2); text-decoration:underline; cursor:pointer}
.cc__link:hover{color:var(--blue)}
.cc__opts{grid-column:1/-1; display:none; gap:1.1rem; padding-top:1.2rem; border-top:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.cc__opts.on{display:grid}
.cc__opt{display:flex; gap:.7rem; align-items:flex-start}
.cc__opt input{margin-top:.3rem; width:17px; height:17px; accent-color:var(--amber); flex:none}
.cc__opt b{display:block; font-size:.93rem; color:var(--ink)}
.cc__opt span{display:block; font-size:.86rem; color:var(--ink-2); line-height:1.5; margin-top:.15rem}
.cc__opt input:disabled + div b::after{content:" · immer aktiv"; color:var(--ink-3); font-weight:400}
.cc__saverow{display:flex; align-items:flex-end}
.cc__saverow .btn{width:100%}
@media (max-width:820px){
  .cc__in{grid-template-columns:1fr}
  .cc__btns{justify-content:flex-start}
}

/* ---------- Feinabstimmung nach Bildschirmbreite ---------- */
@media (min-width:1560px){:root{--wrap:1000px}}
@media (max-width:680px){
  body{font-size:1.02rem}
  .cc__btns .btn,.cc__btns .cc__link{flex:1 1 auto; justify-content:center; text-align:center}
  .tbl th,.tbl td{padding:.6rem .7rem}
}
@media (max-width:420px){
  .brand img{height:32px}
  .brand__t b{font-size:.94rem}
  .back{font-size:.86rem}
}
@media (max-width:480px){
  .hdr__in{gap:.6rem}
  .brand__t{display:none}
  .back{white-space:normal}
}