/* transport-boss.com: nur die Seite /givve-card/. Gemeinsame Regeln stehen in site.css. */

/* ---------- Kopf mit Erklärfilm ---------- */
.givve-kopf-raster { display: grid; gap: 2.5rem; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.givve-kopf.seitenkopf { padding-bottom: 0; }
.givve-kopf h1 { font-size: clamp(2.5rem, 4.6vw, 4rem); max-width: 17ch; }
.givve-kopf .lead { margin-bottom: 2rem; }
.givve-kurz { display: none; }
@media (max-width: 599px) {
  .givve-kurz { display: block; }
  .givve-voll { display: none; }
}
@media (min-width: 980px) {
  .givve-kopf-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 4rem; align-items: center; }
}

.givve-film { margin-top: 0; }
.givve-film-rahmen { position: relative; }
.givve-film-ende {
  position: absolute; inset: 2px; z-index: 2;
  flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1rem;
  background: var(--navy); color: #fff; text-align: center;
}
.givve-film-ende:not([hidden]) { display: flex; }
.givve-film-ende > span { font-size: .9375rem; }
.givve-film-nochmal {
  min-height: 44px; padding: 0 1rem; background: transparent; color: #fff; cursor: pointer;
  border: 2px solid #fff; border-radius: var(--radius);
  font: 700 1rem/1 var(--schrift-plane); text-transform: uppercase; letter-spacing: .05em;
}
.givve-film-nochmal:hover { background: rgba(255, 255, 255, .1); }

/* Knopftexte dürfen am schmalen Handy umbrechen, statt seitlich überzustehen */
@media (max-width: 479px) {
  .givve .knopf span { white-space: normal; line-height: 1.1; padding: .7rem 1rem; }
  .givve .knopf-zwei { line-height: 1.1; padding: .7rem 1.1rem; }
}

/* ---------- Kennzahlen als Zeile mit Haarlinien ---------- */
.givve-fakten-band { padding: clamp(2rem, 4vw, 3rem) 0; }
.givve-fakten { display: grid; border-top: 2px solid var(--navy); }
.givve-fakten > div { padding: 1.1rem 0; border-bottom: 1px solid var(--linie); }
.givve-fakten dt { font: 800 clamp(1.75rem, 2.6vw, 2.25rem)/1.05 var(--schrift-plane); color: var(--navy); font-variant-numeric: tabular-nums; margin-bottom: .35rem; }
.givve-fakten dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
@media (min-width: 700px) {
  .givve-fakten { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}
@media (min-width: 1100px) {
  .givve-fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .givve-fakten > div { padding: 1.25rem 1.75rem 1.25rem 0; border-bottom: 0; }
  .givve-fakten > div + div { padding-left: 1.75rem; border-left: 1px solid var(--linie); }
}

/* ---------- Beispielrechnung ---------- */
.givve-hinweis { margin-top: 1.25rem; max-width: 65ch; }
.givve-tabelle { width: 100%; border-collapse: collapse; border-top: 2px solid var(--navy); font-variant-numeric: tabular-nums; }
.givve-tabelle th, .givve-tabelle td { padding: .9rem .75rem .9rem 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--linie); }
.givve-tabelle th:last-child, .givve-tabelle td:last-child { padding-right: 0; }
.givve-tabelle th { font: 700 .875rem/1.25 var(--schrift-plane); text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.givve-tabelle td { color: var(--text-2); }
.givve-tabelle td + td { font: 800 1.25rem/1.25 var(--schrift-plane); white-space: nowrap; }
.givve-summe td { color: var(--navy); }
.givve-summe td:first-child { font-weight: 600; }
.givve-summe td:last-child span { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 4px; text-underline-offset: 6px; }
@media (max-width: 599px) {
  .givve-tabelle th { font-size: .8125rem; letter-spacing: .04em; }
  .givve-tabelle td + td { font-size: 1.0625rem; white-space: normal; }
  .givve-tabelle td:first-child { font-size: .9375rem; }
}
.givve-tabelle + .vermerk { margin-top: 1.5rem; }

/* ---------- Drei Bausteine ---------- */
.givve-bausteine { display: grid; border-top: 2px solid var(--navy); }
.givve-bausteine > div { display: flex; flex-direction: column; padding: 1.75rem 0; border-bottom: 1px solid var(--linie); }
.givve-bausteine img { width: 180px; height: 180px; border-radius: 2px; margin-bottom: 1.25rem; }
.givve-bausteine h3 { margin-bottom: .5rem; }
.givve-bausteine p { color: var(--text-2); margin-bottom: 1.25rem; max-width: 60ch; }
.givve-weiter { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 600; color: var(--navy); text-decoration: none; }
.givve-weiter span { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.givve-weiter .pfeil { width: 28px; height: 14px; flex: none; transition: transform .2s var(--ease); }
.givve-weiter:hover .pfeil { transform: translateX(4px); }
@media (min-width: 980px) {
  .givve-bausteine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .givve-bausteine > div { padding: 2rem 2.25rem 1.5rem 0; border-bottom: 0; }
  .givve-bausteine > div + div { padding-left: 2.25rem; border-left: 1px solid var(--linie); }
  .givve-bausteine img { width: 220px; height: 220px; }
}

/* ---------- Nutzenlisten mit Ösen ---------- */
.givve-liste { border-top: 2px solid var(--navy); }
.givve-liste li { position: relative; padding: .85rem 0 .85rem 1.85rem; border-bottom: 1px solid var(--linie); color: var(--text-2); }
.givve-liste li::before {
  content: ""; position: absolute; left: 0; top: 1.15rem; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, var(--plane) 0 30%, var(--alu-2) 34% 64%, var(--alu-kante) 68%);
}
@media (min-width: 980px) { .givve-nutzen { grid-template-columns: 1fr 1fr; } }

/* ---------- Für wen ---------- */
@media (min-width: 980px) { .givve-zeilen .zeile { grid-template-columns: 24rem minmax(0, 1fr); } }

/* ---------- Direkt zu givve ---------- */
.givve-los { display: block; width: fit-content; margin-top: .4rem; font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.givve-nachsatz { margin-top: 2rem; }

/* ---------- Rechtsbox ---------- */
.givve-recht-abschnitt { padding: 0 0 var(--abschnitt); }
.givve-recht { max-width: 72ch; padding: 1.25rem 1.5rem; border: 1px solid var(--alu-kante); background: var(--schild); font-size: .9375rem; line-height: 1.6; color: var(--text-2); }

/* ---------- Leiste unten am Handy: direkt zu den Partnerlinks ---------- */
.leiste-handy:not(.givve-leiste) { display: none; }
.givve-leiste .knopf { flex: 1; min-height: 52px; font-size: 1.0625rem; }
.givve-leiste .knopf span { flex: 1; justify-content: center; text-align: center; padding: 0 .75rem; border-radius: var(--radius); }
.givve-leiste .knopf-zwei { flex: 1; justify-content: center; min-height: 52px; padding: 0 .75rem; font-size: 1.0625rem; background: var(--schild); text-align: center; }
@media (max-width: 479px) {
  .givve .givve-leiste .knopf span, .givve .givve-leiste .knopf-zwei { padding: .45rem .6rem; }
}

/* ---------- Schluss: lange Zeile, deshalb kleiner und breiter als der Standard ---------- */
.givve .schluss h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); max-width: 22ch; }