@charset "UTF-8";

/* =====================================================================
   GREEN CAREERS · INSTAGRAM (Design 05, D2)
   ---------------------------------------------------------------------
   Gestaltung des Abschnitts `instagramSection` aus instagram.js. Vier
   veröffentlichte Beiträge als waagerechte Spur mit Schnappen; ab
   900 px ein Raster aus vier Spalten.

   Es gibt keinen Vorabkontakt zu instagram.com: die Motive liegen lokal
   unter assets/img/design05/, es gibt keinen Einbettungsrahmen und kein
   Fremdskript. Erst der Klick auf einen Beitrag öffnet instagram.com.

   Farben nur als Token. Der Abschnitt liegt auf dem hellen Grünton
   (--gc-canvas-2, Tinte 13,05:1), die Karten auf Weiß.

   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) .instagram__kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

:is(.public-home, .public-employer) .instagram__marke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

:is(.public-home, .public-employer) .instagram__marke svg {
  width: 18px;
  height: 18px;
}

/* W2 (19.09.2026, Patric): "Green Careers auf Instagram." soll ohne
   erzwungenen Umbruch in einer Zeile stehen. Die 15ch-Deckelung erzwang
   ihn bei jeder Breite, auch wenn reichlich Platz da war (bei 1440px auf
   index.html etwa 1009px verfügbar, die Zeile braucht nur rund 746px bei
   der damaligen Schriftgröße). Jetzt kein max-width mehr, dafür eine
   eigene, auf diese Überschrift gemessene Schriftgröße statt der
   allgemeinen h2-Regel (.public-home h2 bzw. --gc-fs-section): Sie ist
   klein genug, um bei 320 bis 768px (Spalte .instagram__kopf steht
   untereinander) und bei 900px an aufwärts (Spalte steht neben
   .instagram__profil, dadurch dort schmaler) auf einer Zeile zu bleiben.
   Kein weißstand: nowrap, normales Umbruchverhalten bleibt die
   Rückfallebene gegen horizontalen Überlauf, falls doch einmal eine
   Zwischenbreite knapper ausfällt als gemessen. */
:is(.public-home, .public-employer) .instagram__intro h2 {
  margin: 14px 0 0;
  max-width: none;
  font-size: clamp(1rem, 0.5rem + 2.8vw, 2rem);
}

@media (min-width: 900px) {
  :is(.public-home, .public-employer) .instagram__intro h2 {
    font-size: clamp(2rem, -0.5rem + 4.6vw, 3.6rem);
  }
}

:is(.public-home, .public-employer) .instagram__intro > p {
  margin-top: 18px;
  max-width: 52ch;
  color: var(--gc-ink-muted);
  font-size: 1.0625rem;
}

:is(.public-home, .public-employer) .instagram__profil {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 14px 14px;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
  color: var(--gc-ink);
}

:is(.public-home, .public-employer) .instagram__profil:hover {
  border-color: var(--gc-action);
}

:is(.public-home, .public-employer) .instagram__avatar {
  display: grid;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  padding: 8px;
  border-radius: var(--gc-radius-pill);
  background: var(--gc-canvas-2);
}

:is(.public-home, .public-employer) .instagram__avatar img {
  width: 100%;
  height: auto;
}

:is(.public-home, .public-employer) .instagram__profil strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
}

:is(.public-home, .public-employer) .instagram__profil small {
  display: block;
  margin-top: 2px;
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
}

:is(.public-home, .public-employer) .instagram__feedzeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  max-width: none;
  margin: 0 0 16px;
  color: var(--gc-ink-muted);
  font-size: 0.875rem;
}

:is(.public-home, .public-employer) .instagram__feedzeile span:first-child {
  color: var(--gc-ink);
  font-weight: 600;
}

/* ---- Die Spur mit den vier Beiträgen -------------------------------- */

/* Flexbox statt eines Rasters mit grid-auto-flow: column. Gemessen am
   17.09.2026 bei 390 px: mit dem Raster meldete
   document.documentElement.scrollWidth 804 statt 390, obwohl die Spur
   sauber klemmte und die Seite nicht waagerecht lief. Chrome rechnet die
   Eigenbreite eines solchen Rasters in die Wurzel hinein. Mit Flexbox
   (derselbe Baustein wie .spur in assets/app.css) stimmt die Zahl. */
:is(.public-home, .public-employer) .instagram__spur {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 4px 0 12px;
  list-style: none;
  overflow-x: auto;
  /* contain: paint gehört zur Messbarkeit, nicht zur Optik. Ohne diese
     Zeile meldete document.documentElement.scrollWidth bei 390 px 922
     statt 390, obwohl die Spur sauber klemmte und die Seite nicht
     waagerecht lief (geprüft mit window.scrollTo(5000, 0), scrollX blieb
     0). Chrome rechnet die Eigenbreite der Karten sonst in die Wurzel
     hinein, und genau diese Zahl lesen die Überlaufproben der Prüfer. */
  contain: paint;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

:is(.public-home, .public-employer) .instagram__spur::-webkit-scrollbar {
  display: none;
}

:is(.public-home, .public-employer) .instabeitrag {
  flex: 0 0 min(78%, 320px);
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

:is(.public-home, .public-employer) .instabeitrag > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--gc-radius-card);
  background: var(--gc-surface);
  color: var(--gc-ink);
  box-shadow: var(--gc-shadow-card);
  transition: transform var(--t-basis) var(--ease);
}

:is(.public-home, .public-employer) .instabeitrag__bild {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--gc-canvas-3);
}

:is(.public-home, .public-employer) .instabeitrag__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(.public-home, .public-employer) .instabeitrag__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
}

:is(.public-home, .public-employer) .instabeitrag__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  color: var(--gc-ink-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

:is(.public-home, .public-employer) .instabeitrag__titel {
  display: block;
  font-family: var(--gc-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

:is(.public-home, .public-employer) .instabeitrag__mehr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--gc-line);
  color: var(--gc-link);
  font-size: 0.875rem;
  font-weight: 500;
}

:is(.public-home, .public-employer) .instabeitrag__mehr svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform var(--t-basis) var(--ease);
}

:is(.public-home, .public-employer) .instabeitrag > a:hover .instabeitrag__mehr svg {
  transform: translate(3px, -3px);
}

/* ---- Fußzeile mit Profil-Link und Blättern -------------------------- */

:is(.public-home, .public-employer) .instagram__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(18px, 2.5vw, 28px);
}

.public-home .instagram__balken {
  margin-top: 0;
}

.public-home .instagram__balken[hidden] {
  display: none;
}

:is(.public-home, .public-employer) .instagram__folgen {
  gap: 10px;
}

:is(.public-home, .public-employer) .instagram__folgen svg {
  width: 18px;
  height: 18px;
}

:is(.public-home, .public-employer) .instagram__steuerung {
  display: flex;
  align-items: center;
  gap: 10px;
}

:is(.public-home, .public-employer) .instagram__stand {
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

:is(.public-home, .public-employer) .instagram__pfeil {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--gc-line-ui);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-surface);
  color: var(--gc-ink);
  cursor: pointer;
}

:is(.public-home, .public-employer) .instagram__pfeil:hover:not(:disabled) {
  border-color: var(--gc-action);
  color: var(--gc-green-deep);
}

:is(.public-home, .public-employer) .instagram__pfeil:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

:is(.public-home, .public-employer) .instagram__pfeil svg {
  width: 19px;
  height: 19px;
}

@media (hover: hover) and (pointer: fine) {
  :is(.public-home, .public-employer) .instabeitrag > a:hover {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.public-home, .public-employer) .instabeitrag > a:hover {
    transform: none;
  }
}

@media (min-width: 640px) {
  :is(.public-home, .public-employer) .instabeitrag {
    flex-basis: min(42%, 320px);
  }
}

@media (min-width: 900px) {
  :is(.public-home, .public-employer) .instagram__kopf {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }

  :is(.public-home, .public-employer) .instagram__intro {
    flex: 1 1 auto;
  }

  :is(.public-home, .public-employer) .instagram__profil {
    flex: 0 0 auto;
  }

  :is(.public-home, .public-employer) .instagram__spur {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
  }

  :is(.public-home, .public-employer) .instabeitrag {
    flex: none;
  }
}

/* [hidden] gegen das eigene display der Steuerung, siehe public-home.css. */
:is(.public-home, .public-employer) .instagram__steuerung[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .public-home .instabeitrag {
    flex-basis: 87%;
  }

  :is(.public-home, .public-employer) .instagram__kopf {
    gap: 17px;
    margin-bottom: 20px;
  }

  :is(.public-home, .public-employer) .instagram__intro h2 {
    margin-top: 10px;
    font-size: 1.5rem;
  }

  :is(.public-home, .public-employer) .instagram__intro > p {
    margin-top: 10px;
    font-size: 0.8125rem;
    line-height: 1.7;
  }

  :is(.public-home, .public-employer) .instagram__profil {
    padding: 10px 14px 10px 10px;
  }

  :is(.public-home, .public-employer) .instagram__avatar {
    width: 44px;
    height: 44px;
  }

  :is(.public-home, .public-employer) .instagram__feedzeile {
    margin-bottom: 10px;
    font-size: 0.75rem;
  }

  :is(.public-home, .public-employer) .instagram__feedzeile span:last-child,
  :is(.public-home, .public-employer) .instagram__folgen {
    display: none;
  }

  :is(.public-home, .public-employer) .instagram__spur {
    gap: 13px;
  }

  :is(.public-home, .public-employer) .instabeitrag__text {
    gap: 10px;
    padding: 15px;
  }

  .public-home .instagram__spur {
    padding-bottom: 20px;
  }

  .public-home .instabeitrag > a {
    box-shadow: none;
  }

  .public-home .instagram__steuerung {
    display: none;
  }

  :is(.public-home, .public-employer) .instagram__fuss {
    margin-top: 6px;
  }

  .public-home .instagram__fuss {
    margin-top: 14px;
  }
}

/* WEB-040: Arbeitgeber nutzt auf Mobil dieselbe eindeutige Pfeil-Status-Pfeil-Reihe. */
@media (max-width: 767px) {
  .public-employer .instagram__steuerung { width: 100%; display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; }
  .public-employer .instagram__steuerung > .instagram__pfeil:first-of-type { grid-column: 1; grid-row: 1; }
  .public-employer .instagram__steuerung > .instagram__stand { grid-column: 2; grid-row: 1; justify-self: center; }
  .public-employer .instagram__steuerung > .instagram__pfeil:last-child { grid-column: 3; grid-row: 1; justify-self: end; }
}