/* Werdegang von Martin Leue: Über uns #martin-leue (teile/werdegang.twig),
   Autorenkasten im Ratgeber (teile/autorbox.twig) und „Ihr Ansprechpartner“
   auf /kontakt (teile/ansprechpartner.twig). Nur auf diesen Seiten geladen
   ({% block kopf %}) und in Admin › Einstellungen fuer die Vorschau des
   Autorenkastens, jeweils nach app.css: Farben, Schatten und Linien kommen aus
   dessen Variablen. Das kleine runde Bild (teile/autor-bild.twig) steht als
   .autor__bild in app.css, weil es auch ausserhalb vorkommt. */

:root {
    --werdegang-linie: #c9dde6;      /* Linie des Zeitstrahls */
    --werdegang-rand: #9fc3d1;       /* Rand beim Darueberfahren, wie .zielgruppe:hover */
    --gruen-rand: #a7dcb8;           /* Rand der Station „Heute“ */
    --gruen-dunkel: #0f5b2b;         /* Text auf --gruen-hell (Kontrast 7:1) */
    /* Hoehe des klebenden Kopfs (app.css: .kopf__innen 64 px, bis 900 px 60 px, ohne die Linie darunter) */
    --kopf-hoehe: 64px;
}
@media (max-width: 900px) { :root { --kopf-hoehe: 60px; } }

.ohne-umbruch, .werdegang__ganz { white-space: nowrap; }

/* Über uns › Martin Leue. Ein Sprung auf #martin-leue haelt den Abschnitt
   genau unter dem klebenden Kopf (dessen Linie deckt die obere Kante). */
.werdegang { margin: 40px 0 24px; scroll-margin-top: var(--kopf-hoehe); }
/* Listen im Abschnitt ohne den Abstand der Artikel-Listen (.artikel li) */
.werdegang li { margin: 0; }
.werdegang__kopf { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "foto ." "foto marke" "foto name" "foto einfuehrung" "foto ."; column-gap: 56px; margin-bottom: 64px; }
.werdegang__foto { grid-area: foto; position: relative; align-self: start; }
.werdegang__bild { display: block; }
.werdegang__foto img, .werdegang__platzhalter { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 24px; background: var(--blau-hell); box-shadow: var(--schatten); }
.werdegang__name { grid-area: name; }
.werdegang__marke { grid-area: marke; margin: 0 0 8px; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blau); }
.werdegang__name h2 { margin: 0 0 6px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.werdegang__rolle { margin: 0 0 20px; color: var(--text-leise); font-size: 1.05rem; }
/* Schmale Spalte neben dem Foto am Handy: kein einzelnes Wort allein in der letzten Zeile */
.werdegang__marke, .werdegang__name h2, .werdegang__rolle { text-wrap: balance; }
.werdegang__einfuehrung { grid-area: einfuehrung; }
.werdegang__lead { font-size: 1.15rem; line-height: 1.65; margin: 0 0 22px; max-width: 36em; }
.werdegang__wege { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.werdegang__wege li { display: flex; align-items: center; gap: 10px; }
.werdegang__wege a { font-weight: 600; overflow-wrap: anywhere; }

.werdegang__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 48px; align-items: start; }
.werdegang__zwischentitel { margin: 0 0 22px; font-size: 1.35rem; }
.zeitstrahl { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.zeitstrahl__station { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; margin: 0; }
/* Linie von Anstecker zu Anstecker, ueber den Abstand bis zur naechsten Station */
.zeitstrahl__station:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: -16px; width: 2px; border-radius: 2px; background: var(--werdegang-linie); }
.zeitstrahl__symbol { display: block; width: 56px; height: 56px; }
.zeitstrahl__karte { position: relative; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 18px 22px; }
.zeitstrahl__karte::before { content: ""; position: absolute; left: -7px; top: 21px; width: 12px; height: 12px; background: inherit; border-left: 1px solid var(--linie); border-bottom: 1px solid var(--linie); transform: rotate(45deg); }
.zeitstrahl__karte h4 { margin: 0 0 6px; font-size: 1.1rem; line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; }
.zeitstrahl__karte p { margin: 0; color: var(--text-leise); }
.zeitstrahl__karte .zeitstrahl__chip { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 99px; background: var(--blau-hell); color: var(--blau); font-size: .8rem; font-weight: 700; }
.zeitstrahl__karte .zeitstrahl__chip--gruen { background: var(--gruen-hell); color: var(--gruen); }
.zeitstrahl__station--heute .zeitstrahl__karte { border-color: var(--gruen-rand); background: linear-gradient(135deg, var(--weiss) 55%, var(--gruen-hell)); box-shadow: var(--schatten); }
.zeitstrahl__station--heute .zeitstrahl__karte::before { background: var(--weiss); border-color: var(--gruen-rand); }

/* Steckbrief bleibt beim Lesen des Zeitstrahls stehen, mit Luft unter dem Kopf */
.steckbrief { position: sticky; top: calc(var(--kopf-hoehe) + 24px); background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 24px; box-shadow: var(--schatten); }
.steckbrief h3 { margin: 0 0 6px; font-size: 1.2rem; }
.steckbrief dl { margin: 0; }
.steckbrief dl > div { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.steckbrief dl > div:last-child { border-bottom: 0; padding-bottom: 4px; }
.steckbrief dt { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise); }
.steckbrief dd { margin: 2px 0 0; font-weight: 600; line-height: 1.45; }
.steckbrief__branchen { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.steckbrief__branchen li { margin: 0; padding: 2px 10px; border: 1px solid var(--linie); border-radius: 99px; background: var(--flaeche); font-size: .84rem; font-weight: 500; }
.steckbrief__daten { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--gruen-hell); color: var(--gruen-dunkel); font-size: .92rem; line-height: 1.5; }
.steckbrief__daten svg { flex: none; margin-top: 1px; color: var(--gruen); }
.steckbrief__daten a { color: var(--gruen-dunkel); font-weight: 600; white-space: nowrap; }

.eigene-software { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--linie); }
.eigene-software__kopf { max-width: 640px; margin-bottom: 22px; }
.eigene-software__kopf h3 { margin: 0 0 6px; font-size: 1.35rem; }
.eigene-software__kopf p { margin: 0; color: var(--text-leise); }
.eigene-software__liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.produkt { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-content: start; margin: 0; padding: 16px 18px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; transition: border-color .15s; }
.produkt:hover { border-color: var(--werdegang-rand); }
.produkt .symbol { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; }
.produkt__name { margin: 0 0 2px; font-size: 1rem; line-height: 1.35; letter-spacing: 0; }
.produkt__name a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
.produkt__name a svg { color: var(--text-leise); flex: none; }
.produkt__name a:hover { color: var(--blau); text-decoration: underline; }
.produkt__text { margin: 0; color: var(--text-leise); font-size: .93rem; line-height: 1.5; }

.werdegang__zitat { max-width: 780px; margin: 72px auto 0; text-align: center; }
.werdegang__zitat blockquote { margin: 0; }
.werdegang__zitat-zeichen { display: block; width: 56px; height: 56px; margin: 0 auto 18px; }
.werdegang__zitat blockquote p { margin: 0; font-size: clamp(1.3rem, 2.5vw, 1.65rem); line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: var(--blau-dunkel); text-wrap: balance; }
.werdegang__zitat figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; text-align: left; line-height: 1.35; }
.werdegang__zitat figcaption > span:last-child { display: grid; font-size: .95rem; }
.werdegang__unterschrift { font-weight: 700; }

/* Ratgeber: Autorenkasten (#autor, Ziel des Links aus Admin › Einstellungen) */
/* Pfeil hinter „Mehr über …“ nur fuers Auge: Screenreader lesen ihn mit
   leerem Alternativtext nicht vor (Browser ohne diese Schreibweise nehmen
   die erste Angabe) */
.autorbox { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "bild kopf" "bild text" "bild mehr"; column-gap: 20px; margin: 40px 0 0; padding: 24px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten); scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
.autorbox__bild { grid-area: bild; }
.autorbox__kopf { grid-area: kopf; margin-bottom: 10px; }
.autorbox__marke { margin: 0 0 2px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blau); }
.autorbox__name { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.autorbox__rolle { margin: 0; color: var(--text-leise); font-size: .95rem; text-wrap: balance; }
.autorbox__text { grid-area: text; margin: 0 0 10px; font-size: .95rem; line-height: 1.6; }
.autorbox__mehr { grid-area: mehr; margin: 0; }
.autorbox__mehr a { font-weight: 600; }
.autorbox__mehr a::after { content: " →"; content: " →" / ""; }

/* Kontakt: Ansprechpartner links, Telefon und E-Mail rechts darunter */
.kontakt-wege--person { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.kontakt-wege--person .ansprechpartner { grid-row: span 2; }
.kontakt-wege--person > .karte { margin: 0; }
.ansprechpartner { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; align-items: start; margin: 0; padding: 22px 24px; }
.ansprechpartner__titel { margin: 0 0 4px; font-size: .95rem; font-weight: 600; color: var(--text-leise); letter-spacing: 0; }
.ansprechpartner__name { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.ansprechpartner__rolle { margin: 0 0 10px; font-size: .95rem; color: var(--text-leise); text-wrap: balance; }
.ansprechpartner__text { margin: 0 0 10px; font-size: .95rem; line-height: 1.55; }
.ansprechpartner__mehr { margin: 0; }
.ansprechpartner__mehr a { font-weight: 600; }
.ansprechpartner__mehr a::after { content: " →"; content: " →" / ""; }

@media (max-width: 960px) {
    .eigene-software__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .werdegang__kopf { column-gap: 36px; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .werdegang__raster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .steckbrief { position: static; }
    /* app.css stellt .kontakt-wege hier einspaltig, .kontakt-wege--person kommt spaeter und muss es selbst tun */
    .kontakt-wege--person { grid-template-columns: minmax(0, 1fr); }
    .kontakt-wege--person .ansprechpartner { grid-row: auto; }
}
@media (max-width: 760px) {
    /* Handy: kleines Bild neben dem Namen, Text darunter */
    .werdegang__kopf { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "marke marke" "foto name" "einfuehrung einfuehrung"; column-gap: 18px; row-gap: 14px; align-items: center; margin-bottom: 44px; }
    .werdegang__foto img, .werdegang__platzhalter { border-radius: 18px; }
    .werdegang__marke { font-size: .78rem; margin: 0; }
    .werdegang__ort { display: block; }
    .werdegang__name h2 { font-size: 1.45rem; margin-bottom: 4px; }
    .werdegang__rolle { margin: 0; font-size: .95rem; line-height: 1.4; }
    .werdegang__lead { font-size: 1.05rem; }
    .werdegang__wege { flex-direction: column; gap: 10px; }
    .werdegang__zwischentitel, .eigene-software__kopf h3 { font-size: 1.25rem; }
    .eigene-software { margin-top: 44px; padding-top: 32px; }
    .werdegang__zitat { margin-top: 48px; }
}
@media (max-width: 640px) {
    /* Handy: die Programme als eine ruhige Liste statt sechs Karten */
    .eigene-software__liste { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; }
    .produkt { border: 0; border-radius: 0; padding: 14px 16px; column-gap: 12px; }
    .produkt + .produkt { border-top: 1px solid var(--linie); }
    .produkt .symbol { width: 34px; height: 34px; border-radius: 10px; }
    .produkt__text { font-size: .9rem; }
}
@media (max-width: 560px) {
    .zeitstrahl__station { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
    .zeitstrahl__symbol { width: 44px; height: 44px; }
    .zeitstrahl__station:not(:last-child)::before { left: 21px; top: 48px; }
    .zeitstrahl__karte { padding: 16px 18px; }
    .zeitstrahl__karte::before { top: 15px; }
    .zeitstrahl__karte h4 { font-size: 1.05rem; }
    .steckbrief { padding: 20px; }
    .autorbox { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "bild kopf" "text text" "mehr mehr"; align-items: center; padding: 20px; }
    .autorbox__kopf { margin-bottom: 0; }
    .autorbox__text { margin-top: 14px; }
    /* Wie der Autorenkasten: Bild neben Titel, Name und Rolle, der Satz und
       der Link darunter ueber die ganze Breite statt in schmaler Spalte */
    .ansprechpartner { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 20px; }
    .ansprechpartner > div { display: contents; }
    .ansprechpartner .autor__bild { grid-row: 1 / span 3; }
    .ansprechpartner__titel, .ansprechpartner__name, .ansprechpartner__rolle { grid-column: 2; }
    .ansprechpartner__rolle { margin: 0; }
    .ansprechpartner__text, .ansprechpartner__mehr { grid-column: 1 / -1; }
    .ansprechpartner__text { margin-top: 14px; }
    /* Kante steht als style am Bild (teile/autor-bild.twig), hier kleiner */
    .ansprechpartner .autor__bild { --kante: 64px !important; }
}
@media (max-width: 380px) {
    .werdegang__kopf { grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; }
    .werdegang__name h2 { font-size: 1.3rem; }
    /* Unterschrift unter dem Zitat: Bild ueber Name und Rolle, mittig wie
       das Zitat; nebeneinander bliebe „GmbH“ allein in der zweiten Zeile */
    .werdegang__zitat figcaption { flex-direction: column; gap: 8px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .produkt { transition: none; } }