/* MeisterFreund – Betriebsauswahl als Siegel-Plaketten (Prompt 80, Variante „plaketten“)
   Markup: Views/Home/_Betriebsauswahl.cshtml, Skript: wwwroot/js/hero.js (aktive Plakette in die Mitte, Hinweise).
   Die frühere Leiste (.branchenwahl in site.css) bleibt als Variante „leiste“ unverändert (Models/Betriebsauswahl.cs).
   Je Branche: rundes Foto, gezackter Siegelrand (img/grafik/plakette.svg als Maske) in der Branchenfarbe (--b-fest aus den
   Regeln .b-<slug> in site.css) mit Goldkante, feiner Goldring ums Foto, Name auf dem lila Band wie im Siegel.
   Aktiv: größer, Strahlenkranz (strahlen.svg), Krone (krone.svg), Band in Gold.
   Nur Farben aus dem Siegel. Bewegung nur ohne prefers-reduced-motion (site.css schaltet sie sonst global ab). */

.bw-rahmen{--d:70px;position:relative;margin-bottom:16px}
.hero:has(>.bw-rahmen){padding-top:14px}

/* Übersicht: kleiner Hinweis über den Plaketten */
.bw-hinweis{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 2px;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.bw-hinweis::before,.bw-hinweis::after{content:"";flex:none;width:12px;height:12px;background:currentColor;-webkit-mask:url(../img/grafik/funkel.svg) center/contain no-repeat;mask:url(../img/grafik/funkel.svg) center/contain no-repeat}

.bw{position:relative}
.bw-spur{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));row-gap:17px;max-width:1060px;margin:0 auto;padding:12px 0 4px}

/* Eine Plakette: der ganze Block ist der Link */
.bw-p{--bw-rand:var(--b-fest);position:relative;z-index:0;justify-self:center;display:flex;flex-direction:column;align-items:center;padding:0 4px 4px;border-radius:16px;text-decoration:none;color:var(--logo-gold);-webkit-tap-highlight-color:transparent}
.bw-p.b-konditorei{--bw-rand:color-mix(in srgb,#C27F0A 72%,#C01A13)}
.bw-p:focus-visible{outline:3px solid var(--brass);outline-offset:3px}

/* Siegel: Goldkante (gezackt), Rand in der Branchenfarbe (gezackt), Goldring, Foto */
.bw-siegel{position:relative;display:block;width:var(--d);aspect-ratio:1/1;isolation:isolate;filter:drop-shadow(0 5px 6px rgba(11,37,25,.34));transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.bw-siegel::before,.bw-siegel::after{content:"";position:absolute;-webkit-mask:url(../img/grafik/plakette.svg) center/contain no-repeat;mask:url(../img/grafik/plakette.svg) center/contain no-repeat}
.bw-siegel::before{inset:0;z-index:-2;background:var(--gold-rand)}
.bw-siegel::after{inset:4.5%;z-index:-1;background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--bw-rand) 64%,#F9EFDC),var(--bw-rand) 60%)}
.bw-siegel img{position:absolute;inset:12.5%;display:block;width:75%;height:75%;border-radius:50%;object-fit:cover;background:var(--brass-soft);box-shadow:0 0 0 1.5px #F6AF2F,0 0 0 3px rgba(56,5,68,.45)}

/* Band mit dem Namen: lila mit zwei Goldlinien, dahinter die Bandenden (wie der Schriftzug im Siegel) */
.bw-band{position:relative;z-index:2;isolation:isolate;margin-top:calc(var(--d) * -.24);padding:3px 9px 4px;font-family:var(--f-display);font-weight:700;font-size:13.5px;line-height:1.15;letter-spacing:.01em;white-space:nowrap;text-shadow:0 1px 1px rgba(56,5,68,.6)}
.bw-band::before,.bw-band::after{content:"";position:absolute;pointer-events:none}
.bw-band::before{inset:0;z-index:-1;border-radius:2px;
  background:linear-gradient(#F6AF2F,#F6AF2F) 0 2px/100% 1px no-repeat,linear-gradient(#F6AF2F,#F6AF2F) 0 calc(100% - 2px)/100% 1px no-repeat,linear-gradient(180deg,#450959,#380544);
  box-shadow:0 4px 8px -4px rgba(56,5,68,.75)}
.bw-band::after{inset:5px -7px -3px;z-index:-2;background:#380544;clip-path:polygon(0 0,100% 0,calc(100% - 5px) 50%,100% 100%,0 100%,5px 50%)}

/* Strahlenkranz hinter dem Siegel: bei der aktiven Branche immer, sonst blitzt er beim Zeigen kurz auf */
.bw-p::before{content:"";position:absolute;left:50%;top:calc(var(--d) / 2);z-index:-1;width:calc(var(--d) * 1.9);aspect-ratio:1/1;translate:-50% -50%;background:url(../img/grafik/strahlen.svg) center/contain no-repeat;opacity:0;scale:.5;pointer-events:none}

/* Aktive Branche: größer, Strahlenkranz, Krone, Band in Gold */
.bw-p[aria-current="page"]{z-index:1;color:var(--logo-gruen)}
.bw-p[aria-current="page"] .bw-siegel{transform:scale(1.17)}
.bw-p[aria-current="page"]::before{opacity:.95;scale:1;animation:drehen 50s linear infinite}
.bw-p[aria-current="page"]::after{content:"";position:absolute;left:50%;top:calc(var(--d) * -.28);z-index:3;width:calc(var(--d) * .5);aspect-ratio:120/84;margin-left:calc(var(--d) * -.25);background:url(../img/grafik/krone.svg) center/contain no-repeat;filter:drop-shadow(0 3px 3px rgba(11,37,25,.35));pointer-events:none;animation:krone-wippen 3s 1.2s ease-in-out infinite}
.bw-p[aria-current="page"] .bw-band{text-shadow:none}
.bw-p[aria-current="page"] .bw-band::before{background:linear-gradient(#9A6510,#9A6510) 0 2px/100% 1px no-repeat,linear-gradient(#9A6510,#9A6510) 0 calc(100% - 2px)/100% 1px no-repeat,var(--gold-rand);box-shadow:0 4px 10px -4px rgba(154,101,16,.8)}
.bw-p[aria-current="page"] .bw-band::after{background:#C27F0A}

/* Zeigen (Maus) und Tastatur-Fokus: Plakette hebt sich, dreht sich ein paar Grad, die Strahlen blitzen auf */
@media (hover:hover){
  .bw-p:hover .bw-siegel{transform:translateY(-4px) rotate(-7deg)}
  .bw-p[aria-current="page"]:hover .bw-siegel{transform:scale(1.17) translateY(-3px) rotate(-5deg)}
  .bw-p:not([aria-current]):hover .bw-band{color:#F9EFDC}
}
.bw-p:focus-visible .bw-siegel{transform:translateY(-4px) rotate(-7deg)}
.bw-p[aria-current="page"]:focus-visible .bw-siegel{transform:scale(1.17) translateY(-3px) rotate(-5deg)}
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){.bw-p:not([aria-current]):hover::before{animation:bw-blitz .9s ease-out}}
  .bw-p:not([aria-current]):focus-visible::before{animation:bw-blitz .9s ease-out}
  /* Die aktive Plakette wird beim Laden aufgestempelt, die Krone setzt sich darauf */
  .bw-p[aria-current="page"] .bw-siegel{animation:bw-stempel .6s .15s cubic-bezier(.2,1.3,.4,1) backwards}
  .bw-p[aria-current="page"]::after{animation:bw-krone .45s .6s cubic-bezier(.3,1.6,.5,1) backwards,krone-wippen 3s 1.2s ease-in-out infinite}
  /* Übersicht: die Plaketten tauchen als Welle von links nach rechts auf */
  .bw-uebersicht .bw-siegel{animation:bw-auftauchen .5s cubic-bezier(.3,1.5,.5,1) backwards}
  .bw-uebersicht .bw-p:nth-child(8n+2) .bw-siegel{animation-delay:.05s}
  .bw-uebersicht .bw-p:nth-child(8n+3) .bw-siegel{animation-delay:.1s}
  .bw-uebersicht .bw-p:nth-child(8n+4) .bw-siegel{animation-delay:.15s}
  .bw-uebersicht .bw-p:nth-child(8n+5) .bw-siegel{animation-delay:.2s}
  .bw-uebersicht .bw-p:nth-child(8n+6) .bw-siegel{animation-delay:.25s}
  .bw-uebersicht .bw-p:nth-child(8n+7) .bw-siegel{animation-delay:.3s}
  .bw-uebersicht .bw-p:nth-child(8n) .bw-siegel{animation-delay:.35s}
}
@keyframes bw-blitz{0%{opacity:0;scale:.5;rotate:0deg}35%{opacity:.95;scale:1}100%{opacity:0;scale:1.12;rotate:30deg}}
@keyframes bw-stempel{from{opacity:0;transform:scale(1.8) rotate(-16deg)}}
@keyframes bw-krone{from{opacity:0;translate:0 -10px}}
@keyframes bw-auftauchen{from{opacity:0;transform:scale(.4) rotate(-40deg)}}

/* Hinweise „es geht weiter“: nur auf dem Handy und nur, solange es in die Richtung weitergeht (hero.js) */
.bw-weiter{display:none}

/* Handy und Tablet: eine wischbare Reihe mit Rastpunkten. Auf dem Handy rund vier Plaketten, damit die Namen mindestens
   13 px groß bleiben und sich nicht berühren (Nachbesserung Prompt 80: Lesbarkeit und Tippflächen ab 44 px) */
@media (max-width:900px){
  .bw-rahmen{--slot:clamp(84px,calc((100vw - 24px) / 4),108px);--d:min(calc(var(--slot) * .76),68px);margin-bottom:14px}
  .hero:has(>.bw-rahmen){padding-top:6px}
  .bw-hinweis{font-size:12.5px;margin-bottom:0}
  .bw{margin-inline:-16px}
  .bw-spur{display:flex;max-width:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:20px 12px 8px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .bw-spur::-webkit-scrollbar{display:none}
  .bw-p{flex:0 0 var(--slot);padding-inline:0;scroll-snap-align:center}
  .bw-p::before{width:calc(var(--d) * 1.7)}
  .bw-band{padding:3px 6px;font-size:13.5px;letter-spacing:0}
  .bw-band::after{inset:4px -5px -2px;clip-path:polygon(0 0,100% 0,calc(100% - 4px) 50%,100% 100%,0 100%,4px 50%)}

  /* Mit Skript: Kanten blenden nur dort aus, wo es weitergeht, dazu ein kleiner Pfeil zum Antippen */
  .bw-bereit .bw-spur{-webkit-mask-image:none;mask-image:none}
  .bw-bereit.bw-mehr-rechts .bw-spur{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .bw-bereit.bw-mehr-links .bw-spur{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px)}
  .bw-bereit.bw-mehr-links.bw-mehr-rechts .bw-spur{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
  /* Pfeil: Tippfläche 44 × 44 px, sichtbar nur der kleine Kreis (::after) mit dem Winkel (::before) */
  .bw-weiter{position:absolute;top:calc(20px + var(--d) / 2);z-index:4;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;
    color:var(--brass);font-weight:700;font-size:20px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .bw-weiter::after{content:"";position:absolute;left:8px;top:8px;z-index:-1;width:28px;height:28px;box-sizing:border-box;border-radius:50%;
    background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid color-mix(in srgb,var(--brass) 45%,var(--line));box-shadow:0 4px 10px -4px rgba(11,37,25,.5)}
  .bw-weiter-links{left:0}
  .bw-weiter-rechts{right:0}
  .bw-weiter-links::before{content:"‹";margin:-2px 1px 0 0}
  .bw-weiter-rechts::before{content:"›";margin:-2px 0 0 1px}
  .bw-mehr-links .bw-weiter-links,.bw-mehr-rechts .bw-weiter-rechts{opacity:1;visibility:visible}
}
/* Schmale Handys: 13 px und knappere Bandränder, damit sich lange Namen (Tante Emma, Supermarkt) nicht berühren */
@media (max-width:400px){
  .bw-band{padding:3px 4px;font-size:13px}
  .bw-band::after{inset:4px -3.5px -2px;clip-path:polygon(0 0,100% 0,calc(100% - 3px) 50%,100% 100%,0 100%,3px 50%)}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .bw-mehr-rechts .bw-weiter-rechts::before{animation:bw-schubs 2.4s ease-in-out infinite}
  .bw-mehr-links .bw-weiter-links::before{animation:bw-schubs 2.4s ease-in-out infinite reverse}
}
@keyframes bw-schubs{0%,60%,100%{translate:0 0}30%{translate:3px 0}}

/* Hoher Kontrast: Rand und Band als Linie, Text in Systemfarben */
@media (forced-colors:active){
  .bw-band{color:LinkText;text-shadow:none}
  .bw-band::before{background:Canvas;border:1px solid LinkText}
  .bw-p[aria-current="page"] .bw-band{color:CanvasText;font-weight:800}
  .bw-band::after,.bw-p::before,.bw-p::after{display:none}
}

/* Versuch Prompt 115, Variante „zeichen“ (Models/Betriebsauswahl.cs): statt des Fotos das Branchen-Zeichen auf einer getönten
   Scheibe (Creme, zum Rand hin in die Branchenfarbe getönt), Zeichen in der Branchenfarbe, Goldring wie beim Foto.
   Das Zeichen sitzt mittig im sichtbaren Teil der Scheibe über dem Band (Prompt 123a): oben weniger, unten mehr Innenabstand.
   Hover, Aktiv-Zustand und Animationen bleiben unverändert. Bandschrift auf dem Desktop rund 2 pt größer. */
.bw-mit-zeichen .bw-siegel .zeichen{position:absolute;inset:12.5%;box-sizing:border-box;width:75%;height:75%;padding:6% 12% 18%;border-radius:50%;
  color:color-mix(in srgb,var(--bw-rand) 85%,#380544);stroke-width:1.9;
  background:radial-gradient(circle at 34% 28%,#F9EFDC,color-mix(in srgb,var(--bw-rand) 22%,#F9EFDC) 55%,color-mix(in srgb,var(--bw-rand) 46%,#F9EFDC));
  box-shadow:0 0 0 1.5px #F6AF2F,0 0 0 3px rgba(56,5,68,.45),inset 0 -3px 6px color-mix(in srgb,var(--bw-rand) 22%,transparent)}
.bw-mit-zeichen .bw-p[aria-current="page"] .bw-siegel .zeichen{color:#380544;background:radial-gradient(circle at 34% 28%,#FBE8C2,#F6AF2F 62%,#F2A31B)}
@media (min-width:901px){
  .bw-mit-zeichen .bw-band{padding-inline:8px;font-size:clamp(13.5px,1.46vw,16.2px)}
}