/* Framefeels: Animation oder Real Life und Pakete (Inhalte wie framefeels.com, Stand 21.10.2026), Paketseite, Calendly-Termin auf der Kontaktseite. */
/* ---------- Animation oder Real Life ---------- */
.wege { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.weg { border-radius: 28px; background: var(--paper); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.weg .bild { position: relative; aspect-ratio: 16 / 10; background: #0E0E10; overflow: hidden; }
.weg .inhalt { padding: 40px 44px 44px; display: flex; flex-direction: column; }
.weg .art, .art-label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--muted); }
.weg .art i, .art-label i { color: var(--red-deep); font-size: 18px; }
.weg h3 { margin-top: 12px; font: 500 clamp(30px, 3vw, 44px)/1.06 var(--display); letter-spacing: -.02em; }
.weg > .inhalt > p { margin-top: 14px; font-size: 18px; color: var(--soft); max-width: 30em; }
.weg .inhalt ul { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.weg .inhalt li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 16px; color: var(--soft); }
.weg .inhalt li i { font-size: 20px; color: var(--ink); margin-top: 2px; }
.weg .inhalt li b { color: var(--ink); }

/* Animation: das Reel ganz im Hochformat, in seiner echten Größe, darunter dasselbe Bild weich gezeichnet */
.bild-film { container-type: size; display: grid; place-items: center; }
.bild-film .ambient { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); max-width: none; object-fit: cover; filter: blur(30px) saturate(120%) brightness(.78); }
.bild-film .hochkant { position: relative; height: 86cqh; width: calc(86cqh * 9 / 16); border-radius: 18px; overflow: hidden; background: #000; cursor: pointer; box-shadow: 0 24px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1); }
.bild-film .hochkant video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bild-film .snd { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); display: grid; place-items: center; font-size: 17px; transition: transform .3s var(--ease); }
.bild-film .etikett { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #141416; font-size: 13px; font-weight: 600; }
@media (hover: hover) { .bild-film .hochkant:hover .snd { transform: scale(1.08); } }
@container (max-width: 520px) { .bild-film .etikett { display: none; } }

/* Real Life: Shotlist mit Beispielbildern. Der Sucher „filmt“ eine Einstellung nach der anderen, die Liste läuft mit. */
.bild-shots { container-type: size; color: #F3F2EF; background: radial-gradient(120% 90% at 85% 10%, rgba(255,59,31,.22), rgba(255,59,31,0) 60%), #0E0E10; }
.bild-shots .innen { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 22px; padding: 22px; }
.sucher { position: relative; height: 100%; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
.sucher .shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .35s ease; }
.sucher .shot.on { opacity: 1; }
.sucher .shot img, .shots .mini img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--x) var(--y); transform-origin: var(--x) var(--y); }
.sucher .shot img { transform: scale(calc(var(--z) * 1.08)); }
.sucher .shot.on img { animation: kamerafahrt calc(var(--d) * 1s + .4s) linear both; }
@keyframes kamerafahrt { from { transform: scale(var(--z)); } to { transform: scale(calc(var(--z) * 1.08)); } }
.sucher .raster { position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(100% / 3 - .5px), rgba(255,255,255,.2) 0 calc(100% / 3 + .5px), transparent 0 calc(200% / 3 - .5px), rgba(255,255,255,.2) 0 calc(200% / 3 + .5px), transparent 0),
              linear-gradient(180deg, transparent calc(100% / 3 - .5px), rgba(255,255,255,.2) 0 calc(100% / 3 + .5px), transparent 0 calc(200% / 3 - .5px), rgba(255,255,255,.2) 0 calc(200% / 3 + .5px), transparent 0); }
.sucher .ecken { position: absolute; inset: 10px; opacity: .9; background-repeat: no-repeat;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; }
.sucher-kopf { position: absolute; top: 0; left: 0; right: 0; padding: 20px 20px 34px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-shadow: 0 1px 4px rgba(0,0,0,.5); background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.sucher-kopf .aufnahme, .shots .aufnahme { display: inline-flex; align-items: center; gap: 6px; }
.sucher-kopf .aufnahme::before, .shots .aufnahme::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blinken 1.6s steps(2, start) infinite; }
@keyframes blinken { 50% { opacity: .25; } }
.sucher-kopf .tc { font-variant-numeric: tabular-nums; }
.sucher-fuss { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 16px 14px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6) 45%, rgba(0,0,0,.82)); font-size: 13px; line-height: 1.3; }
.sucher-fuss b { display: block; margin-bottom: 5px; font: 500 13px/1 var(--display); letter-spacing: .04em; color: var(--red); }
.spur { display: flex; gap: 3px; margin-top: 10px; }
.spur i { flex: var(--d) 1 0; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28) linear-gradient(#fff, #fff) no-repeat; background-size: calc(var(--p, 0) * 100%) 100%; }
.shots { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-width: 0; }
.shots .kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: rgba(243,242,239,.7); }
.shots ol { list-style: none; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 6px; min-height: 0; }
.shots li { position: relative; display: grid; grid-template-columns: 34px 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 14px 0 6px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 15px; color: rgba(243,242,239,.66); overflow: hidden; transition: background-color .3s ease, color .3s ease; }
.shots li .mini { position: relative; width: 34px; height: 34px; border-radius: 8px; overflow: hidden; }
.shots li .mini img { transform: scale(var(--z)); }
.shots li b { font: 500 14px/1 var(--display); color: rgba(243,242,239,.45); transition: color .3s ease; }
.shots li span:not(.mini) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shots li .dauer { font-size: 13px; color: rgba(243,242,239,.5); font-variant-numeric: tabular-nums; }
.shots li::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--red); }
.shots li.fertig b { color: rgba(255,59,31,.75); }
.shots li.on { background: rgba(255,255,255,.12); color: #fff; }
.shots li.on b { color: var(--red); }
@container (max-height: 330px) {
  .bild-shots .innen { gap: 16px; padding: 16px; }
  .shots { gap: 8px; }
  .shots ol { gap: 4px; }
  .shots li { grid-template-columns: 22px minmax(0, 1fr) auto; padding: 0 12px; font-size: 14px; }
  .shots li .mini { display: none; }
}
@container (max-width: 520px) {
  .bild-shots .innen { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .shots { display: none; }
}

/* ---------- Pakete ---------- */
.pakete-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.paketgruppe { margin-top: 48px; display: grid; grid-template-columns: repeat(var(--paket-spalten, 3), minmax(0, 1fr)); gap: 20px; }
.paketgruppe[hidden] { display: none; }
.paket { position: relative; border-radius: 28px; background: var(--paper); padding: 36px 34px 34px; display: flex; flex-direction: column; }
.paket.dunkel { background: #0E0E10; color: #F3F2EF; }
.paket .name { font: 500 26px/1.15 var(--display); letter-spacing: -.01em; }
.paket .fuer { margin-top: 8px; font-size: 16px; color: var(--muted); min-height: 3em; }
.paket.dunkel .fuer { color: rgba(243,242,239,.7); }
.paket .preis { margin-top: 26px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.paket .preis strong { font: 500 46px/1 var(--display); letter-spacing: -.02em; }
.paket .preis > span { font-size: 15px; color: var(--muted); }
.paket.dunkel .preis > span { color: rgba(243,242,239,.7); }
.paket ul { list-style: none; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(17,17,19,.1); display: grid; gap: 11px; flex: 1; }
.paket.dunkel ul { border-top-color: rgba(255,255,255,.14); }
.paket li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 16px; }
.paket li i { margin-top: 3px; font-size: 17px; color: var(--red-deep); }
.paket.dunkel li i { color: var(--red); }
.paket .btn { margin-top: 30px; align-self: flex-start; }
.paket .band { position: absolute; top: 22px; right: 22px; padding: 6px 12px; border-radius: 999px; background: var(--red-deep); color: #fff; font-size: 13px; font-weight: 700; }
.pakete-fuss { margin-top: 28px; font-size: 15px; color: var(--muted); max-width: 60em; }
.paketgruppe .pakete-fuss { grid-column: 1 / -1; margin-top: 4px; }
.paket-hinweis { border-radius: 28px; background: #0E0E10; color: #F3F2EF; padding: 52px 56px; display: flex; justify-content: space-between; align-items: flex-end; gap: 28px 48px; flex-wrap: wrap;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255,59,31,.25), rgba(255,59,31,0) 60%), #0E0E10; }
.paket-hinweis .h2 { color: #fff; }
.paket-hinweis .lede { color: rgba(243,242,239,.75); max-width: 34em; }

/* ---------- Paketseite ---------- */
.sprung { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 8px; }
.sprung a { height: 42px; padding: 0 18px; border-radius: 999px; background: var(--paper); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; transition: background-color .25s ease, color .25s ease; }
.sprung a i { color: var(--red-deep); font-size: 17px; transition: color .25s ease; }
@media (hover: hover) { .sprung a:hover { background: var(--ink); color: #fff; } .sprung a:hover i { color: var(--red); } }
[id] { scroll-margin-top: 96px; }

.weg-kopf .h2 { margin-top: 14px; max-width: 14em; }
.weg-kopf .lede { max-width: 36em; }

/* Animation in zwei Stufen: erst der erste Film, danach Serie oder Folgefilm */
.stufen { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; }
.stufe { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1.5px solid rgba(17,17,19,.14); font-weight: 700; font-size: 15px; color: var(--soft); }
.stufe b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 500 14px/1 var(--display); }
.stufe span { font-weight: 500; color: var(--muted); }
.stufe.s2 { grid-column: 2 / 4; }
.wahl { grid-column: 2 / 4; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wahl .oder { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--soft); }

.stilmappe { margin-top: 20px; border-radius: 28px; background: var(--paper); padding: 34px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 36px; align-items: center; }
.stilmappe h3 { font: 500 28px/1.12 var(--display); letter-spacing: -.01em; }
.stilmappe > div > p { margin-top: 12px; font-size: 16px; color: var(--muted); max-width: 26em; }
.stile-reihe { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.stile-reihe li { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--stone); }
.stile-reihe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stile-reihe .name { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; border-radius: 999px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; font-weight: 700; text-align: center; color: #141416; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stile-reihe .eigen { background: #0E0E10; color: #F3F2EF; display: grid; align-content: end; gap: 6px; padding: 16px; }
.stile-reihe .eigen i { position: absolute; top: 16px; left: 16px; font-size: 22px; color: var(--red); }
.stile-reihe .eigen b { font: 500 15px/1.2 var(--display); }
.stile-reihe .eigen strong { font: 500 26px/1 var(--display); letter-spacing: -.02em; }
.stile-reihe .eigen span { font-size: 13px; color: rgba(243,242,239,.7); }

/* Real Life: Schaubild und Ablauf des Reel-Schnitts */
.rl-oben { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
.schaubild { position: relative; aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden; }
.schaubild .bild { position: absolute; inset: 0; }
.so-gehts { border-radius: 28px; background: var(--paper); padding: 34px; display: flex; flex-direction: column; }
.so-gehts h3 { font: 500 26px/1.15 var(--display); letter-spacing: -.01em; }
.so-gehts ol { list-style: none; margin-top: 24px; display: grid; gap: 18px; counter-reset: s; flex: 1; align-content: center; }
.so-gehts li { counter-increment: s; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 14px; }
.so-gehts li::before { content: counter(s); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font: 500 15px/1 var(--display); }
.so-gehts b { font: 500 19px/1.3 var(--display); }
.so-gehts span { font-size: 15px; color: var(--muted); }
.rl-pakete { margin-top: 20px; }

/* In jedem Paket enthalten (gleicher Aufbau wie auf der Startseite) */
.incl-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
/* Besondere Anlässe */
.anlaesse { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
.anlass { position: relative; border-radius: 28px; overflow: hidden; min-height: 560px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: #0E0E10; color: #F3F2EF; }
.anlass-text { padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; }
.anlass-bild { position: relative; overflow: hidden; }
.anlass-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 28%; }
.anlass .art-label { color: rgba(243,242,239,.8); }
.anlass .art-label i { color: var(--red); }
.anlass h3 { margin-top: 12px; font: 500 clamp(32px, 3vw, 44px)/1.05 var(--display); letter-spacing: -.02em; }
.anlass p:not(.art-label):not(.preis) { margin-top: 12px; font-size: 17px; color: rgba(243,242,239,.82); max-width: 30em; }
.anlass .preis { margin-top: 22px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.anlass .preis strong { font: 500 46px/1 var(--display); letter-spacing: -.02em; }
.anlass .preis span { font-size: 15px; color: rgba(243,242,239,.7); }
.anlass ul { list-style: none; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.anlass li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 15px; }
.anlass li i { color: var(--red); }
.anlass .btn { margin-top: 28px; align-self: flex-start; }
.anlass.hell { background: var(--paper); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; padding: 40px; }
.anlass.hell .art-label { color: var(--muted); }
.anlass.hell .art-label i { color: var(--red-deep); }
.anlass.hell p:not(.art-label):not(.preis), .anlass.hell .preis span { color: var(--muted); }
.anlass.hell li { background: var(--bg); }
.anlass.hell li i { color: var(--red-deep); }
.anlass .symbol { width: 88px; height: 88px; border-radius: 26px; background: var(--bg); display: grid; place-items: center; font-size: 40px; color: var(--red-deep); }

/* ---------- Leistungen im Detail, B2B-Hinweis, Fußzeile, E-Mail direkt ---------- */
.detail-karten { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.detail-karten > li { grid-column: span 2; }
.detail-karten > li:nth-last-child(-n+2) { grid-column: span 3; }
.detail-karten a { position: relative; height: 100%; min-height: 250px; border-radius: 24px; background: var(--paper); padding: 28px 28px 72px; display: flex; flex-direction: column; gap: 10px; transition: background-color .3s ease, color .3s ease; }
.detail-karten b { margin-top: 10px; font: 500 28px/1.1 var(--display); letter-spacing: -.01em; }
.detail-karten .text { font-size: 16px; color: var(--muted); transition: color .3s ease; }
.detail-karten .pfeil { position: absolute; left: 28px; bottom: 26px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 18px; transition: transform .3s var(--ease), background-color .3s ease; }
@media (hover: hover) {
  .detail-karten a:hover { background: #0E0E10; color: #F3F2EF; }
  .detail-karten a:hover .text, .detail-karten a:hover .art-label { color: rgba(243,242,239,.72); }
  .detail-karten a:hover .pfeil { background: var(--red-deep); color: #fff; transform: translateX(4px); }
}
.b2b-kopf { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--muted); }
.paket-hinweis .b2b-kopf { color: rgba(243,242,239,.6); }
.pakete-fuss.b2b { margin-top: 18px; font-weight: 600; }
.foot .foot-leistungen { flex-basis: 100%; justify-content: flex-end; font-size: 14px; }
.direkt { margin-top: 18px; font-size: 15px; color: var(--muted); }
.direkt a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.anlass .more { margin-top: 18px; }
/* ---------- Termin direkt über Calendly (Kontaktseite) ---------- */
.termin { margin-top: 32px; border-radius: 24px; background: var(--ink); color: #F3F2EF; padding: 28px 28px 30px; }
.termin b { display: block; font: 500 24px/1.2 var(--display); letter-spacing: -.01em; }
.termin p { margin-top: 8px; font-size: 16px; color: rgba(243,242,239,.72); }
.termin .btn { margin-top: 20px; }

@media (max-width: 1080px) {
  .paketgruppe { grid-template-columns: minmax(0, 1fr); }
  .stufen { grid-template-columns: minmax(0, 1fr); }
  .stufe.s2, .wahl { grid-column: auto; }
  .stufe.s2 { margin-top: 20px; order: 1; }
  .wahl { order: 2; }
  .wahl { grid-template-columns: minmax(0, 1fr); }
  .wahl .oder { position: relative; left: auto; top: auto; transform: none; justify-self: center; margin: -10px 0; }
  .stilmappe, .rl-oben, .anlaesse { grid-template-columns: minmax(0, 1fr); }
  .detail-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-karten > li, .detail-karten > li:nth-last-child(-n+2) { grid-column: auto; }
  .detail-karten > li:last-child { grid-column: 1 / -1; }
  .incl-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 860px) { .wege { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .weg .bild, .schaubild { aspect-ratio: 4 / 5; }
  .weg .inhalt { padding: 28px 22px 30px; }
  .paket { padding: 28px 22px; }
  .termin { padding: 24px 20px 26px; }
  .stilmappe, .so-gehts { padding: 24px 20px; }
  .stile-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stile-reihe .eigen { grid-column: span 2; aspect-ratio: auto; min-height: 150px; }
  .anlass { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .anlass-bild { order: -1; aspect-ratio: 4 / 3; }
  .anlass-text, .anlass.hell { padding: 26px 22px 28px; }
  .anlass.hell { gap: 28px; }
  .paket-hinweis { padding: 32px 22px; }
  .detail-karten { grid-template-columns: minmax(0, 1fr); }
  .detail-karten a { min-height: 0; padding: 20px 68px 22px 20px; gap: 6px; }
  .detail-karten b { margin-top: 4px; font-size: 24px; }
  .detail-karten .pfeil { left: auto; right: 16px; top: 50%; bottom: auto; margin-top: -20px; }   /* Pfeil rechts statt eigener Zeile: die Liste wird halb so lang */
  .paket .preis strong { font-size: 40px; }
  /* Stilmappe ohne Bilder: kompakte Felder statt hoher leerer Kacheln, Namen brechen um statt „…“ */
  .stile-reihe li:not(.eigen) { aspect-ratio: auto; min-height: 64px; }
  .stile-reihe .name { white-space: normal; text-align: left; }
  .foot .foot-leistungen { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .sucher-kopf .aufnahme::before, .shots .aufnahme::before { animation: none; }
  .sucher .shot.on img { animation: none; }
}

/* Nur Animation (04.11.2026): ein einzelner Weg liegt nebeneinander statt in einer halben Spalte */
.wege.einzeln { grid-template-columns: minmax(0, 1fr); }
.wege.einzeln .weg { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; }
@media (max-width: 860px) { .wege.einzeln .weg { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } }

/* Neues Paket-Angebot 05.11.2026: ein Reel gegen 4 und 8 Reels, jeweils als echte Filmbilder */
.pakete-neu .paket .fuer { min-height: 0; }
.reel-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; align-items: start; }
.reel-film { aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #0E0E10; }
.reel-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.paket-reel ul { margin-top: 22px; padding-top: 22px; gap: 14px; align-content: start; }
.paket-serie .fuer { color: rgba(243,242,239,.82); }
.paket-serie .preis > span { color: rgba(243,242,239,.82); }
.serie-wahl { margin-top: 24px; display: grid; gap: 10px; }
.serie-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; padding: 14px 16px 14px 22px; border-radius: 20px; background: rgba(255,255,255,.07); color: #F3F2EF; text-decoration: none; transition: background .2s ease; }
.serie-zahl { display: grid; gap: 2px; }
.serie-zahl b { font: 500 62px/.95 var(--display); letter-spacing: -.03em; color: #fff; }
.serie-zahl > span { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; white-space: nowrap; color: rgba(243,242,239,.86); }
.serie-zahl i { font-size: 16px; color: var(--red); transition: transform .2s ease; }
.serie-streifen { display: flex; justify-content: flex-end; min-width: 0; }
.serie-streifen img { width: 58px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 9px; box-shadow: 0 0 0 2px #1E1E21; transition: transform .24s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 18ms); }
.serie-4 .serie-streifen img + img { margin-left: 6px; }
.serie-8 .serie-streifen img + img { margin-left: -22px; }
.serie-option:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .serie-option:hover { background: rgba(255,255,255,.13); }
  .serie-option:hover .serie-zahl i { transform: translateX(3px); }
  .serie-option:hover .serie-streifen img { transform: translateY(-5px); }
}
.serie-text { margin-top: 22px; font-size: 17px; line-height: 1.5; color: rgba(243,242,239,.86); flex: 1; text-wrap: pretty; }
.serie-text b { color: #fff; font-weight: 700; }
.stile-reihe.stile-bilder { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stile-reihe.stile-bilder li { display: block; min-height: 0; padding: 0; aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
.stile-reihe.stile-bilder img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; }
.stile-reihe.stile-bilder .name { position: static; display: block; margin-top: 12px; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 500 17px/1.2 var(--display); color: var(--ink); text-align: left; overflow: visible; white-space: normal; letter-spacing: 0; }
.stile-reihe.stile-bilder .stil-text { display: block; margin-top: 4px; font-size: 15px; line-height: 1.35; color: var(--muted); }
.stil-hinweis { margin-top: 12px; font-size: 15px; color: var(--muted); }
@media (max-width: 760px) {
  .reel-kopf { grid-template-columns: minmax(0, 1fr) 84px; gap: 16px; }
  .serie-option { gap: 12px; padding: 12px 12px 12px 16px; }
  .serie-zahl b { font-size: 48px; }
  .serie-zahl > span { font-size: 15px; white-space: normal; max-width: 6.2em; line-height: 1.2; }
  .serie-zahl i { display: none; }
  .serie-streifen img { width: 42px; border-radius: 7px; }
  .serie-4 .serie-streifen img + img { margin-left: 4px; }
  .serie-8 .serie-streifen img + img { margin-left: -28px; }
  .stile-reihe.stile-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
}
@media (max-width: 400px) {
  .serie-streifen img { width: 34px; border-radius: 6px; }
  .serie-4 .serie-streifen img + img { margin-left: 3px; }
  .serie-8 .serie-streifen img + img { margin-left: -22px; }
}
@media (prefers-reduced-motion: reduce) { .serie-option, .serie-zahl i, .serie-streifen img { transition: none; } .serie-option:hover .serie-streifen img, .serie-option:hover .serie-zahl i { transform: none; } }