/* =========================================================
   tierklinik-marketing.com – Ergänzungen zu site.css (1:1 von digitalgrafik24.de)
   Nur Bausteine, die es auf digitalgrafik24.de nicht gibt. Gleiche Tokens, gleiche Maße.
   ========================================================= */

/* ---------- Einstieg Valera: Regeln von #agentur (digitalgrafik24.de) ---------- */
#valera { overflow-x: hidden; overflow-x: clip; }
#valera .bewertung { width: min(376px, 100%); margin-bottom: clamp(48px, 6vw, 80px); }
#valera .knoepfe + .themen { margin-top: clamp(28px, 3vw, 40px); }
#valera .streifen, .tkm-streifen { max-width: 980px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; }
#valera .streifen b, .tkm-streifen b { font-size: clamp(20px, 1.8vw, 26px); }
#valera .streifen + .knoepfe { margin-top: clamp(40px, 5vw, 56px); }
#valera .streifen b span, .tkm-streifen b span { display: inline; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
@media (max-width: 760px) {
  #valera .streifen, .tkm-streifen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
  #valera .streifen b, .tkm-streifen b { white-space: normal; font-size: 16px; line-height: 1.15; }
  #valera .streifen span, .tkm-streifen span { font-size: 12.5px; }
  #valera .streifen li, .tkm-streifen li { padding-top: 14px; }
}

/* ---------- Hero: Jimdo-Kopfbild (Text und Logo retuschiert). Das Bild wird so verschoben, dass die frühere
   Logo-Stelle (x = 728 bei 2580 × 1058) auf der linken Rasterkante liegt: links bleibt der ruhige Blauverlauf. ---------- */
.hero-tkm { container-type: size; min-height: 0; height: max(700px, min(100svh, 1100px)); padding: 0; display: block; }
.hero-tkm .hero-media picture { position: absolute; inset: 0; }
.hero-tkm .hero-media img, .hero-tkm .hero-content, .hero-tkm .kpis {
  --s: max(100cqw / 2580, 100cqh / 1058);                              /* Cover-Maßstab */
  --gl: max(22px, (100cqw - var(--wrap-wide)) / 2);                     /* linke Rasterkante wie Navigation */
  --ox: clamp(100cqw - 2580 * var(--s), var(--gl) - 728 * var(--s), 0px);   /* Bild so verschieben, dass das Logo auf der Kante sitzt */
  --oy: calc((100cqh - 1058 * var(--s)) / 2);
}
.hero-tkm .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ox) 50%; }
.hero-tkm .hero-shade { background:
  radial-gradient(46% 44% at 22% 12%, rgba(2,7,12,.66) 0%, rgba(2,7,12,.42) 50%, rgba(2,7,12,0) 100%),   /* ruhiger Grund für die Kennzahlen vor der OP-Lampe */
  radial-gradient(70% 62% at 0% 100%, rgba(2,7,12,.78) 0%, rgba(2,7,12,.52) 42%, rgba(2,7,12,0) 100%),
  radial-gradient(56% 44% at 100% 100%, rgba(2,7,12,.82) 0%, rgba(2,7,12,.55) 45%, rgba(2,7,12,0) 100%),
  linear-gradient(180deg, rgba(2,7,12,.5) 0%, rgba(2,7,12,0) 16%); }
/* Micha 5.11.2026 (2. Runde): Valera-Logo aus dem Foto retuschiert und als echtes Bild über die Headline gesetzt,
   Kennzahlen wie bei dg24 oben links unter dem digi-Logo, Textblock unten links auf der Rasterkante. */
.hero-tkm .hero-content { position: absolute; z-index: 3; left: var(--gl); right: 22px; top: auto; bottom: clamp(64px, 12cqh, 140px); }
.hero-tkm .hero-logo { --lw: clamp(150px, 12.5cqw, 196px); display: block; width: var(--lw); margin: 0 0 clamp(10px, 1.8cqh, 20px) calc(var(--lw) * -12 / 253); }
.hero-tkm .hero-logo img { display: block; width: 100%; height: auto; }
.hero-tkm .hero-sub { font-size: clamp(22px, min(2.3vw, 3.6vh), 32px); }
.hero-tkm.hero-video .h-hero { font-size: clamp(52px, min(7.2vw, (100cqh - 650px) / 2.85), 104px); }   /* dreizeilig (Micha 5.11.): frei vom Bildmotiv, Größe so, dass immer ≥ 40 px Luft zu den Kennzahlen bleibt */
@media (min-width: 761px) { .hero-tkm { height: max(760px, min(100svh, 1100px)); } }
.hero-tkm + .marken .marken-in { padding-top: clamp(12px, 1.6vw, 24px); }   /* Icons näher an den Hero, weniger Schwarz (Micha 5.11.) */
@media (min-width: 761px) { .hero-tkm + .marken { position: relative; z-index: 4; margin-top: -40px; background: linear-gradient(to bottom, rgba(16,16,17,0), #101011 40px); } }   /* Icon-Band liegt 40 px im dunklen Auslauf des Fotos */
@media (max-width: 760px) {
  .hero-tkm { height: clamp(620px, 80svh, 720px); }
  .hero-tkm .hero-content { right: 22px; bottom: 34px; }
  .hero-tkm .hero-logo { --lw: 124px; margin-bottom: 8px; }
  .hero-tkm.hero-video .h-hero { font-size: calc((100vw - 44px) / 5.9); }
  .hero-tkm .hero-shade { background: linear-gradient(180deg, rgba(2,7,12,.45) 0%, rgba(2,7,12,0) 18%, rgba(2,7,12,0) 70%, rgba(2,7,12,.5) 100%); }
}
@supports not (container-type: size) {
  .hero-tkm .hero-media img { object-position: 33% 50%; }
  .hero-tkm .hero-content { left: max(22px, (100vw - 1200px) / 2); bottom: 12vh; }
}

/* ---------- Drei Hebel: Karten mit Story-Grafik oben ---------- */
.hebel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.hebel-karte { display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); overflow: hidden; }
.hebel-bild { aspect-ratio: 4 / 5; overflow: hidden; background: #0b1d3a; }
.hebel-bild picture, .hebel-bild img { width: 100%; height: 100%; }
.hebel-bild img { object-fit: cover; object-position: 50% 0; transition: transform 1.2s var(--ease-out); }
.hebel-karte:hover .hebel-bild img { transform: scale(1.035); }
.hebel-karte h3 { margin: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) 10px; font-size: clamp(21px, 1.9vw, 25px); line-height: 1.18; letter-spacing: -.022em; }
.hebel-karte > p { margin: 0 clamp(22px, 2.4vw, 30px); color: var(--ink-2); }
.hebel-karte .mehr-klein { margin: auto 0 0; padding: 14px clamp(10px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px); max-width: none; }
.mehr-klein summary { margin: 0; }
.mehr-klein .mehr-text { padding: 8px 12px 0; font-size: 15px; }
@media (max-width: 860px) {
  .hebel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78vw, 340px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -22px; padding: 0 22px 6px; scroll-padding-inline: 22px; scrollbar-width: none; }
  .hebel::-webkit-scrollbar { display: none; }
  .hebel-karte { scroll-snap-align: start; }
}

/* ---------- Drei Valera-Einblicke nebeneinander (iPhone: wischen) ---------- */
.drei-bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); max-width: 1100px; margin: 0 auto; }
.drei-bilder { max-width: 1000px; }
.drei-bilder figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 9 / 16; background: #0b1d3a; }
.drei-bilder picture, .drei-bilder img { width: 100%; height: 100%; }
.drei-bilder img { object-fit: cover; object-position: 50% 100%; }   /* weißer Rand oben im Motiv fällt weg */
@media (max-width: 760px) {
  .drei-bilder { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -22px; padding: 0 22px 6px; scroll-padding-inline: 22px; scrollbar-width: none; }
  .drei-bilder::-webkit-scrollbar { display: none; }
  .drei-bilder figure { scroll-snap-align: start; }
}

/* ---------- Text unter Bildern ---------- */
.text-mitte { max-width: 700px; margin: clamp(36px, 4.4vw, 56px) auto 0; text-align: center; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--ink-2); }
.dark .text-mitte { color: var(--dark-ink-2); }
.text-mitte + .knoepfe { margin-top: clamp(24px, 3vw, 36px); }

/* ---------- Sichtbar: MacBook mit Ranking-Animation auf Schwarz ---------- */
.tkm-mac { max-width: 1000px; }
.tkm-mac img { filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
.sicht-weiss .bilder-paar { margin-top: 0; }

/* ---------- Talente: Laptops ohne weißen Kasten auf Grau ---------- */
.talente-bild { max-width: 1100px; margin: 0 auto; }
.talente-bild img { width: 100%; height: auto; mix-blend-mode: multiply; }

/* ---------- Video-Bänder (Jimdo-Videos), ruhige Headline unten links ---------- */
.video-band { position: relative; overflow: hidden; height: clamp(420px, 52vw, 700px); background: #02070c; color: #fff; display: flex; align-items: flex-end; }
.video-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(2,7,12,.55) 0%, rgba(2,7,12,.2) 40%, rgba(2,7,12,0) 64%), linear-gradient(to top, rgba(2,7,12,.6) 0%, rgba(2,7,12,0) 42%); }
.vb-rechts::after { background: linear-gradient(270deg, rgba(2,7,12,.55) 0%, rgba(2,7,12,.2) 40%, rgba(2,7,12,0) 64%), linear-gradient(to top, rgba(2,7,12,.6) 0%, rgba(2,7,12,0) 42%); }
.video-band-text { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: clamp(40px, 6vw, 80px); }
.vb-rechts .video-band-text { flex-direction: row-reverse; text-align: right; }
.video-band .h-l { margin: 0; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.3); }
.vb-badge { width: clamp(96px, 10vw, 150px); height: auto; flex: none; filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); }
@media (max-width: 760px) { .video-band { height: 72vw; min-height: 360px; } .vb-badge { width: 84px; } }

/* ---------- FAQ in Kategorien: Pille mit vier Themen (wie die Doppelpille FAQ | Leistungen) ---------- */
.kat-pille { position: relative; display: flex; width: fit-content; max-width: 100%; margin: 0 auto clamp(36px, 4.4vw, 56px); padding: 4px; gap: 2px; border-radius: 980px; background: #e8f1fd; }
.kat-pille button { position: relative; z-index: 1; flex: none; height: 46px; padding: 0 22px; border: 0; border-radius: 980px; background: none; font: inherit; font-size: 17px; font-weight: 500; color: #424245; cursor: pointer; white-space: nowrap; transition: color .3s, background-color .35s var(--ease-out); }
.kat-pille button:hover { color: var(--ink); }
.kat-pille button[aria-selected="true"] { background: var(--blue); color: #fff; }
.kat-pille button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.kat-panel.kat-ein { animation: katEin .5s var(--ease-out) both; }
@keyframes katEin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.faq-weiter { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; color: var(--ink-2); }
@media (max-width: 760px) {
  .kat-pille { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; margin-inline: -22px; border-radius: 0; background: none; padding: 4px 22px; gap: 8px; width: auto; max-width: none; }
  .kat-pille::-webkit-scrollbar { display: none; }
  .kat-pille button { height: 42px; padding: 0 18px; font-size: 16px; background: #e8f1fd; }
}

/* ---------- Erstgespräch: Teamfoto und Hinweis in der Kontaktkarte ---------- */
.eg-team { margin: 18px 0 0; border-radius: var(--r); overflow: hidden; }
.eg-team img { width: 100%; height: auto; }
.eg-dach { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------- Unterseiten ---------- */
.hero-unter-tkm .hero-content { position: absolute; }
.kapitel { max-width: 760px; margin: 0 auto; }
.kapitel + .kapitel { margin-top: clamp(44px, 5vw, 64px); }
.kapitel h2, .kapitel h3.kap-titel { margin: 0 0 12px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.026em; }
.kapitel p { margin: 0 0 14px; color: var(--ink-2); font-size: 18px; line-height: 1.55; }
.kapitel ul, .kapitel ol { margin: 0 0 14px; padding: 0; list-style: none; }
.kapitel li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: 17px; }
.kapitel li:last-child { border-bottom: 1px solid var(--line-soft); }
.kapitel li::before { content: ""; position: absolute; left: 4px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.kapitel li b, .kapitel li strong { color: var(--ink); font-weight: 600; }
.kapitel a { font-weight: 500; }
.dark .kapitel p, .dark .kapitel li { color: var(--dark-ink-2); }
.dark .kapitel li { border-color: rgba(255,255,255,.12); }
.dark .kapitel li b { color: #fff; }
.dark .kapitel a { color: var(--link-dark); }

/* Kartenraster (Leistungen, Bausteine, Schritte) */
.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.raster.r-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-karte { position: relative; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--bg-alt); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.alt .raster-karte { background: #fff; }
.dark .raster-karte { background: #1d1d1f; }
.raster-karte:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.07); }
.raster-karte .rk-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; }
.raster-karte h3 { margin: 0 0 8px; font-size: clamp(20px, 1.8vw, 23px); line-height: 1.2; letter-spacing: -.02em; }
.raster-karte p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.dark .raster-karte h3 { color: #fff; }
.dark .raster-karte p { color: var(--dark-ink-2); }
@media (max-width: 900px) { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .raster, .raster.r-2 { grid-template-columns: none; } }

/* Druckarbeiten nebeneinander, gleiche Höhe */
.print-reihe { display: flex; gap: clamp(14px, 2vw, 24px); justify-content: center; align-items: flex-end; width: min(100vw - 2 * clamp(22px, 3vw, 48px), 1400px); margin-inline: calc(50% - min(50vw - clamp(22px, 3vw, 48px), 700px)); }
.print-reihe > div { min-width: 0; }
.print-reihe img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 18px 50px rgba(0,0,0,.12); }
@media (max-width: 760px) { .print-reihe { flex-direction: column; align-items: stretch; width: auto; margin-inline: 0; } .print-reihe > div { flex: none !important; } }

/* Checkliste (Leitfaden) */
.check { counter-reset: c; }
.check li::before { content: ""; top: 15px; width: 16px; height: 16px; border-radius: 50%; background: #e8f1fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%230071e3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; left: 0; }
.fehler li::before { background: #fdecec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5m0-5l-5 5' fill='none' stroke='%23c8102e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; width: 16px; height: 16px; top: 15px; left: 0; }

/* Zeitplan (Leitfaden): Schritte auf einer Linie */
.zeitplan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: z; }
.zeitplan li { position: relative; padding: 46px 18px 0 0; }
.zeitplan li::before { content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px var(--blue); z-index: 1; }
.zeitplan li::after { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 2px; background: linear-gradient(90deg, var(--blue), rgba(0,113,227,.2)); }
.zeitplan li:last-child::after { right: auto; width: 40px; background: linear-gradient(90deg, rgba(0,113,227,.2), transparent); }
.zeitplan b { display: block; font-size: 20px; letter-spacing: -.02em; margin-bottom: 6px; }
.zeitplan span { display: block; color: var(--ink-2); font-size: 16px; line-height: 1.45; }
.dark .zeitplan b { color: #fff; } .dark .zeitplan span { color: var(--dark-ink-2); }
.dark .zeitplan li::before { background: #000; }
@media (max-width: 760px) {
  .zeitplan { grid-template-columns: none; }
  .zeitplan li { padding: 0 0 26px 38px; }
  .zeitplan li::before { top: 2px; }
  .zeitplan li::after { left: 8px; right: auto; top: 12px; bottom: -2px; width: 2px; height: auto; background: linear-gradient(180deg, var(--blue), rgba(0,113,227,.2)); }
  .zeitplan li:last-child::after { display: none; }
}

/* Zitierfähiger Antwortblock (GEO): definierender Einstiegssatz groß */
.antwort { max-width: 860px; margin: 0 auto; text-align: center; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.38; letter-spacing: -.018em; color: var(--ink); }
.dark .antwort { color: #fff; }

/* Rechtstexte */
.recht { max-width: 760px; margin: 0 auto; }
.recht h2 { margin: 40px 0 10px; font-size: 24px; letter-spacing: -.022em; }
.recht h3 { margin: 28px 0 8px; font-size: 19px; }
.recht p, .recht li { color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.recht a { word-break: break-word; }

/* site.css setzt .alt img auf multiply (weiße Ränder verschmelzen mit Grau): bei vollflächigen Story-Grafiken ausschalten */
.hebel-bild img, .drei-bilder img, .video-band img, .eg-team img { mix-blend-mode: normal; }

.hero-tkm .kpi-wert b, .hero-tkm .kpi-kopf { text-shadow: 0 1px 12px rgba(2,7,12,.55); }

/* ---------- Unterseiten-Hero (OP-Saal): H1 groß, etwas kleiner als die Startseiten-Headline, weil länger ---------- */
.hero-unter-tkm.hero-video .h-hero { font-size: clamp(46px, min(6vw, 9.4vh), 88px); }
@media (max-width: 760px) { .hero-unter-tkm.hero-video .h-hero { font-size: calc((100vw - 44px) / 5.6); } .hero-unter-tkm .hero-sub { font-size: 17px; } }
.raster-karte h4 { margin: 0 0 8px; font-size: clamp(20px, 1.8vw, 23px); line-height: 1.2; letter-spacing: -.02em; }
.dark .raster-karte h4 { color: #fff; }
.tkm-print { max-width: 1100px; margin: clamp(48px, 6vw, 80px) auto 0; }
.tkm-print img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 24px 60px rgba(0,0,0,.14); }
.tkm-streifen { margin-top: clamp(40px, 5vw, 64px) !important; }
.antwort + .tkm-streifen { max-width: 980px; margin-inline: auto; }
.tkm-print-paar { margin-top: clamp(48px, 6vw, 80px); }
.sec-head + .antwort { margin-top: calc(-1 * clamp(8px, 1.4vw, 20px)); }
.print-reihe.tkm-print-paar { width: min(100%, 940px); margin-inline: auto; }

/* ---------- Leitfaden ---------- */
a.raster-karte { display: block; color: inherit; text-decoration: none; }
a.raster-karte:hover h4 { color: var(--blue); }
.raster-cta { background: #e8f1fd !important; }
.raster-cta .rk-n { font-size: 17px; }
.kapitel-folge { margin-top: clamp(56px, 7vw, 96px); }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); max-width: 1100px; margin: 0 auto; }
.zwei-spalten .kapitel { max-width: none; margin: 0; }
.zwei-spalten .kapitel + .kapitel { margin-top: 0; }
@media (max-width: 860px) { .zwei-spalten { grid-template-columns: none; } }
.stats-band .fall-titel { margin: 0 0 clamp(8px, 1vw, 12px); padding-top: clamp(56px, 7vw, 96px); text-align: left; color: var(--dark-ink-2); }
.fall-text { margin: 0 auto; padding: clamp(8px, 1vw, 16px) 0 clamp(56px, 7vw, 96px); max-width: 760px; text-align: center; font-size: 18px; line-height: 1.55; color: var(--dark-ink-2); }

/* ---------- Tierarztpraxis ---------- */
.raster.r-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .raster.r-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .raster.r-4 { grid-template-columns: none; } }
.bild-karte { padding-top: clamp(14px, 1.6vw, 20px); }
.bild-karte picture { margin: 0 0 18px; border-radius: 14px; overflow: hidden; background: #fff; }
.bild-karte img { width: 100%; height: auto; mix-blend-mode: normal; }
.praxis-karten { margin-top: clamp(48px, 6vw, 72px); }
.tkm-streifen.f-4 { max-width: 1100px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .tkm-streifen.f-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } }
.hero-praxis .hero-media video { object-position: 60% 50%; }
.dark .tkm-streifen b { color: #fff; }
.dark .tkm-streifen li { border-color: rgba(255,255,255,.18); }

/* ---------- SEO, Kontakt, Recht ---------- */
.ff-h { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.kontakt-bewertung { width: min(376px, 100%); margin: calc(-1 * clamp(10px, 1.5vw, 20px)) auto clamp(48px, 6vw, 72px); }
.rk-klein { margin-top: 12px !important; font-size: 14px !important; }
.raster-karte p + p { margin-top: 12px; }
.ref-dach { margin: 0 0 6px !important; font-size: 13px !important; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3) !important; }
.ref-karte picture { aspect-ratio: 4 / 3; }
.ref-karte img { height: 100%; object-fit: cover; object-position: 50% 0; }
.hero-recht { height: clamp(520px, 64svh, 680px) !important; }
.hero-recht .hero-unter { margin-top: 18px; }
.talente-bild picture img { border-radius: var(--r); }
#talente .talente-bild img { border-radius: 0; }
.alt .themen a { background: #fff; }
.stats-band .fall-titel { margin-bottom: clamp(24px, 3vw, 40px); }
.fall-text { padding-top: clamp(32px, 4vw, 56px); }

/* ---------- iPhone: lange H1 in Unterseiten-Heroes umbrechen statt überlaufen (site.css setzt nowrap) ---------- */
@media (max-width: 760px) {
  .hero-unter-tkm.hero-video .h-hero, .hero-seo.hero-video .h-hero, .hero-praxis.hero-video .h-hero { white-space: normal; font-size: min(calc((100vw - 44px) / 6.6), 58px); line-height: .98; -webkit-hyphens: manual; hyphens: manual; }
  .hero-seo .hero-kunde, .hero-praxis .hero-kunde { display: none; }
}

/* ---------- Versprechen-Icons als feine Linien, zeichnen sich beim Hereinscrollen selbst (Micha 5.11.2026: seriöser als 3D).
   Weiß = Form, Blau (#2997FF auf Dunkel) = die Aussage (Kreuz, Trendlinie, Plus). ---------- */
.marken-trust .li { display: block; flex: none; width: clamp(56px, 4.9vw, 70px); height: auto; overflow: visible; }
.marken-trust .li path { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.marken-trust .li .ak { stroke: #2997ff; }
.marken-trust .li .pt { fill: rgba(255,255,255,.6); stroke: none; }
.marken-trust.stil-linie li:nth-child(2) { --li-d: .7s; }
.marken-trust.stil-linie li:nth-child(3) { --li-d: 1.4s; }
.marken-trust.stil-linie li:first-child .li { transform: translateY(4px); }   /* Browser-Icon optisch auf Höhe der anderen (Micha) */
.marken-trust.wartet .li path { opacity: 0; }
.marken-trust.ploppt .li path:not(.pt) { stroke-dasharray: 1; animation: liZeichnen 2s cubic-bezier(.65,0,.35,1) calc(var(--li-d, 0s) + .1s) both; }
.marken-trust.ploppt .li path:nth-child(2) { animation-delay: calc(var(--li-d, 0s) + .5s); }
.marken-trust.ploppt .li path:nth-child(n+3):not(.ak):not(.pt) { animation-delay: calc(var(--li-d, 0s) + .75s); }
.marken-trust.ploppt .li .ak { animation-duration: 1.3s; animation-delay: calc(var(--li-d, 0s) + 1.5s); }
.marken-trust.ploppt .li .ak + .ak { animation-delay: calc(var(--li-d, 0s) + 1.95s); }
.marken-trust.ploppt .li .pt { animation: liPunkte .8s ease-out calc(var(--li-d, 0s) + 1s) both; }
@keyframes liZeichnen { 0% { stroke-dashoffset: 1; opacity: 0; } 3% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes liPunkte { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 960px) { .marken-trust .li { width: 58px; margin: 6px 0 4px; } }

/* ---------- Kontaktsektion geteilt (Micha 5.11.2026): Kopf + großes Beratungsfoto auf Weiß, Formular darunter auf Grau.
   Das Foto hat weich auslaufende weiße Ränder, deshalb nur auf Weiß, ohne Ecken und ohne Multiply. ---------- */
.termin-kopf { padding-bottom: clamp(24px, 3vw, 40px); }
.termin-bild { max-width: 1040px; margin: clamp(8px, 1.5vw, 20px) auto 0; }
.termin-bild img { display: block; width: 100%; height: auto; mix-blend-mode: normal; border-radius: 0; }
.termin-form-sek { padding-top: clamp(56px, 6vw, 88px); }
/* Tierarztpraxis: „Ihr Weg zu mehr Neupatienten“ auf Schwarz, damit nicht zwei weiße Sektionen aufeinander folgen */
.weg-dunkel .talente-bild img { mix-blend-mode: normal; }

/* ---------- Hero Österreich/Schweiz (Micha 5.11.2026): Teamfoto als Vollbild wie auf der Startseite.
   Das Foto (1530 × 1050) füllt die Höhe unter der Navi, steht rechtsbündig (Bäume rechts 17 % abgeschnitten)
   und läuft links weich in Schwarz aus. Text links auf Schwarz, gemessen frei vom Team bei 1280–1920 px.
   Die Navi steht auf einem schwarzen Streifen, damit sie nicht über dem Valera-Schriftzug am Gebäude liegt. ---------- */
.hero-team { position: relative; overflow: hidden; container-type: size; height: max(700px, min(100svh, 1000px)); background: #000; color: #fff; }
.ht-media { --h: calc(100cqh - 84px); position: absolute; top: 84px; height: var(--h); width: max(100cqw, var(--h) * 1.7768); right: calc(max(100cqw, var(--h) * 1.7768) * -.09); }   /* breites Foto (1672 × 941), rechts 9 % Hecke abgeschnitten */
.ht-media picture, .ht-media img { display: block; width: 100%; height: 100%; }
.ht-media img { object-fit: cover; object-position: 50% 4%; }   /* Schriftzug oben bleibt ganz, auf breiten Bildschirmen wird unten beschnitten */
/* Lange, weiche Übergänge (Micha: „viel sanfter“): Schwarz läuft in einer Ease-Kurve über Baum und Wand aus, bevor das Team beginnt (ab ~40 %) */
.ht-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.97) 6%, rgba(0,0,0,.9) 12%, rgba(0,0,0,.78) 17%, rgba(0,0,0,.62) 22%, rgba(0,0,0,.45) 27%, rgba(0,0,0,.29) 31%, rgba(0,0,0,.16) 35%, rgba(0,0,0,.07) 38.5%, rgba(0,0,0,0) 42%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.78) 3%, rgba(0,0,0,.5) 6%, rgba(0,0,0,.24) 9.5%, rgba(0,0,0,.08) 13%, rgba(0,0,0,0) 17%),
    linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.12) 8%, rgba(0,0,0,0) 16%); }
.ht-in { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-start; padding-top: clamp(140px, 17cqh, 190px); }
.hero-team .hero-sub { font-size: clamp(16px, 1.35vw, 20px); font-weight: 500; letter-spacing: -.01em; color: rgba(255,255,255,.72); text-shadow: none; margin-bottom: clamp(14px, 1.4vw, 20px); }
.hero-team .h-hero { color: #fff; font-size: clamp(48px, min(6.4vw, 10cqh), 96px); line-height: .96; letter-spacing: -.048em; margin: 0 0 clamp(28px, 3vw, 40px); white-space: normal; }
.hero-team .t-lang { display: none; }   /* „Erstgespräch“ kurz, damit die Buttons nicht ins Team reichen */
@media (max-width: 1100px) {
  /* Tablet + iPhone: Foto oben unter der Navi in voller Breite, Text darunter auf Schwarz */
  .hero-team { height: auto; container-type: normal; padding: 76px 0 64px; }
  .ht-media { --h: auto; position: relative; top: 0; right: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .ht-media img { object-position: 74% 30%; }
  .ht-media::after { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 5%, rgba(0,0,0,.2) 11%, rgba(0,0,0,0) 17%, rgba(0,0,0,0) 62%, rgba(0,0,0,.25) 74%, rgba(0,0,0,.65) 87%, #000 100%); }
  .ht-in { height: auto; padding-top: 22px; }
  .ht-text { width: 100%; }
  .hero-team .h-hero { font-size: min(calc((100vw - 44px) / 4.9), 96px); }
}

/* ---------- Videobänder wie bei Jimdo aufgebaut (Micha 5.11.2026): Stichwort, große Headline im Hero-Stil, leichte Unterzeile,
   links auf der Rasterkante in der ruhigen dunklen Fläche, die Tiere rechts bleiben frei. iPhone: Video oben, Text darunter auf Schwarz. ---------- */
.video-band { height: clamp(560px, 50vw, 820px); align-items: center; }
.video-band::after { background: linear-gradient(90deg, rgba(2,7,12,.62) 0%, rgba(2,7,12,.3) 34%, rgba(2,7,12,0) 56%), linear-gradient(to top, rgba(2,7,12,.45) 0%, rgba(2,7,12,0) 30%); }
.video-band .video-band-text { display: block; padding: 0; }   /* Text auf der Rasterkante (dg24 rückt hier um 8vw ein) */
.vb-text { max-width: 46%; }
@media (min-width: 761px) { .video-band .wrap-wide.video-band-text { padding-left: 0; } }
.vb-stich { margin: 0 0 clamp(10px, 1.2vw, 16px); font-size: clamp(20px, 2vw, 30px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: rgba(255,255,255,.72); }
.video-band .vb-h { margin: 0; font-size: clamp(50px, 6.4vw, 96px); line-height: .96; font-weight: 700; letter-spacing: -.048em; color: #fff; text-shadow: 0 2px 28px rgba(0,0,0,.25); }
.video-band .vb-sub { margin: clamp(16px, 1.8vw, 24px) 0 0; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: rgba(255,255,255,.72); }
.video-band .vb-badge { display: block; width: clamp(88px, 8vw, 120px); margin-top: clamp(28px, 3.4vw, 44px); }   /* wie bei Jimdo unter dem Text */
@media (max-width: 760px) {
  .video-band { display: block; height: auto; min-height: 0; }
  .video-band video { position: relative; display: block; height: 82vw; object-position: 78% 50%; }
  .video-band::after { inset: 0 0 auto; height: calc(82vw + 2px); background: linear-gradient(to top, #02070c 0%, #02070c 3%, rgba(2,7,12,.6) 18%, rgba(2,7,12,0) 40%); }
  .video-band .video-band-text { padding: 6px 0 56px; margin-top: -40px; }
  .vb-text { max-width: none; }
  .vb-stich { font-size: 18px; margin-bottom: 8px; }
  .video-band .vb-h { font-size: calc((100vw - 44px) / 5.4); }
  .video-band .vb-sub { font-size: 21px; margin-top: 12px; }
  .video-band .vb-badge { width: 76px; margin-top: 22px; }
}

/* ---------- Zweiter Button in Valera-Hellblau statt dg24-Gelb (Micha 5.11.2026: seriöser für Tierkliniken).
   #B6DAFF = Hellblau aus dem Valera-Logo („Tierklinik Berlin“), Schrift Dunkelblau, Kontrast 11 : 1. Klasse bleibt btn-gelb. ---------- */
.btn-gelb { background: #b6daff; color: #0a2a55; box-shadow: inset 0 0 0 1px rgba(10,58,122,.22), 0 1px 3px rgba(0,30,80,.18); }
.btn-gelb:hover { background: #cde6ff; }

/* ---------- TEST heller Hero Österreich/Schweiz (Micha 5.11.2026): hero_klinik.jpg, schwarze Headline direkt auf der weißen Wand,
   bewusst ohne Weißverlauf. Navi dunkel auf Weiß, Foto beginnt unter der Navi. ---------- */
.logo-dunkel { display: none; }
.nav-dunkel .glass-nav .gn-inner { color: #1d1d1f; }
.nav-dunkel .glass-nav .logo-img { display: none; }
.nav-dunkel .glass-nav .logo-dunkel { display: block; filter: none; }
.nav-dunkel .glass-nav .nav-links a { text-shadow: none; opacity: .8; }
.nav-dunkel .glass-nav .nav-menu-btn { filter: none; }
.hero-team.hero-hell { background: #fff; color: #1d1d1f; }
/* Foto reicht bis fast nach oben und deckt die volle Breite; hinter der Navi ein dezenter weißer Glas-Verlauf statt harter Fläche (Micha) */
.hero-hell .ht-media { --h: 100cqh; top: 0; left: 0; right: 0; width: auto; }
.hero-hell .ht-media img { object-position: 30% 0%; }
.hero-hell .ht-media::after { display: none; }
/* Navi-Verlauf auf Michas Wunsch komplett entfernt: Foto läuft bis ganz oben, Navi direkt darüber */
.hero-hell .ht-in { padding-top: clamp(124px, 14.5cqh, 140px); }
/* digi-Logo nicht in den Baumblättern: auf dem Desktop steht es im Hero über der Ortszeile, das Navi-Logo ist hier ausgeblendet (Micha) */
.ht-logo { display: none; }
@media (min-width: 1101px) {
  .nav-dunkel .glass-nav .logo { visibility: hidden; }
  .nav-dunkel .gn-inner { width: calc((min(var(--wrap-wide), 100% - 44px) + 100% - 48px) / 2); }   /* Button auf halbem Weg zwischen Rasterkante und Rand, Valera-Schriftzug bleibt frei (Micha) */
  .hero-hell .ht-logo { display: block; width: max-content; margin-bottom: clamp(26px, 3.4cqh, 40px); }
  .hero-hell .ht-logo img { display: block; height: 52px; width: auto; }
}
.hero-hell .hero-sub { color: #6e6e73; }
.hero-hell .h-hero { color: #1d1d1f; text-shadow: none; }
.hero-hell .hero-btns .btn:not(.btn-gelb) { box-shadow: 0 1px 3px rgba(0,30,80,.18); }
@media (max-width: 1100px) {
  .hero-team.hero-hell { padding-top: 66px; }   /* iPhone: schmaler weißer Navi-Streifen, sonst läge die Navi auf dem Valera-Schriftzug */
  .hero-hell .ht-media { --h: auto; top: 0; }
  .hero-hell .ht-media { aspect-ratio: 4 / 3.3; }
  .hero-hell .ht-media img { object-position: 72% 0%; }
  .hero-hell .ht-in { padding-top: 22px; }
}


/* Startseite: Logo-Reihe (Google, Siegel, Bewertungen) über der großen Headline, wie dg24 #kunden.logo-oben (Micha 5.11.2026) */
#valera .bewertung-oben { margin: 0 auto clamp(40px, 4.6vw, 64px); }

/* Hero-Buttons (Micha 5.11.2026): nur „Erstgespräch“ statt „Kostenloses Erstgespräch“, beide schmaler und gleich breit, auf allen Seiten */
@media (min-width: 761px) { .hero-btns .btn-l { min-width: 0; width: 200px; padding: 0 16px; justify-content: center; } }


/* Große Hero-Headlines: Laufweite −0,03 em auf allen Seiten (Micha 5.11.2026) */
.h-hero, .hero-video .h-hero, .hero-team .h-hero { letter-spacing: -.03em; }

/* Referenzen Kontaktseite (Micha 5.11.2026): ohne grauen Kartengrund, Bilder füllen die volle Spaltenbreite (kein Briefmarkenlook) */
.referenzen { gap: clamp(28px, 3.4vw, 48px); }
.referenzen .ref-karte { padding: 0; background: none; }
.referenzen .ref-karte:hover { transform: none; box-shadow: none; }
.referenzen .ref-karte picture { margin-bottom: clamp(20px, 2vw, 26px); border-radius: var(--r-lg); background: #f5f5f7; }

/* Referenzen Kontaktseite als Karussell in voller Breite (Micha 5.11.2026), Texte darunter in drei Spalten */
.ref-karussell { margin-top: clamp(40px, 5vw, 64px); }
.ref-karussell .kar-slide img { height: clamp(320px, 40vw, 600px); border-radius: var(--r-lg); }
.ref-texte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px); margin-top: clamp(32px, 4vw, 52px); }
.ref-text h3 { margin: 0 0 10px; font-size: clamp(20px, 1.8vw, 23px); line-height: 1.2; letter-spacing: -.02em; }
.ref-text p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.ref-text p + p { margin-top: 12px; }
@media (max-width: 760px) { .ref-karussell .kar-slide img { height: 300px; } .ref-texte { grid-template-columns: 1fr; } }

/* Kontaktsektion: digi-Logo unter „Sie sprechen direkt mit der Geschäftsleitung“ (Micha 5.11.2026) */
.termin-logo { display: block; height: clamp(40px, 3.6vw, 52px); width: auto; margin: clamp(20px, 2.4vw, 30px) auto 0; object-fit: contain; }

/* ---------- Aufklappbare Broschüre (Leitfaden, Micha 5.11.2026). Geschlossen: Titel mittig. Offen: Doppelseite Leistungen | Transfer.
   Das Deckblatt dreht um den Falz (linke Kante), Vorder- und Rückseite liegen Rücken an Rücken. ---------- */
.bro { --pw: min(560px, (100vw - 44px) / 2); width: calc(var(--pw) * 2); margin: clamp(48px, 6vw, 80px) auto 0; }
.bro.rv { opacity: 1; transform: none; }
.bro-buch { position: relative; width: 100%; aspect-ratio: 3532 / 2504; perspective: 2600px; transform: translateX(-25%); transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); }
.bro.offen .bro-buch { transform: none; }
.bro-seite, .bro-blatt { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; }
.bro-blatt { z-index: 2; transform-origin: 0 50%; transform-style: preserve-3d; transform: rotateY(var(--dreh, 0deg)); transition: transform 2s cubic-bezier(.6, 0, .3, 1); cursor: grab; touch-action: pan-y; }
.bro.offen .bro-blatt { --dreh: -180deg; }
.bro.zieht .bro-blatt, .bro.zieht .bro-buch { transition: none; cursor: grabbing; }
.bro-vorne, .bro-hinten, .bro-seite { overflow: hidden; background: #0b2147; box-shadow: 0 24px 60px rgba(10, 30, 60, .22), 0 2px 8px rgba(10, 30, 60, .12); }
.bro-vorne, .bro-hinten { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.bro-hinten { transform: rotateY(180deg); border-radius: 6px 0 0 6px; }
.bro-vorne, .bro-seite { border-radius: 0 6px 6px 0; }
.bro picture, .bro img { display: block; width: 100%; height: 100%; }
.bro img { object-fit: cover; mix-blend-mode: normal; -webkit-user-drag: none; user-select: none; }
/* Licht am Falz: leichte Schattierung zur Mitte hin, wie bei echtem Papier */
.bro-vorne::after, .bro-hinten::after, .bro-seite::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.bro-vorne::after, .bro-seite::after { background: linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,0) 10%); }
.bro-hinten::after { background: linear-gradient(270deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,0) 10%); }
.bro-steuer { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(28px, 3vw, 40px); }
.bro-knopf { gap: 10px; min-width: 0; width: auto; padding: 0 28px; }
.bro-knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.bro-hinweis { margin: 0; font-size: 14px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .bro-buch, .bro-blatt { transition: none; } }
@media (max-width: 760px) { .bro-hinweis { font-size: 13px; } }

/* Broschüre (Micha 5.11.2026, Runde 2): Hochglanz mit harter Lichtkante, fliegt von links ein, öffnet sich einmal und schließt beim Weiterscrollen */
/* kein fest verbauter Glanz, nur der animierte Lichtstreifen (Micha 5.11.2026) */
.bro-glanz { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.bro-glanz::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 120%;   /* breiter Auslauf: das Ende ist nie auf der Seite zu sehen (Micha) */
  /* gerade Kante (Schräge kommt allein aus skewX), Helligkeit fällt in einer weichen Kurve ohne Knick ab, 30 % weniger Deckkraft (Micha) */
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 8%, rgba(255,255,255,.35) 8.15%, rgba(255,255,255,.3) 13%, rgba(255,255,255,.235) 20%, rgba(255,255,255,.17) 29%, rgba(255,255,255,.115) 40%, rgba(255,255,255,.07) 53%, rgba(255,255,255,.037) 67%, rgba(255,255,255,.014) 82%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%) skewX(-12deg); }
.bro.glaenzt .bro-vorne .bro-glanz::before { animation: broGlanz 2.5s cubic-bezier(.4, .05, .45, 1) both; }   /* etwas langsamer (Micha) */
@keyframes broGlanz { to { transform: translateX(110%) skewX(-12deg); } }
.bro-buch { transition: transform 2s cubic-bezier(.6, 0, .3, 1), translate 1.05s cubic-bezier(.3, .1, .2, 1), rotate 1.05s cubic-bezier(.3, .1, .2, 1), opacity .5s ease-out; }   /* schnell da, langsam aufblättern (Micha) */
.bro.wartet .bro-buch { translate: -115vw 40px; rotate: -10deg; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .bro.wartet .bro-buch { translate: none; rotate: none; opacity: 1; } .bro.glaenzt .bro-glanz::before { animation: none; } }

/* Glanz huscht nach dem Aufblättern noch einmal über die ganze Doppelseite (Micha 5.11.2026) */
.bro-glanz-innen { z-index: 3; border-radius: 6px; }
.bro-glanz-innen::before { width: 70%; }
.bro.glaenzt-innen .bro-glanz-innen::before { animation: broGlanzInnen 3s cubic-bezier(.4, .05, .45, 1) both; }
@keyframes broGlanzInnen { to { transform: translateX(185%) skewX(-12deg); } }   /* zieht ganz durch und verschwindet rechts, bleibt nicht stehen */
@media (prefers-reduced-motion: reduce) { .bro.glaenzt-innen .bro-glanz-innen::before { animation: none; } }