/* ==========================================================================
   warm.css — the "homely" layer, ported from dobraopiekawdomu.pl (2026-10-27)

   Loaded after theme.css. Everything here is additive or an override, so
   removing the enqueue in functions.php restores the previous look exactly.

   The formula, as dobra does it:
   - warm cream surfaces (#F8F5EE) instead of white/grey, near-black ink
   - full-bleed photo heroes with a dark scrim that fades from the left,
     a frosted pill eyebrow, a big tight serif headline, frosted info chips
   - chip-style breadcrumb bar on cream above every inner page
   - quiet editorial details: red TL;DR rail, grey note boxes, numbered
     chapter list, hairline rules, 20px card radii, soft shadows
   - no hyphenation in running text (it reads choppy in German)
   ========================================================================== */

:root {
  --color-cream:   #F8F5EE;
  --color-text:    #14171A;
  --color-muted:   #4F565D;
  --color-border:  #E8E3D9;
  --ink-700:       #3A4148;
  --ink-500:       #6B737B;
  --ink-200:       #E8EBEE;
  --ink-100:       #F4F6F8;
  --shadow-card:   0 1px 2px rgba(20, 23, 26, .04), 0 2px 8px rgba(20, 23, 26, .04);
  --shadow-hover:  0 2px 4px rgba(20, 23, 26, .05), 0 12px 24px rgba(20, 23, 26, .08);
}

/* Running text: no automatic hyphenation (was splitting "pflegebedürfti-gen"). */
body, .prose, .prose p, .prose li, .lede {
  hyphens: manual;
  -webkit-hyphens: manual;
}
.prose { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text); }
.prose ul li::marker { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   1. Breadcrumb bar (cream strip with chip trail)
   -------------------------------------------------------------------------- */
.crumbbar {
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-border);
  padding: .5rem 0;
}
.crumbbar .breadcrumb {
  padding: 0;
  gap: .35rem;
  align-items: center;
  font-size: .9375rem;
  color: var(--ink-700);
}
.crumbbar .breadcrumb li { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; }
.crumbbar .breadcrumb li + li::before {
  content: "";
  width: 6px; height: 6px;
  border-top: 1.5px solid #C9C3B8;
  border-right: 1.5px solid #C9C3B8;
  transform: rotate(45deg);
  margin: 0 .2rem 0 0;
}
.crumbbar .breadcrumb a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem;
  border-radius: var(--radius-pill);
  color: var(--ink-700);
  transition: background .18s, color .18s;
}
.crumbbar .breadcrumb a:hover { background: #fff; color: var(--color-primary); }
.crumbbar .breadcrumb li:first-child a::before {
  content: "";
  width: 14px; height: 14px;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.crumbbar .breadcrumb li:last-child > span {
  display: inline-block;
  padding: .3rem .85rem;
  background: #fff;
  color: var(--color-text);
  font-weight: 600;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 3px rgba(20, 23, 26, .04);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 599px) {
  .crumbbar .breadcrumb li:last-child > span { max-width: 22ch; }
  .crumbbar .breadcrumb li:first-child a span { display: none; }
}

/* --------------------------------------------------------------------------
   2. Image hero (pillar pages, Ratgeber hub)
   -------------------------------------------------------------------------- */
.hero-overlay {
  min-height: clamp(520px, 72vh, 680px);
  display: flex;
  align-items: center;
  background: var(--color-text);
}
.hero-overlay__img { object-position: center; }
.hero-overlay__scrim {
  background:
    linear-gradient(90deg, rgba(20,23,26,.78) 0%, rgba(20,23,26,.55) 35%, rgba(20,23,26,.15) 70%, rgba(20,23,26,0) 100%),
    linear-gradient(180deg, rgba(20,23,26,0) 65%, rgba(20,23,26,.3) 100%);
}
.hero-overlay__inner {
  min-height: 0;
  width: 100%;
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  justify-content: center;
}
.hero-overlay__text { max-width: 920px; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: .4rem .875rem;
  margin-bottom: 1.5rem;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
.hero-overlay__title {
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 18ch;
  margin: 0 0 1.75rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.35);
}
.hero-overlay__lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  max-width: 50ch;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 14px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.35);
}
.hero-overlay__ctas { margin-top: 2rem; gap: 1rem; }
.btn-ghost--onimg {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
}

/* Frosted info strip under the lede: reading time, chapters, last update */
.hero-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 2rem 0 0;
  padding: .5rem 1rem;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  color: var(--color-text);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.hero-meta li { display: inline-flex; align-items: center; gap: .45rem; padding: .1rem .625rem; margin: 0; }
.hero-meta li + li { border-left: 1px solid rgba(20,23,26,.12); }
.hero-meta svg { color: var(--color-primary); flex: 0 0 auto; }

@media (max-width: 819px) {
  .hero-overlay { align-items: flex-end; min-height: 70vh; }
  .hero-overlay__img { object-position: 70% center; }
  .hero-overlay__scrim {
    background: linear-gradient(180deg, rgba(20,23,26,.25) 0%, rgba(20,23,26,.55) 50%, rgba(20,23,26,.85) 100%);
  }
  .hero-overlay__inner { padding-top: 6rem; padding-bottom: 2.5rem; }
  .hero-overlay__title { max-width: none; font-size: clamp(2.25rem, 9vw, 2.75rem); }
  .hero-meta { border-radius: var(--radius-md); }
}

/* --------------------------------------------------------------------------
   3. Plain cream hero (pages without a photo: forms, legal)
   -------------------------------------------------------------------------- */
.pillar-hero {
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-border);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.pillar-hero h1 { letter-spacing: -.02em; margin-bottom: 1.25rem; }
.pillar-hero .lede { color: var(--ink-700); max-width: 60ch; }

/* --------------------------------------------------------------------------
   4. Pillar body: byline pill, sidebar, chapter numbers
   -------------------------------------------------------------------------- */
.page-byline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0 0 2rem;
  padding: .55rem 1rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--ink-700);
}
.page-byline strong { color: var(--color-text); }
.page-byline::before {
  content: "";
  width: 18px; height: 18px; flex: 0 0 auto;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 599px) { .page-byline { border-radius: var(--radius-md); } }

.pillar-toc .toc {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.pillar-toc .toc h2 {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.prose h2 { letter-spacing: -.015em; }
.prose h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em; }

/* Cards and callouts get dobra's radius + hairline */
.card, .blog-card, .toc, .inline-cta {
  border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   5. Editorial callouts used inside Ratgeber articles
   -------------------------------------------------------------------------- */
.prose .c-medical-tldr {
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.prose .c-medical-tldr p { margin: 0; }
.prose .c-medical-tldr strong:first-child { color: var(--color-primary); }
.prose .c-medical-disclaimer {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-500);
  background: var(--ink-100);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  margin: 1.5rem 0;
}
.prose .c-medical-disclaimer em { font-style: normal; }
.prose .c-medical-warning {
  background: var(--color-accent-soft);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: .85rem 1.05rem;
  margin: 1.1rem 0;
}
.prose .c-medical-warning p { margin: 0; }
.prose .c-medical-sources-intro { font-size: .9rem; color: var(--ink-500); font-style: italic; }
.prose ol.c-medical-sources {
  background: var(--ink-100);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem 1rem 2.25rem;
  font-size: .9rem;
  line-height: 1.55;
}
.prose ol.c-medical-sources li { margin: .4rem 0; color: var(--ink-700); }
.prose ol.c-medical-sources a { text-decoration: none; border-bottom: 1px solid var(--color-primary-soft); }
.prose ol.c-medical-sources a:hover { border-bottom-color: var(--color-primary); }

/* --------------------------------------------------------------------------
   6. Single Ratgeber article
   -------------------------------------------------------------------------- */
.article-hero {
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-border);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.article-hero .eyebrow { margin-bottom: .75rem; }
.article-hero h1 {
  font-size: clamp(2.125rem, 4.4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
  max-width: 22ch;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  color: var(--ink-700);
}
.article-meta li { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.article-meta svg { color: var(--color-primary); }
.article-meta .article-meta__team {
  padding: .3rem .8rem .3rem .3rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.article-meta__team img { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; background: #fff; }

.article-body { padding-top: clamp(2rem, 5vw, 3rem); }
.article-figure { margin: 0 0 2.25rem; }
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
}

/* "In diesem Beitrag": numbered two-column chapter list instead of a long box */
.article-toc {
  margin: 0 0 2.5rem;
  padding: 0;
  background: none;
  border: 0;
}
.article-toc h2 {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 .75rem;
}
.article-toc ol {
  list-style: none;
  counter-reset: ch;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}
.article-toc li {
  counter-increment: ch;
  display: flex;
  gap: .75rem;
  align-items: baseline;
  padding: .6rem 0;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
  font-size: .9375rem;
  line-height: 1.4;
}
.article-toc li::before {
  content: counter(ch, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: .8125rem;
  color: var(--ink-500);
  flex: 0 0 1.5rem;
}
.article-toc a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.article-toc a:hover { color: var(--color-primary); }
@media (max-width: 640px) { .article-toc ol { grid-template-columns: 1fr; } }

.inline-cta {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  padding: 1.75rem 2rem;
}

/* --------------------------------------------------------------------------
   7. Ratgeber hub: topic chips + photo cards
   -------------------------------------------------------------------------- */
.ratgeber-cats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 2rem;
}
.ratgeber-cats a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .5rem .45rem 1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s, background .18s, color .18s;
}
.ratgeber-cats a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ratgeber-cats a span {
  min-width: 1.6rem;
  padding: .1rem .45rem;
  border-radius: var(--radius-pill);
  background: var(--color-cream);
  color: var(--ink-700);
  font-size: .8125rem;
  text-align: center;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (max-width: 599px)  { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  transition: transform .18s cubic-bezier(.2,.65,.3,1), box-shadow .18s, border-color .18s;
}
.blog-card:hover { transform: translateY(-2px); border-color: transparent; box-shadow: var(--shadow-hover); }

.blog-card__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 230px;
  padding: 1rem 1.25rem;
  overflow: hidden;
  background: var(--color-text);
}
.blog-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.03); }
.blog-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 45%, rgba(0,0,0,.65) 100%);
}
.blog-card__media > *:not(img) { position: relative; z-index: 1; }
.blog-card__badge {
  align-self: flex-end;
  padding: .3rem .7rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.blog-card__overlay { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: auto; }
.blog-card__date {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .32rem .7rem;
  background: rgba(255,255,255,.92);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.blog-card__date svg { color: var(--color-primary); }
.blog-card__title {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: .55rem .95rem;
  background: rgba(255,255,255,.95);
  color: var(--color-text);
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
  hyphens: manual;
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  padding: 1.25rem 1.5rem 1.5rem;
}
.blog-card__excerpt { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-700); }
.blog-card__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--color-primary);
  font-weight: 600;
  font-size: .9375rem;
  transition: gap .18s;
}
.blog-card:hover .blog-card__cta { gap: .5rem; }

.ratgeber-intro { max-width: 70ch; margin: 0 0 2.5rem; }

/* Related articles under a post reuse the card look */
.ratgeber-related .blog-card__title { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   8. General warmth: section tint, CTA strip, eyebrows
   -------------------------------------------------------------------------- */
.section--cream, .block-cta-strip.section--cream { background: var(--color-cream); }
.block-cta-strip h2 { letter-spacing: -.02em; }
.eyebrow { letter-spacing: .1em; }

/* Related articles inside the narrower article column */
.article-body .ratgeber-related { margin-top: 3.5rem; }
.article-body .ratgeber-related h2 { font-size: var(--step-4); margin-bottom: 1.5rem; }
.article-body .blog-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.article-body .blog-card__media { min-height: 190px; }
.article-body .blog-card__excerpt { display: none; }

/* Keep hyphenated compounds together in headlines */
.nw { white-space: nowrap; }
@media (max-width: 380px) { .nw { white-space: normal; } }

/* Less dead space between a photo hero and the first content block */
.hero-overlay + .container-lg.section,
.hero-overlay + div > .container-lg.section { padding-top: clamp(2.5rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   9. Hero sizing across screens (2026-10-27)
   Height follows the screen WIDTH (so a 2560px display does not crop the
   photo to a thin strip) but never exceeds the visible height under the
   header (so a MacBook Air still sees the whole hero). Faces sit in the upper
   part of every photo, so anchor a little above centre.
   -------------------------------------------------------------------------- */
.hero-overlay {
  min-height: clamp(520px, min(44vw, calc(100svh - 120px)), 900px);
}
.hero-overlay__img { object-position: center top; }
/* Peter: text should not grow. Keep the hero H1 at the old theme's size. */
.hero-overlay__title { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); line-height: 1.08; }
.hero-overlay__lede { font-size: var(--step-1); }
.article-hero h1 { font-size: var(--step-5); }
@media (max-width: 819px) {
  .hero-overlay { min-height: max(560px, 78svh); }
  .hero-overlay__img { object-position: 72% top; }
}

/* --------------------------------------------------------------------------
   10. Homepage + section parity with dobra (2026-10-27)
   Same section heads, cards, team and FAQ treatment as dobraopiekawdomu.pl.
   -------------------------------------------------------------------------- */

/* Section heads: centred, small red label without the yellow dot */
.eyebrow { padding-left: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; }
.eyebrow::before { display: none; }
.section-header { text-align: center; max-width: 62ch; margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; }
.section-header h2 { margin-left: auto; margin-right: auto; }
.section-header .lede { margin-left: auto; margin-right: auto; }

/* Subheadings in the serif, regular weight (dobra's quiet editorial look) */
main h3, main h4,
.team-card__name,
.faq-item summary,
.pricing-card__price {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.01em;
}

/* One card language everywhere: white, hairline, 20px radius, gentle lift */
.service-card, .why-card, .pricing-card, .gp-review {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.service-card, .why-card { padding: 2rem; display: flex; flex-direction: column; gap: .5rem; }
.service-card h3, .why-card h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 .25rem; color: var(--color-text); }
.service-card p, .why-card p { color: var(--ink-700); font-size: 1rem; line-height: 1.6; margin: 0; }
.service-card__link { margin-top: auto; padding-top: 1rem; }
@media (hover: hover) {
  .service-card:hover, .why-card:hover, .gp-review:hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: var(--shadow-hover);
  }
}
.why-card { transition: transform .18s, box-shadow .18s, border-color .18s; }
.service-card__icon, .why-card__icon, .tasks-grid__icon {
  width: 48px; height: 48px;
  background: var(--color-cream);
  border-radius: 12px;
  color: var(--color-primary);
  margin-bottom: .75rem;
}
/* "Was uns unterscheidet": four cards need the wide container */
.container-lg:has(> .why-grid--wide) { max-width: var(--container-xl); }

/* Trust strip under the hero: icons on a cream band, no boxes (dobra c-trust-strip) */
.block-trust-badges { background: var(--color-cream); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 2rem 0; }
.trust-badge { background: transparent; border: 0; box-shadow: none; padding: .5rem; }
.trust-badge:hover { transform: none; box-shadow: none; }
.trust-badge__icon { background: #fff; border-radius: 12px; width: 44px; height: 44px; }
.trust-badge__text strong { font-size: .9375rem; color: var(--color-text); }

/* Quote cards ("Deshalb bleibe ich zuhause"): softer rail, rounder */
.reason-card { position: relative; border: 1px solid var(--ink-200); border-radius: var(--radius-lg); box-shadow: none; padding: 2.75rem 1.75rem 1.75rem; }
.reason-card::before { content: "\201C"; position: absolute; top: .9rem; left: 1.6rem; font-family: var(--font-display); font-size: 3.25rem; line-height: 1; color: var(--color-primary); opacity: .35; }

/* Team: round portraits with serif names, like "Ludzie, którzy odbiorą Twój telefon" */
.team-strip { max-width: 980px; margin-left: auto; margin-right: auto; gap: 1.5rem; }
.team-card__photo {
  width: min(150px, 100%);
  aspect-ratio: 1;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(20, 23, 26, .08);
}
.team-card__name { font-size: 1.0625rem; margin-bottom: .15rem; }

/* FAQ: one white card of questions on cream, round "+" chips */
.block-faq { background: var(--color-cream); }
.block-faq + .block-cta-strip { border-top: 1px solid var(--color-border); }
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--ink-200); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { padding: 1.2rem 1.5rem; font-size: 1.0625rem; }
.faq-item summary::after {
  content: "+";
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
}
.faq-answer { padding: 0 1.5rem 1.25rem; }

/* --------------------------------------------------------------------------
   11. Sizing + alignment synced with dobra (2026-10-27)
   Peter: gute read "zoomed in" next to dobra. Header, nav, breadcrumb and
   buttons now use dobra's sizes, long hero copy steps down one size, and
   every hero starts at the same left edge as the logo (dobra's 1400px frame,
   2rem gutters), like dobra's homepage.
   -------------------------------------------------------------------------- */
:root { --frame: 1400px; --gutter: clamp(1rem, 4vw, 2rem); }

.site-header__inner { max-width: var(--frame); padding: 0 var(--gutter); }
.site-nav { gap: .35rem; }
.site-nav__link { font-size: .9375rem; font-weight: 400; padding: .5rem .45rem; }
@media (min-width: 1280px) and (max-width: 1339px) { .site-nav__link { padding: .5rem .25rem; } }

.crumbbar { font-size: .9375rem; }
.crumbbar > .container-lg,
.hero-overlay__inner.container-lg,
.block-hero--cover .block-hero__inner {
  max-width: var(--frame);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Buttons at dobra's scale */
.btn { font-size: 1rem; padding: .8rem 1.4rem; }
.btn-large { font-size: 1.0625rem; padding: .95rem 1.75rem; }

/* Pillar hero copy: same rhythm as dobra, one size down for gute's longer texts */
.hero-overlay__text { max-width: 760px; }
.hero-eyebrow { font-size: .8125rem; padding: .35rem .8rem; margin-bottom: 1.25rem; }
.hero-overlay__title { font-size: clamp(2.25rem, 1.3rem + 2.5vw, 3.375rem); max-width: 20ch; margin-bottom: 1.25rem; }
.hero-overlay__lede { font-size: 1.125rem; line-height: 1.6; max-width: 56ch; }
.hero-overlay__ctas { margin-top: 1.75rem; }
.hero-meta { margin-top: 1.5rem; }
.pillar-hero .container-lg { max-width: var(--frame); padding-left: var(--gutter); padding-right: var(--gutter); }
.site-header__inner { gap: 1.5rem; }
.site-header__logo { margin-right: .75rem; }
@media (min-width: 1025px) and (max-width: 1399px) {
  .site-nav { gap: .1rem; }
  .site-nav__link { padding: .5rem .3rem; font-size: .9rem; }
}
/* The full phone number no longer fits next to the nav inside the 1400px
   frame (logo ® touched "24-Stunden-Pflege" at 1440px+): icon chip everywhere. */
@media (min-width: 1440px) {
  .site-header__phone-text { display: none; }
  .site-header__phone { width: 40px; height: 40px; padding: 0; background: var(--color-primary-soft); color: var(--color-primary); }
  body.home:not(.gp-no-cover) .site-header:not(.scrolled) .site-header__phone { background: rgba(255, 255, 255, 0.14); }
}

/* Ratgeber pagination: hide the a11y heading visually, number pills like dobra */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.navigation.pagination { margin: 2.5rem 0 0; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0 1rem; border: 1px solid var(--ink-200); border-radius: 999px; background: #fff; color: var(--color-text); font-weight: 500; text-decoration: none; transition: border-color .2s, color .2s; }
.navigation.pagination a.page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.navigation.pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.navigation.pagination .page-numbers.dots { border: 0; background: none; }

/* Peter: no head may ever be cut off. Every hero photo is anchored to its top
   edge (the generated images keep headroom above the people), the homepage
   included, where the fading header sits over the top of the photo. */
.block-hero--cover .block-hero__bg img { object-position: 70% top; }
@media (max-width: 819px) { .block-hero--cover .block-hero__bg img { object-position: 82% top; } }
.article-figure img { object-position: center top; }

/* Footer: contact list without bullets, address row aligned like phone and
   e-mail, and the Google / Dobra profile links spaced apart. */
.site-footer__contact { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.site-footer__contact li { display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .9); margin-bottom: .5rem; }
.site-footer__contact li > a { margin-bottom: 0; }
.site-footer__contact li > svg { flex: none; }
.site-footer__profiles { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* Sidebar contents: one card, not a card inside a card; hidden when a page
   has too few headings to list (forms such as /anfrage/). */
.pillar-toc { padding: 0; border: 0; background: none; }
.pillar-toc .toc { margin: 0; }
.pillar-toc:has(ol:empty) { display: none; }

/* Centred sections (404 etc.): headings and ledes centre with their text */
.text-center h1, .text-center h2, .text-center .lede { margin-left: auto; margin-right: auto; }

/* Hero photos settle from a slight zoom on load (same as dobra); the copy
   already rises in via data-animate. Off for reduced motion. */
@keyframes gpHeroSettle { from { transform: scale(1.04); } to { transform: none; } }
.block-hero--cover .block-hero__bg img,
.hero-overlay__img { animation: gpHeroSettle 2.2s cubic-bezier(.2, .7, .2, 1) both; }
.hero-overlay { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .block-hero--cover .block-hero__bg img, .hero-overlay__img { animation: none; }
}

/* Section rhythm: 128px top and bottom doubled into a 256px empty band
   wherever two sections of the same colour met (Leistungen > Im Alltag,
   Kundenstimmen > FAQ > Kontakt). Slightly tighter padding everywhere, and
   a same-colour follower only keeps a small top gap. */
.section { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.block-services + .block-tasks,
.block-testimonials + .block-faq,
.block-faq + .block-cta-strip { padding-top: 1.5rem; }

/* Callback popup photo: the image is cropped with her face on the centre
   line; anchor to the top so her hair is never clipped in the short mobile strip. */
.gp-popup__media img { object-position: center top; }