/* Knödel's VITA — Draft B "Bild zuerst"
   Full-bleed hero image, immersive full-width color bands. CI-konform. */

:root {
  --blau:        #2D3C8C;
  --blau-dark:   #1E2A6B;
  --beige:       #C8AA76;
  --beige-soft:  #F3EBDB;
  --beige-line:  #E6D9BF;
  --gold-text:   #8A6C36;
  --ink:         #1E2330;
  --muted:       #5A6072;
  --line:        #E3E6EF;
  --surface:     #F4F6FB;
  --sage:        #4E7C6B;
  --sage-soft:   #E7EFEB;
  --white:       #FFFFFF;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;          /* B-3: larger, apple-like */
  --shadow: 0 1px 2px rgba(30,35,48,.04), 0 16px 40px -30px rgba(30,35,48,.25);

  --f: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* motion: strong curves, UI stays under 300ms */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:    160ms;   /* hover, colour, press feedback */
  --dur-base:    200ms;   /* small morphs, focus states */
  --dur-panel:   260ms;   /* mobile menu panel */
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* subpages stack a sticky header (84px) over a sticky localnav (60px):
   anchor targets have to clear both, plus a little air. The homepage header
   is absolute, so it keeps the browser default. */
html:has(.site-header--solid) { scroll-padding-top: calc(84px + 60px + 16px); }
body { margin: 0; background: var(--surface); color: var(--ink); overflow-x: hidden;
  font-family: var(--f); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--blau); text-decoration: none; transition: color var(--dur-fast) ease; }
a:hover { color: var(--blau-dark); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; color: var(--blau); font-weight: 700; text-wrap: balance; }
p { margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--beige); outline-offset: 3px; }

.wrap { width: min(100% - calc(var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-text); margin: 0 0 1rem; display: block; }
.lead { font-size: 1.22rem; color: var(--muted); line-height: 1.55; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit;
  font-weight: 600; font-size: .98rem; padding: .8em 1.45em; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent; white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
    border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.apply__submit { white-space: normal; }
/* lift only where a real cursor exists: on touch, :hover sticks after the tap */
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--blau); color: #fff; }
.btn--primary:hover { background: var(--blau-dark); color: #fff; }
.btn--beige { background: var(--beige); color: var(--blau-dark); }
.btn--beige:hover { background: #d8bd8e; }
.btn--onbeige { border-color: var(--blau); color: var(--blau); }
.btn--onbeige:hover { background: var(--blau); color: #fff; }
.btn--outline-light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--blau); }

.pill { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700;
  padding: .5em 1.1em; border-radius: 999px; }
.pill--onhero { color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px); }
.pill--onhero::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--beige); }

.leaf { position: relative; padding-left: 1.75rem; }
.leaf::before { content: ""; position: absolute; left: 0; top: .4em; width: 13px; height: 13px;
  background: var(--beige); border-radius: 0 60% 0 60%; transform: rotate(45deg); }

/* placeholder photo treatment (stands in for real hero photo) */
.ph { position: relative; overflow: hidden; border-radius: var(--radius); background:
  linear-gradient(135deg, #E9E2D2, #D8CBB0 55%, #CBBB98); }
.ph::after { content: attr(data-cap); position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(30,35,48,.5); font-weight: 700; white-space: nowrap; }
.ph--sage { background: linear-gradient(135deg, #DCE8E1, #BFD2C8); }
.ph--blue { background: radial-gradient(120% 120% at 75% 10%, #35459E, #2D3C8C 50%, #1E2A6B); }
.ph--blue::after { color: rgba(255,255,255,.6); }

/* real photos share the placeholder geometry */
.photo { width: 100%; object-fit: cover; border-radius: var(--radius); }

/* ---------- header (overlay on hero) ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 84px; }
.brand { background: rgba(255,255,255,.95); border-radius: 10px; padding: 8px 12px; box-shadow: 0 6px 20px -10px rgba(0,0,0,.5); }
.brand img { height: 40px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 1.7rem; }
.nav a:not(.btn) { color: #fff; font-weight: 600; font-size: .95rem; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.nav a:not(.btn):hover { color: var(--beige); }
.nav .btn { padding: .6em 1.3em; font-size: .95rem; }
.nav-toggle { display: none; }

/* ---------- full-bleed hero ---------- */
.hero { position: relative; min-height: 88vh; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; overflow: hidden; }
.hero__img { position: absolute; inset: 0; z-index: 0;
  background: #1E2A6B url("../img/hero-raubling.png") center / cover no-repeat; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(180deg, rgba(20,26,64,.52) 0%, rgba(20,26,64,0) 24%),
  linear-gradient(95deg, rgba(20,26,64,.92) 0%, rgba(20,26,64,.7) 34%, rgba(20,26,64,.28) 62%, rgba(20,26,64,0) 84%),
  linear-gradient(0deg, rgba(20,26,64,.5) 0%, rgba(20,26,64,0) 40%); }
.hero .wrap { position: relative; z-index: 2; min-width: 0; padding: 3rem 0 clamp(3rem, 7vw, 5.5rem); }
.hero__inner { max-width: 760px; }
.hero h1 { overflow-wrap: break-word; }
.hero .eyebrow { color: var(--beige); }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.025em; line-height: 1.02; margin-bottom: .3em; }
.hero .lead { color: rgba(255,255,255,.92); font-size: clamp(1.1rem, 2.2vw, 1.4rem); max-width: 44ch; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.8rem 0 1.4rem; }

/* section rhythm — apple-like generous spacing, left-aligned two-tone heads */
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section__head { margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.section__head .lead { max-width: 62ch; }
.section__head.center { margin-inline: auto; text-align: center; }
.section__head h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -.02em; line-height: 1.18; }
.section__head h2 .dim { color: var(--muted); }
.trust h2 .dim { color: var(--muted); }
.section--surface { background: transparent; }

/* intro strip */
.intro { padding: clamp(2.5rem,5vw,4rem) 0; }
.intro .wrap { max-width: 900px; text-align: center; }
.intro p { font-size: clamp(1.25rem, 2.6vw, 1.7rem); color: var(--ink); font-weight: 500; line-height: 1.45; text-wrap: balance; }

/* houses as alternating full-width blocks */
.house-block .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.house-block:nth-of-type(even) .house-block__media { order: 2; }
.house-block__media .ph, .house-block__media .photo { aspect-ratio: 4/3; box-shadow: var(--shadow); }
.house-block__tag { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.house-block h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin: .3rem 0 .5rem; }
.house-block ul { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .7rem; }

/* trust band — light warm variant (B-2: sits directly under the dark hero) */
.trust { background: var(--beige-soft); border-bottom: 1px solid var(--beige-line); }
.trust .wrap { padding: clamp(2.6rem,5vw,4rem) 0; text-align: center; }
.trust .eyebrow { color: var(--gold-text); }
.trust h2 { color: var(--blau); margin-bottom: 2.2rem; }
.trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
/* award plaques — white certificates on the Königsblau wall */
.award { background: #fff; border-radius: var(--radius); padding: 2rem 1.4rem 1.8rem; box-shadow: var(--shadow);
  border-top: 4px solid var(--beige); display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.award__medal { width: 46px; height: 46px; margin-bottom: .7rem; }
.award__value { color: var(--blau); font-size: 2.1rem; line-height: 1; margin-bottom: .35rem; }
.award__value--brand { color: var(--gold-text); font-size: 1.6rem; padding-top: .35rem; }
.award__name { color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.35; }
.award__meta { color: var(--muted); font-size: .88rem; margin-top: .3rem; }

/* values */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.value { background: #fff; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.value .num { font-size: .8rem; font-weight: 700; color: var(--beige); letter-spacing: .1em; }
.value h3 { font-size: 1.25rem; color: var(--ink); margin: .5rem 0 .4rem; }
.value p { color: var(--muted); margin: 0; font-size: .98rem; }

/* full-bleed photo band — "Bild zuerst" breather */
.photoband { overflow: hidden; }
.photoband img { width: 100%; height: clamp(300px, 42vw, 520px); object-fit: cover; object-position: center; display: block; }

/* quote — full-width beige */
.quote { background: var(--beige-soft); border-block: 1px solid var(--beige-line); }
.quote .wrap { padding: clamp(3.5rem,7vw,6rem) 0; max-width: 1000px; text-align: center; }
.quote blockquote { margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 600; color: var(--blau);
  line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }
.quote blockquote::before { content: "„"; color: var(--beige); }
.quote cite { display: block; margin-top: 1.5rem; font-style: normal; color: var(--gold-text); font-weight: 600; font-size: .95rem; }

/* karriere spotlight — warm beige recruiting band (B-2) */
.spotlight { background: var(--beige-soft); border-block: 1px solid var(--beige-line); }
.spotlight .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); align-items: center;
  padding: clamp(3.5rem,7vw,6rem) 0; }
.spotlight__media .ph, .spotlight__media .photo { aspect-ratio: 4/5; box-shadow: var(--shadow); }
.benefits { list-style: none; padding: 0; margin: 1.4rem 0 1.9rem; display: grid; gap: 1.1rem; }
.benefits li { display: flex; align-items: flex-start; gap: .9rem; }
.benefits svg { width: 22px; height: 22px; flex: none; color: var(--gold-text); margin-top: .15rem; }
.benefits b { color: var(--blau); }
.benefits li div { color: var(--muted); font-size: .98rem; line-height: 1.55; }
.spotlight .cta-row { display: flex; flex-wrap: wrap; gap: .9rem; }

/* multi-channel contact cards (B-2) */
.help-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.help-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2rem; display: flex; flex-direction: column; gap: .9rem; }
.help-card .who { font-size: .84rem; font-weight: 500; color: var(--muted); }
.help-card blockquote { margin: 0; flex: 1; font-size: 1.08rem; font-weight: 600; color: var(--ink); line-height: 1.5; }
.help-card blockquote::before { content: "„"; color: var(--beige); }
.help-card blockquote::after { content: '"'; color: var(--beige); }
.help-card .btn { align-self: flex-start; }
.help-phone { text-align: center; margin: 2.2rem 0 0; color: var(--muted); }
.help-phone a { font-weight: 800; color: var(--blau); font-size: 1.15rem; }

/* news */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.card .ph, .card .photo { aspect-ratio: 16/10; border-radius: 0; }
.card__body { padding: 1.4rem 1.4rem 1.6rem; }
.card__date { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.card h3 { font-size: 1.2rem; color: var(--ink); margin: .4rem 0 .3rem; }
.card p { color: var(--muted); font-size: .95rem; margin: 0; }

/* contact — CTA band */
.contact { background: var(--surface); }
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.contact .ph { aspect-ratio: 16/11; box-shadow: var(--shadow); }
.contact address { font-style: normal; color: var(--muted); line-height: 1.9; margin: 1rem 0 1.5rem; }
.contact address b { color: var(--ink); }

/* footer */
.site-footer { background: var(--blau-dark); color: #C8CEEB; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding: 3.5rem 0 2rem; }
.site-footer h4 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; }
.site-footer a { color: #C8CEEB; } .site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-brand { color: #fff; }
.footer-brand img { height: 44px; background: #fff; border-radius: 8px; padding: 7px 10px; margin-bottom: 1rem; }
.footer-brand p { color: #A6AEE0; font-size: .92rem; max-width: 34ch; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); }
.footer-legal .wrap { grid-template-columns: 1fr; padding: 1.3rem 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .82rem; }

/* ================= Subpages (Karriere / Detailseiten) ================= */

/* solid sticky header for subpages (light content below, no hero image behind) */
.site-header--solid { position: sticky; top: 0; background: var(--blau);
  box-shadow: 0 6px 24px -14px rgba(0, 0, 0, .5); }
.site-header--solid .nav a:not(.btn) { text-shadow: none; }

/* local nav ribbon — page identity + quiet anchors + compact CTA (Apple pattern) */
.localnav { position: sticky; top: 84px; z-index: 40; background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.localnav .wrap { display: flex; align-items: center; gap: 1.5rem; padding: .7rem 0;
  overflow-x: auto; scrollbar-width: none; }
.localnav .wrap::-webkit-scrollbar { display: none; }
.localnav__title { font-weight: 700; font-size: .98rem; color: var(--ink); margin-right: auto; white-space: nowrap; }
.localnav a:not(.btn) { flex: none; font-size: .85rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.localnav a:not(.btn):hover { color: var(--blau); }
.localnav .btn { flex: none; padding: .45em 1.15em; font-size: .82rem; }

/* centered statement header */
.statement { text-align: center; padding: clamp(2.8rem, 6vw, 5rem) 0 0; }
.statement .wrap { max-width: 880px; }
.statement .eyebrow { margin-bottom: .9rem; }
.statement h1 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); letter-spacing: -.025em; line-height: 1.05; margin-bottom: .35em; }
.statement .lead { max-width: 36em; margin: 0 auto 1.8rem; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.statement .cta-row { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cta-quiet { font-weight: 700; font-size: .95rem; }

/* full-width image stage */
.stage { padding: clamp(2.2rem, 5vw, 3.5rem) 0 0; }
.stage__media { position: relative; }
.stage__media img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.stage__badge { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: .6rem;
  background: rgba(255, 255, 255, .96); border-radius: 10px; padding: .55rem .9rem;
  box-shadow: var(--shadow); max-width: calc(100% - 32px); }
.stage__badge .award__medal { width: 30px; height: 30px; margin: 0; flex: none; }
.stage__badge span { font-size: .78rem; font-weight: 700; color: var(--blau); line-height: 1.3; }

/* apple-style editorial cards — text on top, image bleeding out the bottom, snap-scroll strip */
.acards { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  /* bleed to the right viewport edge so the next card visibly peeks (apple pattern) */
  --bleed: calc((100vw - 100%) / 2);
  padding: .25rem calc(var(--bleed) + .25rem) .75rem .25rem;
  margin: -.25rem calc(var(--bleed) * -1) -.25rem -.25rem; scrollbar-width: none; }
.acards::-webkit-scrollbar { display: none; }
.acards-nav { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; }
.acards-nav[hidden] { display: none; }
.acards-nav button { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: #E4E7F0;
  color: var(--blau); display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast), transform var(--dur-fast); }
.acards-nav button:hover { background: var(--blau); color: #fff; }
.acards-nav button:active { transform: scale(.94); }
.acards-nav button:disabled { opacity: .3; cursor: default; pointer-events: none; }
.acards-nav svg { width: 18px; height: 18px; }
.acard { flex: 0 0 min(85%, 378px); scroll-snap-align: start; display: flex; flex-direction: column;
  min-height: 500px; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; }
.acard__body { padding: 1.9rem 1.9rem 1.3rem; }
.acard__tag { font-size: .84rem; font-weight: 500; color: var(--muted); }
.acard h3 { font-size: 1.4rem; line-height: 1.25; color: var(--ink); margin: .35rem 0 .45rem; letter-spacing: -.01em; }
.acard p { color: var(--muted); font-size: .95rem; line-height: 1.55; margin: 0; }
.acard__img { margin-top: auto; width: 100%; height: 250px; object-fit: cover; display: block; }
.acard .ph { margin-top: auto; height: 250px; border-radius: 0; }
.section__cta { text-align: center; margin-top: 2.2rem; }

/* fact strip — proof points as airy 3-up columns */
.factstrip { padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1rem, 2vw, 1.5rem); }
.factstrip .wrap { max-width: 1020px; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.fact svg { width: 26px; height: 26px; color: var(--gold-text); margin-bottom: .55rem; }
.fact b { display: block; color: var(--blau); font-size: 1.02rem; margin-bottom: .2rem; }
.fact span { color: var(--muted); font-size: .92rem; line-height: 1.5; }

/* compact quality band (replaces full plaque wall on subpages) */
.qband { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem 2.8rem;
  background: var(--blau); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.2rem 1.8rem; margin-top: 2.2rem; }
.qband span { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 600; }
.qband b { color: var(--beige); font-size: 1.15rem; }

/* give & get manifest */
.givegt { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: stretch; }
.gg-col { border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); }
.gg-col--give { background: var(--beige-soft); border: 1px solid var(--beige-line); }
.gg-col--get { background: var(--blau); color: #fff; box-shadow: var(--shadow); }
.gg-col h3 { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.4rem; }
.gg-col--give h3 { color: var(--gold-text); }
.gg-col--get h3 { color: var(--beige); }
.gg-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.gg-col li b { display: block; margin-bottom: .25rem; font-size: 1.06rem; }
.gg-col--give li b { color: var(--blau); }
.gg-col--give li { color: var(--muted); }
.gg-col--get li { color: rgba(255,255,255,.85); }
.gg-col--get li b { color: #fff; }

/* quality wall: 4 plaques */
.trust__grid--4 { grid-template-columns: repeat(4, 1fr); }

/* pillars: 2×2 */
.values--4 { grid-template-columns: repeat(2, 1fr); }

/* testimonials */
.stimmen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.stimme { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1.8rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1.4rem; }
.stimme blockquote { margin: 0; color: var(--ink); font-size: 1.05rem; line-height: 1.65; flex: 1; }
.stimme blockquote::before { content: "„"; display: block; font-size: 2.6rem; line-height: .6;
  color: var(--beige); font-weight: 700; margin-bottom: .6rem; }
.stimme footer { display: flex; align-items: center; gap: 1rem; }
.avatar { width: 60px; height: 60px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; background: linear-gradient(135deg, #E9E2D2, #CBBB98); color: var(--gold-text);
  font-weight: 800; font-size: 1.1rem; letter-spacing: .03em; }
.stimme footer b { color: var(--blau); display: block; }
.stimme footer span { color: var(--muted); font-size: .88rem; }

/* job cards */
.jobs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.job { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1.6rem, 3vw, 2.2rem); display: flex; flex-direction: column; }
.job__loc { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.job h3 { font-size: 1.3rem; color: var(--blau); margin: .5rem 0 1rem; }
.job p { color: var(--muted); font-size: .97rem; margin-bottom: .9rem; }
.job p b { color: var(--ink); }
.job .btn { margin-top: auto; align-self: flex-start; }

/* 60-second application funnel */
.apply { background: var(--blau); color: #fff; }
.apply .wrap { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.apply__head { max-width: 62ch; margin: 0 auto 2.5rem; text-align: center; }
.apply__head .eyebrow { color: var(--beige); }
.apply__head h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.7rem); }
.apply__head p { color: rgba(255,255,255,.85); }
.apply__card { background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
  max-width: 780px; margin-inline: auto; padding: clamp(1.8rem, 4vw, 3rem); }
.apply__step { border: 0; padding: 0; margin: 0 0 2rem; }
.apply__step legend, .apply__step > b { display: block; padding: 0 0 0 calc(28px + .6rem);
  text-indent: calc(-28px - .6rem); color: var(--blau); font-weight: 700; font-size: 1.05rem; margin-bottom: .8rem; }
.stepnum { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--beige); color: var(--blau-dark); font-size: .85rem; font-weight: 800; margin-right: .6rem; text-indent: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; }
.chip span { display: inline-block; padding: .7em 1.25em; border-radius: 999px; border: 2px solid var(--line);
  font-weight: 600; font-size: .95rem; cursor: pointer; color: var(--ink);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
    color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.chip:active span { transform: scale(.97); }
.chip:hover span { border-color: var(--blau); }
.chip input:checked + span { background: var(--blau); border-color: var(--blau); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--beige); outline-offset: 2px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: .9rem; }
.field--full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .35rem; }
.field input { width: 100%; font: inherit; padding: .8em 1em; min-height: 52px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--surface);
  transition: border-color var(--dur-base) ease, background-color var(--dur-base) ease; }
.field input:focus { border-color: var(--blau); outline: none; background: #fff; }
.field small { color: var(--muted); font-size: .8rem; }
.apply__submit { width: 100%; justify-content: center; margin-top: 1.4rem; font-size: 1.05rem; }
.apply__trust { list-style: none; margin: 1.6rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--line);
  display: grid; gap: .7rem; color: var(--muted); font-size: .92rem; }
.apply__trust b { color: var(--ink); }
.apply__wa { text-align: center; margin: 1.8rem auto 0; max-width: 780px; color: rgba(255,255,255,.85); font-size: .95rem; }
.apply__wa a { color: var(--beige); font-weight: 700; text-decoration: underline; }
.apply__wa a:hover { color: #fff; }

/* process steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; counter-reset: step; }
.step { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; }
.step__day { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.step h3 { font-size: 1.15rem; color: var(--ink); margin: .5rem 0 .4rem; }
.step p { color: var(--muted); font-size: .95rem; margin: 0; }

/* owner closing box */
.owner { background: var(--beige-soft); border-block: 1px solid var(--beige-line); }
.owner .wrap { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(3.5rem, 7vw, 6rem) 0; }
.owner__media .ph, .owner__media .photo { aspect-ratio: 4/5; box-shadow: var(--shadow); }
.owner blockquote { margin: 0 0 1rem; font-size: clamp(1.15rem, 2.3vw, 1.4rem); font-weight: 500;
  color: var(--ink); line-height: 1.55; text-wrap: balance; }
.owner blockquote::before { content: "„"; color: var(--gold-text); }
.owner cite { display: block; font-style: normal; color: var(--muted); font-weight: 500; font-size: .95rem; margin-bottom: 1.8rem; }
.owner address { font-style: normal; color: var(--muted); line-height: 2; font-size: .98rem; }
.owner address a { font-weight: 600; }

/* ================= Detail pages (Seniorenheim / Physio) ================= */

.eyebrow--sage { color: var(--sage); }

/* three-up offer/pillar cards (extends .jobs/.job) */
.jobs--3 { grid-template-columns: repeat(3, 1fr); }
.job__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; margin-bottom: 1.2rem; }

/* centered prose block (empathy copy) */
.prose { max-width: 68ch; }
.prose p { color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.prose p b { color: var(--ink); }

/* synergy callout — beige highlight card */
.callout { background: var(--beige); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1.8rem, 4vw, 3rem); }
.callout h3 { color: var(--blau-dark); font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin-bottom: .6rem; }
.callout p { color: var(--blau-dark); margin: 0; font-size: 1.05rem; line-height: 1.65; }

/* FAQ accordion */
.faq { max-width: 840px; display: grid; gap: 1rem; }
.faq details { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1.2rem 1.5rem; font-weight: 700; color: var(--blau); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.6rem; font-weight: 800; line-height: 1;
  color: var(--gold-text); transition: transform var(--dur-base) var(--ease-in-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 1.5rem 1.3rem; color: var(--muted); }

/* responsive */
@media (max-width: 900px) {
  .givegt, .stimmen, .jobs, .jobs--3, .fields { grid-template-columns: 1fr; }
  .factstrip .wrap { grid-template-columns: 1fr; gap: 1.7rem; }
  .stage__media img { aspect-ratio: 4/5; }
  .house-block__media .photo, .house-block__media .ph { aspect-ratio: 4/5; }
  .trust__grid--4 { grid-template-columns: 1fr 1fr; }
  .values--4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .owner .wrap { grid-template-columns: 1fr; }
  .owner__media { max-width: 340px; }
}
@media (max-width: 520px) {
  .trust__grid--4, .steps { grid-template-columns: 1fr; }
}

/* responsive */
@media (max-width: 900px) {
  .nav { position: fixed; inset: 84px 0 auto 0; background: var(--blau); flex-direction: column; align-items: stretch;
    gap: 0; padding: .5rem var(--gutter) 1.2rem; transform: translateY(-160%);
    transition: transform var(--dur-panel) var(--ease-out); }
  .nav.open { transform: translateY(0); }
  .nav a { color: #fff; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.15); text-shadow: none; }
  .nav .btn { margin-top: .8rem; justify-content: center; background: var(--beige); color: var(--blau-dark); }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; background: var(--blau); border: 0;
    cursor: pointer; padding: 10px; border-radius: 8px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.5); }
  .nav-toggle span { width: 26px; height: 2px; background: #fff; display: block;
    transition: transform var(--dur-panel) var(--ease-out), opacity var(--dur-fast) ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero .lead { max-width: 100%; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .house-block .wrap, .spotlight .wrap, .contact .wrap { grid-template-columns: 1fr; }
  .house-block:nth-of-type(even) .house-block__media { order: -1; }
  .spotlight__media { max-width: 380px; }
  .help-cards { grid-template-columns: 1fr; }
  .trust__grid, .values, .news { grid-template-columns: 1fr; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* reduced motion: movement goes, colour and state feedback stay */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .chip:active span { transform: none; }
  .nav, .nav-toggle span, .faq summary::after { transition: none; }
}

/* 4-plaque trust band. Declared last on purpose: the generic ".trust__grid { 1fr }"
   reset in the 900px block above has equal specificity and would otherwise win. */
@media (max-width: 900px) { .trust__grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust__grid--4 { grid-template-columns: 1fr; } }

/* ---------- legal pages (Impressum / Datenschutz) ---------- */
.legal-head { padding-bottom: 0; }
.legal-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -.025em; }
.legal-head .lead { max-width: 62ch; }
.legal { max-width: 68ch; }
.legal h2 { font-size: 1.12rem; color: var(--blau); margin: 2.4rem 0 .6rem; line-height: 1.35; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--muted); font-size: 1rem; line-height: 1.75; }
.legal address { font-style: normal; color: var(--ink); line-height: 1.8; margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.legal li { margin-bottom: .35rem; }
.legal a { font-weight: 600; }
.legal .todo { color: var(--gold-text); font-weight: 700; }

/* explicit consent row (Art. 9 DSGVO) above the submit button */
.apply__consent { display: flex; gap: .7rem; align-items: flex-start; margin: 1.4rem 0 1.1rem; font-size: .9rem;
  line-height: 1.5; color: var(--muted); cursor: pointer; }
.apply__consent input { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--blau); cursor: pointer; }
.apply__consent a { color: var(--blau); font-weight: 600; }