:root {
  color-scheme: light;
  --ink: #182d31;
  --muted: #496066;
  --canvas: #f2f6f4;
  --paper: #fff;
  --line: #cfddd7;
  --night: #123a36;
  --accent: #126052;
  --mint: #bce5ce;
  font: 100%/1.6 system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .15em; }
:focus-visible { outline: 3px solid #a44621; outline-offset: 4px; }
.cabecera :focus-visible, .pie :focus-visible { outline-color: #f7ca7c; }
[id] { scroll-margin-block-start: 1rem; }
.marco { width: min(100% - 3rem, 72rem); margin-inline: auto; }

.salto {
  position: absolute;
  inset: .75rem auto auto .75rem;
  z-index: 1;
  padding: .75rem 1rem;
  background: var(--paper);
  transform: translateY(-150%);
}
.salto:focus { transform: translateY(0); }

.cabecera, .pie { color: var(--paper); background: var(--night); }
.barra, .pie .marco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.25rem;
}
.cabecera { border-bottom: 1px solid #407063; }
.cabecera a, .pie a { color: inherit; }
.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-block: .65rem;
  font-size: 1.125rem;
  font-weight: 750;
  text-decoration: none;
}
.sello {
  display: grid;
  place-items: center;
  width: 1.85rem;
  aspect-ratio: 1;
  border: 1px solid var(--mint);
  border-radius: 6px;
  color: var(--mint);
  font-size: 1.35rem;
  line-height: 1;
}
.barra nav { display: flex; gap: 1.5rem; }
.barra nav a { display: inline-block; padding-block: .6rem; }
.portada {
  color: var(--paper);
  background-color: var(--night);
  background-image: repeating-linear-gradient(125deg, transparent 0 30px, #ffffff0d 30px 31px);
  padding-block: clamp(2.1rem, 5vw, 4.4rem);
}
.seo_intro {
  max-width: 47rem;
  background: var(--night);
  box-shadow: 0 0 2rem 1rem var(--night);
}
h1, h2, h3 { line-height: 1.15; }
h1 {
  margin: 0 0 .65rem;
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 5.4vw, 4.7rem);
  font-weight: 700;
  letter-spacing: -.045em;
}
.seo_intro p { max-width: 66ch; margin: 0; color: #e0f0e9; }

.anbieter_liste { padding-block: 1.65rem 2.25rem; }
.anbieter_liste h2 { margin: 0 0 .9rem; font-size: 1.45rem; }
.anbieter_zeile {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: .65rem 1.25rem;
  min-height: 6rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--paper);
}
.anbieter_zeile + .anbieter_zeile { margin-top: .55rem; }
.identidad { display: flex; align-items: center; gap: .75rem; }
.identidad h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.anbieter_logo {
  flex: 0 0 4.1rem;
  display: grid;
  place-items: center;
  min-height: 3rem;
  padding: .35rem;
  border-radius: 5px;
  background: #152d31;
}
.anbieter_logo img { display: block; max-width: 100%; height: auto; max-height: 2.4rem; object-fit: contain; }
.bono { margin: 0; font-size: 1.08rem; line-height: 1.35; font-weight: 750; }
.condiciones { color: var(--muted); font-size: .9rem; line-height: 1.4; }
.condiciones p { margin: .2rem 0; }
.ficha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .55rem .85rem;
  border-radius: 5px;
  background: var(--accent);
  color: var(--paper);
  font-size: .9rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}
.ficha:hover { background: #104b40; text-decoration: underline; }

.seo_text {
  max-width: 73ch;
  margin: 0 auto 3.5rem;
  padding: clamp(1rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.seo_text h2 { margin: 1.7em 0 .55em; font-size: clamp(1.35rem, 3vw, 1.75rem); }
.seo_text h2:first-child { margin-top: 0; }
.seo_text h3 { margin: 1.4em 0 .4em; font-size: 1.1rem; }
.seo_text p { margin: .55em 0 1em; }
.seo_text ul, .seo_text ol { padding-inline-start: 1.4em; }
.seo_text li + li { margin-top: .25em; }
.table-responsive { overflow-x: auto; margin-block: 1.2rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); text-align: start; overflow-wrap: anywhere; }
th { background: var(--canvas); }
.pie .marco { min-height: 5rem; padding-block: .85rem; flex-wrap: wrap; }
.pie span { color: var(--mint); }

@media (max-width: 60rem) {
  .anbieter_zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha { justify-self: start; }
}
@media (max-width: 37rem) {
  .marco { width: calc(100% - 2rem); }
  .barra { align-items: flex-start; flex-direction: column; gap: 0; }
  .barra nav { gap: 1.15rem; }
  .barra nav a { min-height: 44px; }
  .anbieter_zeile { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .ficha { justify-self: stretch; }
  .seo_text { overflow-wrap: anywhere; }
}