@charset "UTF-8";

/* =====================================================================
   GREEN CAREERS · NETZWERK (Design 05, D2)
   ---------------------------------------------------------------------
   Redaktionelle Fassung des Abschnitts `communityNetwork` aus
   community.js. Der Prototyp zeigt dort eine animierte Knotenkarte mit
   generierten Porträts und spricht Arbeitgeber an. Für die
   Arbeitnehmeransicht bleibt der Inhalt (sechs Branchengruppen, die
   Branchen dahinter und typische Berufe), die Porträts entfallen
   vollständig (Plan E6: keine Personenprofile, Gate E7: keine Fotos
   ohne Rechtenachweis).

   Jede Gruppe ist ein natives details/summary: ohne JavaScript
   vollständig bedienbar, mit Tastatur über Enter und Leertaste. Jede
   Kachel darin ist ein Link in die echte Suche (jobs.html mit `branche`
   oder `beruf`).

   Farben nur als Token aus public-brand.css. Der Abschnitt liegt auf der
   dunklen Leiter R1 (--gc-dark), die Gruppen auf R2 (--gc-dark-card).
   Helle Schrift hält dort 8,90:1, die gedämpfte Stufe 5,92:1.

   D3 (17.09.2026): Der Abschnitt steht jetzt auch auf arbeitgeber.html.
   Geändert ist ausschließlich die Reichweite der Selektoren
   (.public-home wurde zu :is(.public-home, .public-employer)), der
   Rest ist bytegleich mit D2. Die Arbeitgeberseite setzt nur den
   Einleitungstext anders; das steht in public-employer.css.
   ===================================================================== */

:is(.public-home, .public-employer) .netzwerk__inner {
  display: grid;
  gap: clamp(28px, 3.5vw, 56px);
}

:is(.public-home, .public-employer) .netzwerk__intro h2 {
  margin: 14px 0 0;
  max-width: 14ch;
}

:is(.public-home, .public-employer) .netzwerk__intro > p {
  margin-top: 18px;
  max-width: 44ch;
}

:is(.public-home, .public-employer) .netzwerk__fussnote {
  margin-top: 18px;
  color: var(--auf-dunkel-leise);
  font-size: 0.875rem;
}

:is(.public-home, .public-employer) .netzwerk__gruppen {
  display: grid;
  gap: 12px;
  align-content: start;
}

/* ---- Eine Branchengruppe ------------------------------------------- */

:is(.public-home, .public-employer) .netzgruppe {
  border: 1px solid var(--gc-line-dark-ui);
  border-radius: var(--gc-radius-card);
  background: var(--gc-dark-card);
}

/* Raster statt einer Zeile: bei 320 px passten Gruppenname und Hinweis
   nicht nebeneinander und schoben die Seite um 33 px nach rechts
   (gemessen 17.09.2026, „Baumschulen" plus „Auch Forstbaumschulen").
   Unter 560 px stehen beide untereinander, der Pfeil bleibt rechts
   daneben; darüber stehen sie wie in der Referenz in einer Zeile. */
:is(.public-home, .public-employer) .netzgruppe__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  min-height: 60px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

:is(.public-home, .public-employer) .netzgruppe__kopf::-webkit-details-marker {
  display: none;
}

:is(.public-home, .public-employer) .netzgruppe__titel {
  grid-column: 1;
  min-width: 0;
  color: var(--auf-dunkel);
  font-family: var(--gc-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

:is(.public-home, .public-employer) .netzgruppe__hinweis {
  grid-column: 1;
  min-width: 0;
  color: var(--auf-dunkel-leise);
  font-size: 0.875rem;
}

:is(.public-home, .public-employer) .netzgruppe__pfeil {
  grid-column: 2;
  grid-row: 1 / -1;
  width: 20px;
  height: 20px;
  color: var(--gc-accent);
  transition: transform var(--t-basis) var(--ease);
}

:is(.public-home, .public-employer) .netzgruppe[open] .netzgruppe__pfeil {
  transform: rotate(180deg);
}

:is(.public-home, .public-employer) .netzgruppe__körper {
  padding: 4px 20px 22px;
}

:is(.public-home, .public-employer) .netzgruppe__spaltentitel {
  margin: 14px 0 12px;
  color: var(--gc-accent);
}

:is(.public-home, .public-employer) .netzgruppe__körper > .netzgruppe__spaltentitel:first-child {
  margin-top: 0;
}

/* ---- Die zwei Listen ------------------------------------------------ */

:is(.public-home, .public-employer) .netzliste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.public-home, .public-employer) .netzliste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--gc-line-dark-ui);
  border-radius: var(--gc-radius-chip);
  color: var(--auf-dunkel);
  font-size: 0.875rem;
  font-weight: 500;
}

:is(.public-home, .public-employer) .netzliste a:hover {
  border-color: var(--gc-accent);
  color: var(--gc-accent);
}

/* Die Berufe tragen eine zweite Zeile mit der Tätigkeit. Sie stehen
   deshalb als Karte untereinander statt als Marke nebeneinander. */
:is(.public-home, .public-employer) .netzliste--berufe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

:is(.public-home, .public-employer) .netzliste--berufe a {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: var(--gc-radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
}

:is(.public-home, .public-employer) .netzliste--berufe small {
  color: var(--auf-dunkel-leise);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
}

:is(.public-home, .public-employer) .netzliste--berufe a:hover small {
  color: var(--auf-dunkel);
}

@media (min-width: 640px) {
  :is(.public-home, .public-employer) .netzliste--berufe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 560px) {
  :is(.public-home, .public-employer) .netzgruppe__kopf {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 20px;
  }

  :is(.public-home, .public-employer) .netzgruppe__hinweis {
    grid-column: 2;
  }

  :is(.public-home, .public-employer) .netzgruppe__pfeil {
    grid-column: 3;
    grid-row: auto;
  }
}

@media (min-width: 900px) {
  /* W2 (19.09.2026, Patric): dieselbe Spaltenaufteilung und Lücke wie
     .quiz__inner (public-home.css, min-width:900px), damit die rechte
     Akkordeonspalte hier exakt so breit wird wie die weiße Quizkarte
     direkt darüber und beide Kanten zueinander ausgerichtet sind. Beide
     Abschnitte liegen im selben Standard-.wrap, bei gleichem Verhältnis
     und gleicher Lücke ist die zweite Spalte deshalb rechnerisch
     deckungsgleich. Vorher 0.8fr/1.2fr mit clamp(28px,3.5vw,56px); die
     linke Textspalte wird dadurch etwas breiter, das lässt der Auftrag
     ausdrücklich zu. */
  :is(.public-home, .public-employer) .netzwerk__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(32px, 4vw, 72px);
  }
}


/* Direkte Adaptierung der vollständigen Frederik-Netzwerkkaskade. */
/* People and businesses share the stage. Connections are the interaction. */
.public-employer .community-section{padding:88px 0 74px;background:#142d20}
.community-layout{display:grid;grid-template-columns:.82fr 1.3fr;gap:50px;align-items:center;position:relative}
.community-copy .eyebrow{color:#c6f17b;font-size:9px}
.public-employer .community-copy h2{font-size:clamp(40px,4.15vw,62px);line-height:1.07;letter-spacing:-.052em;margin:0 0 28px}
.community-copy h2 em{font-style:normal;color:#c6f17b}
.public-employer .community-copy>p{font-size:13px;line-height:1.9;color:#c7d5ba;margin-bottom:27px;max-width:355px}
.community-legend{display:flex;gap:25px;color:#e2eed5;font-size:12px;margin-bottom:30px}
.community-legend>span{display:flex;align-items:center;gap:10px}.community-legend i{height:13px;width:13px;display:block}.legend-person{border:2px solid #edf8dd;border-radius:50%}.legend-business{border-radius:3px;background:#c6f17b}
.public-employer .community-copy .community-invitation{display:flex;gap:13px;font-size:11px;color:#a2ba8d;max-width:295px;line-height:1.85}.community-invitation svg{width:19px;height:19px;flex:none;color:#c6f17b;margin-top:3px}
.public-employer .community-copy>.btn{background:#c6f17b;color:#142d20;font-size:12px;min-height:52px;gap:30px}
.community-experience{min-width:0}.community-map{height:auto;aspect-ratio:10/7;position:relative;margin:0 -12px 22px;isolation:isolate}
.community-map:before{content:'';position:absolute;inset:5%;border-radius:50%;background:radial-gradient(ellipse,#699c383b,transparent 69%);filter:blur(20px);pointer-events:none}
.public-employer svg.community-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
.community-thread{stroke:#8ca976;stroke-opacity:.24;stroke-width:1.3;fill:none;transition:stroke .7s,stroke-opacity .7s,stroke-width .7s}
.community-current{stroke:#dcffa6;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1.2 98.8;fill:none;opacity:.2;animation:community-current 5.5s linear infinite;animation-delay:var(--flow-delay);animation-direction:var(--flow-direction);transition:opacity .5s}
.connected>.community-thread{stroke:url(#connection-gradient);stroke-opacity:.7;stroke-width:1.7}.connected>.community-current{opacity:1;stroke-width:3.5;animation-duration:3.8s;filter:drop-shadow(0 0 4px #d1ff87)}
.community-spark{fill:#b1d985;opacity:.35;animation:community-spark 4s ease-in-out infinite;animation-delay:var(--flow-delay)}
.community-member{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;z-index:2;padding:0;background:none;color:#f0f7e4;border:0;transition:opacity .6s,filter .6s;animation:community-bob 6s ease-in-out infinite;animation-delay:var(--bob-delay);cursor:pointer;text-align:center}
.community-member:hover,.community-member:focus-visible{z-index:6;opacity:1;filter:none;animation-play-state:paused}.community-member:focus-visible{outline:2px solid #e4ffa7;outline-offset:9px;border-radius:12px}
.community-member.person{width:86px;display:flex;flex-direction:column;align-items:center;gap:9px}.member-portrait{display:block;width:72px;height:72px;flex:none;background-repeat:no-repeat;border:3px solid #849b72;border-radius:50%;box-shadow:0 5px 25px #04160938;transition:border-color .5s,box-shadow .5s}
.member-label{display:block;background:#1a3323e6;font-size:10px;line-height:1.35;white-space:nowrap;padding:4px 8px;border-radius:5px;font-weight:400;color:#ebf3dc}
.community-member.business{display:flex;align-items:center;gap:12px;width:188px;padding:11px;border:1px solid #a5c576;border-radius:14px;background:#e7f3d5;color:#183223;box-shadow:0 8px 24px #061c1240;text-align:left;min-height:73px}
.business-image{width:45px;height:47px;border-radius:8px;overflow:hidden;position:relative;flex:none}.business-image img{width:100%;height:100%;object-fit:cover}.business-image>svg{position:absolute;bottom:2px;right:2px;width:18px;height:18px;background:#c6f17b;padding:3px;border-radius:5px}.business-identity{min-width:0;display:block}.business-identity small{font-size:8px;line-height:1.5;color:#526940;display:block;margin-bottom:4px;white-space:nowrap}.business-identity strong{font-size:11px;font-weight:600;line-height:1.35;display:block}
.member-ring{position:absolute;inset:-7px;border-radius:20px;border:1px solid #c6f17b;opacity:0;pointer-events:none;transition:opacity .5s}.person .member-ring{inset:-6px 1px auto;height:84px;width:84px;border-radius:50%}
.community-member[aria-pressed=true] .member-ring{opacity:1;animation:community-ring 3s ease-out infinite}.community-member[aria-pressed=true] .member-portrait{border-color:#d9ffa4;box-shadow:0 0 30px #c6f17b33}.community-member.business[aria-pressed=true]{background:#c6f17b;border-color:#d9ff9d}.community-member.quiet{opacity:.65}.community-member.connected .member-portrait{border-color:#c6e698}
.community-whisper{position:absolute;top:35%;left:53%;font-size:9px;color:#bed19f;display:flex;align-items:center;gap:8px;rotate:-7deg;animation:community-whisper 8s ease-in-out infinite}.community-whisper>span{background:#31492b;color:#c6f17b;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;font-size:17px}
.community-detail{border:1px solid #526a3e;border-radius:16px;padding:23px 26px;background:linear-gradient(125deg,#293f27,#1b3525);min-height:178px;box-shadow:0 8px 35px #03180b15}.community-detail-top{display:flex;align-items:center;gap:11px;margin-bottom:15px}.connection-avatar-stack{display:flex;padding-left:5px;flex:none}.connection-avatar-stack>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid #293f27;margin-left:-5px;background-repeat:no-repeat}.connection-avatar-stack>.connection-business{background:#d9edbc;color:#2f4d24}.connection-business svg{width:15px;height:15px}.connection-mark{margin-left:auto;color:#c6f17b}.connection-mark>svg{width:22px;height:22px}#connection-context{font-size:9px;line-height:1.5;color:#c7dbae}
.public-employer .community-detail h3{font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.025em;margin:0 0 10px;color:#f1f8e7}.public-employer .community-detail p{font-size:11px;line-height:1.85;color:#b1c69c;margin:0;max-width:480px}
.community-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:17px;font-size:8px;color:#a1b78c}

@keyframes community-current{to{stroke-dashoffset:-100}}@keyframes community-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}@keyframes community-ring{0%,100%{opacity:.25;scale:1}50%{opacity:.8;scale:1.04}}@keyframes community-spark{0%,100%{opacity:.15}50%{opacity:.55}}@keyframes community-whisper{0%,100%{opacity:.3;transform:translateY(1px)}50%{opacity:.9;transform:translateY(-3px)}}
.community-asleep *{animation-play-state:paused!important}
/* Original Green Careers film, integrated into the employer section. */
.employer-film{display:grid;grid-template-columns:1.8fr 1fr;border-radius:20px;overflow:hidden;background:#173927;margin:34px 0 26px;box-shadow:0 9px 32px #1c3c2010}.film-player{position:relative;background:#102c1b;align-self:stretch;min-width:0;display:flex;align-items:center}.film-player video{width:100%;aspect-ratio:16/9;display:block;object-fit:contain;background:#102c1b}.film-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;color:#fff;background:linear-gradient(0deg,#0c241a65,#0c241a05)}.film-play>span{width:70px;height:70px;display:grid;place-items:center;padding-left:4px;border-radius:50%;background:#c6f17b;color:#193a24;font-size:25px;box-shadow:0 0 0 12px #c6f17b26;transition:scale .2s}.film-play:hover>span{scale:1.08}.film-play>strong{font-size:12px;font-weight:500;text-shadow:0 1px 5px #000;background:#193521a3;padding:7px 13px;border-radius:6px}.film-play[hidden]{display:none}.film-copy{padding:36px 30px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.film-copy .eyebrow{font-size:8px;color:#bddc95;margin:0 0 20px}.public-employer .film-copy h3{font-size:clamp(24px,2.4vw,35px);line-height:1.18;letter-spacing:-.04em;margin:0 0 18px;color:#fff}.film-copy h3 em{font-style:normal;color:#c6f17b}.public-employer .film-copy p{font-size:12px;line-height:1.85;color:#c2d2b3;margin:0 0 19px}.film-text-play{font-size:12px;display:flex;align-items:center;gap:25px;color:#fff;background:none;border-bottom:1px solid #8caa66;padding:11px 0;min-height:44px}.film-text-play svg{width:19px;height:19px}.film-signature{font-size:7px;letter-spacing:.13em;color:#91ae78;margin-top:29px}
.public-employer #profile-scene-image[src$="team-miteinander-v2.jpg"]{object-position:50% 0%}.public-employer .price-guarantee-note{font-size:11px;line-height:1.8;background:#eef5e2;padding:13px;border-radius:8px;color:#49643b}
@media(min-width:1450px){.community-layout{grid-template-columns:.78fr 1.3fr;gap:75px}.community-map{margin-left:-10px;margin-right:-25px}.member-portrait{width:81px;height:81px}.community-member.person{width:95px}.person .member-ring{width:94px;height:94px;left:0}.member-label{font-size:11px}.community-member.business{width:205px;padding:13px}.business-identity strong{font-size:12px}.business-identity small{font-size:9px}.community-detail{min-height:171px}}
@media(max-width:1100px){.community-layout{grid-template-columns:.8fr 1.2fr;gap:30px}.public-employer .community-copy h2{font-size:43px}.community-member.business{width:151px;gap:8px;padding:9px;min-height:63px}.business-image{width:32px;height:38px}.business-identity strong{font-size:10px}.business-identity small{font-size:7px}.member-portrait{width:61px;height:61px}.community-member.person{width:74px;gap:6px}.member-label{font-size:8px;padding:4px 5px}.person .member-ring{height:73px;width:73px;left:0}.community-map{aspect-ratio:1.25;margin-inline:0}.community-whisper{font-size:8px;left:51%;top:33%}.film-copy{padding:28px 24px}.public-employer .film-copy h3{font-size:28px}.public-employer .film-copy p{font-size:11px}.film-signature{margin-top:20px}}
@media(max-width:900px){.community-layout{grid-template-columns:1fr;gap:25px}.community-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}.community-copy .eyebrow,.community-copy h2{grid-column:1/-1}.public-employer .community-copy h2{font-size:51px}.public-employer .community-copy>p{max-width:none}.community-copy .community-legend{grid-column:2;grid-row:3;align-self:center;justify-content:flex-end}.public-employer .community-copy>.btn{justify-self:start;align-self:start}.community-experience{max-width:640px;width:100%;margin:auto}.community-map{aspect-ratio:10/7}.community-member.business{width:176px;padding:11px}.business-identity strong{font-size:11px}.business-image{width:39px;height:42px}.member-portrait{width:72px;height:72px}.community-member.person{width:86px}.member-label{font-size:10px}.person .member-ring{width:84px;height:84px;left:1px}.employer-film{grid-template-columns:1.5fr 1fr}.film-copy{padding:25px}.film-copy .eyebrow{margin-bottom:14px}.public-employer .film-copy h3{font-size:26px}.film-signature{display:none}.public-employer .film-copy p{margin-bottom:9px}}
@media(max-width:720px){.public-employer .community-section{padding:47px 0 35px}.community-layout{gap:10px}.community-copy{display:block}.public-employer .community-copy h2{font-size:38px;line-height:1.09;margin-bottom:23px}.community-copy .eyebrow{font-size:8px}.public-employer .community-copy>p{font-size:12px;margin-bottom:20px}.community-legend{justify-content:flex-start;font-size:11px;gap:24px;margin-bottom:20px}.public-employer .community-copy .community-invitation{font-size:10px;max-width:none;align-items:center;margin-bottom:20px}.public-employer .community-copy>.btn{font-size:11px;min-height:48px}.community-map{aspect-ratio:.87;margin:24px 1px 24px}.community-member.business{width:124px;gap:7px;padding:8px;border-radius:11px;min-height:62px}.business-image{width:29px;height:35px}.business-identity small{font-size:6px;white-space:normal;line-height:1.4;margin-bottom:4px}.business-identity strong{font-size:9px;line-height:1.4}.business-image>svg{height:15px;width:15px}.community-member.person{width:65px;gap:5px}.member-portrait{width:57px;height:57px;border-width:2px}.member-label{font-size:8px;line-height:1.4;padding:4px 5px}.person .member-ring{height:68px;width:68px;left:-1px;top:-5px}.community-whisper{font-size:7px;top:37%;left:52%;gap:5px}.community-whisper>span{width:20px;height:20px;font-size:14px}.community-detail{padding:20px 18px;min-height:191px;border-radius:14px}.community-detail-top{gap:9px;margin-bottom:15px}.connection-avatar-stack>span{width:24px;height:24px}#connection-context{font-size:8px}.connection-mark{display:none}.public-employer .community-detail h3{font-size:20px;line-height:1.3}.public-employer .community-detail p{font-size:11px;line-height:1.8}.community-bottom{font-size:7px;gap:10px;line-height:1.6}
.employer-film{display:flex;flex-direction:column;border-radius:15px;margin:24px 0 22px}.film-copy{padding:24px}.film-copy .eyebrow{font-size:7px;margin-bottom:14px}.public-employer .film-copy h3{font-size:30px;margin-bottom:14px}.public-employer .film-copy p{font-size:12px;line-height:1.85}.film-text-play{font-size:11px;width:100%;justify-content:space-between;margin-top:8px}.film-play>span{width:55px;height:55px;font-size:20px;box-shadow:0 0 0 9px #c6f17b26}.film-play>strong{font-size:10px}.film-player video{aspect-ratio:16/9}.community-member[aria-pressed=true] .member-ring{animation-duration:4s}}
@media(max-width:360px){.public-employer .community-copy h2{font-size:33px}.community-map{aspect-ratio:.78;margin-inline:0}.community-member.business{width:109px;gap:5px;padding:7px}.business-image{width:24px;height:30px}.business-identity strong{font-size:8px}.member-portrait{width:49px;height:49px}.community-member.person{width:58px}.member-label{font-size:7px}.person .member-ring{width:60px;height:60px;left:-1px}.community-whisper{left:51%;font-size:6px}.community-detail{padding:18px 15px;min-height:209px}.public-employer .community-detail h3{font-size:19px}.community-bottom{font-size:6px}.public-employer .film-copy h3{font-size:27px}}
@media(prefers-reduced-motion:reduce){.community-map *{animation:none!important;transition:none!important}.community-current{stroke-dasharray:none;opacity:.12}.connected>.community-current{opacity:.3}.member-ring{scale:1!important}.film-play>span{transition:none}}

/* Similar reading speed despite the larger client list. */
@media(max-width:720px){.community-copy .community-legend{justify-content:flex-start}.business-identity strong{font-size:10px}.member-label{font-size:9px}.community-whisper{display:none}}
@media(max-width:360px){.business-identity strong{font-size:9px}.member-label{font-size:8px}}

/* Central Green Careers hub with profession-specific routes. */
.public-employer .community-map{aspect-ratio:10/8;margin:0 0 22px}
.public-employer .community-copy .community-promise{font-size:15px;color:#f2f7e9;font-weight:500;margin-top:-12px}
.public-employer .community-member.person{width:108px}
.public-employer .member-label{white-space:normal;max-width:118px;line-height:1.35;font-size:10px}
.public-employer .person .member-ring{left:50%;translate:-50% 0}
.public-employer .community-member.hub{display:flex;flex-direction:column;align-items:center;justify-content:center;width:142px;height:142px;gap:10px;background:#eff8dc;color:#173725;border:7px solid #c6f17b;border-radius:50%;box-shadow:0 0 0 8px #bcec6820,0 0 60px #bcec6830;z-index:4;animation:none}
.hub-logo img{display:block;width:95px;height:auto;max-height:67px;object-fit:contain}
.hub-caption{font-size:8px;line-height:1.35;font-weight:600}
.hub .member-ring{inset:-15px;border-radius:50%}
.public-employer .community-member.hub:focus-visible{border-radius:50%;outline-offset:12px}
.public-employer .community-bottom{align-items:center;line-height:1.6}
@media(min-width:1450px){.public-employer .community-member.person{width:114px}.public-employer .member-label{font-size:11px}}
@media(min-width:721px) and (max-width:1100px){.public-employer .community-member.hub{width:118px;height:118px;border-width:5px;gap:7px}.hub-logo img{width:79px}.hub-caption{font-size:7px}.public-employer .community-member.business{width:149px}.public-employer .community-member.person{width:95px}.public-employer .member-label{font-size:9px}}
@media(max-width:720px){
 .public-employer .community-map{aspect-ratio:.78;max-width:430px;margin:0 auto 19px}
 .public-employer .community-copy .community-promise{font-size:13px;margin-top:-8px;margin-bottom:20px}
 .public-employer .community-member.person{width:84px;gap:5px}
 .public-employer .member-portrait{width:56px;height:56px}
 .public-employer .member-label{font-size:9px;max-width:99px;padding:3px 4px}
 .public-employer .community-member.business{width:116px;gap:6px;padding:8px 7px;min-height:52px;border-radius:11px}
 .public-employer .business-image{width:26px;height:32px}
 .public-employer .business-identity small{font-size:6px;white-space:normal;line-height:1.3;margin-bottom:3px}
 .public-employer .business-identity strong{font-size:9px;line-height:1.35}
 .public-employer .community-member.hub{width:108px;height:108px;border-width:5px;gap:6px}
 .hub-logo img{width:75px;max-height:48px}.hub-caption{font-size:6px}
 .public-employer .person .member-ring{width:67px;height:67px}
 .public-employer .community-detail{min-height:205px}.public-employer .community-detail h3{font-size:20px}
 .public-employer .community-bottom{font-size:7px;gap:12px}.community-bottom>span{max-width:165px}
}
@media(max-width:360px){
 .public-employer .community-map{aspect-ratio:.69}
 .public-employer .community-member.business{width:101px;padding:7px 6px;gap:5px}
 .public-employer .business-image{display:none}
 .public-employer .business-identity strong{font-size:9px}.public-employer .business-identity small{font-size:7px}
 .public-employer .community-member.person{width:78px}.public-employer .member-label{font-size:8px}
 .public-employer .member-portrait{width:50px;height:50px}.public-employer .person .member-ring{width:61px;height:61px}
 .public-employer .community-member.hub{width:95px;height:95px;gap:4px}.hub-logo img{width:64px}.hub-caption{font-size:6px}
 .public-employer .community-detail{min-height:215px}
}

/* Discover the relevant sub-sector without crowding the network itself. */
.public-employer .community-section{padding:76px 0 65px}
.community-layout{grid-template-columns:.95fr 1.25fr;gap:48px;align-items:start}
.community-copy{padding-top:8px}
.public-employer .community-copy h2{font-size:clamp(38px,3.7vw,55px);margin-bottom:22px}
.public-employer .community-copy>p{max-width:420px;margin-bottom:24px}
.sector-picker{margin:0 0 25px}
.public-employer .sector-picker-title{font-size:13px;color:#f1f8e7;font-weight:500;margin:0 0 13px}
.sector-groups{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sector-group{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:13px 27px 13px 13px;min-height:82px;border:1px solid #5b7350;border-radius:12px;background:#203b2a;color:#f1f8e7;transition:background .2s,border-color .2s}
.sector-group strong{font-size:12px;font-weight:500;line-height:1.35}
.sector-group small{font-size:8px;line-height:1.6;color:#bed0ad;margin-top:5px}
.sector-group>span{position:absolute;right:10px;top:13px;color:#c6f17b;font-size:16px}
.sector-group:hover{border-color:#c6f17b;background:#2d4c31}
.sector-group[aria-pressed=true]{background:#c6f17b;border-color:#c6f17b;color:#142d20}
.sector-group[aria-pressed=true] small{color:#35532a}.sector-group[aria-pressed=true]>span{color:#142d20}
.sector-group:focus-visible,.sector-chip:focus-visible{outline:3px solid #e5ffb0;outline-offset:3px}
.sector-options{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 14px;border-bottom:1px solid #48623d;margin-bottom:12px}
.sector-chip{min-height:40px;padding:8px 12px;font-size:11px;line-height:1.4;color:#e8f2dc;border:1px solid #5b7350;border-radius:8px;background:#203b2a;text-align:left}
.sector-chip:hover{border-color:#c6f17b}.sector-chip[aria-pressed=true]{background:#eff8dc;color:#193822;border-color:#c6f17b;font-weight:500}
.public-employer p.network-selection{font-size:11px;color:#c6f17b;margin:0 0 8px;font-weight:500}
.public-employer .community-map{aspect-ratio:10/7;margin:0 0 8px;max-width:none}
.public-employer .community-member.business{width:214px;min-height:64px;padding:11px 14px;gap:12px}
.business-symbol{width:35px;height:35px;border-radius:9px;background:#c6f17b;display:grid;place-items:center;flex:none}.business-symbol svg{width:22px;height:22px}
.public-employer .business-identity strong{font-size:12px;line-height:1.3}.public-employer .business-identity small{font-size:9px;margin-bottom:3px}
.public-employer .community-member.person{width:135px}.public-employer .member-label{font-size:11px;max-width:140px}
.public-employer .community-member.hub{width:126px;height:126px;border-width:6px;gap:8px}.hub-logo img{width:85px}
.public-employer .community-detail{min-height:166px;padding:20px 23px}.public-employer .community-detail h3{font-size:21px}
@media(min-width:1450px){.community-layout{gap:65px}.public-employer .community-map{aspect-ratio:1.5}}
@media(min-width:901px) and (max-width:1100px){.community-layout{gap:30px;grid-template-columns:.92fr 1.2fr}.sector-group{padding:12px 22px 12px 11px;min-height:90px}.sector-group strong{font-size:11px}.public-employer .community-map{aspect-ratio:1.15}.public-employer .community-member.person{width:110px}.public-employer .member-label{font-size:10px}.public-employer .community-member.business{width:185px}.public-employer .community-member.hub{width:108px;height:108px}.hub-logo img{width:72px}}
@media(max-width:900px){.community-layout{grid-template-columns:1fr;gap:28px}.community-copy{display:block;max-width:640px;width:100%;margin:auto;padding:0}.sector-groups{grid-template-columns:repeat(3,1fr)}.public-employer .community-copy>p{max-width:600px}.sector-picker{margin-bottom:20px}.community-experience{max-width:640px}.public-employer .community-map{aspect-ratio:1.5}.public-employer .community-copy h2 br{display:none}}
@media(max-width:720px){
 .public-employer .community-section{padding:43px 0 32px}.community-layout{gap:24px}
 .public-employer .community-copy h2{font-size:35px;line-height:1.1;margin-bottom:16px}.public-employer .community-copy h2 br{display:block}
 .public-employer .community-copy>p{font-size:12px;line-height:1.7;margin-bottom:19px}
 .sector-groups{grid-template-columns:1fr 1fr;gap:8px}.sector-group{min-height:72px;padding:10px 23px 10px 11px}.sector-group strong{font-size:11px}.sector-group small{font-size:8px;margin-top:4px}.sector-group>span{top:10px;right:8px;font-size:14px}
 .public-employer .sector-picker-title{font-size:12px;margin-bottom:11px}.sector-picker{margin-bottom:17px}
 .sector-chip{font-size:10px;min-height:44px;padding:8px 11px}.sector-options{gap:7px;margin-bottom:10px;padding-bottom:12px}
 .public-employer p.network-selection{font-size:10px;margin-bottom:7px}
 .public-employer .community-map{aspect-ratio:1;margin:0 0 8px;max-width:430px}
 .public-employer .community-member.person{width:104px}.public-employer .member-label{font-size:9px;max-width:108px;line-height:1.3}
 .public-employer .member-portrait{width:53px;height:53px}.public-employer .person .member-ring{width:64px;height:64px}
 .public-employer .community-member.business{width:192px;min-height:55px;padding:9px 12px;gap:9px}
 .business-symbol{height:29px;width:29px;border-radius:7px}.business-symbol svg{height:19px;width:19px}.public-employer .business-identity strong{font-size:11px}.public-employer .business-identity small{font-size:8px}
 .public-employer .community-member.hub{width:97px;height:97px;border-width:5px;gap:5px}.hub-logo img{width:66px}.hub-caption{font-size:6px}
 .public-employer .community-detail{min-height:164px;padding:17px}.public-employer .community-detail h3{font-size:18px}.community-detail-top{margin-bottom:11px}.public-employer .community-detail p{font-size:11px;line-height:1.7}
}
@media(max-width:360px){.public-employer .community-copy h2{font-size:32px}.sector-group strong{font-size:10px}.sector-group small{font-size:7px}.sector-group{min-height:74px}.public-employer .community-map{aspect-ratio:.9}.public-employer .community-member.person{width:91px}.public-employer .member-label{font-size:8px;max-width:95px}.public-employer .community-member.hub{width:85px;height:85px}.hub-logo img{width:57px}.public-employer .community-member.business{width:178px}.public-employer .community-detail{min-height:180px}}

.sector-picker-toggle{display:none}
.sector-select-wrap{display:none}
@media(max-width:720px){.public-employer .sector-picker-title{display:none}.sector-picker-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 12px;margin-bottom:9px;background:#29452f;border:1px solid #69865a;border-radius:9px;text-align:left;color:#eff8dc;font-size:12px}.sector-toggle-action{font-size:10px;color:#c6f17b;white-space:nowrap}.sector-picker-toggle:focus-visible{outline:3px solid #e5ffb0;outline-offset:3px}.sector-picker.is-collapsed .sector-groups{display:none}.sector-picker.is-collapsed{margin-bottom:12px}}
@media(max-width:720px){.sector-select-wrap{display:block;margin-top:9px}.sector-select{display:block;width:100%;min-height:44px;padding:8px 11px;border:1px solid #69865a;border-radius:8px;background:#203b2a;color:#eff8dc;font:inherit}.sector-options{display:none}.sector-picker.is-collapsed .sector-select-wrap{display:none}}


/* Progressive Ansicht: Die ursprüngliche Einleitung und Linklisten bleiben
   ohne JavaScript sichtbar. */
.public-employer .netzwerk--interaktiv .netzwerk__intro,
.public-employer .netzwerk--interaktiv .netzwerk__gruppen { display:none; }
.public-employer .netzwerk--interaktiv .netzwerk__inner { display:block; }
.public-employer .connection-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:15px;color:var(--gc-accent);font-size:12px;font-weight:600}.public-employer .connection-link svg{width:17px;height:17px}
.public-employer .connection-link[hidden]{display:none}

/* Das Originalmodul steht auf der Seite innerhalb der bestehenden dunklen
   Arbeitgeber-Bande. Im erweiterten Zustand bildet diese Bande deshalb die
   eine zusammenhängende Bühne; das Modul bringt weder einen Innenkasten noch
   ein zweites vertikales Abschnittspolster mit. */
.public-employer .netzwerk--interaktiv {
  padding-block: 0;
  background: #142d20;
}

.public-employer .netzwerk--interaktiv .community-section {
  padding-block: 76px 65px;
  background: transparent;
}


/* WEB-039: Die Auswahl bleibt auf großen Flächen eine zusammenhängende
   Zeile. Auf kleinen Flächen übernimmt der eingeklappte Picker die
   progressive Offenlegung. */
@media (min-width: 721px) {
  .public-employer .sector-options { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .public-employer .sector-options::-webkit-scrollbar { display: none; }
  .public-employer .community-bottom > span { white-space: nowrap; }
}
@media (max-width: 720px) {
  .public-employer .netzwerk--interaktiv .community-bottom { display: grid; grid-template-columns: 1fr; gap: 10px; }

  .public-employer .netzwerk--interaktiv #network-start { width: 100%; justify-content: center; margin-top: 4px; }
}

/* WEB-040: Unterbranchen sind Teil des mobilen Wählers, nicht eine zweite offene Ebene. */
@media (max-width: 720px) {
  .public-employer .sector-picker.is-collapsed .sector-options { display: none; }
  .public-employer .sector-picker .sector-options { margin-top: 9px; }

}

/* WEB-043: Die Auswahl füllt links die gestreckte erste Spalte. Die Karte
   steht rechts in einem eigenen Rahmen; Details und Bedienung schließen
   anschließend als gemeinsames Band über beide Spalten ab. */
.public-employer .netzwerk--interaktiv .community-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

.public-employer .netzwerk--interaktiv .community-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
  gap: 22px;
  align-items: stretch;
}

.public-employer .netzwerk--interaktiv .community-copy {
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 0;
}

.public-employer .netzwerk--interaktiv .community-copy > p {
  max-width: 44ch;
}

.public-employer .netzwerk--interaktiv .sector-picker {
  margin: 0;
}

.public-employer .netzwerk--interaktiv .sector-options {
  margin-top: auto;
  padding: 21px 0 0;
  border-top: 1px solid #48623d;
  border-bottom: 0;
}

.public-employer .netzwerk--interaktiv .sector-options::before {
  content: "Ihre Branche";
  display: block;
  flex-basis: 100%;
  margin-bottom: 10px;
  color: #b9cbae;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.public-employer .netzwerk--interaktiv .network-selection {
  display: none;
}

.public-employer .netzwerk--interaktiv .community-experience {
  display: flex;
  min-height: 600px;
  max-width: none;
  width: auto;
  margin: 0;
}

.public-employer .netzwerk--interaktiv .community-map {
  min-height: 600px;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  flex: 1;
  border: 1px solid #2c4a2b;
  border-radius: 22px;
  background: #12291b;
  overflow: hidden;
}

.public-employer .netzwerk--interaktiv .community-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, 1fr);
  gap: 26px;
  align-items: center;
  margin: 0;
  padding: 26px 29px;
  border: 1px solid #2c4a2b;
  border-radius: 22px;
  background: rgb(24 54 31 / .72);
  font-size: inherit;
}

.public-employer .netzwerk--interaktiv .community-detail {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.public-employer .netzwerk--interaktiv .community-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 13px;
}

.public-employer .netzwerk--interaktiv .community-actions__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
}


.public-employer .netzwerk--interaktiv .community-hint {
  max-width: 290px;
  color: #a1b78c;
  font-size: 9px;
  line-height: 1.85;
  text-align: right;
}

.public-employer .netzwerk--interaktiv .sector-mobile-controls {
  display: none;
}

@media (max-width: 1100px) {
  .public-employer .netzwerk--interaktiv .community-top-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-employer .netzwerk--interaktiv .community-copy {
    display: block;
  }

  .public-employer .netzwerk--interaktiv .community-experience,
  .public-employer .netzwerk--interaktiv .community-map {
    min-height: 0;
  }

  .public-employer .netzwerk--interaktiv .community-map {
    aspect-ratio: 10 / 7;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .public-employer .netzwerk--interaktiv .sector-picker-title,
  .public-employer .netzwerk--interaktiv .sector-groups,
  .public-employer .netzwerk--interaktiv .sector-options {
    display: none;
  }

  .public-employer .netzwerk--interaktiv .sector-picker-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #69865a;
    border-radius: 9px;
    background: #29452f;
    color: #eff8dc;
    font-size: 12px;
    text-align: left;
  }

  .public-employer .netzwerk--interaktiv .sector-mobile-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 9px;
    padding: 13px;
    border: 1px solid #2c4a2b;
    border-radius: 15px;
    background: rgb(24 54 31 / .4);
  }

  .public-employer .netzwerk--interaktiv .sector-mobile-controls label {
    color: #b9cbae;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .public-employer .netzwerk--interaktiv .sector-mobile-controls select {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin-bottom: 5px;
    padding: 8px 11px;
    border: 1px solid #69865a;
    border-radius: 8px;
    background: #203b2a;
    color: #eff8dc;
    font: inherit;
  }

  .public-employer .netzwerk--interaktiv .sector-picker.is-collapsed .sector-mobile-controls {
    display: none;
  }

  .public-employer .netzwerk--interaktiv .network-selection {
    display: block;
    margin: 11px 0 0;
    color: #c6f17b;
    font-size: 12px;
  }
}

@media (max-width: 720px) {
  .public-employer .netzwerk--interaktiv .community-section {
    padding-block: 43px 32px;
  }

  .public-employer .netzwerk--interaktiv .community-layout {
    gap: 17px;
  }

  .public-employer .netzwerk--interaktiv .community-top-grid {
    gap: 17px;
  }

  .public-employer .netzwerk--interaktiv .community-copy h2 {
    font-size: 35px;
    margin-bottom: 16px;
  }

  .public-employer .netzwerk--interaktiv .community-copy > p {
    margin-bottom: 19px;
  }

  .public-employer .netzwerk--interaktiv .sector-picker-title,
  .public-employer .netzwerk--interaktiv .sector-groups,
  .public-employer .netzwerk--interaktiv .sector-options {
    display: none;
  }

  .public-employer .netzwerk--interaktiv .sector-picker-toggle {
    display: flex;
    margin: 0;
  }

  .public-employer .netzwerk--interaktiv .sector-picker {
    box-sizing: border-box;
    min-inline-size: 0;
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .public-employer .netzwerk--interaktiv .sector-mobile-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    box-sizing: border-box;
    min-width: 0;
    min-inline-size: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    margin-top: 9px;
    padding: 13px;
    border: 1px solid #2c4a2b;
    border-radius: 15px;
    background: rgb(24 54 31 / .4);
  }

  .public-employer .netzwerk--interaktiv .sector-mobile-controls label {
    min-width: 0;
    color: #b9cbae;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .public-employer .netzwerk--interaktiv .sector-mobile-controls select {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    min-block-size: 44px;
    margin-bottom: 5px;
    padding: 8px 11px;
    border: 1px solid #69865a;
    border-radius: 8px;
    background: #203b2a;
    color: #eff8dc;
    font: inherit;
  }

  .public-employer .netzwerk--interaktiv .sector-picker.is-collapsed .sector-mobile-controls {
    display: none;
  }

  .public-employer .netzwerk--interaktiv .network-selection {
    display: block;
    margin: 11px 0 0;
    color: #c6f17b;
    font-size: 12px;
  }

  .public-employer .netzwerk--interaktiv .community-experience {
    display: block;
  }

  .public-employer .netzwerk--interaktiv .community-map {
    height: 344px;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 19px;
  }

  .public-employer .netzwerk--interaktiv .community-bottom {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 15px 15px 17px;
    border-radius: 17px;
  }

  .public-employer .netzwerk--interaktiv .community-detail {
    min-height: 0;
    padding: 0;
  }

  .public-employer .netzwerk--interaktiv .community-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding-bottom: 7px;
  }

  .public-employer .netzwerk--interaktiv .community-actions__controls {
    display: contents;
  }


  .public-employer .netzwerk--interaktiv #network-start {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: center;
    margin: 0;
  }

  .public-employer .netzwerk--interaktiv .community-hint {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    font-size: 9px;
    text-align: left;
  }
}

@media (max-width: 360px) {
  .public-employer .netzwerk--interaktiv .community-map {
    height: 312px;
  }
}

/* WEB-043 Nachtrag: Der Branchenabschluss braucht auf breiten Flächen
   eine eigene Zeile, und die Karte behält die Größen der Referenz. */
@media (min-width: 721px) {
  .public-employer .netzwerk--interaktiv .sector-options {
    flex-wrap: wrap;
    overflow: visible;
  }

  .public-employer .netzwerk--interaktiv .sector-options::before {
    inline-size: 100%;
  }

  .public-employer .netzwerk--interaktiv .community-member.person {
    width: 150px;
  }

  .public-employer .netzwerk--interaktiv .member-portrait {
    width: 116px;
    height: 116px;
  }

  .public-employer .netzwerk--interaktiv .person .member-ring {
    width: 126px;
    height: 126px;
  }

  .public-employer .netzwerk--interaktiv .community-member.hub {
    width: 186px;
    height: 186px;
    gap: 10px;
  }

  .public-employer .netzwerk--interaktiv .hub-logo img {
    width: 96px;
  }

}

.public-employer .netzwerk--interaktiv #network-start {
  border-color: #c6f17b;
  background: #c6f17b;
  color: #142d20;
}

.public-employer .netzwerk--interaktiv #network-start:hover,
.public-employer .netzwerk--interaktiv #network-start:focus-visible {
  border-color: #d9ffa4;
  background: #d9ffa4;
  color: #142d20;
}

@media (max-width: 720px) {
  .public-employer .netzwerk--interaktiv .community-member.person {
    width: 92px;
  }

  .public-employer .netzwerk--interaktiv .member-portrait {
    width: 64px;
    height: 64px;
  }

  .public-employer .netzwerk--interaktiv .person .member-ring {
    width: 74px;
    height: 74px;
  }

  .public-employer .netzwerk--interaktiv .community-member.hub {
    width: 106px;
    height: 106px;
  }

}

@media (max-width: 360px) {
  .public-employer .netzwerk--interaktiv .community-member.person {
    width: 78px;
  }

  .public-employer .netzwerk--interaktiv .member-portrait {
    width: 54px;
    height: 54px;
  }

  .public-employer .netzwerk--interaktiv .person .member-ring {
    width: 64px;
    height: 64px;
  }

  .public-employer .netzwerk--interaktiv .community-member.hub {
    width: 94px;
    height: 94px;
  }
}


@media (max-width: 720px) {
  .public-employer .netzwerk--interaktiv .community-bottom {
    gap: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .public-employer .netzwerk--interaktiv .community-detail {
    min-height: 0;
    padding: 15px 15px 17px;
    border: 1px solid #2c4a2b;
    border-radius: 17px;
    background: rgb(24 54 31 / .72);
  }

}/* WEB-044: Die Linien liegen immer unter deckenden Porträts. Beim
   Wechselzustand dämpfen nur Beschriftungen, nie die Bildfläche selbst. */
.public-employer .netzwerk--interaktiv .community-member.quiet { opacity: 1; }
.public-employer .netzwerk--interaktiv .community-member.quiet .member-label,
.public-employer .netzwerk--interaktiv .community-member.quiet .business-identity { opacity: .65; }
.public-employer .netzwerk--interaktiv .community-member { z-index: 2; }
.public-employer .netzwerk--interaktiv svg.community-lines { z-index: 0; }

@media (min-width: 1101px) {
  .public-employer .netzwerk--interaktiv .community-experience {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
  }
  .public-employer .netzwerk--interaktiv .community-experience > .sector-options {
    margin: 0;
    padding: 0;
    border: 0;
  }
  .public-employer .netzwerk--interaktiv .community-experience > .sector-options {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    grid-template-rows: auto auto;
    justify-content: start;
    min-width: 0;
    gap: 5px;
    overflow: visible;
  }
  .public-employer .netzwerk--interaktiv .community-experience > .sector-options::before {
    grid-column: 1 / -1;
    grid-row: 1;
    inline-size: 100%;
    margin-bottom: 3px;
  }
  .public-employer .netzwerk--interaktiv .community-experience > .sector-options .sector-chip {
    grid-row: 2;
    flex-shrink: 0;
    min-width: max-content;
    min-height: 36px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
  }
  @media (max-width: 1100px) {
    .public-employer .netzwerk--interaktiv .community-experience > .sector-options { gap: 4px; }
    .public-employer .netzwerk--interaktiv .community-experience > .sector-options .sector-chip {
      padding-inline: 4px;
      font-size: 9.5px;
    }
  }
  .public-employer .netzwerk--interaktiv .community-experience { min-height: 510px; }
  .public-employer .netzwerk--interaktiv .community-map { min-height: 510px; height: 510px; }
  .public-employer .netzwerk--interaktiv .community-bottom { grid-template-columns: minmax(0, 1fr) auto; }
  .public-employer .netzwerk--interaktiv .community-hint {
    max-width: none;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  .public-employer .netzwerk--interaktiv .sector-mobile-controls select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline: 11px 44px;
    background-color: #203b2a;
    color: #eff8dc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23eff8dc' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 10px 6px;
  }
}

/* Bildrundgang 09.10.2026: Texte in der Netzwerk-Grafik nicht unter 12px
   (vorher je Breite 6 bis 11px). Lange Berufsnamen brechen um. */
body.public-employer .community-section :is(.community-copy .eyebrow, .sector-group small,
  .sector-toggle-action, .sector-chip, .member-label, .business-identity small,
  .hub-caption, .business-identity strong, .community-detail-top span, #connection-context, .community-detail p,
  .community-hint, .community-bottom) {
  font-size: 12px;
}
body.public-employer .community-section .member-label {
  white-space: normal;
  line-height: 1.3;
}
body.public-employer .community-section .hub-caption {
  line-height: 1.2;
  text-align: center;
}
/* Schmale Handys: lange Berufsnamen mit Trennstrich statt Abschneiden am
   Kartenrand; der Leitsatz im Logokreis passt unter 375px nicht in 12px. */
@media (max-width: 720px) {
  body.public-employer .community-section .member-label {
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 374px) {
  body.public-employer .community-section .hub-caption {
    display: none;
  }
}