/* ==========================================================================
   Lebensnah Betreut - Designsystem "Ruhig und warm"
   Eine Farbe hier geaendert, und alle sieben Seiten folgen.
   ========================================================================== */

:root {
  /* Flaechen */
  --paper: #fbf8f3; /* Grund der Seite, warmes Papier */
  --surface: #fffdfa; /* Karten */
  --sand: #f2ede4; /* ruhige Hinterlegung, Hinweiskaesten */
  --line: #e7dfd3; /* Rahmen und Trennlinien */
  --line-soft: #efe8dc; /* feinere Linien in Tabellen */
  --field-line: #d8cdbc; /* Rahmen von Eingabefeldern */

  /* Text */
  --ink: #211e1b;
  --ink-strong: #1a2e2b; /* Ueberschriften */
  --muted: #4a443e; /* Flieszttext */
  --muted-soft: #6b635c;
  --faint: #8a7f72; /* Eyebrows, Bildunterschriften */

  /* Leitfarben */
  --teal: #0b7a79; /* Petrol, Leitfarbe */
  --teal-dark: #075d5c;
  --teal-tint: #eaf2ef;
  --lime: #9bb50a; /* Akzent aus dem Logo */
  --lime-soft: #a8c58f;

  /* Dunkle Baender */
  --deep: #12403c;
  --deep-dark: #0e332f;
  --deep-text: #f3efe7;
  --deep-muted: #c9dcd3;
  --footer-text: #b7ccc4;
  --footer-faint: #8fa9a0;

  /* Schrift */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:
    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;

  /* Maszte */
  --radius-lg: 24px;
  --radius: 20px;
  --radius-sm: 12px;
  --wrap: 1180px;
  --pad: 28px;
}

/* --- Grundlagen ---------------------------------------------------------- */

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}
figure {
  margin: 0;
}

a {
  color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--teal-dark);
}
::selection {
  background: #ddeae6;
}
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  color: var(--ink-strong);
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 243, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.logo img {
  display: block;
  width: clamp(168px, 20vw, 230px);
  height: auto;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(4px, 1.6vw, 22px);
  justify-content: flex-end;
}
.nav__link {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__link:hover {
  color: var(--teal);
}
.nav__link[aria-current="page"] {
  color: var(--teal);
  border-bottom-color: var(--lime);
}
.nav__phone {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--paper);
  background: var(--teal);
  padding: 11px 20px;
  border-radius: 999px;
  white-space: nowrap;
}
.nav__phone:hover {
  background: var(--teal-dark);
  color: var(--paper);
}

/* --- Schaltflaechen ------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--primary {
  color: var(--paper);
  background: var(--teal);
}
.btn--primary:hover {
  background: var(--teal-dark);
  color: var(--paper);
}
.btn--ghost {
  color: var(--ink-strong);
  border-color: var(--field-line);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.btn--light {
  color: var(--deep);
  background: var(--deep-text);
}
.btn--light:hover {
  background: #ffffff;
  color: var(--deep);
}
.btn--outline-light {
  color: var(--deep-text);
  border-color: rgba(243, 239, 231, 0.45);
}
.btn--outline-light:hover {
  border-color: var(--deep-text);
  color: var(--deep-text);
}
.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- Startseite ---------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 72px);
}
.eyebrow {
  margin: 0 0 22px;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.hero__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero__lede {
  margin: 26px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.4;
  color: var(--teal);
}
.hero__text {
  margin: 22px 0 0;
  max-width: 46ch;
  color: var(--muted);
}
.hero .btn-row {
  margin-top: 34px;
}

.photo {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.photo--hero {
  height: clamp(320px, 44vw, 520px);
}
.photo--wide {
  height: clamp(260px, 32vw, 420px);
}
.photo--tall {
  height: clamp(340px, 42vw, 520px);
}
.photo--half {
  height: clamp(260px, 30vw, 380px);
}
.photo--small {
  height: clamp(240px, 26vw, 320px);
}
.figcaption {
  margin-top: 14px;
  font-size: 15px;
  color: var(--faint);
  font-style: italic;
  font-family: var(--serif);
}

.facts {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.fact {
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 36px);
  border-left: 1px solid var(--line);
}
.fact:first-child {
  border-left: 0;
}
.fact__value {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.1;
  color: var(--teal);
}
.fact__label {
  margin-top: 10px;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Abschnitte und Karten ---------------------------------------------- */

.section {
  padding: clamp(56px, 7vw, 96px) 0;
}
.section--tight {
  padding: 0 0 clamp(48px, 6vw, 80px);
}
.section__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 42px);
}
.section__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.14;
}
.section__title--sm {
  font-size: clamp(28px, 3.4vw, 42px);
}
.section__link {
  font-size: 16px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid var(--lime-soft);
}
.section__intro {
  margin: 0 0 clamp(28px, 4vw, 44px);
  max-width: 56ch;
  color: var(--muted);
}

/* Zwei mal zwei statt drei plus eins.
   Mit auto-fit passten bei 1024 bis 1440 Pixeln drei Kacheln nebeneinander -
   die vierte stand allein in der zweiten Zeile, daneben zwei leere Zellen.
   Beide Seiten mit dieser Klasse (Startseite und 404) haben genau vier
   Kacheln, ein festes Zweierraster geht hier also immer auf. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
}
/* Die Nummern sehen in beiden Bloecken gleich aus - eine Regel, zwei Namen.
   Ein zweites Regelwerk liefe hier auseinander, sobald jemand nur eines anfasst. */
.card__num,
.ruled__num {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--lime);
}
.card__title {
  margin: 10px 0;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
}
.card__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--muted);
}

/* Ruled cards: Leistungsdetails und Leitwerte */
.ruled {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(28px, 4vw, 56px);
}
/* Zusatz fuer Bloecke mit genau vier Elementen - dieselbe Ueberlegung wie
   bei .cards. Bewusst NICHT auf .ruled selbst: die Klasse tragen auch
   pages/ueber-uns.php mit drei Elementen und pages/datenschutz.php mit
   Bloecken zu zwei, drei und vier. Ein Zweierraster fuer alle machte aus
   den Dreierbloecken ein "2 + 1" und damit das Gegenteil von besser. */
.ruled--paar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Die Kachelhoehen sind ungleich, weil die Listen unterschiedlich lang sind.
   Ohne das stuende die Kostenzeile in jeder Kachel woanders; so sitzt sie
   immer unten und die Zeile liest sich als eine Reihe.
   Bewusst nur hier: die uebrigen .ruled-Bloecke tragen keine Kostenzeile. */
.ruled--paar .ruled__item {
  display: flex;
  flex-direction: column;
}
.ruled--paar .ruled__kosten {
  margin-top: auto;
}
.ruled__item {
  border-top: 2px solid var(--ink-strong);
  padding-top: 22px;
}
.ruled__title {
  margin: 8px 0 12px;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.22;
}
.ruled__text {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

/* Die konkreten Taetigkeiten, bisher im Flieszttext vergraben. Als Liste
   sind sie in Sekunden erfassbar - wer wissen will, ob das Einkaufen
   dabei ist, muss keinen 216-Zeichen-Satz lesen. Umbrechend, damit sie
   sich der Kachelbreite anpassen. */
.ruled__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.ruled__list li {
  position: relative;
  padding-left: 15px;
}
.ruled__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
}

/* Die Kostenfrage direkt an der Leistung statt erst im Kasten darunter.
   Wer "Entlastung pflegender Angehoeriger" liest, will als Naechstes
   wissen, wer das bezahlt. */
.ruled__kosten {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
  color: var(--teal);
  font-weight: 600;
}

/* --- Zitatband ----------------------------------------------------------- */

.quote-band {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 0 clamp(56px, 7vw, 96px);
}
.quote-band img {
  display: block;
  width: 100%;
  height: clamp(300px, 34vw, 420px);
  object-fit: cover;
}
.quote-band__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(
    90deg,
    rgba(15, 44, 40, 0.82) 0%,
    rgba(15, 44, 40, 0.55) 52%,
    rgba(15, 44, 40, 0.15) 100%
  );
}
.quote-band blockquote {
  margin: 0;
  padding: clamp(28px, 5vw, 64px);
  max-width: 34ch;
  color: var(--paper);
}
.quote-band p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.3;
}
.quote-band footer {
  margin-top: 22px;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfe0a8;
}

/* --- Seitenkopf der Unterseiten ------------------------------------------ */

.page-head {
  padding: clamp(44px, 6vw, 80px) 0 clamp(32px, 4vw, 56px);
  max-width: 780px;
}
.page-head--narrow {
  max-width: 820px;
}
.page-head__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.08;
}
.page-head__text {
  margin: 24px 0 0;
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--end {
  align-items: end;
  gap: clamp(32px, 5vw, 64px);
}
.split--pad {
  padding: clamp(44px, 6vw, 88px) 0;
}

/* --- Hinweisflaeche und Kassen ------------------------------------------- */

.panel {
  background: var(--sand);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 56px);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.panel__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.14;
}
.panel__text {
  margin: 18px 0 30px;
  max-width: 62ch;
  color: var(--muted);
}

/* Vier Finanzierungswege, wie im Flyer. Mit auto-fit passten je nach Breite
   drei nebeneinander - der vierte stand allein. Zwei mal zwei geht immer auf
   und nimmt den Rhythmus des Leistungsrasters darueber auf. */
.kassen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Die Abtretungserklaerung ist kein Geldtopf, sondern die Antwort auf "wie
   bezahle ich". Sie stand bisher als vierte Kachel zwischen den Budgets und
   verwischte damit die Aufzaehlung. */
.panel__hinweis {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.panel__hinweis::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--lime);
  vertical-align: middle;
}
.kasse {
  background: var(--paper);
  border-radius: 16px;
  padding: 26px;
}
.kasse__law {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.kasse__amount {
  margin: 8px 0 10px;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  color: var(--teal);
}
.kasse__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

/* --- Flyer --------------------------------------------------------------- */

.flyer-intro {
  margin: 0 0 32px;
  max-width: 60ch;
  color: var(--muted);
}

/* --- Haeufige Fragen ----------------------------------------------------- */

.faq-group {
  margin-bottom: clamp(36px, 5vw, 60px);
}
.faq-group__title {
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 26px;
  color: var(--teal);
}
.faq-item {
  border-top: 1px solid var(--field-line);
  padding: 4px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 20px 40px 20px 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-strong);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--teal);
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 18px;
  font-size: 26px;
  font-weight: 300;
  color: var(--teal);
  line-height: 1;
}
.faq-item[open] summary::after {
  content: "\2013";
}
.faq-item__answer {
  padding: 0 40px 26px 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.68;
}

/* --- Kontakt ------------------------------------------------------------- */

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
}
.contact-card__label {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.contact-card__value {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink-strong);
}
.contact-card__note {
  margin-top: 8px;
  font-size: 16px;
  color: var(--muted-soft);
  line-height: 1.5;
}

.steps {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 26px;
}
.steps__title {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.35;
  color: var(--ink-strong);
}
.steps ol {
  margin: 16px 0 0;
  padding-left: 22px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

/* --- Formular ------------------------------------------------------------ */

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-strong);
}
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 18px;
}
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form select,
.form textarea {
  font: inherit;
  font-size: 18px;
  padding: 14px 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.form select {
  font-size: 17px;
}
.form textarea {
  resize: vertical;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}
.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.check input {
  margin-top: 5px;
  width: 20px;
  height: 20px;
  accent-color: var(--teal);
  flex: 0 0 auto;
}
.form .btn {
  align-self: flex-start;
  font-size: 18px;
  padding: 17px 28px;
}

/* --- Rechtstexte --------------------------------------------------------- */

.legal {
  max-width: 780px;
  padding: clamp(44px, 6vw, 80px) 0 clamp(48px, 6vw, 88px);
}
.legal__title {
  margin: 0 0 12px;
  font-weight: 300;
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.1;
}
.legal__stand {
  margin: 0 0 40px;
  color: var(--muted-soft);
  font-size: 17px;
}
.legal__item {
  border-top: 1px solid var(--field-line);
  padding: 26px 0;
}
.legal__item h2 {
  margin: 0 0 12px;
  font-weight: 400;
  font-size: 24px;
}
.legal__item p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.68;
}
.legal__item p + p {
  margin-top: 12px;
}

/* --- Abschlussband und Fusszeile ---------------------------------------- */

.cta-band {
  background: var(--deep);
  color: var(--deep-text);
}
.cta-band__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 84px) var(--pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.cta-band__title {
  margin: 0;
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.12;
  color: var(--deep-text);
}
.cta-band__text {
  margin: 18px 0 0;
  color: var(--deep-muted);
  max-width: 44ch;
}
.cta-band .btn-row {
  justify-content: flex-end;
}

.site-footer {
  background: var(--deep-dark);
  color: var(--footer-text);
}
.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px) var(--pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 32px;
}
.site-footer__name {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--deep-text);
}
.site-footer p {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
}
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
}
.site-footer a {
  color: var(--footer-text);
  text-decoration: none;
  width: fit-content;
}
.site-footer a:hover {
  color: var(--deep-text);
}
.site-footer__base {
  border-top: 1px solid rgba(183, 204, 196, 0.2);
}
.site-footer__base p {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px var(--pad);
  font-size: 15px;
  color: var(--footer-faint);
}

/* --- Kleine Geraete ------------------------------------------------------ */

@media (max-width: 720px) {
  body {
    font-size: 18px;
  }
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .nav {
    justify-content: flex-start;
    gap: 14px;
  }
  /* Auf schmalen Geraeten untereinander - zwei Spalten waeren dort zu eng. */
  .cards,
  .ruled--paar,
  .kassen {
    grid-template-columns: 1fr;
  }
  .fact {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .fact:first-child {
    border-top: 0;
  }
  .cta-band .btn-row {
    justify-content: flex-start;
  }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
  .site-header,
  .cta-band,
  .nav__phone {
    display: none;
  }
  body {
    background: #ffffff;
    font-size: 12pt;
  }
  .photo,
  .quote-band {
    break-inside: avoid;
  }
}