/*
 * Energas Stellenangebote – Frontend.
 *
 * Alle Masse stammen aus der Designvorlage der Agentur
 * (Zeichenflaeche 1512 px). Die Groessen skalieren ueber clamp() mit,
 * damit nichts auf schmalen Bildschirmen bricht; bei 1512 px
 * Fensterbreite treffen sie die Vorlage genau.
 */

/* ============================================================
   1. Stellenliste
      Optisch wie der Akkordeon-Block der Startseite (Wunsch Kai,
      15.09.2026), aber ohne Akkordeon-Verhalten:
      Trennlinie 1 px schwarz, Zeile 24 px oben und unten,
      Titel mit der Kit-Typografie des Akkordeon-Titels (711c304:
      Poppins 500, 30/40 px, Tablet 28/38, Handy 24/34),
      Pfeil in Titelgroesse 30 px vor dem rechten Rand wie das Plus.
   ============================================================ */

.estl-liste {
    border-top: 1px solid #000;
    color: #000;
}

.estl-liste__eintrag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 24px 0;
    border-bottom: 1px solid #000;

    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

/* Hover wie die Textlinks der Website: die Farbe bleibt, der Titel wird
   unterstrichen, der Pfeil rueckt nach rechts, die Trennlinie bleibt schwarz,
   nichts wird blasser (Wunsch Kai, 15.09.2026; nie gruen seit 29.09.2026) */
.estl-liste .estl-liste__eintrag:hover,
.estl-liste .estl-liste__eintrag:focus-visible {
    color: inherit;
    text-decoration: none;
}

.estl-liste .estl-liste__eintrag:hover .estl-liste__titel,
.estl-liste .estl-liste__eintrag:focus-visible .estl-liste__titel {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.estl-liste .estl-liste__eintrag:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
}

.estl-liste__text { display: block; min-width: 0; }

.estl-liste__titel {
    display: block;
    font-family: var(--e-global-typography-711c304-font-family, "Poppins"), sans-serif;
    font-size: var(--e-global-typography-711c304-font-size, 30px);
    font-weight: var(--e-global-typography-711c304-font-weight, 500);
    line-height: var(--e-global-typography-711c304-line-height, 40px);
    letter-spacing: normal;
}

.estl-liste__ort {
    display: block;
    margin-top: 4px;
    font-size: clamp(13px, 1.06vw, 16px);
    font-weight: 400;
    opacity: .65;
}

.estl-liste__pfeil {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--e-global-typography-711c304-font-size, 30px);
    margin-right: 30px;
    font-size: var(--e-global-typography-711c304-font-size, 30px);
    line-height: 1;
    transition: transform .2s ease;
}

.estl-liste__eintrag:hover .estl-liste__pfeil { transform: translateX(6px); }

/* Pfeil wie in den Knoepfen der Website: Zeichen arrow-right-line der
   JKit-Iconschrift in Staerke 800 (so setzt das Kind-Theme die Knopf-Pfeile),
   in Titelgroesse; die Farbe folgt dem Text */
.estl-liste__pfeil i {
    display: block;
    font-weight: 800;
    line-height: 1;
}

.estl-leer { margin: 0; padding: 24px 0; opacity: .7; }

/* ============================================================
   2. Textkoerper der Stellenseite
      Design: Einleitung 25 pt, Abschnitte und Listen 20 pt,
      Listenpunkte 30 pt weiter eingerueckt (x=511 -> x=541)
   ============================================================ */

.single-stelle .elementor-widget-theme-post-content {
    font-size: clamp(17px, 1.65vw, 25px);
    line-height: 1.4;
}

/* Einleitungsabsatz gross, alles Weitere kleiner */
.single-stelle .elementor-widget-theme-post-content p {
    font-size: clamp(16px, 1.32vw, 20px);
    line-height: 1.3;
    margin: 0 0 1.1em;
}

.single-stelle .elementor-widget-theme-post-content > .elementor-widget-container > p:first-child,
.single-stelle .elementor-widget-theme-post-content > p:first-child {
    font-size: clamp(17px, 1.65vw, 25px);
    line-height: 1.4;
    margin-bottom: 1.5em;
}

.single-stelle .elementor-widget-theme-post-content h1,
.single-stelle .elementor-widget-theme-post-content h2,
.single-stelle .elementor-widget-theme-post-content h3,
.single-stelle .elementor-widget-theme-post-content h4 {
    font-size: clamp(16px, 1.32vw, 20px);
    line-height: 1.4;
    font-weight: 600;
    margin: 2em 0 .5em;
}

.single-stelle .elementor-widget-theme-post-content ul,
.single-stelle .elementor-widget-theme-post-content ol {
    margin: 0 0 1.4em;
    padding-left: clamp(20px, 1.98vw, 30px);
}

.single-stelle .elementor-widget-theme-post-content li {
    font-size: clamp(16px, 1.32vw, 20px);
    line-height: 1.3;
    margin-bottom: .3em;
}

/* Galerien am Ende der Anzeige nicht ueberdimensionieren */
.single-stelle .elementor-widget-theme-post-content .gallery {
    margin-top: 2em;
}

/* ============================================================
   3. Ruecksicht auf reduzierte Bewegung
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .estl-liste__eintrag,
    .estl-liste__pfeil { transition: none; }
    .estl-liste__eintrag:hover .estl-liste__pfeil { transform: none; }
}

@media (max-width: 767px) {
    .estl-liste__eintrag { gap: 16px; }
}

/* ============================================================
   4. Bild im Kopfbereich der Stellenseite
      Design: 1046 x 602 (Verhaeltnis 1,738). Die Beitragsbilder
      haben unterschiedliche Seitenverhaeltnisse – deshalb wird
      der Ausschnitt fest vorgegeben, damit jede Stelle gleich
      aussieht.
   ============================================================ */

.single-stelle .elementor-element-3e8d0d2 img {
    aspect-ratio: 1046 / 602;
    object-fit: cover;
    display: block;
    /* rechtsbuendig wie in der Vorlage (Bild endet am rechten Rand) */
    margin-left: auto;
    margin-right: 0;
}

.single-stelle .elementor-element-3e8d0d2 .elementor-widget-container,
.single-stelle .elementor-element-3e8d0d2 figure {
    text-align: right;
}

@supports not (aspect-ratio: 1 / 1) {
    .single-stelle .elementor-element-3e8d0d2 img {
        max-height: 602px;
    }
}

/* ============================================================
   5. PDF-Download auf der Stellenseite
      Gleicher Stil wie die Knoepfe im Bewerbungsformular:
      Pille 50 px hoch, 18 px Schrift, 1 px Rahmen, Symbol rechts.
   ============================================================ */

/* Spezifitaet erhoeht: eine Theme-Regel fuer Links im Inhalt
   ueberschreibt sonst die Schriftstaerke. */
.single-stelle .estl-pdf,
.single-stelle .estl-pdf span {
    font-weight: 500;
    /* #111 wie die Knoepfe im Formular, nicht reines Schwarz. */
    color: #111;
}

.estl-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    height: 50px;
    padding: 0 20px;
    border: 2px solid #111;
    border-radius: 999px;

    color: #111;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;

    transition: background-color .2s ease, color .2s ease;
}

.estl-pdf:hover,
.estl-pdf:focus-visible {
    background: #111;
    color: #fff;
    text-decoration: none;
}

/* Beim Ueberfahren fuellt sich die Pille schwarz und der Text wird weiss –
   genau wie beim Absende-Knopf. Ohne erhoehte Spezifitaet gewinnt hier die
   Theme-Regel fuer Links im Inhalt und der Text bliebe gruen. */
.single-stelle a.estl-pdf:hover,
.single-stelle a.estl-pdf:focus-visible,
.single-stelle a.estl-pdf:hover span,
.single-stelle a.estl-pdf:focus-visible span {
    color: #fff;
}

.estl-pdf:focus-visible {
    outline: 2px solid #111;
    outline-offset: 3px;
}

.estl-pdf__symbol {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.estl-pdf__symbol svg {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .estl-pdf { transition: none; }
}

/* ============================================================
   6. Textspalte der Stellenseite
      Design: die Spalte beginnt bei x=511 von 1512, der Inhalts-
      bereich bei x=68 – der Einzug betraegt also 443 von 1376
      = 32,2 %.

      Wichtig: Die Prozentangabe muss sich auf die 1376 breite
      Inhaltsbox beziehen. Auf .e-con-inner gesetzt rechnet sie
      gegen den aeusseren, bildschirmbreiten Container und faellt
      dadurch zu gross aus. Deshalb sitzt sie auf den Widgets
      INNERHALB der Box.

      GEKOPPELT mit der Breite des Kopfbildes (Widget #3e8d0d2
      in Vorlage 12033): Das Bild ist rechtsbuendig und muss
      genau so breit sein wie der Text darunter. Seine Breite
      ist deshalb immer der Rest zum Einzug:
          Desktop  32,2 % Einzug  ->  Bild 67,8 %
          Tablet   12 %   Einzug  ->  Bild 88 %
          Handy     0 %   Einzug  ->  Bild 100 %
      Wird einer der Werte geaendert, muss der andere mit.
      Voraussetzung ist ausserdem, dass alle Abschnitte der
      Seite dieselbe Inhaltsbox benutzen (gleiche Kit-Breite,
      gleicher 15-px-Seitenrand) – sonst laufen die Kanten
      wieder auseinander.
   ============================================================ */

.single-stelle .elementor-element-886b67e > .e-con-inner > .elementor-widget,
.single-stelle .elementor-element-d5f1e2e > .e-con-inner > .elementor-widget {
    padding-left: 32.2%;
}

@media (max-width: 1024px) {
    .single-stelle .elementor-element-886b67e > .e-con-inner > .elementor-widget,
    .single-stelle .elementor-element-d5f1e2e > .e-con-inner > .elementor-widget {
        padding-left: 12%;
    }
}

@media (max-width: 767px) {
    .single-stelle .elementor-element-886b67e > .e-con-inner > .elementor-widget,
    .single-stelle .elementor-element-d5f1e2e > .e-con-inner > .elementor-widget {
        padding-left: 0;
    }
}