/* shooting.css – Unterseite /shooting/ (angelegt 19.09.2026)
   Header, Menü, Footer und Kundenvideo kommen aus site.css; hier nur das Seitenlayout.
   Farben und Schrift wie auf der Startseite: Manrope, Blau #0A6EBD → #3A9FE8, Grau #F8F9FA. */

.shooting-page { --sh-blau: #0A6EBD; --sh-blau-hell: #3A9FE8; --sh-tinte: #111827; --sh-grau: #6B7280; --sh-linie: #E5E7EB;
  --sh-grad: linear-gradient(135deg, #0A6EBD 0%, #3A9FE8 100%); --sh-sec-y: clamp(3.5rem, 2.5rem + 4vw, 6rem); }

.sh-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48em) { .sh-wrap { padding: 0 2rem; } }
.sh-schmal { max-width: 48rem; }
.sh-sec { padding: var(--sh-sec-y) 0; }
.sh-bg-white { background: #fff; }

.sh-ic { width: 1.125rem; height: 1.125rem; flex: none; }
.sh-eyebrow { margin: 0 0 .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sh-blau); }
.sh-h1 { margin: 0; font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; color: var(--sh-tinte); text-wrap: balance; }
.sh-grad-text { background: var(--sh-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sh-h2 { margin: 0; font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem); font-weight: 900; line-height: 1.12; letter-spacing: -.03em; color: var(--sh-tinte); text-wrap: balance; }
.sh-lead { margin: 1.25rem 0 0; max-width: 34rem; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.7; color: var(--sh-grau); text-wrap: pretty; }
.sh-sub { margin: .875rem auto 0; max-width: 36rem; font-size: 1rem; line-height: 1.7; color: var(--sh-grau); text-wrap: pretty; }
.sh-sub-links { margin-left: 0; }
.sh-head { text-align: center; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.sh-head-links { text-align: left; }
.sh-klein { margin: 1.25rem 0 0; font-size: .85rem; color: var(--sh-grau); }

/* Buttons */
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.5rem; border-radius: .875rem; font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background-color .2s; }
.sh-btn-primary { background: var(--sh-grad); color: #fff; box-shadow: 0 14px 30px -12px rgba(10, 110, 189, .7); }
.sh-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(10, 110, 189, .8); }
.sh-btn-ghost { background: #fff; color: var(--sh-tinte); border: 1px solid var(--sh-linie); }
.sh-btn-ghost:hover { border-color: #cbd5e1; }
.sh-btn-weiss { background: #fff; color: var(--sh-blau); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .35); }
.sh-btn-weiss:hover { transform: translateY(-2px); }
.sh-btn:focus-visible { outline: 3px solid var(--sh-blau-hell); outline-offset: 3px; }

/* Hero */
.sh-hero { padding: calc(4rem + clamp(2rem, 1rem + 3vw, 4rem)) 0 var(--sh-sec-y); background:
  radial-gradient(60rem 30rem at 85% 10%, rgba(58, 159, 232, .12), transparent 60%), #F8F9FA; overflow: hidden; }
.sh-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.sh-crumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; font-size: .8rem; color: var(--sh-grau); }
.sh-crumb a { color: var(--sh-grau); text-decoration: none; }
.sh-crumb a:hover { color: var(--sh-blau); }
.sh-hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.sh-hero-bild { position: relative; margin: 0; justify-self: end; width: 100%; max-width: 28rem; }
.sh-hero-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1.5rem; box-shadow: 0 40px 80px -30px rgba(10, 37, 64, .45); }
.sh-hero-tag { position: absolute; left: -1rem; bottom: 1.5rem; display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 1rem; background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 34px -14px rgba(10, 37, 64, .4); font-size: .85rem; font-weight: 700; color: var(--sh-tinte); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sh-hero-tag .sh-ic { color: var(--sh-blau); }
@media (max-width: 56.25em) {
  .sh-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-hero-bild { justify-self: center; max-width: 26rem; }
  .sh-hero-tag { left: .75rem; bottom: .75rem; }
}
@media (max-width: 30em) { .sh-hero-cta .sh-btn { width: 100%; } }

/* Bento-Kacheln „Keine Sorge“ (Stil wie „Im Detail“ auf der Startseite)
   3 Spalten: Reihe 1 = breit + schmal, Reihe 2 = schmal + breit. Tablet 2 Spalten, Handy 1 Spalte.
   .ist-sichtbar setzt shooting.js, sobald die Kachel im Bild ist; --mx/--my = Mausposition für den Lichtschein. */
.sh-bento { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); --sh-ease: cubic-bezier(.22, .61, .36, 1); }
@media (min-width: 44em) { .sh-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sh-span2 { grid-column: span 2; } }
@media (min-width: 64em) { .sh-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sh-tile, .sh-tipp { position: relative; overflow: hidden; --mx: 50%; --my: 0%;
  transition: transform .5s var(--sh-ease, ease), box-shadow .35s, border-color .35s; }
.sh-tile { display: flex; flex-direction: column; padding: 1.5rem 1.375rem 1.375rem; border-radius: 1.5rem; background: #fff; border: 1px solid #eef0f4; box-shadow: 0 1px 3px rgba(0, 0, 0, .03); }
.sh-tile::before, .sh-tipp::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(22rem circle at var(--mx) var(--my), rgba(58, 159, 232, .14), transparent 60%); }
.sh-tile:hover, .sh-tipp:hover { transform: translateY(-4px); border-color: rgba(10, 110, 189, .2); box-shadow: 0 24px 50px -28px rgba(10, 60, 120, .35); }
.sh-tile:hover::before, .sh-tipp:hover::before { opacity: 1; }
.sh-tile > *, .sh-tipp > * { position: relative; }
.sh-tile-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: #EBF4FC; color: var(--sh-blau); transition: transform .4s var(--sh-ease), background .3s, color .3s; }
.sh-tile-ic .sh-ic { width: 1.35rem; height: 1.35rem; }
.sh-tile:hover .sh-tile-ic { transform: rotate(-6deg) scale(1.06); background: var(--sh-grad); color: #fff; }
.sh-tile h3 { margin: .875rem 0 .375rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; color: var(--sh-tinte); }
.sh-tile p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--sh-grau); }
.sh-tile:not(.sh-span2) > p { flex-grow: 1; }
.sh-span2 { display: grid; gap: 1.25rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 44em) { .sh-span2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding: 1.75rem 1.625rem; } }
.sh-viz { position: relative; margin-top: 1.125rem; }
.sh-span2 .sh-viz { margin-top: 0; }
.sh-chip { display: inline-flex; align-items: center; gap: .3125rem; padding: .25rem .625rem; border-radius: 999px; background: #fff; border: 1px solid rgba(10, 110, 189, .18); color: var(--sh-blau); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.sh-chip i { position: relative; display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; background: #22c55e; }
.sh-chip i::after { content: ""; position: absolute; left: 3.5px; top: 2px; width: 3px; height: .375rem; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.sh-chips { display: flex; flex-wrap: wrap; gap: .4375rem; margin-top: 1rem; }

/* 1 Skript: Zeilen leuchten nacheinander auf, Sprechblasen wechseln */
.sh-skript { padding: .875rem; border-radius: .875rem; background: #f7f9fc; border: 1px solid #eef0f4; }
.sh-skript-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; font-size: .75rem; font-weight: 800; color: #374151; }
.sh-skript ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sh-skript li { display: flex; gap: .375rem; padding: .5rem .625rem; border-radius: .625rem; background: #fff; border: 1px solid #eef0f4; }
.sh-skript li b { height: .5rem; border-radius: .25rem; background: #e2e8f0; }
.sh-skript li b:first-child { width: 55%; } .sh-skript li b:last-child { width: 25%; }
.sh-skript li:nth-child(2) b:first-child { width: 40%; } .sh-skript li:nth-child(2) b:last-child { width: 38%; }
.sh-skript li:nth-child(3) b:first-child { width: 62%; } .sh-skript li:nth-child(3) b:last-child { width: 18%; }
.sh-skript li:nth-child(4) b:first-child { width: 34%; } .sh-skript li:nth-child(4) b:last-child { width: 30%; }
.sh-blasen { position: relative; height: 2.25rem; margin-top: .75rem; }
.sh-blase { position: absolute; left: 0; top: 0; padding: .45rem .75rem; border-radius: .75rem .75rem .75rem .25rem; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.sh-blase-vor { background: var(--sh-grad); color: #fff; }
.sh-blase-nach { left: auto; right: 0; border-radius: .75rem .75rem .25rem .75rem; background: #fff; border: 1px solid rgba(10, 110, 189, .2); color: var(--sh-blau); opacity: 0; }
.ist-sichtbar .sh-skript li { animation: shZeile 8s var(--sh-ease) infinite; }
.ist-sichtbar .sh-skript li:nth-child(2) { animation-delay: 2s; }
.ist-sichtbar .sh-skript li:nth-child(3) { animation-delay: 4s; }
.ist-sichtbar .sh-skript li:nth-child(4) { animation-delay: 6s; }
.ist-sichtbar .sh-blase-vor { animation: shVor 2s var(--sh-ease) infinite; }
.ist-sichtbar .sh-blase-nach { animation: shNach 2s var(--sh-ease) infinite; }
@keyframes shZeile { 0%, 24% { background: #fff; border-color: rgba(10, 110, 189, .35); box-shadow: 0 6px 14px -10px rgba(10, 110, 189, .6); } 0%, 2% { transform: scale(1.02); } 25%, 100% { background: #fff; border-color: #eef0f4; box-shadow: none; transform: none; } }
@keyframes shVor { 0%, 45% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes shNach { 0%, 45% { opacity: 0; transform: translateY(4px); } 50%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 2 Blick-Szene: links MWW hinter der Kamera, rechts die Ärztin; die Blicklinie geht an der Kamera vorbei
   zur Person. Sprechblasen wechseln (vorsprechen → nachsprechen), danach erscheint der Hinweis-Chip. */
.sh-blick { position: relative; height: 12.5rem; border-radius: .875rem; overflow: hidden; background: linear-gradient(180deg, #eef4fb 0%, #f7f9fc 100%); border: 1px solid #eef0f4; }
.sh-boden { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, #dfe8f2, #d3dfec); }
.sh-figur { position: absolute; bottom: 20%; width: 2.6rem; height: 4.4rem; }
.sh-figur::before { content: ""; position: absolute; left: .65rem; top: 0; width: 1.3rem; height: 1.3rem; border-radius: 50%; }
.sh-figur::after { content: ""; position: absolute; left: 0; top: 1.5rem; width: 2.6rem; height: 2.9rem; border-radius: 1rem 1rem .3rem .3rem; }
.sh-figur-mww { left: 12%; } .sh-figur-mww::before { background: #1f2937; } .sh-figur-mww::after { background: linear-gradient(135deg, #0A6EBD, #3A9FE8); }
.sh-figur-sie { right: 12%; } .sh-figur-sie::before { background: #c8a27a; } .sh-figur-sie::after { background: #fff; box-shadow: inset 0 0 0 2px #dbe4ee; }
.sh-figur i { position: absolute; top: .45rem; width: .2rem; height: .2rem; border-radius: 50%; background: #fff; }
.sh-figur-mww i { left: 1.55rem; } .sh-figur-sie i { left: .85rem; background: #374151; }
/* Kamera auf Dreibein: Gehäuse, Objektiv mit Reflex, Aufsteck-Mikrofon, blinkende Aufnahmeleuchte */
.sh-stativ { position: absolute; left: 30%; bottom: 20%; width: 2.6rem; height: 3.5rem; }
.sh-stativ::before { content: ""; position: absolute; left: .15rem; top: .35rem; width: 2.25rem; height: 1.45rem; border-radius: .4rem;
  background: linear-gradient(160deg, #3b475a 0%, #1f2937 55%, #0b1220 100%); box-shadow: 0 3px 8px -3px rgba(10, 25, 45, .5), inset 0 1px 0 rgba(255, 255, 255, .18); }
.sh-stativ i { position: absolute; left: .3rem; top: .75rem; width: .95rem; height: .95rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #bfdbfe 0 18%, #2563eb 19% 52%, #0b1220 53%); box-shadow: 0 0 0 2px #111827, 0 0 0 3px rgba(255, 255, 255, .22); }
.sh-stativ i::before { content: ""; position: absolute; left: 1.35rem; top: -.15rem; width: .4rem; height: .4rem; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, .28); }
.sh-stativ i::after { content: ""; position: absolute; left: .55rem; top: -.85rem; width: .8rem; height: .32rem; border-radius: .14rem .14rem 0 0; background: #1f2937; box-shadow: 0 .3rem 0 -.06rem #111827; }
.sh-stativ::after { content: ""; position: absolute; left: .3rem; top: 1.8rem; width: 2rem; height: 1.7rem; background:
  linear-gradient(to bottom right, transparent calc(50% - 1px), #566578 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left / 50% 100% no-repeat,
  linear-gradient(to bottom left, transparent calc(50% - 1px), #566578 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right / 50% 100% no-repeat,
  linear-gradient(#566578, #566578) center / 2px 100% no-repeat; }
.ist-sichtbar .sh-stativ i::before { animation: shBlink 1.2s steps(1) infinite; }
.sh-linie { position: absolute; left: calc(12% + 1.8rem); right: calc(12% + 1.8rem); bottom: calc(20% + 3.85rem); height: 0; border-top: 2px dashed rgba(10, 110, 189, .55); transform-origin: 100% 50%; }
.sh-sb { position: absolute; top: .75rem; padding: .4rem .6rem; border-radius: .7rem; font-size: .75rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.sh-sb-mww { left: .6rem; background: var(--sh-grad); color: #fff; border-bottom-left-radius: .2rem; }
.sh-sb-sie { right: .6rem; background: #fff; color: var(--sh-blau); border: 1px solid rgba(10, 110, 189, .2); border-bottom-right-radius: .2rem; opacity: 0; }
.sh-blick-chip { position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); opacity: 1; }
.ist-sichtbar .sh-sb-mww { animation: shSbMww 6s var(--sh-ease) infinite; }
.ist-sichtbar .sh-sb-sie { animation: shSbSie 6s var(--sh-ease) infinite; }
.ist-sichtbar .sh-linie { animation: shLinie 6s var(--sh-ease) infinite; }
.ist-sichtbar .sh-blick-chip { animation: shChip 6s var(--sh-ease) infinite; }
.ist-sichtbar .sh-figur-sie i { animation: shBlinzeln 6s steps(1) infinite; }
@keyframes shSbMww { 0%, 5% { opacity: 0; transform: translateY(4px); } 10%, 40% { opacity: 1; transform: none; } 46%, 100% { opacity: 0; } }
@keyframes shSbSie { 0%, 45% { opacity: 0; transform: translateY(4px); } 52%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes shLinie { 0%, 50% { transform: scaleX(0); opacity: 0; } 60%, 90% { transform: scaleX(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes shChip { 0%, 62% { opacity: 0; transform: translate(-50%, 6px); } 70%, 92% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
@keyframes shBlinzeln { 0%, 38% { transform: none; } 39% { transform: scaleY(.1); } 41%, 100% { transform: none; } }
/* Ab Tablet füllt die Szene die Höhe, die die Nachbarkachel vorgibt */
@media (min-width: 44em) { .sh-blick { flex: 1 1 auto; min-height: 11rem; height: auto; } }

/* 3 Takes: erste Aufnahme wird gestrichen, zweite passt */
.sh-takes { display: grid; gap: .5rem; }
.sh-take { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border-radius: .75rem; background: #f7f9fc; border: 1px solid #eef0f4; }
.sh-take b { font-size: .85rem; font-weight: 800; color: #111827; }
.sh-take em { margin-left: auto; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-style: normal; font-weight: 800; }
.sh-take-1 em { background: #fef2f2; color: #dc2626; }
.sh-take-2 em { background: #ecfdf5; color: #16a34a; }
.sh-klappe { position: relative; width: 1.75rem; height: 1.25rem; border-radius: .2rem; background: #111827; }
.sh-klappe::before { content: ""; position: absolute; left: 0; right: 0; top: -.35rem; height: .3rem; border-radius: .15rem; transform-origin: 0 100%;
  background: repeating-linear-gradient(135deg, #111827 0 .3rem, #fff .3rem .6rem); }
.ist-sichtbar .sh-take-1 { animation: shTake1 6s var(--sh-ease) infinite; }
.ist-sichtbar .sh-take-2 { animation: shTake2 6s var(--sh-ease) infinite; }
.ist-sichtbar .sh-take .sh-klappe::before { animation: shKlappe 6s var(--sh-ease) infinite; }
.ist-sichtbar .sh-take-2 .sh-klappe::before { animation-delay: 2.4s; }
@keyframes shTake1 { 0%, 30% { opacity: 1; } 40%, 90% { opacity: .45; } 100% { opacity: 1; } }
@keyframes shTake2 { 0%, 36% { opacity: 0; transform: translateY(6px); } 44%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes shKlappe { 0%, 4% { transform: rotate(-22deg); } 8%, 100% { transform: none; } }

/* 4 Sucher: REC blinkt, Fokus rastet ein, Tonpegel schlägt aus */
.sh-sucher { position: relative; height: 11rem; border-radius: .875rem; overflow: hidden; background: linear-gradient(160deg, #dbe7f3 0%, #eef3f9 45%, #cfdcea 100%); }
.sh-raum { position: absolute; inset: auto 0 0 0; height: 44%; background: linear-gradient(180deg, #c3d3e4, #b3c6db); }
.sh-softbox { position: absolute; right: 12%; top: 14%; width: 16%; height: 30%; border-radius: .25rem; background: #fff; box-shadow: 0 0 30px 8px rgba(255, 255, 255, .8); }
.sh-person { position: absolute; left: 44%; bottom: 16%; width: 2.5rem; height: 4.25rem; }
.sh-person::before { content: ""; position: absolute; left: .625rem; top: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #8aa4c0; }
.sh-person::after { content: ""; position: absolute; left: 0; top: 1.45rem; width: 2.5rem; height: 2.8rem; border-radius: 1rem 1rem .25rem .25rem; background: #fff; box-shadow: inset 0 0 0 2px #dbe4ee; }
.sh-rahmen { position: absolute; inset: .625rem; pointer-events: none; }
.sh-rahmen i { position: absolute; width: 1rem; height: 1rem; border: solid #fff; opacity: .95; }
.sh-rahmen i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; } .sh-rahmen i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.sh-rahmen i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; } .sh-rahmen i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.sh-rec, .sh-zeit { position: absolute; top: .75rem; padding: .2rem .5rem; border-radius: 999px; background: rgba(17, 24, 39, .62); font-size: .75rem; font-weight: 800; letter-spacing: .06em; color: #fff; }
.sh-rec { left: .875rem; display: flex; align-items: center; gap: .3125rem; }
.sh-rec::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: #ef4444; }
.sh-zeit { right: .875rem; font-variant-numeric: tabular-nums; }
.sh-fokus { position: absolute; left: calc(44% + 1.25rem); top: 40%; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; border: 2px solid #fbbf24; border-radius: .375rem; opacity: 0; }
.sh-pegel { position: absolute; left: .875rem; bottom: .75rem; display: flex; align-items: flex-end; gap: 2px; height: 1.4rem; padding: .2rem .4rem; border-radius: .375rem; background: rgba(17, 24, 39, .55); }
.sh-pegel i { width: 3px; height: 30%; border-radius: 1px; background: #fff; opacity: .9; }
.ist-sichtbar .sh-rec::before { animation: shBlink 1.2s steps(1) infinite; }
.ist-sichtbar .sh-fokus { animation: shFokus 5s var(--sh-ease) infinite; }
.ist-sichtbar .sh-pegel i { animation: shPegel .9s ease-in-out infinite alternate; }
.ist-sichtbar .sh-pegel i:nth-child(2) { animation-delay: .15s; } .ist-sichtbar .sh-pegel i:nth-child(3) { animation-delay: .3s; }
.ist-sichtbar .sh-pegel i:nth-child(4) { animation-delay: .45s; } .ist-sichtbar .sh-pegel i:nth-child(5) { animation-delay: .6s; }
@keyframes shBlink { 50% { opacity: 0; } }
@keyframes shFokus { 0%, 10% { opacity: 0; transform: scale(1.6); } 25% { opacity: 1; transform: scale(1); border-color: #fbbf24; } 40%, 70% { opacity: 1; transform: scale(1); border-color: #22c55e; } 85%, 100% { opacity: 0; } }
@keyframes shPegel { to { height: 100%; } }

/* Hero: REC-Anzeige auf dem Foto */
.sh-hero-rec { position: absolute; right: 1rem; top: 1rem; display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(17, 24, 39, .6);
  font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sh-hero-rec::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #ef4444; animation: shBlink 1.2s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .sh-tile, .sh-tipp, .sh-tile-ic, .sh-foto img { transition: none; }
  .sh-tile:hover, .sh-tipp:hover { transform: none; }
  .ist-sichtbar .sh-skript li, .ist-sichtbar .sh-blase-vor, .ist-sichtbar .sh-blase-nach, .ist-sichtbar .sh-take-1, .ist-sichtbar .sh-take-2,
  .ist-sichtbar .sh-take .sh-klappe::before, .ist-sichtbar .sh-rec::before, .ist-sichtbar .sh-stativ i::before, .ist-sichtbar .sh-sb-mww, .ist-sichtbar .sh-sb-sie, .ist-sichtbar .sh-linie, .ist-sichtbar .sh-blick-chip, .ist-sichtbar .sh-figur-sie i, .ist-sichtbar .sh-fokus, .ist-sichtbar .sh-pegel i, .sh-hero-rec::before { animation: none; }
  .sh-blase-nach, .sh-sb-sie { opacity: 0; } .sh-fokus { opacity: 1; border-color: #22c55e; }
}

/* Ablauf */
.sh-ablauf-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.sh-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.sh-steps::before { content: ""; position: absolute; left: 1.25rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: linear-gradient(#cfe3f6, #e5eef8); }
.sh-steps li { position: relative; display: flex; gap: 1.25rem; padding: 0 0 1.75rem; }
.sh-steps li:last-child { padding-bottom: 0; }
.sh-step-nr { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; border: 2px solid #cfe3f6; font-weight: 800; color: var(--sh-blau); }
.sh-steps li:first-child .sh-step-nr { background: var(--sh-grad); border-color: transparent; color: #fff; }
.sh-steps h3 { margin: .35rem 0 .35rem; font-size: 1.1rem; font-weight: 800; color: var(--sh-tinte); }
.sh-steps p { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--sh-grau); }
.sh-ablauf-bild { margin: 0; }
.sh-ablauf-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1.5rem; box-shadow: 0 30px 60px -28px rgba(10, 37, 64, .45); }
@media (max-width: 56.25em) {
  .sh-ablauf-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-ablauf-bild { max-width: 26rem; justify-self: center; width: 100%; }
}

/* Teamfotos */
/* Text oben, darunter die Beispielbilder nebeneinander (Wunsch Nevio 20.09.2026) */
.sh-team-grid { display: grid; gap: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.sh-team-text { max-width: 44rem; }
.sh-liste { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.sh-liste li { display: flex; align-items: flex-start; gap: .65rem; font-weight: 600; line-height: 1.45; color: #374151; }
/* Der Text steht in einem eigenen <span>: sonst würden Textteile und Link je zu einem Flex-Element
   und die Lücken im Satz rissen auf (Handy, 20.09.2026). */
.sh-liste li > span { min-width: 0; }
.sh-liste .sh-ic { margin-top: .1rem; color: #16a34a; }
.sh-team-bilder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, .3rem + .6vw, 1rem); }
.sh-team-bilder figure { margin: 0; }
.sh-team-bilder img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 15%; border-radius: 1.25rem; background: #eef1f4; }

/* Handy: nebeneinander bleiben, aber zum Wischen – vier Bilder nebeneinander wären hier nur ~85 px breit */
@media (max-width: 34em) {
  .sh-team-bilder { display: flex; gap: .625rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem; scrollbar-width: thin; }
  .sh-team-bilder figure { flex: 0 0 62%; scroll-snap-align: start; }
  .sh-team-bilder img { aspect-ratio: 3 / 4; }
}

/* Einblicke-Galerie: zwei Hochformate und vier Querformate = 8 Zellen (4 × 2, Handy 2 × 4) */
.sh-galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 5rem + 10vw, 15rem); grid-auto-flow: dense; gap: 1rem; }
.sh-galerie figure { margin: 0; overflow: hidden; border-radius: 1.25rem; background: #e9edf2; }
.sh-galerie .sh-g-hoch { grid-row: span 2; }
.sh-galerie img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.sh-galerie figure:hover img { transform: scale(1.04); }
@media (max-width: 40em) {
  .sh-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9rem; gap: .65rem; }
  .sh-galerie figure { border-radius: 1rem; }
}

/* Tipps: Kachel mit Symbol, großer Nummer im Hintergrund und gestaffeltem Einblenden.
   Lichtschein und Anheben kommen aus dem gemeinsamen Block weiter oben (.sh-tipp, data-sh). */
.sh-tipps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.sh-tipp { position: relative; padding: 1.75rem 1.5rem 1.5rem; border-radius: 1.25rem; background: #F8F9FA; border: 1px solid #EEF0F3; cursor: default;
  opacity: 1; }
.sh-tipp::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--sh-grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--sh-ease); }
.sh-tipp:hover::after { transform: scaleX(1); }
.sh-tipp-nr { position: absolute; right: 1rem; top: .5rem; font-size: 2.75rem; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: #0A6EBD; opacity: .08; transition: opacity .35s, transform .35s var(--sh-ease); }
.sh-tipp:hover .sh-tipp-nr { opacity: .16; transform: translateY(-2px) scale(1.04); }
.sh-tipp-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: .75rem; background: #EBF4FC; color: var(--sh-blau);
  transition: transform .4s var(--sh-ease), background .3s, color .3s; }
.sh-tipp-ic .sh-ic { width: 1.25rem; height: 1.25rem; }
.sh-tipp:hover .sh-tipp-ic { transform: rotate(-6deg) scale(1.08); background: var(--sh-grad); color: #fff; }
.sh-tipp h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 800; color: var(--sh-tinte); }
.sh-tipp p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--sh-grau); }
/* Beim ersten Sichtwerden nacheinander einblenden */
.sh-tipps .sh-tipp { transform: translateY(10px); opacity: 0; transition: opacity .5s var(--sh-ease), transform .5s var(--sh-ease), box-shadow .35s, border-color .35s; }
.sh-tipps .sh-tipp.ist-sichtbar { transform: none; opacity: 1; }
.sh-tipps .sh-tipp:nth-child(2) { transition-delay: .06s; } .sh-tipps .sh-tipp:nth-child(3) { transition-delay: .12s; }
.sh-tipps .sh-tipp:nth-child(4) { transition-delay: .18s; } .sh-tipps .sh-tipp:nth-child(5) { transition-delay: .24s; } .sh-tipps .sh-tipp:nth-child(6) { transition-delay: .3s; }
.sh-tipps .sh-tipp.ist-sichtbar:hover { transform: translateY(-4px); }
@media (max-width: 56.25em) { .sh-tipps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36em) { .sh-tipps { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .sh-tipps .sh-tipp { transform: none; opacity: 1; transition: none; }
  .sh-tipp::after, .sh-tipp-nr, .sh-tipp-ic { transition: none; }
}

/* Kundenstimme: Eyebrow passend zur Seite */
#kundenstimme .kv-text .sh-eyebrow { margin-bottom: .5rem; }

/* FAQ */
.sh-faq { display: grid; gap: .75rem; }
.sh-faq details { border-radius: 1rem; background: #F8F9FA; border: 1px solid #EEF0F3; }
.sh-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: 1rem 1.25rem; cursor: pointer; font-weight: 700; color: var(--sh-tinte); }
.sh-faq summary::-webkit-details-marker { display: none; }
.sh-faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #fff; border: 1px solid var(--sh-linie); font-weight: 700; color: var(--sh-blau); transition: transform .2s; }
.sh-faq details[open] summary::after { transform: rotate(45deg); }
.sh-faq summary:focus-visible { outline: 3px solid var(--sh-blau-hell); outline-offset: 2px; border-radius: 1rem; }
.sh-faq details p { margin: 0; padding: 0 1.25rem 1.25rem; font-size: .95rem; line-height: 1.7; color: var(--sh-grau); }
.sh-faq a { color: var(--sh-blau); }

/* Abschluss */
.sh-cta { padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) clamp(1.5rem, 1rem + 3vw, 4rem); border-radius: 1.75rem; text-align: center; color: #fff; box-shadow: 0 40px 80px -40px rgba(10, 110, 189, .7); }
.sh-cta-h { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.sh-cta p { margin: .75rem auto 1.75rem; max-width: 32rem; line-height: 1.65; color: rgba(255, 255, 255, .9); text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) { .sh-btn, .sh-galerie img, .sh-faq summary::after { transition: none; } .sh-galerie figure:hover img { transform: none; } }

/* Textlinks im Fließtext (Sprunglinks zu Startseite und Webdesign-Seite, 20.09.2026) */
.sh-lead a, .sh-liste a, .sh-cta p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sh-lead a { color: var(--sh-blau); }
.sh-cta p a { color: #fff; }
.sh-lead a:hover, .sh-liste a:hover, .sh-cta p a:hover { text-decoration-thickness: 2px; }

/* Ergebnis-Fächer (21.09.2026) – Feinheiten, die nur auf dieser Seite gelten */
.sh-klein { margin: 0; font-size: .875rem; line-height: 1.6; color: #6B7280; }
#ergebnis .fa-text h2 { margin-bottom: 1rem; }