/* ==========================================================================
   Trichter für Unterseiten (AIDA): Kopf mit Handlung, Angebot, Rückruf,
   Schlussband und kleine Motion Graphics. Präfix .t-
   Markup erzeugt _arbeit/trichter/umbau.py, Verhalten in assets/js/trichter.js.
   ========================================================================== */

/* ---------- Knöpfe ---------- */
.t-knopf {
  --lift: 0px;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.5rem; border-radius: 999px; white-space: nowrap;
  font: 600 .95rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 0;
  color: var(--cream);
  background: linear-gradient(180deg, #3f5242 0%, var(--forest-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(47,62,51,.5),
    0 14px 28px -14px rgba(47,62,51,.55);
  transform: translateY(var(--lift));
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.t-knopf::before { /* Lichtstreifen beim Überfahren */
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); transition: left .7s ease;
}
.t-knopf:hover { --lift: -2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.18), 0 0 0 1px rgba(47,62,51,.5), 0 18px 32px -14px rgba(47,62,51,.6); }
.t-knopf:hover::before { left: 120%; }
.t-knopf:focus-visible { outline: 3px solid var(--btn); outline-offset: 3px; }
.t-knopf svg { flex-shrink: 0; }
.t-knopf--hell {
  color: var(--forest-deep); background: #fff;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(47,62,51,.06), 0 0 0 1px rgba(47,62,51,.18), 0 10px 22px -14px rgba(47,62,51,.35);
}
.t-knopf--hell:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(47,62,51,.06), 0 0 0 1px rgba(47,62,51,.35), 0 14px 26px -14px rgba(47,62,51,.4); }
.t-knopf--sand { color: var(--forest-deep); background: linear-gradient(180deg, #d6c7a6 0%, var(--btn) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.08), 0 0 0 1px rgba(150,130,90,.45), 0 14px 26px -14px rgba(0,0,0,.45); }
.t-pfeil { transition: transform .25s; }
.t-knopf:hover .t-pfeil { transform: translateX(3px); }

/* ---------- 1 · Kopf (A) ---------- */
.t-kopf {
  position: relative; overflow: clip;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 76px);
}
.t-kopf__in {
  max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.8rem, 4vw, 4.5rem); align-items: center;
}
.t-kopf__text { position: relative; z-index: 1; }
.t-eyebrow {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--moss);
}
.t-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--btn); transform-origin: left; animation: t-linie .9s .2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes t-linie { from { transform: scaleX(0); } }
.t-titel {
  font-family: var(--serif); font-weight: 350; color: var(--forest-deep);
  font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 1.1rem; text-wrap: balance;
}
.t-titel em { font-style: italic; color: #9a865f; }
.t-lead { font-size: clamp(1rem, .96rem + .2vw, 1.12rem); line-height: 1.65; color: var(--ink); max-width: 46ch; margin: 0 0 1.6rem; }
.t-aktion { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.t-tel {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 1.1rem 0 .45rem;
  border-radius: 999px; border: 1px solid rgba(47,62,51,.18); background: rgba(255,255,255,.7);
  color: var(--forest-deep); text-decoration: none; transition: background .2s, border-color .2s;
}
.t-tel:hover { background: #fff; border-color: rgba(47,62,51,.35); }
.t-tel__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sage); position: relative; }
.t-tel__ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--forest); opacity: 0; animation: t-puls 2.8s ease-out infinite; }
@keyframes t-puls { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.t-tel__txt { display: flex; flex-direction: column; line-height: 1.15; }
.t-tel__k { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.t-tel__n { font-weight: 600; font-size: 1rem; white-space: nowrap; }

.t-vertrauen { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.t-vertrauen li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--moss); }
.t-vertrauen svg { color: var(--forest); flex-shrink: 0; }

/* Bild klar sichtbar: kein Schleier, eigene Karte mit langsamer Bewegung */
.t-kopf__bild {
  position: relative; margin: 0; border-radius: 28px; overflow: hidden;
  aspect-ratio: 5 / 4; background: var(--sage);
  box-shadow: 0 30px 60px -34px rgba(47,62,51,.45);
}
.t-kopf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 60% 50%; animation: t-zoom 22s ease-in-out infinite alternate; }
@keyframes t-zoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.t-ki { position: absolute; top: 12px; right: 12px; font-size: .62rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(30,40,33,.55); color: #fff; }
.t-marke { /* schwebendes Kärtchen mit Puls: jemand ist da */
  position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem .6rem .7rem; border-radius: 16px; background: rgba(255,253,248,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px -16px rgba(47,62,51,.5); font-size: .82rem; color: var(--forest-deep);
  animation: t-schwebe 6s ease-in-out infinite;
}
.t-marke b { display: block; font-weight: 600; }
.t-marke small { color: var(--moss); font-size: .74rem; }
.t-punkt { width: 10px; height: 10px; border-radius: 50%; background: #5f8a5a; position: relative; flex-shrink: 0; }
.t-punkt::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #5f8a5a; animation: t-puls 2.4s ease-out infinite; }
@keyframes t-schwebe { 50% { transform: translateY(-5px); } }
.t-bogen { position: absolute; right: -40px; top: -60px; width: 320px; height: 320px; color: var(--btn); opacity: .55; pointer-events: none; z-index: 0; }
.t-bogen path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: t-zeichne 2.4s .4s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes t-zeichne { to { stroke-dashoffset: 0; } }

/* Kopf ohne Foto: Motion-Grafik statt Bild */
.t-kopf__grafik { position: relative; aspect-ratio: 5 / 4; border-radius: 28px; overflow: hidden; background: linear-gradient(160deg, #2f3e33 0%, #3a4b3c 100%); color: var(--cream); padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; justify-content: flex-end; }
.t-kopf__grafik .t-aura i { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; will-change: transform; }
.t-kopf__grafik .t-aura i:nth-child(1) { width: 60%; height: 60%; left: -10%; top: -10%; background: rgba(197,179,145,.55); animation: t-drift1 18s ease-in-out infinite alternate; }
.t-kopf__grafik .t-aura i:nth-child(2) { width: 55%; height: 55%; right: -15%; top: 20%; background: rgba(140,170,130,.45); animation: t-drift2 22s ease-in-out infinite alternate; }
@keyframes t-drift1 { to { transform: translate(30%, 20%) scale(1.15); } }
@keyframes t-drift2 { to { transform: translate(-25%, -15%) scale(1.1); } }
.t-balken { position: relative; display: grid; gap: .8rem; }
.t-balken__k { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; opacity: .8; margin-bottom: .2rem; }
.t-balken__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; font-size: .88rem; }
.t-balken__zeile b { font-weight: 600; white-space: nowrap; }
.t-balken__spur { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: rgba(255,253,248,.14); overflow: hidden; }
.t-balken__spur i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--btn), #e9dcbd); transform-origin: left; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.t-balken.ist-an .t-balken__spur i { transform: scaleX(1); }
.t-balken__zeile:nth-child(3) i { transition-delay: .15s; } .t-balken__zeile:nth-child(4) i { transition-delay: .3s; } .t-balken__zeile:nth-child(5) i { transition-delay: .45s; }
.t-balken__fuss { font-size: .74rem; opacity: .75; margin-top: .3rem; }

/* ---------- 2 · Angebot (I + D) ---------- */
.t-angebot { padding: clamp(38px, 3.6vw, 60px) clamp(1rem, 4vw, 3.5rem); background: var(--cream); border-block: 1px solid var(--line); }
.t-angebot__in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: stretch; }
.t-sec-k { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--moss); margin-bottom: .6rem; }
.t-sec-t { font-family: var(--serif); font-weight: 400; color: var(--forest-deep); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; margin: 0 0 clamp(22px, 2.4vw, 34px); text-wrap: balance; }
.t-leistungen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.t-leistung { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .9rem; align-items: start; padding: 20px 22px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
.t-leistung__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sage); color: var(--forest-deep); }
.t-leistung__ic svg path, .t-leistung__ic svg circle, .t-leistung__ic svg rect, .t-leistung__ic svg polyline, .t-leistung__ic svg line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1); }
.t-leistungen.ist-an .t-leistung__ic svg * { stroke-dashoffset: 0; }
.t-leistungen.ist-an .t-leistung:nth-child(2) svg * { transition-delay: .15s; }
.t-leistungen.ist-an .t-leistung:nth-child(3) svg * { transition-delay: .3s; }
.t-leistungen.ist-an .t-leistung:nth-child(4) svg * { transition-delay: .45s; }
.t-leistung h3 { font-family: var(--serif); font-weight: 450; font-size: 1.08rem; color: var(--forest-deep); margin: .15rem 0 .3rem; }
.t-leistung p { font-size: .9rem; line-height: 1.55; color: var(--moss); margin: 0; }

.t-karte {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 24px; padding: 26px; color: var(--cream);
  background: linear-gradient(165deg, #34463a 0%, var(--forest-deep) 100%);
  display: flex; flex-direction: column; gap: .8rem;
}
.t-karte::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(197,179,145,.45), transparent 70%); z-index: -1; animation: t-drift1 16s ease-in-out infinite alternate; }
.t-karte__preis { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--gold-lume); }
.t-karte__k { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.t-karte p { margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(255,253,248,.88); }
.t-karte .t-knopf { margin-top: auto; align-self: flex-start; }
.t-karte__tel { color: var(--gold-lume); font-weight: 600; text-decoration: none; font-size: .95rem; }
.t-karte__tel:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 3 · Anfrage (A): zwei Wege ---------- */
.t-anfrage { padding: clamp(38px, 3.6vw, 60px) clamp(1rem, 4vw, 3.5rem); background: var(--paper-warm); scroll-margin-top: 90px; }
.t-anfrage__in { max-width: 1240px; margin: 0 auto; }
.t-anfrage__kopf { text-align: center; max-width: 40rem; margin: 0 auto clamp(22px, 2.4vw, 34px); }
.t-anfrage__kopf .t-sec-t { margin-bottom: .5rem; }
.t-anfrage__kopf p { color: var(--moss); margin: 0; }
.t-wege { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: stretch; }
.t-weg { border-radius: 24px; background: var(--cream); border: 1px solid var(--line); padding: 26px; position: relative; }
.t-weg__nr { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--moss); margin-bottom: .4rem; }
.t-weg h3 { font-family: var(--serif); font-weight: 450; font-size: 1.35rem; color: var(--forest-deep); margin: 0 0 1rem; }
.t-anruf__nummer { display: block; font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--forest-deep); text-decoration: none; letter-spacing: -.01em; margin-bottom: .3rem; }
.t-anruf__nummer:hover { color: var(--forest); }
.t-anruf__zeit { display: flex; align-items: center; gap: .5rem; color: var(--moss); font-size: .9rem; margin-bottom: 1.3rem; }
.t-person { display: flex; gap: .9rem; align-items: center; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.t-person div > b { display: block; color: var(--forest-deep); font-weight: 600; }
.t-person div > span { display: block; font-size: .86rem; color: var(--moss); line-height: 1.45; }

/* Kurzformular */
.t-weg { display: flex; flex-direction: column; }
.t-form { display: flex; flex-direction: column; flex: 1; }
.t-knopf[hidden], .t-zurueck[hidden] { display: none; }
.t-form__oben { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.t-form__stand { font-size: .78rem; color: var(--moss); }
.t-form__leiste { flex: 1; max-width: 160px; height: 4px; border-radius: 99px; background: var(--sage-deep); overflow: hidden; }
.t-form__leiste i { display: block; height: 100%; width: calc(var(--s, 1) / 3 * 100%); background: var(--forest); border-radius: inherit; transition: width .4s cubic-bezier(.2,.7,.2,1); }
.t-frage { border: 0; margin: 0; padding: 0; min-width: 0; }
.t-frage legend { font-family: var(--serif); font-size: 1.25rem; color: var(--forest-deep); margin-bottom: .9rem; padding: 0; }
.js-trichter .t-frage[hidden] { display: none; }
.t-wahl { display: grid; gap: .6rem; }
.t-wahl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-wahl--chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.t-opt { position: relative; display: block; cursor: pointer; }
.t-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.t-opt span {
  display: flex; flex-direction: column; gap: .25rem; height: 100%;
  padding: 14px 16px; border-radius: 14px; border: 1.5px solid rgba(47,62,51,.16); background: #fff;
  font-weight: 600; color: var(--forest-deep); font-size: .95rem; transition: border-color .2s, background .2s, transform .2s;
}
.t-opt small { font-weight: 400; color: var(--moss); font-size: .8rem; line-height: 1.4; }
.t-opt:hover span { border-color: rgba(47,62,51,.4); transform: translateY(-1px); }
.t-opt input:checked + span { border-color: var(--forest); background: var(--sage); }
.t-opt input:focus-visible + span { outline: 3px solid var(--btn); outline-offset: 2px; }
.t-wahl--chips .t-opt span { padding: 10px 16px; border-radius: 999px; font-weight: 500; min-height: 44px; justify-content: center; }
.t-hinweis { margin: .9rem 0 0; padding: .8rem 1rem; border-radius: 12px; background: #fbefe4; color: #6b3d1f; font-size: .9rem; line-height: 1.5; }
.t-hinweis a { color: inherit; font-weight: 700; }
.t-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.t-feld { display: flex; flex-direction: column; gap: .3rem; }
.t-feld--breit { grid-column: 1 / -1; }
.t-feld label { font-size: .84rem; font-weight: 600; color: var(--forest-deep); }
.t-feld label small { font-weight: 400; color: var(--moss); }
.t-feld input, .t-feld textarea {
  font: 16px/1.4 var(--sans); color: var(--ink); background: #fff;
  border: 1.5px solid rgba(47,62,51,.2); border-radius: 12px; padding: .8rem .9rem; min-height: 48px; width: 100%;
}
.t-feld textarea { min-height: 90px; resize: vertical; }
.t-feld input:focus, .t-feld textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(58,75,60,.15); }
.t-feld [aria-invalid="true"] { border-color: #b4462c; }
.t-fehler { color: #a23b22; font-size: .84rem; margin: .5rem 0 0; }
.t-ok { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--moss); line-height: 1.5; margin-top: .9rem; }
.t-ok input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--forest); flex-shrink: 0; }
.t-ok a { color: var(--forest-deep); }
.t-form__fuss { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; margin-top: auto; padding-top: 1.2rem; }
.t-form__fuss .t-zurueck { margin-right: auto; }
.t-zurueck { background: none; border: 0; color: var(--moss); font: 500 .9rem var(--sans); cursor: pointer; padding: .6rem .2rem; min-height: 44px; }
.t-zurueck:hover { color: var(--forest-deep); text-decoration: underline; }
.t-honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.t-danke { text-align: center; padding: 1rem .5rem; }
.t-danke__ic { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--sage); color: var(--forest-deep); }
.t-danke__ic path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: t-zeichne .9s .2s ease forwards; }
.t-danke h3 { margin-bottom: .5rem; }
.t-danke p { color: var(--moss); margin: 0 0 .4rem; }
/* ohne JavaScript: alle Fragen untereinander */
html:not(.js-trichter) .t-frage + .t-frage { margin-top: 1.6rem; }
html:not(.js-trichter) .t-form__oben, html:not(.js-trichter) [data-zurueck], html:not(.js-trichter) [data-weiter] { display: none; }

/* Team in kleinen Kreisen (Muster envital.care) */
.t-gesichter { display: inline-flex; align-items: center; flex: none; padding: 4px 0; text-decoration: none; border-radius: 99px; }
.t-gesichter img, .t-gesichter__mehr {
  position: relative; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--sage);
  border: 2px solid var(--cream); box-shadow: 0 6px 14px -6px rgba(47,62,51,.45);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), margin .35s cubic-bezier(.2,.7,.2,1);
}
.t-gesichter > * + * { margin-left: -12px; }
.t-gesichter__mehr { display: grid; place-items: center; font: 600 .78rem var(--sans); color: var(--forest-deep); background: var(--sage-deep); }
@media (hover: hover) {
  .t-gesichter:hover > * + * { margin-left: -4px; }
  .t-gesichter img:hover { transform: translateY(-3px) scale(1.08); z-index: 1; }
}
.t-gesichter:focus-visible { outline: 2px solid var(--btn); outline-offset: 3px; }
.t-person { flex-wrap: wrap; }
.t-schluss__team { display: flex; align-items: center; gap: 14px; margin-top: .8rem !important; }
.t-schluss .t-gesichter img, .t-schluss .t-gesichter__mehr { border-color: var(--forest-deep); }
@media (max-width: 480px) { .t-gesichter img, .t-gesichter__mehr { width: 38px; height: 38px; } .t-schluss__team { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .t-gesichter img, .t-gesichter__mehr { transition: none; } }

/* ---------- 4 · Schlussband ---------- */
.t-schluss { padding: clamp(38px, 3.6vw, 60px) clamp(1rem, 4vw, 3.5rem); background: var(--forest-deep); color: var(--cream); position: relative; overflow: hidden; isolation: isolate; }
.t-schluss::before, .t-schluss::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; mix-blend-mode: screen; }
.t-schluss::before { width: 420px; height: 420px; left: -120px; top: -160px; background: rgba(197,179,145,.35); animation: t-drift1 20s ease-in-out infinite alternate; }
.t-schluss::after { width: 380px; height: 380px; right: -100px; bottom: -180px; background: rgba(120,150,110,.35); animation: t-drift2 24s ease-in-out infinite alternate; }
.t-schluss__in { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem 2rem; }
.t-schluss h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.15; margin: 0 0 .3rem; color: var(--cream); }
.t-schluss p { margin: 0; color: rgba(255,253,248,.78); }
.t-schluss .t-aktion { gap: .7rem; }
.t-schluss .t-tel { background: transparent; border-color: rgba(255,253,248,.3); color: var(--cream); }
.t-schluss .t-tel:hover { background: rgba(255,253,248,.08); }
.t-schluss .t-tel__ic { background: rgba(255,253,248,.12); }
.t-schluss .t-tel__ic::after { border-color: var(--btn); }
.t-schluss .t-tel__k { color: rgba(255,253,248,.7); }

/* ---------- Rückruf-Leiste unter fremden Köpfen (Blog, Team, Aktuelles …) ---------- */
.t-leiste { background: var(--cream); border-bottom: 1px solid var(--line); padding: 14px clamp(1rem, 4vw, 3.5rem); position: relative; z-index: 2; }
.t-leiste__in { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; }
.t-leiste p { margin: 0; color: var(--moss); font-size: .95rem; }
.t-leiste b { color: var(--forest-deep); font-weight: 600; }
.t-leiste .t-knopf, .t-leiste .t-tel { min-height: 46px; }
.t-leiste .t-tel__ic { width: 34px; height: 34px; }

/* Pfadanzeige im Kopf ausblenden (strukturierte Daten bleiben im Quelltext) */
.breadcrumb, .ph-breadcrumb, .bl-hero__breadcrumb, .rh-hero__breadcrumb { display: none !important; }

/* Startseite: kleine Zeile über den Themenkarten als dunkle Pill, auf jedem Bild lesbar */
.art-card .art-body .k {
  display: inline-flex; align-items: center; width: fit-content; max-width: 100%;
  padding: .36rem .75rem; border-radius: 999px; line-height: 1.35;
  background: rgba(30,40,33,.62); color: #fffdf8; letter-spacing: .1em;
  border: 1px solid rgba(255,253,248,.18);
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .art-card .art-body .k { background: rgba(30,40,33,.88); } }
html.sparsam .art-card .art-body .k { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(30,40,33,.88); }

/* Lange Wörter ohne Trennstrich: auf sehr schmalen Handys Linkverzeichnis-Titel etwas kleiner */
.linkhub-blog h2 { overflow-wrap: break-word; }
@media (max-width: 360px) { .linkhub-blog h2 { font-size: 22px; } }

/* ---------- Aktuelles: Veranstaltungen und Blog in einer Zeile (ohne Kopfbereich) ---------- */
.t-aktuell { padding: clamp(28px, 4vw, 56px) clamp(1rem, 4vw, 3.5rem) 0; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%); }
.t-aktuell__in { max-width: 1240px; margin: 0 auto; }
.t-aktuell__titel { font-family: var(--serif); font-weight: 350; color: var(--forest-deep); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 clamp(18px, 2vw, 26px); }
.t-aktuell__titel em { font-style: italic; color: #9a865f; }
.t-aktuell__zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.t-akarte {
  position: relative; overflow: hidden; isolation: isolate; text-decoration: none;
  min-height: clamp(300px, 34vw, 400px); border-radius: 26px; padding: clamp(22px, 2.6vw, 34px);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .55rem;
  color: var(--cream); box-shadow: 0 30px 60px -36px rgba(47,62,51,.5);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.t-akarte:hover { transform: translateY(-3px); box-shadow: 0 36px 70px -36px rgba(47,62,51,.6); }
.t-akarte:focus-visible { outline: 3px solid var(--btn); outline-offset: 3px; }
.t-akarte--termin { background: linear-gradient(160deg, #34463a 0%, var(--forest-deep) 100%); }
.t-akarte--termin .t-aura i { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; z-index: -1; will-change: transform; }
.t-akarte--termin .t-aura i:nth-child(1) { width: 55%; height: 60%; left: -10%; top: -15%; background: rgba(205,170,81,.45); animation: t-drift1 18s ease-in-out infinite alternate; }
.t-akarte--termin .t-aura i:nth-child(2) { width: 50%; height: 55%; right: -10%; bottom: -10%; background: rgba(140,170,130,.4); animation: t-drift2 22s ease-in-out infinite alternate; }
.t-akarte__kal { position: absolute; top: clamp(20px, 2.6vw, 32px); right: clamp(20px, 2.6vw, 32px); width: clamp(72px, 8vw, 104px); height: auto; color: #cdaa51; opacity: .9; }
.t-akarte__kal * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: t-zeichne 1.8s .3s cubic-bezier(.4,0,.2,1) forwards; }
.t-akarte__kal circle { animation-delay: 1.4s; fill: rgba(205,170,81,.25); }
.t-akarte--blog { background: var(--forest-deep) var(--bild) center / cover no-repeat; }
.t-akarte--blog::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,28,22,.08) 10%, rgba(20,28,22,.55) 50%, rgba(20,28,22,.88) 100%); }
.t-akarte--blog { background-blend-mode: normal; }
.t-akarte__k { display: inline-flex; padding: .3rem .75rem; border-radius: 999px; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; background: rgba(255,253,248,.14); border: 1px solid rgba(255,253,248,.22); }
.t-akarte__t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.08; letter-spacing: -.015em; }
.t-akarte__p { max-width: 40ch; font-size: .98rem; line-height: 1.55; color: rgba(255,253,248,.86); margin-bottom: .5rem; }
.t-akarte .t-knopf { pointer-events: none; }
.t-akarte:hover .t-pfeil { transform: translateX(3px); }
@media (max-width: 760px) { .t-aktuell__zeile { grid-template-columns: 1fr; } .t-akarte { min-height: 280px; } }
@media (prefers-reduced-motion: reduce) { .t-akarte--termin .t-aura i, .t-akarte__kal * { animation: none !important; stroke-dashoffset: 0; } .t-akarte { transition: none; } }
html.sparsam .t-akarte--termin .t-aura i { animation: none; filter: blur(30px); }

/* Screenshot im Kopf (Vorsorgeportal): kein Zoom, Hinweis ist ein Link */
.t-kopf__bild--ruhig img { animation: none; }
a.t-marke { text-decoration: none; transition: transform .25s, box-shadow .25s; }
a.t-marke:hover { box-shadow: 0 16px 32px -16px rgba(47,62,51,.6); }
a.t-marke:hover b { text-decoration: underline; text-decoration-color: #cdaa51; text-underline-offset: 3px; }

/* Vorsorgeportal: nummerierte Liste der Inhalte */
.t-portal-liste { list-style: none; margin: 1.2rem 0 1.4rem; padding: 0; border-top: 1px solid var(--line); }
.t-portal-liste li { display: flex; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 1.2rem; color: var(--forest-deep); }
.t-portal-liste span { font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; color: #a88b3e; min-width: 1.6rem; }

/* Vorsorgeportal: zwei Wege nebeneinander im Kopf */
.t-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 620px; }
.t-zwei__weg {
  position: relative; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start;
  padding: 18px 18px 18px; border-radius: 20px;
  background: rgba(255,255,255,.75); border: 1px solid rgba(47,62,51,.12);
  box-shadow: 0 18px 36px -26px rgba(47,62,51,.45);
}
.t-zwei__weg--neu { background: linear-gradient(160deg, #34463a 0%, var(--forest-deep) 100%); border-color: transparent; color: var(--cream); overflow: hidden; isolation: isolate; }
.t-zwei__weg--neu::before { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(205,170,81,.45), transparent 70%); z-index: -1; animation: t-drift1 14s ease-in-out infinite alternate; }
.t-zwei__k { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); }
.t-zwei__weg--neu .t-zwei__k { color: #e3cf96; }
.t-zwei__t { font-family: var(--serif); font-size: 1.08rem; line-height: 1.3; color: var(--forest-deep); margin-bottom: .55rem; text-wrap: balance; }
.t-zwei__weg--neu .t-zwei__t { color: var(--cream); }
.t-zwei .t-knopf { margin-top: auto; min-height: 46px; padding: 0 1.1rem; font-size: .9rem; }
.t-aktion--leise { margin-top: .9rem; }
@media (max-width: 640px) { .t-zwei { grid-template-columns: 1fr; } .t-zwei .t-knopf { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .t-zwei__weg--neu::before { animation: none; } }
html.sparsam .t-zwei__weg--neu::before { animation: none; }

/* ---------- Motion für bestehende Bausteine ---------- */
/* Ablaufschritte: Linie wächst mit dem Scrollen */
.steps.t-schritte { position: relative; }
.steps.t-schritte::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: var(--sand); border-radius: 2px; }
.steps.t-schritte::after { content: ""; position: absolute; left: 21px; top: 10px; width: 2px; height: calc((100% - 20px) * var(--fort, 0)); background: var(--forest); border-radius: 2px; }
.steps.t-schritte .step-num { position: relative; z-index: 1; transition: background .3s, color .3s; }
.steps.t-schritte .step.ist-an .step-num { background: var(--forest-deep); color: var(--cream); }

/* Floating-Kontakt ausblenden, solange das Formular im Bild ist */
body.t-anfrage-sichtbar .cwidget { opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .3s, transform .3s; }

/* ---------- Umbrüche ---------- */
@media (max-width: 960px) {
  .t-kopf__in { grid-template-columns: 1fr; }
  .t-kopf__bild, .t-kopf__grafik { order: -1; aspect-ratio: 16 / 10; border-radius: 22px; }
  .t-bogen { display: none; }
  .t-angebot__in, .t-wege { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .t-kopf { padding-top: 18px; }
  .t-kopf__bild, .t-kopf__grafik { aspect-ratio: 3 / 2; }
  .t-aktion .t-knopf, .t-aktion .t-tel { width: 100%; justify-content: center; }
  .t-leistungen { grid-template-columns: 1fr; }
  .t-wahl--3 { grid-template-columns: 1fr; }
  .t-felder { grid-template-columns: 1fr; }
  .t-weg, .t-karte { padding: 22px; }
  .t-form__fuss .t-knopf { flex: 1; }
  .t-marke { left: 10px; bottom: 10px; font-size: .76rem; }
}

/* ---------- Ruhe ---------- */
@media (prefers-reduced-motion: reduce) {
  .t-kopf__bild img, .t-marke, .t-tel__ic::after, .t-punkt::after, .t-karte::before, .t-schluss::before, .t-schluss::after,
  .t-kopf__grafik .t-aura i, .t-eyebrow::before, .t-bogen path, .t-danke__ic path { animation: none !important; }
  .t-bogen path, .t-danke__ic path, .t-leistung__ic svg * { stroke-dashoffset: 0 !important; transition: none !important; }
  .t-balken__spur i { transform: none !important; transition: none !important; }
  .t-knopf, .t-knopf::before { transition: none; }
}
html.sparsam .t-kopf__bild img, html.sparsam .t-marke, html.sparsam .t-karte::before,
html.sparsam .t-schluss::before, html.sparsam .t-schluss::after, html.sparsam .t-kopf__grafik .t-aura i { animation: none !important; will-change: auto; }
html.sparsam .t-marke { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cream); }
html.sparsam .t-schluss::before, html.sparsam .t-schluss::after, html.sparsam .t-kopf__grafik .t-aura i { filter: blur(30px); }
