/* seite-branchen.css – nur /branchen, wird nach site.css geladen.
   Keine Rahmenlinien: Trennung ueber Flaechen, Schatten und Goldschein. */

/* ---------- Uebersicht (Branchen-Index) ---------- */
.bindex { position: relative; padding-block: var(--abschnitt) clamp(1.5rem, 3vw, 2.5rem); }
.bindex__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 0; list-style: none; }
@media (min-width: 900px) {
  .bindex__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}
.bindex__liste > li { min-width: 0; }
.bindex__link {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
  min-height: 8.75rem;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  border-radius: var(--radius-m);
  color: var(--ivory);
  text-decoration: none;
  background: linear-gradient(160deg, rgba(10, 22, 96, .62), rgba(3, 10, 69, .38));
  box-shadow: var(--schatten-tief), inset 0 1px 0 rgba(251, 238, 173, .07);
  transition: translate .7s var(--ease-aus), box-shadow .7s var(--ease-aus);
}
@media (min-width: 900px) {
  .bindex__link { min-height: 10.5rem; }
}
.bindex__kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bindex__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 15px; color: var(--gold-300); background: rgba(220, 170, 120, .1); transition: color .4s, background .5s, transform .8s var(--ease-aus); }
.bindex__icon .icon { width: 1.4rem; height: 1.4rem; }
.bindex__pfeil { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; color: var(--gold-300); background: rgba(0, 2, 46, .45); transition: color .4s, background .5s, transform .7s var(--ease-aus); }
.bindex__pfeil .icon { width: 1.05rem; height: 1.05rem; }
.bindex__fuss { display: grid; gap: .25rem; margin-top: auto; min-width: 0; }
.bindex__nr { font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--gold-400); }
.bindex__name { font-size: clamp(.9375rem, .86rem + .3vw, 1.125rem); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.bindex__name > span {
  background-image: linear-gradient(90deg, var(--gold-500), var(--gold-200));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .7s var(--ease-aus), color .4s;
}
.bindex__link:is(:hover, :focus-visible) { translate: 0 -6px; box-shadow: var(--schatten-tief), 0 0 70px -26px rgba(239, 192, 143, .5); }
.bindex__link:is(:hover, :focus-visible) .bindex__icon { color: var(--navy-950); background: var(--goldfolie); transform: rotate(-6deg); }
.bindex__link:is(:hover, :focus-visible) .bindex__pfeil { color: var(--navy-950); background: var(--goldfolie); transform: translateY(4px); }
.bindex__link:is(:hover, :focus-visible) .bindex__name > span { background-size: 100% 1.5px; color: var(--gold-200); }
.bindex__link:focus-visible { outline-offset: 5px; border-radius: var(--radius-m); }

/* ---------- Goldband (Trenner, zeichnet sich beim Scrollen) ---------- */
.band { display: block; width: 100%; height: clamp(56px, 8vw, 120px); overflow: visible; pointer-events: none; filter: drop-shadow(0 0 8px rgba(239, 192, 143, .35)); }
.band path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.band__spur { stroke: rgba(220, 170, 120, .12); stroke-width: 1; }
.band__gold { stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.band__faden { stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .55; }
.bindex__band { margin-top: clamp(2rem, 4.5vw, 3.5rem); margin-bottom: calc(var(--abschnitt) * -.55); }

/* ---------- Branchen-Abschnitte ---------- */
.bs { position: relative; padding-block: var(--abschnitt); overflow-x: clip; }
.bs__raster { display: grid; gap: clamp(3.5rem, 6vw, 7rem); align-items: center; }
@media (min-width: 900px) {
  .bs__raster { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
  .bs--rechts .bs__medien { order: 2; }
}
.bs__medien { position: relative; isolation: isolate; min-width: 0; }
.bs__medien::before {
  content: "";
  position: absolute;
  inset: 12% 4% 0 4%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(220, 170, 120, .26), rgba(220, 170, 120, 0));
  filter: blur(18px);
  opacity: .7;
  pointer-events: none;
  transition: opacity 1s var(--ease-weich);
}
.bs__foto { position: relative; width: 88%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-l); box-shadow: var(--schatten-tief), 0 0 90px -34px rgba(220, 170, 120, .45); }
.bs--rechts .bs__foto { margin-left: auto; }
@media (min-width: 900px) {
  .bs__foto { width: 84%; aspect-ratio: 4 / 5; max-height: min(74vh, 42rem); }
  .bs__foto--bogen { border-radius: 999px 999px var(--radius-l) var(--radius-l); }
}
.bs__foto .foto::after { background: linear-gradient(180deg, rgba(0, 2, 46, 0) 50%, rgba(0, 2, 46, .55) 100%), radial-gradient(90% 70% at 85% 10%, rgba(239, 192, 143, .24), rgba(239, 192, 143, 0) 60%); }
.bs__foto .foto-glanz { transition: transform 1.3s var(--ease-inout); }

.bs__karte { position: absolute; right: 0; bottom: -9%; z-index: 3; width: 40%; }
.bs--rechts .bs__karte { right: auto; left: 0; }
@media (min-width: 900px) {
  .bs__karte { width: 38%; bottom: -6%; }
}
.bs__karte-bild { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; box-shadow: 0 30px 70px -26px rgba(0, 1, 24, .95), 0 0 50px -24px rgba(220, 170, 120, .4); transition: box-shadow .8s var(--ease-aus); }

.bs__zahl {
  position: absolute;
  left: -.03em;
  top: -.42em;
  z-index: 4;
  font-size: clamp(4.5rem, 2.4rem + 8vw, 10.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--gold-400);
  background-image: var(--goldtext);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  transition: background-position 1.4s var(--ease-weich);
}
.bs--rechts .bs__zahl { left: auto; right: -.03em; }

/* Hover auf dem Bild; dieselbe Wirkung, sobald ein Knopf im Abschnitt den Tastaturfokus hat */
:is(.bs__medien, .bs__breitfoto):hover .foto__img, .bs:focus-within .bs__foto .foto__img, .bs:focus-within .bs__breitfoto .foto__img { transform: scale(1.06); filter: saturate(1) contrast(1.04) brightness(1); }
:is(.bs__medien, .bs__breitfoto):hover .foto::before, .bs:focus-within :is(.bs__foto, .bs__karte-bild, .bs__breitfoto) .foto::before { opacity: 0; }
:is(.bs__medien, .bs__breitfoto):hover .foto-glanz, .bs:focus-within .foto-glanz { transform: translateX(100%); }
.bs__medien:hover .bs__karte-bild, .bs:focus-within .bs__karte-bild { box-shadow: 0 34px 80px -26px rgba(0, 1, 24, .95), 0 0 70px -20px rgba(239, 192, 143, .6); }
.bs__medien:hover::before, .bs:focus-within .bs__medien::before { opacity: 1; }
.bs:is(:hover, :focus-within) .bs__zahl { background-position: 100% 50%; }

/* Text */
.bs__text { min-width: 0; max-width: 36rem; }
.bs__titel { font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.9rem); }
.bs__satz { max-width: 30rem; margin-top: 1rem; line-height: 1.6; color: var(--text-2); }
.bs__label { margin-top: clamp(1.4rem, 2.6vw, 2rem); font-size: .8125rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.bs__rollen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; padding: 0; list-style: none; }
.rolle {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 40px;
  padding: .45em 1.05em .45em .85em;
  overflow: hidden;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  background: linear-gradient(150deg, rgba(22, 38, 127, .5), rgba(10, 22, 96, .32));
  box-shadow: inset 0 1px 0 rgba(251, 238, 173, .08), 0 12px 26px -18px rgba(0, 1, 24, .95);
  transition: color .4s, translate .6s var(--ease-aus), box-shadow .6s var(--ease-aus);
}
.rolle::before { content: ""; width: .5rem; height: .5rem; flex: none; background: var(--goldfolie); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transition: transform .8s var(--ease-aus); }
.rolle::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--goldfolie-weit); background-size: 200% 100%; clip-path: inset(0 100% 0 0 round 999px); transition: clip-path .7s var(--ease-aus); }
.rolle:hover { color: var(--navy-950); translate: 0 -3px; box-shadow: 0 16px 34px -14px rgba(239, 192, 143, .6); }
.rolle:hover::after { clip-path: inset(0 0 0 0 round 999px); }
.rolle:hover::before { transform: rotate(90deg) scale(1.15); background: var(--navy-950); }
.bs__knoepfe { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.bs__knoepfe .knopf { flex: 1 1 12.5rem; justify-content: center; }
@media (min-width: 1100px) {
  .bs__knoepfe .knopf { flex: 0 1 auto; }
}

/* ---------- Breite Variante (ein grosses Kinobild mit Glas-Panel) ---------- */
.bs__buehne { position: relative; }
.bs__breitfoto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-l); box-shadow: var(--schatten-tief), 0 0 110px -40px rgba(220, 170, 120, .42); }
.bs__parallax { position: absolute; inset: -9% 0; }
.bs__breitfoto .foto-glanz { transition: transform 1.4s var(--ease-inout); }
.bs__panel { position: relative; z-index: 3; margin: -3.5rem .6rem 0; padding: clamp(1.4rem, 3vw, 2.6rem); }
.bs--breit .bs__zahl { top: -.44em; left: auto; right: .04em; }
.bs--breit .bs__titel { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }
.bs--breit .bs__text, .bs__panel { max-width: none; }
@media (min-width: 900px) {
  .bs__breitfoto { aspect-ratio: auto; height: clamp(36rem, 86vh, 52rem); }
  .bs__panel { position: absolute; left: clamp(1.5rem, 3.5vw, 3.5rem); bottom: clamp(1.5rem, 3.5vw, 3.5rem); width: min(37rem, 54%); margin: 0; }
  .bs--panel-rechts .bs__panel { left: auto; right: clamp(1.5rem, 3.5vw, 3.5rem); }
  .bs--panel-rechts .bs__zahl { right: auto; left: .02em; }
  .bs__breitfoto .foto::after { background: linear-gradient(90deg, rgba(0, 1, 24, .7) 0%, rgba(0, 1, 24, .28) 50%, rgba(0, 1, 24, .04) 100%), linear-gradient(180deg, rgba(0, 1, 24, .25) 0%, rgba(0, 1, 24, 0) 40%, rgba(0, 1, 24, .55) 100%); }
  .bs--panel-rechts .bs__breitfoto .foto::after { background: linear-gradient(270deg, rgba(0, 1, 24, .7) 0%, rgba(0, 1, 24, .28) 50%, rgba(0, 1, 24, .04) 100%), linear-gradient(180deg, rgba(0, 1, 24, .25) 0%, rgba(0, 1, 24, 0) 40%, rgba(0, 1, 24, .55) 100%); }
}

/* ---------- Laufband & Wege auf dieser Seite ---------- */
.bs-laufband { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem); }
.bs-laufband__band { margin-bottom: clamp(1rem, 3vw, 2.5rem); }
.bs-wege { padding-top: calc(var(--abschnitt) * .9); }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 419px) {
  .hero .knopfreihe .knopf__icon-links { display: none; }
  .bs__zahl { font-size: 4.25rem; }
  .bindex__link { gap: .9rem; }
  .bindex__icon { width: 44px; height: 44px; border-radius: 13px; }
  .bindex__pfeil { width: 32px; height: 32px; }
}
@media (max-width: 899px) {
  .bs--breit .bs__zahl { top: -.4em; }
}

/* Reduzierte Bewegung: keine Verschiebungen beim Hover */
@media (prefers-reduced-motion: reduce) {
  .bindex__link, .rolle, .bs__foto .foto-glanz, .bs__breitfoto .foto-glanz { transition: none; }
  .bindex__link:is(:hover, :focus-visible), .rolle:hover { translate: none; }
}