/* Separate redesign; the original styles and previous versions remain untouched. */
.offer-section { padding-block: clamp(52px, 7vw, 96px); background: #F4F7F7; }
.offer-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; margin-bottom: 38px; }
.offer-intro h2 { max-width: 19ch; }
.offer-intro p { max-width: 46ch; font-size: 18px; line-height: 1.6; color: #465E65; }
/* Vier Leistungen in zwei Gruppen (seit 2026-10-01): "Erreichbar sein" mit
   KUENI am Telefon und Website mit KUENI, "Gesehen werden" mit Website und
   Werbekampagnen. Am Handy untereinander, mittelbreit zwei Spalten, ab
   1320 px alle vier in einer Reihe mit den Gruppen darueber. Vorher drei
   Karten nebeneinander (Telefon nur als Erweiterung). */
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.offer-gruppe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 14px 0 -8px; padding-bottom: 12px; border-bottom: 2px solid #C7D5D8; }
.offer-gruppe:first-child { margin-top: 0; }
.offer-gruppe b { color: #0C1C22; font: 600 13px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.offer-gruppe span { color: #465E65; font-size: 15px; line-height: 1.5; }
.offer-gruppe--erreichbar { border-bottom-color: #006277; }
.offer-gruppe--erreichbar b { color: #006277; }
.offer-card { min-width: 0; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #D4DFE1; border-radius: 14px; overflow: hidden; }
.offer-card__image { aspect-ratio: 3 / 2; margin: 0; overflow: hidden; background: #E7EFEF; }
.offer-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.offer-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 24px; }
.offer-card__title { font: 700 clamp(24px, 2.1vw, 29px)/1.15 var(--display); letter-spacing: -.035em; color: #0C1C22; margin: 0; }
.offer-card .ku { color: #006277; background: none; box-shadow: none; text-shadow: none; padding: 0; border-radius: 0; white-space: nowrap; }
.offer-card__for { margin: 9px 0 0; font: 500 15px/1.4 var(--text); color: #006277; }
.offer-card__description { color: #465E65; font-size: 16px; line-height: 1.55; margin: 18px 0 0; }
.offer-card__features { display: grid; gap: 7px; padding: 0; margin: 20px 0 24px; list-style: none; }
.offer-card__features li { display: flex; gap: 9px; color: #344C54; font-size: 14px; line-height: 1.5; }
.offer-card__features li::before { content: '✓'; color: #006277; flex: 0 0 14px; font-weight: 600; }
.offer-card__link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: auto; padding: 13px 15px; border: 1px solid #0C1C22; border-radius: 6px; background: #0C1C22; color: #FFFFFF; font: 600 15px/1.4 var(--text); text-decoration: none; text-align: center; transition: background .18s, border-color .18s; }
.offer-card__link:visited { color: #FFFFFF; }
/* Die Marke im dunklen Knopf: helle Platte wie auf dunklen Flaechen, die
   Farbe bleibt #006277. Der innere span haelt die Leerzeichen, Flex wuerde
   sie sonst schlucken. */
.offer-card__link .ku { padding: .06em .26em .1em; margin: 0 .02em; border-radius: 3px; background: #DCEEF2; }
.offer-card__link:focus-visible { outline: 3px solid #006277; outline-offset: 4px; }
@media (hover: hover) {
 .offer-card__link:hover { background: #006277; border-color: #006277; color: #FFFFFF; }
}
.offer-card__link:active { background: #152B33; border-color: #152B33; }
.offer-foot { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-top: 27px; }
.offer-foot p { max-width: 64ch; font-size: 15px; line-height: 1.6; color: #465E65; }
.offer-foot a { color: #0C1C22; font-size: 15px; line-height: 1.6; text-underline-offset: 4px; }
.offer-imagery-note { color: #556A70; font-size: 12px; line-height: 1.5; margin-top: 20px; }
.journey-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.journey-layout h2 { max-width: 16ch; }
.journey-lead { max-width: 49ch; margin-top: 22px; color: rgba(244,247,247,.75); line-height: 1.65; font-size: 18px; }
.journey-steps { list-style: none; counter-reset: journey; display: grid; gap: 24px; margin-top: 32px; }
.journey-steps li { counter-increment: journey; padding-left: 40px; position: relative; }
.journey-steps li::before { content: counter(journey); position: absolute; left: 0; top: 1px; color: var(--signal); font: 600 17px/1.5 var(--text); }
.journey-steps h3 { font: 600 18px/1.4 var(--display); color: #F4F7F7; }
.journey-steps p { color: rgba(244,247,247,.7); line-height: 1.6; font-size: 16px; margin-top: 7px; }
.journey-image { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; }
.journey-image img { width: 100%; height: 100%; object-fit: cover; }
.journey-image figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 65px 28px 28px; background: linear-gradient(transparent,rgba(12,28,34,.9)); color: #fff; font: 500 23px/1.3 var(--display); }
.journey-measure { border-top: 1px solid rgba(244,247,247,.18); padding-top: 20px; margin-top: 28px; color: rgba(244,247,247,.72); font-size: 14px; line-height: 1.6; }
.offer-faq { max-width: 920px; }
.offer-faq .kfaq details > div { max-width: 72ch; }
/* The founder is on a light surface. Never inherit the hero's white text. */
#ueber-uns.section--warm .person__text b { color: #0C1C22; font-size: 21px; }
#ueber-uns.section--warm .person__text span { color: #465E65; }
#ueber-uns.section--warm .person__bild { border-color: #A8BDC1; box-shadow: 0 0 0 5px #DCE7E8; }
#ueber-uns.section--warm .prose, #ueber-uns.section--warm .prose p { color: #465E65; }
#ueber-uns.section--warm .founder__quote { color: #0C1C22; border-top-color: #C7D5D8; }
@media (min-width: 701px) and (max-width: 1040px) {
 .offer-intro { gap: 30px; }
 .journey-layout { gap: 32px; }
}
/* Zwei Spalten: flachere Bilder, sonst wird jede Karte sehr hoch. */
@media (min-width: 701px) and (max-width: 1319px) {
 .offer-card__image { aspect-ratio: 16 / 9; }
}
@media (min-width: 1320px) {
 .offer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
 .offer-gruppe { grid-row: 1; margin: 0 0 22px; }
 .offer-gruppe--erreichbar { grid-column: 1 / span 2; }
 .offer-gruppe--gesehen { grid-column: 3 / span 2; }
 .offer-card { grid-row: 2; }
 .offer-card__body { padding: 22px 22px 22px; }
 .offer-card__title { font-size: clamp(23px, 1.8vw, 27px); }
}
@media (max-width: 700px) {
 .offer-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 28px; }
 .offer-intro p { font-size: 16.5px; }
 .offer-grid { grid-template-columns: 1fr; gap: 26px; }
 .offer-card__body { padding: 23px 22px 22px; }
 .offer-card__title { font-size: 28px; }
 .offer-card__description { margin-top: 16px; }
 .offer-card__features { margin-block: 18px 22px; }
 .offer-foot { flex-direction: column; gap: 12px; }
 .journey-layout { grid-template-columns: 1fr; }
 .journey-image { aspect-ratio: 16 / 10; }
 .journey-image figcaption { padding: 45px 22px 22px; font-size: 21px; }
 .journey-lead { font-size: 17px; }
 #ueber-uns .person { align-items: center; gap: 18px; }
 #ueber-uns.section--warm .person__text b { font-size: 19px; }
}
@media (max-width: 360px) {
 .offer-card__body { padding-inline: 18px; }
 .offer-card__title { font-size: 25px; }
 .offer-card__for { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .offer-card__link { transition: none; } }

/* Die beiden KUENI-Leistungen stehen zuerst und heben sich ab. */
.offer-card--kueni { border-color: #006277; box-shadow: 0 0 0 1px #006277, 0 22px 44px -28px rgba(0,98,119,.55); }
.offer-card__tag { align-self: flex-start; margin: 0 0 14px; padding: 5px 11px; border-radius: 999px; background: rgba(0,98,119,.1); color: #006277; font: 600 12px/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; }

/* KUENI am Telefon: das Handy auf dem Schreibtisch leuchtet auf, darueber
   die Meldung. Die Lage des Handys (50 %, 77 %) stammt aus dem Bild;
   object-fit: cover schneidet hier nur seitlich ab, deshalb bleibt sie in
   jedem Zuschnitt an derselben Stelle. Das Leuchten laeuft dreimal und
   hoert dann auf: KUENI hat abgenommen. */
.offer-card__image--anruf { position: relative; }
.offer-anruf { position: absolute; z-index: 2; left: 0; right: 0; bottom: 31%; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); margin: 0 auto; padding: 7px 15px 7px 7px; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 14px 30px -10px rgba(0,0,0,.65); }
.offer-anruf > img { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #E7EFEF; }
.offer-anruf i { display: block; color: #556A70; font: 600 10.5px/1.3 var(--text); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.offer-anruf b { display: block; margin-top: 2px; color: #0C1C22; font: 700 14.5px/1.25 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.offer-anruf__licht { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 15% 11% at 50% 77%, rgba(53,188,216,.62), rgba(53,188,216,0)); opacity: 0; }
html.js .offer-anruf.is-in > img { animation: offer-klingeln 1.4s ease-out .7s 3; }
html.js .offer-anruf.is-in + .offer-anruf__licht { animation: offer-leuchten 1.4s ease-in-out .7s 3; }
@keyframes offer-klingeln { 0% { box-shadow: 0 0 0 0 rgba(53,188,216,.65); } 100% { box-shadow: 0 0 0 13px rgba(53,188,216,0); } }
@keyframes offer-leuchten { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
 html.js .offer-anruf.is-in > img,
 html.js .offer-anruf.is-in + .offer-anruf__licht { animation: none; }
}