/* Plantilla común rank & rent: rápida, sin fuentes externas, pensada para móvil. #3b6b2f = color de la marca (se sustituye). */
:root {
  --marca: #3b6b2f;
  --marca-d: color-mix(in srgb, var(--marca) 72%, #000);
  --tinte: color-mix(in srgb, var(--marca) 9%, #fff);
  --tinte2: color-mix(in srgb, var(--marca) 16%, #fff);
  --akzent: #ffb627; --akzent-d: #f2a20c; --akzent-text: #1f1500;
  --texto: #16202a; --suave: #56626e; --linea: #e2e8ee; --fondo: #fff; --fondo2: #f5f8fb;
  --ok: #1d8a54; --ok-tinte: #e9f6ef; --no: #c2412d; --no-tinte: #fcefec;
  --radio: 14px; --sombra: 0 14px 34px -16px rgba(14, 30, 46, .28); --sombra-s: 0 4px 14px -6px rgba(14, 30, 46, .18);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
html, body { overflow-x: clip; }
body { margin: 0; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto); background: var(--fondo); padding-bottom: 70px; }
img { max-width: 100%; height: auto; }
a { color: var(--marca); }
a:hover { text-decoration-thickness: 2px; }
.breite { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 30; }
.ico { width: 22px; height: 22px; flex: none; }
.ico.klein { width: 18px; height: 18px; vertical-align: -3px; }

/* cabecera fija */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linea); }
.kopf .breite { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: -.01em;
  color: var(--texto); text-decoration: none; margin: 0; }
.logo span { color: var(--marca); }
.logo-ico { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: var(--marca); color: #fff; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.menu a { text-decoration: none; color: var(--texto); font-size: 15px; font-weight: 600; }
.menu a[aria-current="page"], .menu a:hover { color: var(--marca); }
@media (max-width: 860px) { .menu, .kopf .klein-knopf { display: none; } }

/* cabecera de página (banda) y portada */
.seitenkopf { background: radial-gradient(1200px 420px at 85% -10%, var(--tinte2), transparent 70%),
  linear-gradient(180deg, var(--tinte), #fff); border-bottom: 1px solid var(--linea); padding: 22px 0 34px; }
.seitenkopf.hero { padding: 34px 0 46px; }
.seitenkopf.hero .breite { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: center; }
@media (max-width: 920px) { .seitenkopf.hero .breite { grid-template-columns: 1fr; gap: 26px; } }
.eyebrow { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 99px; background: #fff;
  border: 1px solid var(--tinte2); color: var(--marca); font-size: 14px; font-weight: 700; }
h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; letter-spacing: -.02em; margin: 6px 0 12px; font-weight: 800; }
.seitenkopf:not(.hero) h1 { font-size: clamp(28px, 4.4vw, 40px); }
.claim { font-size: clamp(20px, 2.6vw, 25px); line-height: 1.3; font-weight: 700; color: var(--marca-d); margin: 0 0 12px; }
.einleitung { font-size: 18px; color: var(--suave); margin: 0 0 16px; max-width: 60ch; }
.punkte { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.punkte li { display: flex; gap: 9px; align-items: center; font-weight: 600; font-size: 16px; }
.punkte .ico { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--ok); color: #fff; stroke-width: 3; }
@media (max-width: 420px) { .punkte { grid-template-columns: 1fr; } }
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.migas { font-size: 14px; color: var(--suave); margin: 0 0 8px; }
.migas a { color: var(--suave); }

/* texto */
main.breite { padding-top: 6px; padding-bottom: 30px; }
h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.22; letter-spacing: -.015em; margin: 52px 0 12px; font-weight: 800; }
h3 { font-size: 19px; margin: 26px 0 6px; }
p, li { max-width: 72ch; }
.nota { background: var(--fondo2); border-left: 4px solid var(--marca); padding: 12px 16px; border-radius: 0 var(--radio) var(--radio) 0; }
.klein { font-size: 14px; color: var(--suave); }
.tabla { overflow-x: auto; margin: 16px 0; border: 1px solid var(--linea); border-radius: var(--radio); }
table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 16px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { background: var(--fondo2); }
main ul:not([class]) li::marker { color: var(--marca); }

/* bandas a todo el ancho dentro del contenido */
.voll { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(16px, calc(50vw - 544px));
  padding-right: max(16px, calc(50vw - 544px)); }

/* franja de confianza */
.vertrauen { background: #fff; border-bottom: 1px solid var(--linea); padding-top: 22px; padding-bottom: 22px; }
.vertrauen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vertrauen li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; max-width: none; }
.vertrauen .ico { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--tinte); color: var(--marca); }
.vertrauen strong { font-size: 16px; }
.vertrauen span { font-size: 14.5px; color: var(--suave); line-height: 1.45; }
@media (max-width: 900px) { .vertrauen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vertrauen ul { grid-template-columns: 1fr; gap: 14px; } }

/* antes / después */
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 8px; }
.vergleich > div { border-radius: var(--radio); padding: 20px 22px; }
.vergleich ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.vergleich li { display: flex; gap: 10px; align-items: flex-start; font-size: 16.5px; }
.vergleich .ico { width: 24px; height: 24px; padding: 4px; border-radius: 50%; color: #fff; stroke-width: 3; margin-top: 1px; }
.vorher { background: var(--no-tinte); }
.vorher .ico { background: var(--no); }
.nachher { background: var(--ok-tinte); }
.nachher .ico { background: var(--ok); }
.spalte-titel { font-weight: 800; font-size: 18px; margin: 0 0 12px; }
.vergleich-fazit { font-weight: 700; font-size: 18px; color: var(--marca-d); }
@media (max-width: 700px) { .vergleich { grid-template-columns: 1fr; } }

/* pasos */
.schritte { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.schritte li { position: relative; background: var(--fondo2); border-radius: var(--radio); padding: 22px 20px 20px; max-width: none; }
.schritte .nr { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--marca); color: #fff;
  font-weight: 800; font-size: 18px; margin-bottom: 12px; }
.schritte strong { display: block; font-size: 18px; margin-bottom: 4px; }
.schritte span:last-child { color: var(--suave); font-size: 16px; }
@media (max-width: 760px) { .schritte { grid-template-columns: 1fr; } .schritte li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; }
  .schritte .nr { grid-row: span 2; margin: 0; } }

/* tarjetas */
.karten { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 18px 0; }
.karten li { max-width: none; }
.karten a { display: flex; flex-direction: column; height: 100%; padding: 20px; border: 1px solid var(--linea); border-radius: var(--radio);
  text-decoration: none; color: var(--texto); background: #fff; box-shadow: var(--sombra-s); transition: transform .15s, box-shadow .15s, border-color .15s; }
.karten a:hover { border-color: var(--marca); transform: translateY(-2px); box-shadow: var(--sombra); }
.karten .chip { width: 46px; height: 46px; padding: 11px; border-radius: 12px; background: var(--tinte); color: var(--marca); margin-bottom: 12px; }
.karten strong { display: block; font-size: 18px; margin-bottom: 4px; }
.karten span { font-size: 15.5px; color: var(--suave); flex: 1; }
.karten em { font-style: normal; font-weight: 700; font-size: 15px; color: var(--marca); margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .karten a { transition: none; } .karten a:hover { transform: none; } }

/* botones */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--akzent); color: var(--akzent-text);
  padding: 14px 22px; border-radius: 12px; text-decoration: none; font-weight: 800; border: 0; font-size: 17px; cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(160, 100, 0, .7); line-height: 1.2; }
.knopf:hover { background: var(--akzent-d); }
.knopf:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.knopf.hell { background: #fff; color: var(--marca); border: 2px solid var(--marca); box-shadow: none; }
.knopf.hell:hover { background: var(--tinte); }
.knopf.breit { width: 100%; }
.klein-knopf { padding: 10px 16px; font-size: 15px; }

/* llamada a la acción en el texto */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; background: var(--marca);
  color: #fff; border-radius: var(--radio); padding: 22px 24px; margin: 34px 0; box-shadow: var(--sombra); }
.cta p { margin: 2px 0; max-width: 56ch; }
.cta-titel { font-weight: 800; font-size: 20px; }
.cta-knopf { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* cierre */
.abschluss { margin-top: 56px; background: linear-gradient(135deg, var(--marca), var(--marca-d)); color: #fff; text-align: center;
  padding-top: 46px; padding-bottom: 50px; }
.abschluss h2 { margin: 0 0 8px; color: #fff; }
.abschluss p { margin: 8px auto; font-size: 18px; color: rgba(255, 255, 255, .88); }

/* preguntas frecuentes */
.frage { border: 1px solid var(--linea); border-radius: 12px; margin: 10px 0; background: #fff; max-width: 820px; }
.frage summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 700; position: relative; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px;
  font-weight: 400; color: var(--marca); }
.frage[open] summary::after { content: "–"; }
.frage p { margin: 0; padding: 0 18px 16px; color: var(--suave); }

/* formulario */
.anfrage { background: var(--fondo2); border-radius: var(--radio); padding: 24px; margin: 46px 0 10px; border: 1px solid var(--linea); }
.anfrage h2 { margin-top: 0; }
.anfrage.kurz { background: #fff; margin: 0; box-shadow: var(--sombra); border: 1px solid var(--linea); padding: 24px 22px 20px; }
.anfrage.kurz h2 { font-size: 23px; margin: 0 0 4px; }
.anfrage-text { color: var(--suave); margin: 0 0 8px; }
.formular label { display: block; font-weight: 600; font-size: 15px; margin: 10px 0; }
.formular input, .formular select, .formular textarea { display: block; width: 100%; margin-top: 4px; padding: 12px; font: inherit;
  font-size: 16px; border: 1px solid #c3ccd5; border-radius: 10px; background: #fff; color: var(--texto); }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 3px solid var(--tinte2); border-color: var(--marca); }
.formular .feld-gruppe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .formular .feld-gruppe { grid-template-columns: 1fr; } }
.formular .check { display: flex; gap: 10px; font-weight: 400; font-size: 13.5px; line-height: 1.45; color: var(--suave); align-items: flex-start; }
.formular .check input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.formular .knopf { margin-top: 6px; }
.mini-vorteile { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 0; margin: 12px 0 0;
  font-size: 14px; color: var(--suave); }
.mini-vorteile li { display: flex; gap: 5px; align-items: center; }
.mini-vorteile .ico { color: var(--ok); stroke-width: 3; }
.opt { font-weight: 400; color: var(--suave); }
.hp { position: absolute; left: -9999px; }

/* calculadora */
.rechner { border: 2px solid var(--marca); border-radius: var(--radio); padding: 22px; margin: 32px 0; background: #fff; box-shadow: var(--sombra-s); }
.rechner h2 { margin-top: 0; }
.rechner-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.rechner-felder label { font-weight: 600; font-size: 15px; }
.rechner-felder input, .rechner-felder select { display: block; width: 100%; margin-top: 4px; padding: 11px; font: inherit; font-size: 16px;
  border: 1px solid #c3ccd5; border-radius: 10px; background: #fff; }
.rechner-ergebnis { font-size: 22px; font-weight: 800; color: var(--marca-d); margin: 16px 0 4px; }

/* pie y barra fija en móvil */
.fuss { background: #121b24; color: #c4cdd5; margin-top: 0; padding: 40px 0 26px; }
main + .fuss { margin-top: 40px; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .logo { color: #fff; }
.fuss .klein { color: #9aa6b1; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin: 5px 0; font-size: 15px; }
.fuss-titel { font-weight: 700; color: #fff; margin: 0 0 8px; }
.raster { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; }
@media (max-width: 760px) { .raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .raster { grid-template-columns: 1fr; } }
main, .fuss, .seitenkopf { overflow-wrap: break-word; } /* palabras alemanas largas */
@media (max-width: 480px) { main p, main li, main td, .fuss li, .einleitung { hyphens: auto; } h1, h2, h3, .claim { hyphens: manual; } }
.leiste { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--linea); z-index: 15; }
.leiste a { flex: 1; text-align: center; padding: 13px; border-radius: 12px; font-weight: 800; text-decoration: none; }
.leiste-anfrage { background: var(--akzent); color: var(--akzent-text); }
.leiste-tel { border: 2px solid var(--marca); color: var(--marca); }
@media (min-width: 861px) { .leiste { display: none; } body { padding-bottom: 0; } }
.seitenkopf:not(.hero) .punkte { max-width: 620px; }

/* fotos */
.karten a.mit-foto { padding: 0; overflow: hidden; }
.karten a.mit-foto > strong, .karten a.mit-foto > span, .karten a.mit-foto > em { padding-left: 20px; padding-right: 20px; }
.karten a.mit-foto > strong { margin-top: 16px; }
.karten a.mit-foto > em { padding-bottom: 18px; }
.karte-foto { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--tinte); flex: none !important; padding: 0 !important; }
.karte-bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.karte-foto .chip { position: absolute; left: 14px; bottom: -20px; margin: 0; background: #fff; box-shadow: var(--sombra-s); }
.karten a.mit-foto > strong { margin-top: 30px; }
.sk-foto { border-radius: 18px; overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 3 / 2; background: var(--tinte); }
.sk-bild { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 920px) { .sk-foto { aspect-ratio: 16 / 9; } }
.mit-bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; margin: 20px 0; }
.mit-bild .bild { display: block; width: 100%; height: 100%; max-height: 440px; object-fit: cover; border-radius: 18px; box-shadow: var(--sombra); }
.schritte.senkrecht { grid-template-columns: 1fr; margin: 0; }
.schritte.senkrecht li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; }
.schritte.senkrecht .nr { grid-row: span 2; margin: 0; }
@media (max-width: 760px) { .mit-bild { grid-template-columns: 1fr; } .mit-bild .bild { max-height: 240px; } }