/* Vergleichsblatt healthyunwealthywise.com
   Gestaltungsidee: ein umrandetes Blatt auf grauem Grund. Alles Wesentliche
   steht in Spalten mit Rahmenlinien, Zahlen laufen in Festbreitenschrift mit
   tabellarischen Ziffern. Keine Kacheln, keine Randspalte, kein Skript.
   Umbruchlogik: Tabellen klappen unter 760 px in gerahmte Zeilenbloecke um,
   damit bei 320 px nichts rollen oder ueberlaufen muss. Ueberschriften
   trennen ueber hyphens:auto (lang="de"), nie mit overflow-wrap. */

:root {
  --blattgrund: #eceee8;
  --zellweiss: #fbfbf6;
  --zebrafeld: #f3f4ef;
  --satzschwarz: #1f2b30;
  --satzgrau: #6b7579;
  --merkrot: #8c2f39;
  --merkrotTief: #63202a;
  --regelstrich: #ccd1c9;
  --regelstrichStark: #9aa29b;
  --fontTitel: "Superclarendon", "Chaparral Pro", "Goudy Old Style", Georgia, serif;
  --fontSatz: "PT Sans", "Fira Sans", "Myriad Pro", "Microsoft Sans Serif", Arial, sans-serif;
  --fontZahl: "DejaVu Sans Mono", "Liberation Mono", "Courier New", monospace;
  --blattbreite: 1020px;
  --randmass: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-block: 18px 34px;
  padding-inline: var(--randmass);
  background: var(--blattgrund);
  color: var(--satzschwarz);
  font-family: var(--fontSatz);
  font-size: 16.5px;
  line-height: 1.62;
  overflow-wrap: break-word;
}

img { max-width: 100%; width: 100%; height: auto; display: block; }

a { color: var(--merkrot); }
a:hover, a:focus { color: var(--merkrotTief); }

h1, h2, h3 {
  font-family: var(--fontTitel);
  font-weight: 700;
  line-height: 1.22;
  overflow-wrap: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  margin: 0;
}

p, li, td, th, dd, dt, caption { hyphens: auto; -webkit-hyphens: auto; }

/* ---- Blattrahmen -------------------------------------------------- */

.vbl {
  max-width: var(--blattbreite);
  margin: 0 auto;
  background: var(--zellweiss);
  border: 1px solid var(--regelstrichStark);
}

.vsp {
  position: absolute;
  left: -9999px;
}
.vsp:focus {
  position: static;
  display: block;
  padding: 8px 14px;
  background: var(--satzschwarz);
  color: var(--zellweiss);
}

.vko {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 26px;
  justify-content: space-between;
  padding: 20px 22px 14px;
  border-bottom: 3px double var(--regelstrichStark);
}

.vmk {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--satzschwarz);
  text-decoration: none;
  min-width: 0;
}
.vzg { flex: none; width: auto; }

.vwm {
  font-family: var(--fontTitel);
  font-size: 30px;
  letter-spacing: 0.17em;
  line-height: 1;
}

.vut {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--satzgrau);
}

.vnv {
  display: flex;
  flex-wrap: wrap;
  padding-inline: 22px;
  border-bottom: 1px solid var(--regelstrich);
  background: var(--zebrafeld);
}
.vnv a {
  padding: 9px 16px 9px 0;
  margin-right: 16px;
  border-right: 1px solid var(--regelstrich);
  color: var(--satzschwarz);
  font-size: 14.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.vnv a:last-child { border-right: 0; margin-right: 0; }
.vnv a:hover, .vnv a:focus { color: var(--merkrot); }
.vnv a[aria-current] { color: var(--merkrot); font-weight: 700; }

.vpf {
  padding: 10px 22px;
  border-bottom: 1px solid var(--regelstrich);
  font-size: 13px;
  color: var(--satzgrau);
}
.vpf a { color: var(--satzgrau); }
.vpf span { padding-inline: 7px; color: var(--regelstrichStark); }

.vhp { padding: 26px 22px 30px; }

/* ---- Kopfzone der Uebersichten ------------------------------------ */

.vkz { border-bottom: 1px solid var(--regelstrich); padding-bottom: 20px; }
.vkz h1 { font-size: 33px; }
.vle {
  margin: 14px 0 0;
  font-size: 17.5px;
  max-width: 62ch;
}
.vhw {
  margin: 18px 0 0;
  padding: 11px 14px;
  border-left: 4px solid var(--merkrot);
  background: var(--zebrafeld);
  font-size: 14.5px;
  color: var(--satzgrau);
  max-width: 68ch;
}

/* ---- Leitblatt ----------------------------------------------------- */

.vlt {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding-block: 22px;
  border-bottom: 1px solid var(--regelstrich);
}
.vlx { min-width: 0; }
.vlb { min-width: 0; border: 1px solid var(--regelstrich); }
.vlk {
  margin: 0 0 8px;
  font-family: var(--fontZahl);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--merkrot);
}
.vlx h2 { font-size: 23px; }
.vlx h2 a { color: var(--satzschwarz); text-decoration: none; }
.vlx h2 a:hover, .vlx h2 a:focus { color: var(--merkrot); }
.vlx p { margin: 10px 0 0; }
.vlx .vlz {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
}

/* ---- Tabellen ------------------------------------------------------ */

.vro { overflow-x: auto; }

.vtb, .vag, .vrg {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.vtc {
  caption-side: top;
  text-align: left;
  padding-block: 20px 9px;
  font-family: var(--fontZahl);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--satzgrau);
}

.vtb th, .vtb td {
  border: 1px solid var(--regelstrich);
  padding: 9px 11px;
  text-align: left;
  vertical-align: top;
}
.vtb thead th {
  border-bottom: 2px solid var(--regelstrichStark);
  background: var(--zebrafeld);
  font-family: var(--fontZahl);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--satzgrau);
  white-space: nowrap;
}
.vtb tbody tr:nth-child(even) { background: var(--zebrafeld); }
.vtb .vbd { width: 92px; padding: 7px; }
.vtb .vbd img { aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--regelstrich); }
.vnr {
  font-family: var(--fontZahl);
  font-size: 15px;
  color: var(--merkrot);
  white-space: nowrap;
  width: 42px;
}
.vth { font-weight: 400; min-width: 15em; }
.vth a {
  font-family: var(--fontTitel);
  font-size: 17px;
  line-height: 1.26;
  color: var(--satzschwarz);
  text-decoration: none;
  display: block;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.vth a:hover, .vth a:focus { color: var(--merkrot); text-decoration: underline; }
.vth p { margin: 6px 0 0; font-size: 14px; color: var(--satzgrau); }
.vzw, .vsd {
  font-family: var(--fontZahl);
  font-size: 13.5px;
  white-space: nowrap;
  text-align: right;
}
.vsd { color: var(--satzgrau); }

/* ---- Redaktionsblock ----------------------------------------------- */

.vrd {
  margin-top: 26px;
  border: 1px solid var(--regelstrichStark);
  border-top-width: 3px;
  padding: 16px 18px;
  background: var(--zebrafeld);
}
.vrd h2 { font-size: 19px; }
.vdl { margin: 12px 0 0; display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 6px 16px; }
.vdl dt {
  font-family: var(--fontZahl);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--satzgrau);
  padding-top: 3px;
}
.vdl dd { margin: 0; min-width: 0; }

/* ---- Beitragsblatt -------------------------------------------------- */

.vst { max-width: 68ch; margin-inline: auto; }
.vst h1 { font-size: 30px; }
.vst > p:first-of-type { font-size: 17.5px; }
.vst h2 {
  font-size: 22px;
  margin-top: 34px;
  padding-top: 13px;
  border-top: 2px solid var(--satzschwarz);
}
.vst h3 {
  font-size: 18.5px;
  margin-top: 26px;
  color: var(--merkrotTief);
}
.vst p { margin: 13px 0 0; }
.vst ul, .vst ol { margin: 13px 0 0; padding-left: 1.4em; }
.vst li { margin-top: 5px; }
.vst img { margin-top: 20px; border: 1px solid var(--regelstrich); }
.vst .vro { margin-top: 18px; }

.vag { margin-top: 18px; }
.vag th, .vag td {
  border: 1px solid var(--regelstrich);
  padding: 7px 11px;
  text-align: left;
}
.vag thead th {
  background: var(--satzschwarz);
  color: var(--zellweiss);
  font-family: var(--fontZahl);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vag tbody td { font-size: 14.5px; }
.vag tbody td.vzw { text-align: left; }

.vrg { margin-top: 24px; border: 1px solid var(--regelstrichStark); }
.vrg caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 8px;
  font-family: var(--fontZahl);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--satzgrau);
}
.vrg th, .vrg td {
  border-bottom: 1px solid var(--regelstrich);
  padding: 7px 11px;
  text-align: left;
  font-weight: 400;
}
.vrg tr:last-child th, .vrg tr:last-child td { border-bottom: 0; }
.vrg td a { font-size: 15px; }

/* ---- Weiterfuehrung ------------------------------------------------- */

.vwt {
  max-width: 68ch;
  margin: 34px auto 0;
  padding-top: 18px;
  border-top: 3px double var(--regelstrichStark);
}
.vwt h2 { font-size: 19px; }
.vwl { list-style: none; margin: 12px 0 0; padding: 0; }
.vwl li {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: baseline;
  padding-block: 9px;
  border-bottom: 1px solid var(--regelstrich);
}
.vwl .vnr { width: auto; font-size: 14px; }
.vwl a { min-width: 0; font-family: var(--fontTitel); font-size: 16px; color: var(--satzschwarz); }
.vwl time { font-family: var(--fontZahl); font-size: 13px; color: var(--satzgrau); white-space: nowrap; }

/* ---- Blattfuss ------------------------------------------------------ */

.vfu {
  border-top: 1px solid var(--regelstrichStark);
  background: var(--zebrafeld);
  padding: 20px 22px 16px;
}
.vfr {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 26px;
}
.vfr > div { min-width: 0; }
.vfu h2 {
  font-family: var(--fontZahl);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--satzgrau);
}
.vfu ul { list-style: none; margin: 8px 0 0; padding: 0; }
.vfu li { padding-block: 2px; }
.vfu p { margin: 8px 0 0; font-size: 14px; }
.vfz {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--regelstrich);
  font-family: var(--fontZahl);
  font-size: 12px;
  color: var(--satzgrau);
}

/* ---- Umbruch bei 1040 px ------------------------------------------- */

@media (max-width: 1040px) {
  .vwm { font-size: 26px; }
  .vkz h1 { font-size: 29px; }
  .vst h1 { font-size: 27px; }
}

/* ---- Umbruch bei 760 px: Spalten werden Zeilenbloecke -------------- */

@media (max-width: 760px) {
  body { padding-inline: var(--randmass); }
  .vko, .vnv, .vpf, .vhp, .vfu { padding-inline: 15px; }
  .vlt { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vfr { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vdl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vdl dd { margin-bottom: 8px; }

  .vtb thead, .vag thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .vtb, .vtb caption, .vtb tbody, .vtb tr, .vtb th, .vtb td,
  .vag, .vag tbody, .vag tr, .vag td {
    display: block;
    width: auto;
  }
  .vtb tr, .vag tr {
    border: 1px solid var(--regelstrichStark);
    margin-top: 14px;
    padding: 4px 12px 12px;
  }
  .vtb tbody tr:nth-child(even) { background: transparent; }
  .vtb th, .vtb td, .vag td { border: 0; border-bottom: 1px dotted var(--regelstrich); padding: 7px 0; }
  .vtb tr th:last-child, .vtb tr td:last-child, .vag tr td:last-child { border-bottom: 0; }
  .vtb td[data-spalte]::before, .vag td[data-spalte]::before {
    content: attr(data-spalte);
    display: block;
    font-family: var(--fontZahl);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--satzgrau);
  }
  .vtb .vbd { width: auto; padding: 10px 0 0; }
  .vtb .vbd::before { content: none; }
  .vtb .vbd img { aspect-ratio: 16 / 7; }
  .vtb .vnr, .vtb .vzw, .vtb .vsd { text-align: left; width: auto; }
  .vth { min-width: 0; }
  .vwl li { grid-template-columns: 2.6em minmax(0, 1fr); }
  .vwl time { grid-column: 2; }
}

/* ---- Umbruch bei 400 px -------------------------------------------- */

@media (max-width: 400px) {
  :root { --randmass: 14px; }
  body { font-size: 16px; padding-block: 10px 24px; }
  .vko { padding-block: 15px 11px; }
  .vwm { font-size: 22px; letter-spacing: 0.12em; }
  .vkz h1 { font-size: 24px; }
  .vst h1 { font-size: 23px; }
  .vst h2 { font-size: 19.5px; }
  .vst h3 { font-size: 17px; }
  .vlx h2 { font-size: 20px; }
  .vle { font-size: 16.5px; }
  .vnv a { padding-right: 12px; margin-right: 12px; }
}

/* ---- Tippflaechen auf Touchgeraeten -------------------------------- */

@media (hover: none) {
  .vnv a { padding-block: 13px; }
  .vfu li a, .vwl a { display: inline-block; padding-block: 5px; }
  .vrg td a { display: inline-block; padding-block: 4px; }
}