/* ==================================================================
   #lage · Konzept D2 "dunkel" (29.09.2026)
   Kopf (Kicker + H2) zentriert wie die anderen Sektionskoepfe.
   Zwei dunkle Befund-Karten: Problem dunkel, Loesung (weisse Bausteine-
   Karten darunter) hell. Oben Aussage + Folge (feiner Pfeil = Ursache ->
   Wirkung), am Kartenfuss eine kleine Google-Suche, die der untere
   Kartenrand sauber abschneidet — wie die Grafiken am Fuss der Bausteine.
   Grund der Grafik = Kartenfarbe (Grafikluft folgt der Karte).
   Abgebildete Google-Oberflaechen behalten ihre natuerlichen Radien,
   die Karte selbst hat 2 px. Keine Schatten an Seitenbauteilen.
   Klassen mit Praefix lg-, alles unter #lage.
   ================================================================== */

/* ---------- Sektion: unten kein eigenes Polster, #bausteine bringt 150/96/60 mit ---------- */
html #lage.sec.pm{padding-bottom:0}
#lage .pm-head{margin-bottom:0}

/* ---------- Karten ---------- */
#lage .lg-karten{list-style:none;margin:48px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

#lage .lg-k{
  --lg-x:34px;                                  /* Innenabstand links/rechts, Text und Grafik auf einer Achse */
  position:relative;margin:0;min-width:0;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:2px;
  background:linear-gradient(180deg,#0E2B63 0%,#0B2557 38%,#081D47 100%);
}
/* Haarlinie innen, wie die hellen Linien auf dunklem Grund (--wline-soft) */
#lage .lg-k::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}

#lage .lg-k__txt{flex:1 0 auto;padding:30px var(--lg-x) 24px}
#lage .lg-k__h{margin:0;font:500 22px/1.28 'Inter Tight',system-ui,sans-serif;
  letter-spacing:-.018em;color:#fff;text-wrap:pretty}
#lage .lg-k__f{position:relative;margin:12px 0 0;padding-left:26px;
  font:400 16px/1.55 'Inter Tight',system-ui,sans-serif;color:rgba(255,255,255,.74);text-wrap:pretty}
/* Pfeil: Ursache -> Wirkung. Hangend eingerueckt, damit die zweite Zeile buendig steht. */
#lage .lg-pfeil{position:absolute;left:0;top:calc(.775em - 8px);width:16px;height:16px;color:#4F86F7}

/* ---------- Grafik am Kartenfuss ---------- */
#lage .lg-bild{
  position:relative;flex:none;height:166px;overflow:hidden;
  padding:0 var(--lg-x);
  font-family:Roboto,Arial,system-ui,sans-serif;color:#202124;
}
/* Technisches Raster im Grafikgrund, nach oben ausgeblendet (wie das Raster der Bausteine-Grafiken, hier hell auf dunkel) */
#lage .lg-bild::before{content:"";position:absolute;inset:-1px 0 0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:34px 34px;background-position:-1px 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 70%);
          mask-image:linear-gradient(180deg,transparent 0,#000 70%)}
#lage .lg-bild svg{display:block;flex:none}

#lage .lg-such,
#lage .lg-karte{position:relative;width:100%;max-width:430px;box-sizing:border-box}

#lage .lg-such{
  z-index:2;display:flex;align-items:center;gap:11px;
  height:36px;padding:0 14px;background:#fff;border-radius:18px;
}
#lage .lg-such__g{width:17px;height:17px}
#lage .lg-such__q{flex:1;min-width:0;font-size:13.5px;color:#202124;white-space:nowrap;overflow:hidden}
#lage .lg-such__l{width:15px;height:15px;fill:#5f6368}

#lage .lg-karte{z-index:1;margin-top:8px;background:#fff;border-radius:6px 6px 0 0}

/* Logo-Zeichen: Lehenbauer in beiden Suchen gleich */
#lage .lg-logo{
  flex:none;width:28px;height:28px;border-radius:6px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  background:#E8EAED;color:#3C4043;font:500 13px/1 Roboto,Arial,sans-serif;
}
#lage .lg-logo--leh{background:#2F5F6B;color:#fff;font-weight:700;font-size:15px}
#lage .lg-logo--fav{border-radius:50%;background:#fff;border:1px solid #DADCE0;color:#5F6368;font-size:12px}

/* Google Jobs */
#lage .lg-jobs__kopf{display:flex;align-items:center;justify-content:space-between;
  padding:7px 14px 6px;font-size:13px;font-weight:500;line-height:20px;color:#202124}
#lage .lg-chip{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;
  background:#E8F0FE;color:#1a73e8;font-size:11px;font-weight:400;margin:-3px 0}
#lage .lg-job{display:flex;gap:12px;align-items:flex-start;padding:8px 14px;border-top:1px solid #EBECEE}
#lage .lg-job__txt{min-width:0;flex:1}
#lage .lg-job__t{font-size:13.5px;font-weight:500;line-height:17px;color:#202124}
#lage .lg-job__f{font-size:12px;line-height:16px;color:#3C4043}
#lage .lg-job__o{font-size:11.5px;line-height:15px;color:#70757a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Suchergebnisse */
#lage .lg-serp{padding:11px 14px 0}
#lage .lg-r + .lg-r{margin-top:12px}
#lage .lg-r__kopf{display:flex;align-items:center;gap:10px}
#lage .lg-r__id{min-width:0;flex:1}
#lage .lg-r__n{font-size:12px;line-height:16px;color:#202124}
#lage .lg-r__u{font-size:11px;line-height:15px;color:#4d5156;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lage .lg-r__t{margin-top:5px;font-size:14.5px;line-height:19px;color:#1a0dab}
#lage .lg-r__s{margin-top:2px;font-size:12px;line-height:17px;color:#4d5156;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Schlusszeile ---------- */
#lage .lg-schluss{margin:30px 0 0;text-align:center;
  font:400 17px/1.55 'Inter Tight',system-ui,sans-serif;color:var(--ink-2);text-wrap:pretty}
#lage .lg-schluss strong{font-weight:500;color:var(--ink)}
@media (max-width:1199px){
  #lage .lg-schluss strong{display:block}
}

/* ---------- 1000-1229: schmale Karten nebeneinander ---------- */
@media (min-width:1000px) and (max-width:1229px){
  #lage .lg-k{--lg-x:26px}
  #lage .lg-k__txt{padding-top:26px}
  #lage .lg-k__h{font-size:20px}
  #lage .lg-k__f{font-size:15.5px}
}

/* ---------- unter 1000 px: untereinander ---------- */
@media (max-width:999px){
  #lage .lg-karten{grid-template-columns:minmax(0,1fr);gap:14px;max-width:720px;margin-left:auto;margin-right:auto}
  #lage .lg-schluss{text-align:left;max-width:720px;margin-left:auto;margin-right:auto}
}

/* ---------- Handy ---------- */
@media (max-width:600px){
  #lage .lg-karten{margin-top:32px;gap:12px}
  #lage .lg-k{--lg-x:20px}
  #lage .lg-k__txt{padding:24px var(--lg-x) 20px}
  #lage .lg-k__h{font-size:19px;line-height:1.3;letter-spacing:-.01em}
  #lage .lg-k__f{margin-top:9px;padding-left:24px;font-size:15.5px;line-height:1.55}
  #lage .lg-bild{height:170px}
  #lage .lg-such,#lage .lg-karte{max-width:none}
  #lage .lg-such__q{font-size:13px}
  #lage .lg-schluss{margin-top:24px;font-size:15.5px;line-height:1.6}
}

/* ---------- Farbvariante Graphit (29.09.2026): neutral dunkel statt Navy ---------- */
#lage .lg-k{background:linear-gradient(180deg,#2A2F36 0%,#23272D 40%,#1C1F24 100%)}
#lage .lg-k::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#lage .lg-pfeil{color:#6E9BFF}

/* ---------- Gewerkneutrale Grafik (29.09.2026, Melvin: „hier nicht so spezifisch“) ----------
   Das Gewerk im Suchfeld ist ein grauer Balken, jeder Leser setzt seins ein.
   Treffer als ruhige Flaechen in den Farben echter Google-Treffer (Titel dunkel,
   Link blau, Rest hell), damit es als Trefferliste liest und nicht als Ladezustand.
   Der erste Treffer traegt in beiden Suchen dasselbe Zeichen. */
#lage .lg-bal{display:block;height:8px;border-radius:4px;background:#C9CDD2}
#lage .lg-bal + .lg-bal{margin-top:6px}
#lage .lg-such__q{display:flex;align-items:center}
#lage .lg-bal--q{display:inline-block;flex:none;width:78px;height:10px;margin-right:7px;background:#BDC1C6;border-radius:5px}
#lage .lg-bal--t{height:10px;background:#3C4043}
#lage .lg-bal--f{background:#80868B}
#lage .lg-bal--o{height:7px;background:#D2D5D9}
#lage .lg-bal--n{height:8px;background:#5F6368}
#lage .lg-bal--u{height:7px;background:#D2D5D9}
#lage .lg-bal--link{height:11px;margin-top:10px;background:#1a0dab;opacity:.82}
#lage .lg-bal--s{height:7px;margin-top:7px;background:#D2D5D9}
#lage .lg-r__id .lg-bal + .lg-bal{margin-top:5px}
#lage .lg-job{padding:10px 14px 11px;align-items:center}
#lage .lg-logo--a{background:#2F5F6B}
#lage .lg-logo--b{background:#E3E6EA}
#lage .lg-logo--fav{background:#fff}
#lage .lg-bild{height:152px}
@media (max-width:600px){#lage .lg-bild{height:150px}}
/* Balken leiser: Link-Blau und Titel nicht kraeftiger als die Aussage ueber der Grafik */
#lage .lg-bal--t{height:9px;background:#5F6368}
#lage .lg-bal--link{height:9px;background:#8AB4F8;opacity:1}
#lage .lg-bal--n{background:#80868B}

/* Pfeil in Stahl/Silber statt Blau (Melvin 29.09.2026: auf Graphit wirkt Blau verspielt, Silber unaufgeregt und erwachsen) */
#lage .lg-pfeil{color:#AEB6C2}

/* ---------- Headline (29.09.2026) ----------
   Desktop einzeilig: eine Aussage = eine Form. Die Begrenzung auf 1000 px brach sie
   mitten in „einen / passenden Betrieb". Wird es eng, bricht sie nur an Wortgruppen
   (lg-wg): zwei Zeilen „Immer mehr Leute suchen / einen passenden Betrieb bei Google.",
   am Handy drei Zeilen, „bei Google." am Zeilenanfang. Bewusst ohne Blau (Melvin 29.09.2026):
   Blau auf „Google" las sich wie Link/Werbung, die Headline bleibt eine ruhige Feststellung.
   Abstand oben kleiner: Die Trennung zum dunklen Hero leistet der Farbwechsel. Er bleibt
   groesser als der Abstand zu den Karten, damit die Headline zu den Karten gehoert. */
#lage .pm-head{max-width:none}
#lage .pm-h2{max-width:none;text-wrap:balance}
#lage .lg-wg{display:inline-block}
html #lage.sec.pm{padding-top:100px}
@media (max-width:900px){html #lage.sec.pm{padding-top:72px}}
@media (max-width:600px){html #lage.sec.pm{padding-top:60px}}

/* 29.09.2026 (Melvin): Grafik unten leicht ausfaden + leichter Schatten aussen auf den Karten */
#lage .lg-bild{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 44px),rgba(0,0,0,.25) 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 44px),rgba(0,0,0,.25) 100%)}
#lage .lg-k{box-shadow:0 1px 2px rgba(10,23,48,.06),0 14px 30px -16px rgba(10,23,48,.32)}

/* 29.09.2026 (4819): Farbtrennung Pain / Loesung. #lage bleibt grau, #bausteine wird weiss.
   #lage braucht dafuer wieder eigenen Abstand nach unten. */
html #lage.sec.pm{padding-bottom:120px}
@media (max-width:900px){html #lage.sec.pm{padding-bottom:88px}}
@media (max-width:600px){html #lage.sec.pm{padding-bottom:60px}}

/* ==================================================================
   01.10.2026 (Version o): Pain-Karten neu.
   Copy kurz (Etikett + Aussage + Folge). Die zwei Karten unterscheiden sich jetzt auf den
   ersten Blick: Etikett oben, links eine leere gestrichelte Stelle in der Jobliste,
   rechts Rangnummern in der Trefferliste. Zwei Hintergruende zur Wahl:
   .lg--hell  weisse Karten auf dem grauen Grund (Spiegel zu den grauen Bausteine-Karten darunter)
   .lg--navy  durchgehend dunkle Markenfarbe wie der Hero statt Graphit
   ================================================================== */

#lage .lg-k__tag{display:block;margin:0 0 12px;font:600 12px/1 'Inter Tight',system-ui,sans-serif;
  letter-spacing:.18em;text-transform:uppercase}
#lage .lg-k__h{font-size:24px;line-height:1.22;letter-spacing:-.02em}
#lage .lg-k__f{margin-top:10px}
@media (max-width:1229px){#lage .lg-k__h{font-size:21px}}
@media (max-width:600px){#lage .lg-k__h{font-size:20px}}

/* leere Stelle in der Jobliste */
#lage .lg-job--leer{margin:7px 8px 5px;padding:8px 6px;border:1px dashed #BDC1C6;border-radius:4px;background:transparent}
#lage .lg-job--leer + .lg-job{border-top:0}
#lage .lg-logo--leer{background:transparent;border:1px dashed #BDC1C6;border-radius:6px}
#lage .lg-job--leer .lg-bal{background:#E3E6EA}

/* Rangnummern in der Trefferliste */
#lage .lg-serp .lg-r{position:relative;padding-left:24px}
#lage .lg-nr{position:absolute;left:0;top:5px;width:16px;text-align:center;
  font:500 13px/18px Roboto,Arial,sans-serif;color:#80868B}

#lage .lg-bild{height:214px}
@media (max-width:600px){#lage .lg-bild{height:200px}}

/* ---------- HELL ---------- */
html #lage.lg--hell .lg-k{background:#fff;box-shadow:0 1px 2px rgba(10,23,48,.05),0 14px 30px -18px rgba(10,23,48,.22)}
html #lage.lg--hell .lg-k::after{box-shadow:inset 0 0 0 1px rgba(10,23,48,.12)}
html #lage.lg--hell .lg-k__tag{color:#185BED}
html #lage.lg--hell .lg-k__h{color:#0A1730;font-weight:500}
html #lage.lg--hell .lg-k__f{color:#44506A}
html #lage.lg--hell .lg-pfeil{color:#8B94A8}
html #lage.lg--hell .lg-bild{background:#F2F3F5;padding-top:16px;box-shadow:inset 0 1px 0 rgba(10,23,48,.08)}
html #lage.lg--hell .lg-bild::before{background:
    linear-gradient(rgba(10,23,48,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,23,48,.045) 1px,transparent 1px);
  background-size:34px 34px;background-position:-1px 0;-webkit-mask-image:none;mask-image:none}
html #lage.lg--hell .lg-bild{-webkit-mask-image:none;mask-image:none}
html #lage.lg--hell .lg-such,
html #lage.lg--hell .lg-karte{box-shadow:0 0 0 1px rgba(10,23,48,.07)}

/* ---------- NAVY ---------- */
html #lage.lg--navy.sec.pm{background:linear-gradient(180deg,#071A3E 0%,#0B2557 100%)}
html #lage.lg--navy .pm-h2{color:#fff}
html #lage.lg--navy .lg-k{background:rgba(255,255,255,.045);box-shadow:none}
html #lage.lg--navy .lg-k::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
html #lage.lg--navy .lg-k__tag{color:#AEB6C2}
html #lage.lg--navy .lg-k__h{color:#fff}
html #lage.lg--navy .lg-k__f{color:rgba(255,255,255,.74)}
html #lage.lg--navy .lg-schluss{color:rgba(255,255,255,.72)}
html #lage.lg--navy .lg-schluss strong{color:#fff}