/* Abschnitt „Light in deiner Branche“ auf /websites/ (#branchen). Nur Text und Inline-SVG, keine Bilder.
   Jede Zeile und jede Karte steht in Schrift und Farben ihres Beispiels (Stand Runde 3), Schriften aus /assets/fonts/. */
@font-face { font-family: "b Archivo"; src: url(/assets/fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "b Space Grotesk"; src: url(/assets/fonts/space-grotesk.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "b Bodoni Moda"; src: url(/assets/fonts/bodoni-moda.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "b Young Serif"; src: url(/assets/fonts/young-serif-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "b Atkinson"; src: url(/assets/fonts/atkinson-hyperlegible-next.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "b Barlow Condensed"; src: url(/assets/fonts/barlow-condensed-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "b Newsreader"; src: url(/assets/fonts/newsreader-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "b Alegreya"; src: url(/assets/fonts/alegreya-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "b Instrument Serif"; src: url(/assets/fonts/instrument-serif-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "b Spectral"; src: url(/assets/fonts/spectral-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }

.branchen { padding-top: 0; }
.branchen-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.branchen-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule, #d2d0c8); }
.branchen-liste li { border-bottom: 1px solid var(--rule, #d2d0c8); }
.branchen-liste a {
  display: grid; grid-template-columns: 14px minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1fr) 28px;
  align-items: center; gap: 22px; padding: 18px 0; color: var(--black, #181a17); text-decoration: none;
}
.b-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--b-grund); box-shadow: inset 0 0 0 3px var(--b-akzent); }
.b-branche { font: var(--b-schrift); letter-spacing: var(--b-sperrung, 0); text-transform: var(--b-versal, none); line-height: 1.15; white-space: nowrap; hyphens: manual; }
.b-betrieb { font: 15px/1.5 var(--sans); color: #555b51; }
.b-funktion { font: 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #555b51; }
.b-pfeil { justify-self: end; font-size: 22px; transition: transform .25s; }
.branchen-liste a:hover .b-pfeil, .branchen-liste a:focus-visible .b-pfeil { transform: translate(4px, -4px); }

/* Vorschaukarte: steht fest rechts, zeigt zuerst Luma und beim Überfahren oder Fokus die jeweilige Zeile */
.branchen-karten { position: sticky; top: 110px; display: grid; }
.b-karte {
  grid-area: 1 / 1; display: grid; align-content: space-between; gap: 22px; min-height: 300px; padding: 30px 30px 24px;
  background: var(--b-grund); color: var(--b-text); border-radius: 4px; box-shadow: 0 24px 60px #0001;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.k-luma { opacity: 1; visibility: visible; }
.b-karte svg { width: auto; height: 58px; max-width: 100%; overflow: visible; }
.b-karte strong { font: var(--b-schrift); line-height: 1.15; text-transform: var(--b-versal, none); }
.b-karte small { font: 11px/1.6 var(--mono); letter-spacing: .06em; }
.b-karte svg * { fill: none; stroke: var(--b-akzent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.b-karte svg text { fill: var(--b-text); stroke: none; font: var(--b-schrift); }
.b-karte svg circle, .b-karte svg rect, .b-karte svg .logo-glied { fill: var(--b-akzent); stroke: none; }
.b-karte svg .logo-streifen { fill: #111; stroke: none; }
.b-karte svg .logo-balken { stroke-width: 12; stroke-linecap: butt; }

.branchen-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; margin-top: 44px; }
.branchen-unten p { max-width: 560px; color: #555b51; }

@media (max-width: 1099px) {
  .branchen-raster { grid-template-columns: 1fr; }
  .branchen-karten { display: none; }
}
@media (max-width: 759px) {
  .branchen-liste a { grid-template-columns: 12px minmax(0, 1fr) 22px; gap: 2px 14px; padding: 16px 0; }
  .b-punkt { grid-row: 1 / 4; }
  .b-branche { font-size: clamp(25px, 7.6vw, 31px); }
  .b-luma .b-branche { font-size: clamp(20px, 6.4vw, 26px); }
  .b-funktion { grid-column: 2; grid-row: 2; }
  .b-betrieb { grid-column: 2; grid-row: 3; }
  .b-pfeil { grid-column: 3; grid-row: 1 / 4; }
}

.b-luma { --b-grund: #2438F0; --b-text: #FFF6E5; --b-akzent: #F2552C; --b-schrift: 900 expanded clamp(22px, 2vw, 30px) "b Archivo", sans-serif; --b-versal: uppercase; }
.b-elektriker { --b-grund: #0F1214; --b-text: #ECEFF1; --b-akzent: #E0894F; --b-schrift: 700 clamp(26px, 2.5vw, 38px) "b Space Grotesk", sans-serif; --b-sperrung: -.02em; }
.b-friseur { --b-grund: #F3F0EC; --b-text: #1C1716; --b-akzent: #9C3A1E; --b-schrift: 500 clamp(28px, 2.8vw, 42px) "b Bodoni Moda", serif; }
.b-baeckerei { --b-grund: #141B2E; --b-text: #F6EEDF; --b-akzent: #D89A3D; --b-schrift: 400 clamp(26px, 2.6vw, 38px) "b Young Serif", serif; }
.b-physiotherapie { --b-grund: #EEF2EC; --b-text: #1F2A24; --b-akzent: #3F6150; --b-schrift: 700 clamp(25px, 2.4vw, 36px) "b Atkinson", sans-serif; }
.b-kfz-werkstatt { --b-grund: #111111; --b-text: #F4F4F0; --b-akzent: #FFD100; --b-schrift: 700 clamp(28px, 2.8vw, 42px) "b Barlow Condensed", sans-serif; --b-versal: uppercase; --b-sperrung: .02em; }
.b-steuerberatung { --b-grund: #F5F2EA; --b-text: #1A2233; --b-akzent: #0F1E3A; --b-schrift: 300 clamp(28px, 2.8vw, 42px) "b Newsreader", serif; }
.b-hofladen { --b-grund: #F3EBDD; --b-text: #3E3326; --b-akzent: #55652A; --b-schrift: 500 clamp(28px, 2.8vw, 42px) "b Alegreya", serif; }
.b-yoga { --b-grund: #E7E3EC; --b-text: #2E2E2B; --b-akzent: #C98F6F; --b-schrift: 400 clamp(30px, 3vw, 46px) "b Instrument Serif", serif; }
.b-ferienwohnung { --b-grund: #F4F8F9; --b-text: #1E3A4C; --b-akzent: #C9A45C; --b-schrift: 300 clamp(28px, 2.8vw, 42px) "b Spectral", serif; }
.k-luma { --b-grund: #2438F0; --b-text: #FFF6E5; --b-akzent: #F2552C; --b-schrift: 900 expanded 30px "b Archivo", sans-serif; --b-versal: uppercase; border-radius: 0; box-shadow: 10px 10px 0 #F2552C; }
.k-elektriker { --b-grund: #0F1214; --b-text: #ECEFF1; --b-akzent: #E0894F; --b-schrift: 700 34px "b Space Grotesk", sans-serif; }
.k-friseur { --b-grund: #F3F0EC; --b-text: #1C1716; --b-akzent: #9C3A1E; --b-schrift: 500 36px "b Bodoni Moda", serif; }
.k-baeckerei { --b-grund: #141B2E; --b-text: #F6EEDF; --b-akzent: #D89A3D; --b-schrift: 400 34px "b Young Serif", serif; }
.k-physiotherapie { --b-grund: #EEF2EC; --b-text: #1F2A24; --b-akzent: #3F6150; --b-schrift: 700 32px "b Atkinson", sans-serif; }
.k-kfz-werkstatt { --b-grund: #111111; --b-text: #F4F4F0; --b-akzent: #FFD100; --b-schrift: 700 38px "b Barlow Condensed", sans-serif; --b-versal: uppercase; }
.k-steuerberatung { --b-grund: #F5F2EA; --b-text: #1A2233; --b-akzent: #B89B5E; --b-schrift: 300 36px "b Newsreader", serif; border-top: 6px solid #0F1E3A; border-radius: 0; }
.k-hofladen { --b-grund: #F3EBDD; --b-text: #3E3326; --b-akzent: #6E7F3A; --b-schrift: 500 36px "b Alegreya", serif; }
.k-yoga { --b-grund: #E7E3EC; --b-text: #2E2E2B; --b-akzent: #C98F6F; --b-schrift: 400 38px "b Instrument Serif", serif; }
.k-ferienwohnung { --b-grund: #F4F8F9; --b-text: #1E3A4C; --b-akzent: #C9A45C; --b-schrift: 300 36px "b Spectral", serif; }
.k-luma svg .luma-wort { font: 900 expanded 44px "b Archivo", sans-serif; }
.k-kfz-werkstatt svg text { fill: var(--b-akzent); }

/* Welche Karte gerade steht: Überfahren oder Tastaturfokus einer Zeile, sonst Luma */
.branchen-raster:has(.branchen-liste a:hover, .branchen-liste a:focus-visible) .k-luma { opacity: 0; visibility: hidden; }
.branchen-raster:has(.b-luma a:hover, .b-luma a:focus-visible) .k-luma,
.branchen-raster:has(.b-elektriker a:hover, .b-elektriker a:focus-visible) .k-elektriker,
.branchen-raster:has(.b-friseur a:hover, .b-friseur a:focus-visible) .k-friseur,
.branchen-raster:has(.b-baeckerei a:hover, .b-baeckerei a:focus-visible) .k-baeckerei,
.branchen-raster:has(.b-physiotherapie a:hover, .b-physiotherapie a:focus-visible) .k-physiotherapie,
.branchen-raster:has(.b-kfz-werkstatt a:hover, .b-kfz-werkstatt a:focus-visible) .k-kfz-werkstatt,
.branchen-raster:has(.b-steuerberatung a:hover, .b-steuerberatung a:focus-visible) .k-steuerberatung,
.branchen-raster:has(.b-hofladen a:hover, .b-hofladen a:focus-visible) .k-hofladen,
.branchen-raster:has(.b-yoga a:hover, .b-yoga a:focus-visible) .k-yoga,
.branchen-raster:has(.b-ferienwohnung a:hover, .b-ferienwohnung a:focus-visible) .k-ferienwohnung { opacity: 1; visibility: visible; }