/*
Theme Name: tegos 26
Theme URI: https://tegos-systeme.de
Description: Child-Theme für den tegos-Relaunch 2026 (Figma "Tegos_26"). Hostet Geologica lokal (DSGVO) und trägt das projektspezifische CSS.
Author: DOOZY digital
Template: hello-elementor
Version: 1.0.0
Text Domain: tegos-26
*/

/* ============ Geologica – lokal gehostet (kein Google-CDN) ============ */
@font-face {
  font-family: 'Geologica';
  src: url('./fonts/geologica-v5-latin_latin-ext-100.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geologica';
  src: url('./fonts/geologica-v5-latin_latin-ext-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geologica';
  src: url('./fonts/geologica-v5-latin_latin-ext-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============ CD-Basis ============ */
:root {
  --tegos-white:   #FFFFFF;
  --tegos-neutral: #E3E3E3;
  --tegos-black:   #2E2E2E;
  --tegos-blue:    #475DA9;
}

/* Kein Element darf breiter werden als der Viewport (Gate P6) */
.e-con,
.elementor-widget { max-width: 100%; }

html { overflow-x: hidden; }

/* ============================================================
   HEADER
   Figma: Navbar 84 px, rgba(46,46,46,0.4) mit Glass-Effekt,
   liegt ueber dem Hero (Hero beginnt bei derselben y-Position).
   ============================================================ */

.tg-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.18);
}

/* Der Hero liegt bewusst unter der Leiste — kein Offset am Body. */

.tg-head__inner > .elementor-widget { margin: 0; }

/* Menue-Leiste soll nicht den ganzen Rest schlucken */
.tg-head__nav { flex: 0 1 auto; }

/* Kein Unterstrich-Pointer, wie im Design */
.tg-head .elementor-nav-menu--main .elementor-item::after,
.tg-head .elementor-nav-menu--main .elementor-item::before { content: none; }

/* ACHTUNG: `.elementor-nav-menu--dropdown` bezeichnet ZWEI verschiedene Dinge —
   die Untermenue-<ul> innerhalb eines Menuepunkts UND den <nav>-Container des
   Mobile-Panels. Fuer das Panel immer zusammen mit `.elementor-nav-menu__container`
   adressieren, sonst trifft die Regel das Desktop-Untermenue. */

/* Desktop-Untermenue: gleiche Glas-Optik wie die Leiste */
.tg-head .elementor-nav-menu--main ul.elementor-nav-menu--dropdown {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------- Tablet und Mobile (Pflicht-Gates P1, P2, P6) ---------- */
@media (max-width: 1024px) {

  /* Logo links, Burger rechts, beide auf einer Hoehe, kein Umbruch */
  .tg-head__inner {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Der Kontakt-Button steht im Design auf Tablet/Mobile nicht in der Leiste;
     er ist ueber das Menue erreichbar. */
  .tg-head__cta { display: none !important; }

  .tg-head__nav { flex: 0 0 auto; margin-left: auto; }

  /* Elementor setzt auf jedes Widget `position: relative`. Der Nav-Wrapper ist
     auf Mobile nur so breit wie der Burger (36 px) und wuerde damit zum
     Bezugsrahmen des absolut positionierten Panels. Neutralisieren, damit sich
     das Panel an der Header-Zeile ausrichtet und die volle Breite bekommt. */
  .tg-head .elementor-widget-nav-menu { position: static !important; }

  /* Auch die innere Zeile neutralisieren: sie ist 4 px niedriger als der Header,
     das Panel wuerde sonst 4 px in die Leiste hineinragen. Bezugsrahmen wird
     damit `.tg-head` selbst (position: fixed). */
  .tg-head__inner { position: static !important; }

  /* Menue als vollbreites, DECKENDES Panel direkt unter dem Header.
     Absolut zum fixierten .tg-head positioniert (top:100%) — dadurch sitzt es
     immer exakt unter der Leiste, egal ob 84 px oder 64 px hoch und ob die
     WP-Adminleiste den Header nach unten schiebt. Kein Nachrechnen noetig. */
  .tg-head .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    /* Panel-Farbe kommt aus der Widget-Einstellung (Backend-Tab "Dropdown"),
       damit sie im Editor aenderbar bleibt — hier bewusst NICHT gesetzt. */
  }

  .tg-head .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item {
    font-size: 18px;
    padding: 16px 24px !important;
  }

  /* Untermenues im Panel fliessen mit, statt zu schweben */
  .tg-head .elementor-nav-menu__container.elementor-nav-menu--dropdown ul.elementor-nav-menu--dropdown {
    position: static !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: none;
  }

  .tg-head .elementor-nav-menu__container.elementor-nav-menu--dropdown ul .elementor-item {
    padding-left: 44px !important;
    font-size: 16px;
  }
}

/* ============================================================
   FOOTER
   ============================================================ */

/* Linkreihe gleichmaessig verteilt wie im Design (space-between) */
.tg-foot__links .elementor-nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 40px;
  width: 100%;
}

.tg-foot__legal .elementor-nav-menu { display: flex; gap: 24px; }

.tg-foot .elementor-nav-menu .elementor-item::after,
.tg-foot .elementor-nav-menu .elementor-item::before { content: none; }

.tg-foot__partner img { filter: none; }

/* Pflicht P3: im Footer nie ein Burger, Links bleiben immer sichtbar.
   Elementor rendert den Dropdown-Container auch bei dropdown=none mit — er
   wird hier vollstaendig entfernt, das Hauptmenue bleibt sichtbar. */
.tg-foot .elementor-menu-toggle { display: none !important; }
.tg-foot .elementor-nav-menu__container.elementor-nav-menu--dropdown { display: none !important; }
.tg-foot .elementor-nav-menu--main { display: flex !important; }

@media (max-width: 1024px) {
  .tg-foot__links .elementor-nav-menu { justify-content: flex-start; gap: 8px 28px; }
}

/* Fixed-Header darf nicht unter der WP-Adminleiste verschwinden (nur eingeloggt). */
body.admin-bar .tg-head { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .tg-head { top: 46px; }
}

/* ============================================================
   STARTSEITE
   Nur strukturelle Regeln (Positionierung, Bleed, Rotation,
   Auf-/Zuklappen). Farben, Abstaende und Schriftgroessen kommen
   aus den Widget-Einstellungen, damit sie im Editor aenderbar
   bleiben (Gate P5).
   ============================================================ */

/* ---------- Hero ---------- */
/* Der Claim mischt drei Schnitte in einer Zeile: "TEGOS" Regular,
   Trennstrich und Zusatz Thin. Nur die Abweichung vom Widget-Wert
   steht hier. */
.tg-hero__claim .tg-claim-strong { font-weight: 400; }
.tg-hero__claim .tg-claim-bar    { padding: 0 0.24em; }

/* ---------- Bildziehharmonika (Systemloesungen) ----------
   Die Breitenverhaeltnisse stammen 1:1 aus dem Figma: das offene
   Panel ist 486 px breit, die vier geschlossenen je ~300 px, bei
   10 px Abstand. Als flex-grow-Werte notiert bleibt das Verhaeltnis
   auf jeder Viewport-Breite erhalten. */
.tg-acc { align-items: stretch; }

.tg-acc .tg-acc__panel {
  flex: 300 1 0;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Abdunkelung liegt nur auf dem offenen Panel — die geschlossenen
   zeigen ihr Bild unveraendert. */
.tg-acc .tg-acc__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.tg-acc .tg-acc__panel > * { position: relative; z-index: 1; }

/* Ausgangszustand: das erste Panel ist offen. Sobald irgendwo in der
   Ziehharmonika gehovert wird, gibt es seinen Platz ab. */
.tg-acc .tg-acc__panel--default          { flex-grow: 486; }
.tg-acc .tg-acc__panel--default::after   { opacity: 1; }
.tg-acc:hover .tg-acc__panel--default        { flex-grow: 300; }
.tg-acc:hover .tg-acc__panel--default::after { opacity: 0; }
.tg-acc:hover .tg-acc__panel:hover           { flex-grow: 486; }
.tg-acc:hover .tg-acc__panel:hover::after    { opacity: 1; }

/* Inhalt des offenen Panels */
.tg-acc .tg-acc__open {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.tg-acc .tg-acc__panel--default .tg-acc__open        { opacity: 1; visibility: visible; }
.tg-acc:hover .tg-acc__panel--default .tg-acc__open  { opacity: 0; visibility: hidden; }
.tg-acc:hover .tg-acc__panel:hover .tg-acc__open     { opacity: 1; visibility: visible; }

/* Hochkant gestellter Titel des geschlossenen Panels */
.tg-acc .tg-acc__label {
  position: absolute;
  left: 32px;
  bottom: 32px;
  width: auto;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tg-acc .tg-acc__panel--default .tg-acc__label       { opacity: 0; }
.tg-acc:hover .tg-acc__panel--default .tg-acc__label { opacity: 1; }
.tg-acc:hover .tg-acc__panel:hover .tg-acc__label    { opacity: 0; }

/* Ohne Hover (Touch) gibt es kein Ausklappen — dort stehen alle
   Panels untereinander und zeigen ihren Inhalt dauerhaft. */
@media (max-width: 1024px) {
  .tg-acc { flex-direction: column; }
  .tg-acc .tg-acc__panel { flex: 0 0 auto; }
  .tg-acc .tg-acc__panel::after { opacity: 1; }
  .tg-acc .tg-acc__open  { opacity: 1; visibility: visible; }
  .tg-acc .tg-acc__label { display: none; }
}

/* ---------- Branchen-Ziehharmonika (Tueren) ----------
   Gleiches Prinzip wie die Systemloesungen, aber anderer Ruhezustand: hier
   bleibt der Inhalt in JEDEM Panel stehen — offen voll deckend, geschlossen
   auf halber Deckkraft. Kein hochkant gestellter Titel.
   Breiten aus dem Figma: offen 864 px, geschlossen je 432 px. Als flex-grow
   notiert bleibt das Verhaeltnis 2:1 auf jeder Viewport-Breite erhalten. */
.tg-brc { align-items: stretch; }

.tg-brc .tg-brc__panel {
  flex: 432 1 0;
  min-width: 0;
  overflow: hidden;
  transition: flex-grow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Geschlossen liegt ein heller Schleier ueber dem Bild, offen ein dunkler —
   im Figma rgba(255,255,255,0.3) gegen rgba(0,0,0,0.4). */
.tg-brc .tg-brc__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.45s ease;
  pointer-events: none;
}

.tg-brc .tg-brc__panel > * { position: relative; z-index: 1; }

.tg-brc .tg-brc__body {
  opacity: 0.5;
  transition: opacity 0.35s ease;
}

/* Ausgangszustand: erstes Panel offen. Sobald irgendwo gehovert wird, gibt
   es seinen Platz ab — identisch zur Logik von .tg-acc. */
.tg-brc .tg-brc__panel--default                     { flex-grow: 864; }
.tg-brc .tg-brc__panel--default::after              { background: rgba(0, 0, 0, 0.4); }
.tg-brc .tg-brc__panel--default .tg-brc__body       { opacity: 1; }

.tg-brc:hover .tg-brc__panel--default               { flex-grow: 432; }
.tg-brc:hover .tg-brc__panel--default::after        { background: rgba(255, 255, 255, 0.3); }
.tg-brc:hover .tg-brc__panel--default .tg-brc__body { opacity: 0.5; }

.tg-brc:hover .tg-brc__panel:hover                  { flex-grow: 864; }
.tg-brc:hover .tg-brc__panel:hover::after           { background: rgba(0, 0, 0, 0.4); }
.tg-brc:hover .tg-brc__panel:hover .tg-brc__body    { opacity: 1; }

/* Ohne Hover (Touch) stehen die Panels untereinander und zeigen alle den
   dunklen Schleier mit voll deckendem Inhalt. */
@media (max-width: 1024px) {
  .tg-brc { flex-direction: column; }
  .tg-brc .tg-brc__panel { flex: 0 0 auto; }
  .tg-brc .tg-brc__panel::after { background: rgba(0, 0, 0, 0.4); }
  .tg-brc .tg-brc__body { opacity: 1; }
}

/* ---------- Kontaktband "Ihr Draht zu uns" ----------
   Im Figma liegt ein BACKGROUND_BLUR auf der Sektion: das Bild ist stark
   verwischt, die Schrift darauf gestochen scharf. Ein filter: blur() am
   Container wuerde auch den Text treffen — deshalb blurrt eine eigene
   Ebene zwischen Hintergrundbild und Inhalt. */
.tg-draht::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: none;
}

.tg-draht > * { position: relative; z-index: 1; }

/* ---------- FAQ ----------
   Die Trennlinie sitzt im Figma unter jedem Eintrag, nicht darueber. */
.tg-faq .e-n-accordion-item { border-bottom: 1px solid rgba(46, 46, 46, 0.2); }
.tg-faq .e-n-accordion-item:last-child { border-bottom: 0; }

/* Elementor rahmt die aufgeklappte Antwort per Default ein:
     :where(.elementor-widget-n-accordion .e-n-accordion-item > .e-con)
       { border: var(--n-accordion-border-width) ... }
   Die Rahmen-Controls des Widgets treffen nur den TITEL, nicht diesen
   Container — fuer die Antwort gibt es keine Einstellung. Da die
   Default-Regel in :where() steht (Spezifitaet 0), genuegt diese Zeile
   ohne !important; im Editor gesetzte Werte gewinnen weiterhin. */
.tg-faq .e-n-accordion-item > .e-con { border: 0; }

/* ---------- Qualitaetsversprechen-Baender (Caravan) ----------
   Acht vollbreite Bildbaender. Die Figma-Komponente hat zwei Varianten:
   "Standard" liegt auf opacity 0.2, "Variante2" auf voller Deckkraft — der
   Ruhezustand ist also bewusst gedimmt und hellt bei Interaktion auf.
   Die Bilder heissen im Material "Bild_Scrollover_*"; ob Hover oder
   Scroll-Trigger gemeint war, geht aus dem Figma nicht hervor. Hier als
   Hover umgesetzt, konsistent zu .tg-acc und .tg-brc. */
.tg-band {
  opacity: 0.2;
  transition: opacity 0.45s ease;
}

.tg-band:hover { opacity: 1; }

/* Sobald ein Band gehovert wird, bleiben die uebrigen gedimmt — das ist
   der Effekt aus dem Design und braucht keine Zusatzregel. */

/* Ohne Hover (Touch) waere die Sektion unlesbar: dort stehen alle Baender
   dauerhaft auf voller Deckkraft. */
@media (max-width: 1024px) {
  .tg-band { opacity: 1; }
}

/* ---------- OEM-Bild mit Bildunterschrift (Caravan) ----------
   Die Unterschrift sitzt im Figma unten rechts in einer abgerundeten
   Box auf dem dunkel auslaufenden Bild. */
.tg-oem__caption {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- Sprungmarken-Chips (Servicecenter) ----------
   Figma: Material-Chips, 32 px hoch, Padding 6/12, abgerundet.
   Sie springen zu den Produktabschnitten weiter unten auf der Seite. */
.tg-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.tg-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(46, 46, 46, 0.3);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 100;
  line-height: 20px;
  color: #2E2E2E;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tg-chips a:hover,
.tg-chips a:focus-visible {
  background: #2E2E2E;
  border-color: #2E2E2E;
  color: #FFFFFF;
}

/* Abschnitte liegen unter dem fixierten Header — sonst verschwindet die
   Ueberschrift beim Sprung dahinter. */
.tg-anker { scroll-margin-top: 104px; }

/* ---------- Produktpanels (Servicecenter) ----------
   Aufzaehlungen im Figma mit klassischen Punkten, eingerueckt. */
.tg-panel__liste ul { margin: 0; padding-left: 20px; list-style: disc; }
.tg-panel__liste li { margin-bottom: 8px; }
.tg-panel__liste li:last-child { margin-bottom: 0; }

/* ---------- Standortkarte ---------- */
.tg-smap { width: 100%; height: 479px; }
.tg-smap .leaflet-tile-pane { filter: grayscale(0.95) contrast(0.95); }

@media (max-width: 1024px) {
  .tg-smap { height: 340px; }
}

/* ---------- Stellenangebote (Karriere) ----------
   Im Figma bleiben Titel, Merkmal-Tags UND der Teaser dauerhaft sichtbar;
   nur die ausfuehrliche Stellenbeschreibung klappt auf. Elementors Accordion
   versteckt aber alles ausser dem Titel. Deshalb stehen Tags und Teaser im
   `item_title` — der laeuft durch wp_kses_post() und darf Markup enthalten. */
.tg-jobs .e-n-accordion-item-title-text {
  display: flex;
  flex-direction: column;
  /* Elementor setzt auf diesem Element `align-items: center`. In der
     Zeilenrichtung ist das harmlos, in der Spaltenrichtung zentriert es die
     Kinder waagerecht — Titel und Teaser stuenden dann mittig statt links. */
  align-items: stretch;
  gap: 10px;
  width: 100%;
  font-weight: 100;
}

.tg-jobs .tg-job__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.tg-jobs .tg-job__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}

.tg-jobs .tg-job__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tg-jobs .tg-job__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(46, 46, 46, 0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 100;
  line-height: 18px;
  white-space: nowrap;
}

.tg-jobs .tg-job__teaser {
  font-size: 14px;
  font-weight: 100;
  line-height: 21px;
}

/* Der Titelbereich soll die volle Breite bekommen, damit die Tags rechts
   sitzen und das Plus-/x-Symbol ganz aussen bleibt. */
.tg-jobs .e-n-accordion-item-title-header { flex: 1 1 auto; min-width: 0; }

@media (max-width: 767px) {
  .tg-jobs .tg-job__head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Fuehrungsteam (Über Tegos) ----------
   Portraet mit dem Namen unten im Bild, Funktion darunter. */
.tg-team__bild {
  position: relative;
  overflow: hidden;
}

/* Pflicht-Gate: Portraets IMMER oben ausrichten, sonst schneidet der
   Beschnitt bei abweichenden Seitenverhaeltnissen Koepfe ab. */
.tg-team__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Der Name liegt im Figma ueber dem unteren Bildrand. Ein Verlauf darunter
   haelt ihn auch auf hellen Aufnahmen lesbar. */
.tg-team__bild::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
  pointer-events: none;
}

.tg-team__name {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 1;
}

/* ---------- Kennzahlen (Über Tegos) ---------- */
.tg-zahl { line-height: 1; }

/* ---------- Messe-Countdown (Über Tegos) ----------
   ACHTUNG: Die Werte stehen fest im Text, es ist KEIN laufender Countdown.
   Im Figma sind sie ebenfalls statisch, ein Messedatum liegt nicht vor.
   Siehe UEBERGABE.md, offener Punkt 20. */
.tg-countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.tg-countdown__box {
  min-width: 92px;
  padding: 12px 16px;
  border: 1px solid rgba(46, 46, 46, 0.3);
  border-radius: 8px;
  text-align: center;
}

.tg-countdown__wert {
  display: block;
  font-size: 28px;
  font-weight: 100;
  line-height: 39px;
}

.tg-countdown__einheit {
  display: block;
  font-size: 14px;
  font-weight: 100;
  line-height: 21px;
}

/* ---------- Ueber Tegos ----------
   Der dunkle Block laeuft im Design nach links aus dem Bild heraus, endet
   rechts aber genau an der Inhaltsspalte. Umgesetzt als Ausbruch aus der
   Inhaltsspalte: der Block zieht sich um den linken Seitenrand nach aussen
   und holt ihn als Innenabstand zurueck, damit sein Inhalt buendig zur
   restlichen Seite bleibt. Die Flaechenfarbe selbst kommt aus der
   Container-Einstellung, bleibt also im Editor aenderbar (Gate P5).

   Kein Pseudo-Element: Elementor belegt `::before` auf Containern selbst
   fuer das Hintergrund-Overlay und setzt dort `left: 0` — eine eigene
   `right`-Positionierung wuerde still ueberschrieben. */
/* Der Selektor spiegelt Elementors eigenen (`.elementor.elementor .e-con > …`)
   wider — mit weniger Spezifitaet zieht dessen `max-width: 100%` die Flaeche
   wieder auf die Inhaltsspalte zurueck. */
.elementor.elementor .e-con-inner > .e-con.tg-ueber__box {
  width: calc(100% + (50vw - 50%));
  max-width: none;
  margin-left: calc(-1 * (50vw - 50%));
  padding-left: calc(50vw - 50%);
}

/* Der Ausbruch ragt links aus dem Dokument. `clip` schneidet ihn an der
   Sektion ab, damit die Seite nicht breiter wird als der Viewport (Gate P6). */
#start-ueber { overflow-x: clip; }

/* Das Bild ragt nach rechts ueber die Inhaltsspalte hinaus — hoechstens
   aber bis zum Viewport-Rand, damit nie horizontal gescrollt wird.
   Der Selektor spiegelt Elementors eigenen wider, sonst gewinnt dessen
   `max-width: 100%` und das Bild bleibt spaltenbreit. */
.elementor.elementor .e-con > .elementor-widget.tg-ueber__img {
  width: calc(100% + min(176px, (100vw - 100%) / 2));
  max-width: none;
}
.tg-ueber__img img { width: 100%; height: auto; display: block; }

@media (max-width: 1024px) {
  .elementor.elementor .e-con > .elementor-widget.tg-ueber__img { width: 100%; }
}

/* ---------- Social-Media-Karten ---------- */
.tg-social__avatar img,
.tg-social__card-avatar img {
  border-radius: 50%;
  background: #FFFFFF;
  display: block;
}

/* Das Logo-Plaettchen darf in der Kopfzeile nicht schrumpfen — sonst wird aus
   dem Kreis auf schmalen Viewports eine Ellipse. `--width` ist Elementors
   eigene Variable fuer die Container-Breite: die Untergrenze bleibt damit an
   die Einstellung im Editor gekoppelt. */
.tg-social__avatar,
.tg-social__card-avatar {
  min-width: var(--width);
  aspect-ratio: 1;
}

/* Bild fuellt die Karte randlos — die Karte selbst hat abgerundete Ecken.
   Festes Seitenverhaeltnis wie im Design (400x502), Ausschnitt oben, damit
   keine Koepfe abgeschnitten werden (Gate P8). */
.tg-social__card { overflow: hidden; }
.tg-social__card .tg-social__card-img { line-height: 0; }
/* Elementor verpackt das verlinkte Bild in ein <a>. Als Inline-Element
   haette es keine Breite — das Bild bliebe 0 px hoch. */
.tg-social__card .tg-social__card-img a { display: block; }
.tg-social__card .tg-social__card-img img {
  width: 100%;
  aspect-ratio: 400 / 502;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Das Akkordeon "Ueber Tegos" liegt auf dunklem Grund. Elementors
   nested-accordion bringt in 4.0.4 keine benannten Controls fuer Titel- und
   Icon-Farbe mit — beides laeuft ueber eigene CSS-Variablen. Genau die werden
   hier gesetzt (ohne !important), damit spaetere Editor-Einstellungen weiter
   greifen. Die Titelfarbe selbst erbt die Ueberschrift aus dem Kit (dunkel)
   und muss deshalb zusaetzlich direkt gesetzt werden. */
#ueber-akkordeon {
  --n-accordion-icon-normal-color:  var(--tegos-blue);
  --n-accordion-icon-hover-color:   var(--tegos-blue);
  --n-accordion-icon-active-color:  var(--tegos-blue);
  --n-accordion-title-font-size: 20px;
  --n-accordion-icon-size: 20px;
  --n-accordion-icon-gap: 24px;
  --n-accordion-padding: 18px 0;
  --n-accordion-border-style: solid;
  --n-accordion-border-width: 0 0 1px 0;
  --n-accordion-border-color: rgba(255, 255, 255, 0.24);
}
#ueber-akkordeon .e-n-accordion-item-title-text { color: var(--tegos-white); }
/* Letzte Trennlinie entfaellt, wie im Design */
#ueber-akkordeon .e-n-accordion-item:last-child { --n-accordion-border-width: 0; }

/* "mehr lesen" ist im Design unterstrichen und uebernimmt die Textfarbe der
   Karte — sonst greift die Linkfarbe des Eltern-Themes. */
.tg-social__more a { text-decoration: underline; color: inherit; }

/* ---------- gemischte Schnitte in Ueberschriften ---------- */
.elementor-widget-heading h1 strong,
.elementor-widget-heading h2 strong,
.elementor-widget-heading h3 strong { font-weight: 500; }