:root{
  --pn-primary:#96144b;
  --pn-secondary:#008897;
  --pn-accent:#ff9f1a;
  --pn-ink:#111114;
  --pn-muted:#6b7280;
  --pn-bg:#f6f7fb;
  --pn-card:#ffffff;
  --pn-border:#e6e7ef;
  --radius:18px;
  --shadow:0 10px 30px rgba(17,17,20,.08);
  --shadow-lg:0 25px 55px rgba(17,17,20,.12);
  --glass:backdrop-filter:saturate(140%) blur(8px);
  --ring:0 0 0 3px rgba(139,61,255,.12);
}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:stratos,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; 
  color:var(--pn-ink);
  background:
    radial-gradient(1200px 600px at 100% -50%, rgba(139,61,255,.08), transparent 60%),
    radial-gradient(900px 500px at -20% 20%, rgba(255,90,60,.06), transparent 60%), var(--pn-bg);
}
a{
  color:var(--pn-secondary);
  text-decoration:none;
  transition:.2s;
}
a:hover{
  color: var(--pn-primary);
  transition:.2s;
  scale:1.1;
}
.container{ max-width:1180px; margin-inline:auto; padding:28px; }
.hcontainer{ max-width:1180px; margin-inline:auto; padding:28px 28px 0 28px; }
.ncontainer{ max-width:1180px; margin-inline:auto; padding:0 28px; }
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.75); border-bottom:1px solid var(--pn-border); backdrop-filter:saturate(140%) blur(8px); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; font-size:40px; }
.nav .links{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.nav a{ position:relative; padding:6px 0; }
.xtnbtn {
  border: 0px black solid;
  border-radius: 999px;
  padding: 4px 10px 4px 10px !important;
  border: 2px solid var(--pn-primary);
  color: var(--pn-primary);
  transition: 0.2s; 
}
.xtnbtn:hover{
  background: var(--pn-primary);
  color: white;
  transition: 0.2s;
  scale: 1.1;
}
.xtnbtn-a {
  border: 0px black solid;
  border-radius: 999px;
  padding: 4px 10px 4px 10px !important;
  background: var(--pn-primary);
  border: 2px solid var(--pn-primary);
  color: white;
  transition: 0.2s; 
}
.xtnbtn-a:hover{
  scale:1.1;
}
.hero{ position:relative; border-radius:28px; padding:64px 48px; overflow:hidden; color:#fff; box-shadow:var(--shadow-lg); background:var(--pn-primary); background-image:url(../images/header-centra.png); }
.hero h1{ margin:0 0 10px; font-size:clamp(30px,5.4vw,48px); line-height:1.08; font-weight:100; }
.hero .sub{ color:#f5a9c9; }
h2{ margin:0 0 10px; font-size:22px; font-weight:100; }
p{ margin:0 0 10px; color:var(--pn-muted); }
.section{ background:var(--pn-card); border:1px solid var(--pn-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
.grid{ display:grid; gap:18px; }
.grid.cols-2{ grid-template-columns:1fr 1fr; gap:18px; }
.chip{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--pn-border); padding:6px 10px; border-radius:999px; background:#fff; font-size:12px; }
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.muted{ color:var(--pn-muted); font-size:13px; }
footer{ color:var(--pn-muted); font-size:12px; margin:0 0 12px; text-align:center; }
@media (max-width: 900px){ .container{ max-width:940px; padding:22px; } .grid.cols-2{ grid-template-columns:1fr; } }
@media (max-width: 700px){ .container{ padding:20px; } .hero{ padding:44px 24px; } }

/* ---------- Layout Utilities (light) ---------- */
.kicker{display:inline-flex;align-items:center;gap:8px}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--pn-accent)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--pn-border);font-size:12px}
.hero .sub{color:#ffd5e7}

/* ---------- Table Wrapper ---------- */
.tablewrap{
  overflow:auto;
  border:1px solid var(--pn-border);
  border-radius:12px;
  background:#fff;
  box-shadow: var(--shadow);
  position: relative;
}

/* Scroll shadows for wide tables */
.tablewrap:before,
.tablewrap:after{
  content:"";
  position: sticky;
  top:0;
  bottom:0;
  width:16px;
  pointer-events:none;
  z-index:2;
}
.tablewrap:before{
  left:0;
  background:linear-gradient(90deg, rgba(246,247,251,1), rgba(246,247,251,0));
}
.tablewrap:after{
  float:right;
  right:0;
  background:linear-gradient(270deg, rgba(246,247,251,1), rgba(246,247,251,0));
}
/* ---------- Pricing Table ---------- */
table.price{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13.5px;
  min-width: 620px; /* sorgt für horizontales Scrollen auf kleinen Screens */
}
.price thead th{
  position:sticky;
  top:0;
  background:linear-gradient(0deg, #fff, #fafbfe);
  z-index:1;
  text-align:right;
  font-size:12px;
  color:var(--pn-muted);
  border-bottom:1px solid var(--pn-border);
  padding:10px 12px;
  white-space:nowrap;
}
.price thead th:first-child{
  text-align:left;
  padding-left:16px;
}
/* Body Cells */
.price td{
  padding:10px;
  border-bottom:1px solid var(--pn-border);
  text-align:right;
  white-space:nowrap;
}
.price td:first-child{
  text-align:left;
  white-space:normal;
  color:var(--pn-ink);
  padding-left:16px;
}
/* Zebra + hover */
.price tbody tr:nth-child(odd){ background:rgba(17,17,20,.02); }
.price tbody tr:hover{ background:rgba(0,0,0,.04); transition:.15s; }
/* Group header columns (z. B. "Einmalig") */
.price td.group-label{
  text-align:left;
  color:var(--pn-muted);
  font-size:12px;
  letter-spacing:.01em;
}
/* Compact numbers on mobile */
@media (max-width: 760px){
  table.price{ min-width:640px; font-size:13px; }
  .price thead th, .price td{ padding:10px; }
}
/* ---------- Notes / Footnotes ---------- */
.note{
  font-size:12px;
  color:var(--pn-muted);
  margin-top:10px;
}
.note ul{margin:6px 0 0 18px;padding:0}
.note li{margin:4px 0}
/* ---------- Section spacing fine-tune ---------- */
.section + .section{ margin-top:18px; }
/* ---------- Headings tone ---------- */
h2 + .tablewrap{ margin-top:10px; }
h3{ margin:0 0 8px; font-weight:600; font-size:15px; color:var(--pn-ink); }
/* ---------- Chips in toolbar ---------- */
.toolbar .chip{ background:#fff; border-color: var(--pn-border); }
/* Red strikethrough for waived/obsolete numbers (from PDF pages 1–2) */
.strike{ text-decoration: line-through; color:#c51616; opacity:.75; }
table.price.narrow{
  font-size: 13px;
  min-width: 860px;
}
table.price.narrow td, table.price.narrow th{
  padding:8px 10px;
}
/* Preiszellen schmaler machen (gilt nur für Zahlenfelder) */
table.price.narrow td:not(:first-child),
table.price.narrow th:not(:first-child) {
  padding: 6px 8px;         /* weniger Innenabstand */
  width: 70px;              /* gleichmäßige kompakte Spalten */
  text-align: center;
}
.price .grouphead{
  text-align:center;
  color:var(--pn-ink);
  background:#fff;
}
.price .groupheadl{
  text-align:center;
  color:var(--pn-ink);
  background:#fff;
  border-left: 1px solid var(--pn-border);
}
.pdnl {
  border-left: 1px solid var(--pn-border);
}
.pdnr {
  border-right: 1px solid var(--pn-border);
}
/* Info-Button rechtsbündig in der Zelle */
.pdnr {
  position: relative; /* für absolute Positionierung des Buttons */
}
.pdnr .info-btn {
  position: absolute;
  right: 6px;         /* Abstand vom rechten Rand */
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;     /* vorherigen Abstand aufheben */
}

table.price.narrow td {
  height: 60px;              /* feste Höhe */
  vertical-align: middle;    /* Text mittig ausrichten */
}
th {
  font-weight: 100;
}
/* === Footer Logos sauber nebeneinander === */
.footerlogos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.footerlogos span {
  font-size: 12px;
  color: var(--pn-muted);
}

.footerlogos .logorow {
  display: flex;
  align-items: center;      /* vertikal mittig */
  justify-content: center;  /* horizontal mittig */
  gap: 18px;                /* Abstand zwischen Logos */
  margin: 10px 0px;
}

.footerlogos .logorow img {
  object-fit: contain;      /* sorgt für sauberes Skalieren */
}
.ftln {
  padding: 0px 30px 0px 30px;
}

/* ---------- Info-Popup Styles ---------- */
.info-btn {
  margin-left: 6px;
  background: var(--pn-secondary);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  cursor: pointer;
  transition: 0.2s;
  vertical-align: middle;
}
.info-btn:hover {
  background: var(--pn-primary);
  scale: 1.1;
}

/* Popup schwebt absolut über der Tabelle */
.info-popup {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  background: #fff;
  color: var(--pn-ink);
  border: 1px solid var(--pn-border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  width: 260px;
  padding: 10px;
  font-size: 13px;
  z-index: 100;
  display: none;
  pointer-events: auto;
}
.info-popup::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid var(--pn-border);
  border-top: 1px solid var(--pn-border);
  transform: rotate(45deg) translateY(-50%);
}

.info-popup .popup-inner {
  position: relative;
}
.info-popup h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pn-primary);
}
.info-popup p {
  margin: 0;
  color: var(--pn-muted);
  font-size: 11px;
  line-height: 1.4;
}
.close-btn {
  position: absolute;
  top: -2px;
  right: 4px;
  font-size: 16px;
  color: var(--pn-muted);
  cursor: pointer;
}
.close-btn:hover {
  color: var(--pn-primary);
}