/* ============================================================
   Team und Unternehmensgruppe · Green Vision Energy
   Protokoll 23.09.2026: U02, U-E1 (Profilkarten), S08 (Startseite,
   reduzierte Variante), U06, U07 (&more-Logos), U08 (GV-Fläche).
   Kontrakt: BAU-KONTRAKT Abschnitt 6. Klassennamen sind fix, die
   Startseite (index.html) nutzt .profil--kompakt in .profil-reihe--lead
   aus dieser Datei (28.09.: Teamlead-Zeile, Satz je Person).

   Grundsatz: ruhige Karten ohne Glas und ohne Schatten. Das Foto
   trägt, darunter Name > Rolle > Text. Farben nur aus den Tokens
   (tokens.base.css, tokens.greenvision.css); Amber nur als Linie.
   ============================================================ */

/* ---------- Profilreihe ---------- */
.profil-reihe{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2rem;
  margin-top:2.6rem;
}
@media(min-width:900px){
  .profil-reihe{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Profilkarte ---------- */
.profil{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--stone);
  color:var(--anthrazit);
}
/* Einspaltig (unter 900 px) würde ein 4:5-Foto in voller Breite auf dem
   Tablet fast bildschirmhoch. Die Karte bleibt darum lesbar schmal. */
@media(max-width:899.98px){
  .profil{max-width:26rem}
}
/* FEINSCHLIFF S768-9: zwischen 640 und 899 px zwei Spalten statt einer
   linksbündigen Spalte mit rund 270 px Leerraum rechts. */
@media(min-width:640px) and (max-width:899.98px){
  .profil-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profil{max-width:none}
}

.profil__media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:6px;
  background:var(--surface-soft);   /* Platzhalterfläche, solange das Bild lädt */
  margin-bottom:1.15rem;
}
.profil__media picture{display:block;width:100%;height:100%}
.profil__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 30%;
}

.profil__name{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.35rem;
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0;
  color:var(--anthrazit);
  text-wrap:balance;
}
.profil__rolle{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.75rem;
  line-height:1.45;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand);                /* Petrol auf Paper: 6,0:1 */
  margin:.45rem 0 0;
  text-wrap:balance;
}
.profil__text{
  font-family:var(--font-body);
  font-size:.98rem;
  line-height:1.62;
  color:rgba(26,26,26,.82);          /* = --ink-70 aus cinematic.css, 12:1 auf Paper */
  max-width:34ch;
  margin:.95rem 0 0;
  text-wrap:pretty;
  hyphens:auto;
  hyphenate-limit-chars:10 4 4;      /* nur lange Wörter trennen, die schmale Spalte bleibt ruhig */
}
/* m13 (FIX-1): keine automatische Trennung („Kundenmanage-ment“, „Umset-zung“). Mit 10 4 4 trennten
   Chromium und WebKit mobil weiter 5 bis 9 Wörter je Seite; das längste Wort passt bei 320 px in die Zeile. */
.profil__text{hyphens:manual;overflow-wrap:break-word}

/* ---------- Kompakte Variante (Startseite, ganze Karte ist ein Link) ---------- */
a.profil--kompakt{
  text-decoration:none;
  color:inherit;
  border-radius:8px;
}
a.profil--kompakt .profil__media{transform:translateY(0)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  a.profil--kompakt .profil__media{transition:transform .35s var(--ease)}
  a.profil--kompakt:hover .profil__media{transform:translateY(-2px)}
}
a.profil--kompakt:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:6px;
  border-radius:8px;
}

/* Satz je Person (28.09., Tobias Punkt 10). Startseite ruhig in --ink-70;
   auf Über uns steht er als erster Absatz über dem ausführlichen Text,
   darum dort in --ink und Gewicht 500. */
.profil__satz{margin:.7rem 0 0;color:var(--ink-70);font-size:.95rem;line-height:1.55;max-width:52ch}
.profil:not(.profil--kompakt) .profil__satz{color:var(--anthrazit);font-weight:500}
/* Teamlead (Tobias): Name eine Stufe größer. Auf Über uns zusätzlich eine kurze
   Amber-Linie über dem Namen; absolut gesetzt, damit die drei Namen der Reihe
   auf einer Höhe bleiben. */
.profil--lead .profil__name{font-size:1.6rem}
.profil--lead:not(.profil--kompakt) .profil__name{position:relative}
.profil--lead:not(.profil--kompakt) .profil__name::before{content:"";position:absolute;left:0;top:-.6rem;width:40px;height:2px;background:var(--accent)}

/* ---------- Startseite: Teamlead-Zeile (.profil-reihe--lead, 28.09.) ----------
   Aufbau wie ein kleines Organigramm: oben Tobias über die volle Breite,
   darunter Moritz und Mathias. Alle drei Fotos gleich groß, jede Karte
   Foto links, Text rechts (Name, Rolle und Satz gemeinsam in .profil__kopf),
   der Text schließt mit der Foto-Unterkante. Reihenfolge allein aus dem DOM. */
@media(min-width:1080px){
  .profil-reihe--lead{--tg:2rem;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.6rem var(--tg)}
  .profil-reihe--lead .profil{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--tg);align-content:start;align-items:end}
  .profil-reihe--lead .profil--lead{grid-column:1/-1;grid-template-columns:calc((100% - 3*var(--tg))/4) minmax(0,1fr)}
  .profil-reihe--lead .profil__media{margin-bottom:0}
  .profil-reihe--lead .profil--lead .profil__satz{font-size:1.05rem;line-height:1.6}
}
/* Unter 1080 px (gleicher Umschaltpunkt wie die Kopfleiste, ersetzt die frühere
   Zeilenliste unter 900 px aus AD 11): Zeilenliste, Bild 88 × 110 (4:5) links,
   Text rechts, Hairline unter jeder Zeile, die ganze Zeile bleibt der Link.
   Zwischen 900 und 1079 px wären die Textspalten des Vierer-Rasters nur 176 bis
   204 px breit (gemessen im Prototyp), darum dort schon die Liste.
   ueber-uns.html (.profil ohne Modifikator) behält die Vollporträts. */
@media(max-width:1079.98px){
  .profil-reihe--lead{grid-template-columns:minmax(0,1fr);gap:0}
  .profil-reihe--lead a.profil--kompakt{display:grid;border-radius:0;min-height:64px;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto;align-items:start;column-gap:1.1rem;padding:1.2rem 0;max-width:none}
  .profil-reihe--lead a.profil--kompakt .profil__media{grid-row:1;grid-column:1;width:88px;height:110px;margin:0}
  .profil-reihe--lead .profil__kopf{grid-row:1;grid-column:2;min-width:0}
  .profil-reihe--lead a.profil--kompakt .profil__name{font-size:1.2rem}
  .profil-reihe--lead a.profil--lead .profil__name{font-size:1.4rem}
  .profil-reihe--lead .profil__satz{font-size:.93rem;margin-top:.55rem}
  .profil-reihe--lead a.profil--kompakt:focus-visible{outline-offset:2px;border-radius:6px}
}
@media(max-width:899.98px){.profil-reihe--lead a.profil--kompakt .profil__rolle{margin-top:.35rem}} /* Rolle enger am Namen, wie in der früheren Zeilenliste */

/* Textlink unter der Reihe: „Mehr über das Team →" */
.profil-reihe__mehr{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  min-height:44px;
  margin-top:1.2rem;
  font-family:var(--font-body);
  font-weight:500;
  font-size:1rem;
  color:var(--brand);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--brand) 40%, transparent);
  text-underline-offset:.3em;
  transition:text-decoration-color .25s var(--ease);
}
.profil-reihe__mehr:hover{text-decoration-color:var(--accent)}

/* ============================================================
   Organigramm-Ergänzungen (U06, U07, U08)
   Die Grundregeln (Knoten, Linien, Raster) liegen in cinematic.css
   und bleiben dort unverändert; hier wird nur ergänzt bzw. gezielt
   überschrieben.
   ============================================================ */

/* &more-Logos: gleiche Höhe, Breite folgt dem Seitenverhältnis. object-fit
   sichert zusätzlich, dass max-width das Logo nie staucht. */
.org__node picture{display:block;line-height:0}
.org__logo--more{
  width:92px;                         /* m35 (FIX-1): 92 px statt 72 px, Versalhöhe rund 9 px (AD 13: 56 px war zu klein) */
  height:auto;                        /* nur eine Dimension gesetzt: nie verzerrt, drei Logos gleich hoch */
  max-width:100%;
  object-fit:contain;
}

/* O04 (24.09.2026): Pulse&more trägt jetzt wie die drei anderen das 92-px-Logo,
   darunter die Statuszeile „Geplant". Damit alle vier Logos gleich groß und auf
   derselben Höhe stehen, reservieren ALLE vier Töchter-Kacheln unten dasselbe
   Band für die Statuszeile (Zeilenhöhe der Rolle + 8 px Luft); das Logo sitzt
   oben, „Geplant" liegt absolut im Band und kann das Logo nie überdecken.
   Kachelhöhe = 11 + 92 + 11 + Band + 2 × 1 px Rahmen. Gilt Desktop und mobil. */
.org__level--two{--org-band:calc(.72rem * 1.35 + 8px)}
.org__level--two .org__node{flex-direction:column;justify-content:flex-start;align-items:center;
  padding-top:11px;padding-bottom:calc(11px + var(--org-band))}
.org__level--two .org__node--geplant .org__role{position:absolute;left:.6rem;right:.6rem;bottom:.55rem;margin:0;text-align:center}

/* GV-Fläche: ruhige Fläche hinter Green Vision und den vier Töchtern.
   Reicht und Solarel bleiben ohne Fläche. */
.org__gv-flaeche{--gv-flaeche:color-mix(in srgb, var(--surface-soft, #DCE6DC) 55%, transparent)}

/* Mobil (senkrechter Baum): die Fläche ist der Ast selbst. Sie ragt links
   um das Innenmaß hinaus, damit Knoten und Linien an ihrer
   Stelle bleiben (rechts bündig mit den übrigen Knoten); die Verbinder des Asts werden um genau dieses Maß
   nachgeführt. Die Hairline liegt als inset-Schatten (kein Layout-Pixel). */
@media(max-width:899.98px){
  .org__gv-flaeche{
    --gv-innen:.75rem;
    background:var(--gv-flaeche);
    box-shadow:inset 0 0 0 1px var(--stone);
    border-radius:10px;
    padding:var(--gv-innen);
    margin-left:calc(var(--gv-innen) * -1);   /* rechts bündig mit Reicht und Solarel */
  }
  .org__level>.org__branch.org__gv-flaeche::before{left:calc(-1.25rem + var(--gv-innen))}
  .org__level>.org__branch.org__gv-flaeche::after{
    left:calc(-1.25rem + var(--gv-innen));
    top:calc(var(--gv-innen) + var(--org-mh) / 2);
  }
  /* Töchter-Zeile trägt ein 92-px-Logo (m35) plus Statusband (O04): Zeilenmaß =
     Logo + Innenabstand (2 × 11px) + Rahmen (2 × 1px) + Band, damit die Abzweige
     weiter auf Knotenmitte treffen und alle vier Kacheln gleich hoch sind. */
  .org__level--two{--org-mh:calc(92px + 22px + 2px + var(--org-band))}
}

/* Desktop (Raster mit 60 Spalten): die Fläche ist ein Pseudo-Element des
   Green-Vision-Asts und liegt als erstes Rasterelement unter allen Knoten
   und Schienen. Spalten 11–51: eine Spalte Luft links von Contrade&more
   und rechts von Pulse&more. Oben nur .75rem, damit die Schiene
   Reicht–Solarel (Mitte der Verbinderzeile, 1,375rem über Green Vision)
   frei darüber läuft und nicht gekappt wird.
   Solarel rückt dafür um zwei Spalten ein (52–60, gleich breit wie die
   Töchter), sonst läge die Fläche unter seiner linken Kante; die Schiene
   endet entsprechend auf seiner neuen Mitte (Linie 56). Das Solarel-Logo
   richtet sich nach der Breite (höchstens 117 px = bisher 12 px Höhe),
   damit es in der schmaleren Kachel nie anstößt. Die registertreue
   Alternative (.org--register, cinematic.css) bleibt davon unberührt. */
@media(min-width:900px){
  .org:not(.org--register) .org__gv-flaeche::before{
    content:"";
    grid-row:1/4;
    grid-column:11/51;
    margin:-.75rem 0 -1.2rem;
    background:var(--gv-flaeche);
    border:1px solid var(--stone);
    border-radius:10px;
    pointer-events:none;
  }
  .org:not(.org--register) .org__legend{margin-top:calc(1.2rem + 1rem)} /* Abstand unter der Fläche wie vorher unter den Knoten */
  .org:not(.org--register) .org__branch--solarel{grid-column:52/60}
  .org:not(.org--register) .org__level--one::before{grid-column:31/56}
  /* FEINSCHLIFF S1440-15: Innenabstand wie Reicht und Green Vision (.8rem), Logo höchstens 100 px,
     damit die Wortmarke nicht an die Kachelkante stößt. */
  .org:not(.org--register) .org__node--solarel{padding-inline:.8rem}
  .org:not(.org--register) .org__node--solarel .org__logo--solarel{height:auto;width:min(100px,100%)}
  /* Töchter-Kacheln wie mobil (m35, O04): 92-px-Logo + 2 × 11px + 2 × 1px + Statusband.
     Die Stummel hängen an der Oberkante (bottom:100%), die Schiene bleibt. */
  .org__level--two .org__node{min-height:calc(116px + var(--org-band))}
  /* m33 (FIX-1): Rollen jetzt 0,72 rem; engere Laufweite, damit „Muttergesellschaft“ in der Kachel nicht zerbricht */
  .org__role{letter-spacing:.05em}
}

/* m35 (FIX-1): im senkrechten Baum (bis 899 px) stehen Logos mittig in den breiten Kacheln statt links mit
   leerer rechter Hälfte; Reicht größer (44 px Höhe). Solarel ist 10 : 1 breit und
   richtet sich deshalb nach der Breite (44 px Höhe wären 440 px). */
@media(max-width:899.98px){
  .org__node{justify-content:center}
  .org__logo--reicht{height:44px}
  .org__node--solarel .org__logo--solarel{height:auto;width:min(150px,100%)}
}

/* m33/m35 (FIX-1) Nachsteuerung: in den schmalen Desktop-Kacheln (900–1279 px) bleibt
   die Rolle bei 0,66 rem ohne Laufweite, sonst zerbricht „Muttergesellschaft“ mitten im Wort.
   Unter 400 px steht bei Reicht die Rolle neben einem 30-px-Logo, bei Green Vision und Solarel
   unter dem Logo, weil die Rollen sonst auch dort mitten im Wort brechen. */
@media(min-width:900px) and (max-width:1279.98px){.org__role{font-size:.66rem;letter-spacing:0}
  /* M-D1 (DESIGN-FIX-1): der breitere Mutterknoten braucht bei 900 px etwas weniger Innenabstand für eine Zeile */
  .org__node--reicht{padding-inline:.5rem}.org__node--reicht .org__role{letter-spacing:0}}
@media(max-width:400px){
  .org__logo--reicht{height:30px}
  .org__role{letter-spacing:.04em}
  .org__node--gv,.org__node--solarel{flex-direction:column;gap:.45rem;text-align:center}
}

/* Lauf 29.09. (Punkt 8): Auf Telefonen (bis 599 px) liest sich die Hierarchie Mutter → Green Vision → Töchter
   klarer, wenn Green Vision größer steht (28 → 40 px Höhe, 175 px breit) und die &more-Logos etwas kleiner
   (92 → 76 px). Nur eine Dimension je Logo gesetzt: nie verzerrt. Das Zeilenmaß der Töchter folgt dem
   Logo, damit die Abzweige weiter auf Kachelmitte treffen. Ab 600 px und Desktop unverändert. */
@media(max-width:599.98px){
  .org__logo--gv{height:40px}
  .org__logo--more{width:76px}
  .org__level--two{--org-mh:calc(76px + 22px + 2px + var(--org-band))}
}