/*
 * Team index (/das-team). Loaded after team.css, which carries the palette,
 * the display face, the shared section titles, the eyebrow, the micro-label
 * and the button. Everything here is prefixed ti-.
 *
 * Ground: photograph / milk / paper / milk / paper / milk / paper, so each
 * band reads against its neighbours without a single rule between them. Ink
 * is used for the photograph's scrim only: the house keeps dark for pictures.
 */

/* ---------- hero: the photograph ---------------------------------------- */

/* Full bleed, the title on the picture. The header is transparent over it,
   so the inner padding-top clears the header the way the About page does;
   the content sits at the foot of the frame. */
.ti-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    min-height: 520px;
    height: 68vh;
    height: 68dvh;
    max-height: 720px;
    overflow: hidden;
    background: #0a0a0a;
}

.ti-hero__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    /* The photograph is 3:2 and the band is far wider than it is tall, so at
       full width nothing is cropped horizontally and object-position cannot
       move it sideways. Making the picture 106% wide and pinning its left
       edge nudges the subject 3% to the right of where the file has it; the
       surplus runs off the right, under overflow: hidden. */
    width: 106%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    opacity: .78;
}

.ti-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, .50) 0%,
        rgba(10, 10, 10, .08) 40%,
        rgba(10, 10, 10, .80) 100%
    );
}

.ti-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 150px 24px 64px;
    box-sizing: border-box;
}

.ti-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tm-orange);
}

.ti-hero__eyebrow-rule {
    display: inline-block;
    flex-shrink: 0;
    width: 48px;
    height: 2px;
    background: var(--tm-orange);
}

.ti-hero__title {
    margin: 0 0 18px;
    max-width: 14ch;
    font-family: var(--tm-display);
    font-size: clamp(38px, 6.4vw, 76px);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: #fff;
}

.ti-hero__lede {
    margin: 0;
    max-width: 58ch;
    font-size: 17px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .8);
}

/* ---------- counters: the team in numbers ------------------------------- */

.ti-counters-band { padding: 0 24px; background: var(--tm-milk); }

.ti-counters {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    max-width: 1140px;
    margin: 0 auto;
    padding: 30px 0;
}

.ti-counters__cell {
    /* Sized by content, then the spare width shared out: a 2.150.000 needs
       more room than an 8 and must not run under the next divider. */
    flex: 1 1 auto;
    min-width: max-content;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid var(--tm-hair);
}

.ti-counters__cell:last-child { padding-right: 0; margin-right: 0; border-right: 0; }

.ti-counters__value {
    margin: 0;
    font-family: var(--tm-display);
    font-size: clamp(20px, 2.3vw, 34px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--tm-ink);
    font-variant-numeric: tabular-nums;
}

.ti-counters__label {
    margin: 6px 0 0;
    max-width: 14ch;
    font-size: 12px;
    line-height: 1.35;
    color: var(--tm-muted);
}

.ti-section-head { max-width: 640px; }

/* ---------- roster: one person per row ---------------------------------- */

.ti-roster { padding: var(--tm-gap-section) 24px; background: var(--tm-paper); }
.ti-roster__inner { max-width: 1280px; margin: 0 auto; }

.ti-roster__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--tm-line);
}

/* plate | the story | the facts. Laid out across the row, not down it: the
   biography takes the middle, and the right column carries what a reader
   weighs first - the years, the countries, the tours - so a row is as tall
   as its story, never as tall as story plus facts plus tours stacked. */
.ti-person {
    display: grid;
    grid-template-columns: 176px minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0 52px;
    padding: 44px 0;
    border-bottom: 1px solid var(--tm-line);
}

/* A 3:4 portrait, mounted on white. Photos arrive in every shape (a few are
   150 px squares from the old site), so the frame is fixed and the picture
   is cropped to it, never the other way round. Colour, not grayscale: the
   old page showed the people as they are. */
.ti-person__plate {
    position: sticky;
    top: 120px;
    width: 176px;
    aspect-ratio: 3 / 4;
    padding: 6px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(17, 18, 20, .08);
}

.ti-person__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 1px;
    /* Black and white, always: portraits shot by a dozen people over a dozen
       years read as one set only in one tone. */
    filter: grayscale(1);
}

.ti-person__name {
    margin: 0 0 10px;
    font-family: var(--tm-display);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.015em;
    color: var(--tm-ink);
}

.ti-person__link { color: inherit; text-decoration: none; }
.ti-person__link:hover { color: var(--tm-orange); text-decoration: none; }

.ti-person__role { margin: 0 0 10px; }

.ti-person__desc {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--tm-ink);
}

/* Where they ride, as chips: ink on milk, the one fact a reader matches
   against their own plan first. */
.ti-regions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.ti-regions__chip {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 2px;
    background: var(--tm-milk);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    color: var(--tm-ink);
}

.ti-regions__chip--more { background: transparent; border: 1px solid var(--tm-hair); color: var(--tm-muted); }

/* The biography: rich text from the editor. The bold lines are the old
   page's section names ("Was ich hier mache", "Vorleben"), so they read as
   run-in subheads; lists keep their bullets. */
.ti-person__bio {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--tm-muted);
}

.ti-person__bio p { margin: 0 0 .9em; }
.ti-person__bio p > strong:only-child { display: block; margin-top: 1.1em; color: var(--tm-body); }
.ti-person__bio ul,
.ti-person__bio ol { margin: 0 0 .9em; padding-left: 1.2em; }
.ti-person__bio li { margin: 0 0 .25em; }
.ti-person__bio li p { margin: 0; }
.ti-person__bio a { color: var(--tm-ink); text-decoration: underline; text-underline-offset: 2px; }
.ti-person__bio a:hover { color: var(--tm-orange-text); }

/* The fold: the rest of the story behind one line. */
.ti-person__fold { margin: 0; }

.ti-person__fold-summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--tm-ink);
    border-bottom: 2px solid var(--tm-orange);
    padding-bottom: 1px;
}

.ti-person__fold-summary::-webkit-details-marker { display: none; }
.ti-person__fold-summary:hover { color: var(--tm-orange-text); }
.ti-person__fold-summary:focus-visible { outline: 2px solid var(--tm-orange); outline-offset: 3px; }

.ti-person__fold-less { display: none; }
.ti-person__fold[open] .ti-person__fold-more { display: none; }
.ti-person__fold[open] .ti-person__fold-less { display: inline; }
.ti-person__fold[open] .ti-person__fold-summary { margin-bottom: 14px; }

.ti-person__fold-body > :first-child { margin-top: 0; }

.ti-person__facts { width: 100%; margin: 0 0 20px; }

.ti-person__fact {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.5;
}

.ti-person__fact dt { margin: 0; color: var(--tm-muted); }
.ti-person__fact dd { margin: 0; color: var(--tm-ink); }

/* The tours behind this person: a short list with hairlines, title and the
   country plus length beside it. */
.ti-person__tours { width: 100%; margin: 0 0 6px; }

.ti-person__tours-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tm-orange-text);
}
.ti-person__tours-title::after { content: ''; flex: 1; height: 1px; background: var(--tm-hair); }

.ti-tours {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--tm-line);
}

.ti-tour {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 18px;
    padding: 9px 0;
    border-bottom: 1px solid var(--tm-line);
}

.ti-tour__link {
    flex: 1 1 30ch;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--tm-ink);
    text-decoration: none;
}

.ti-tour__link:hover { color: var(--tm-orange-text); text-decoration: none; }

.ti-tour__meta {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1.45;
    color: var(--tm-muted);
    white-space: nowrap;
}

.ti-person__tours-more {
    display: inline-block;
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--tm-muted);
    text-decoration: none;
}

a.ti-person__tours-more:hover { color: var(--tm-orange-text); }

.ti-person__langs { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--tm-muted); }
.ti-person__langs-label { margin-right: 6px; color: var(--tm-ink); font-weight: 700; }

.ti-person__more {
    display: inline-block;
    margin-top: 16px;
    padding-bottom: 1px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tm-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--tm-orange);
}

.ti-person__more:hover { color: var(--tm-orange-text); text-decoration: none; }

.ti-person__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ti-person__rail {
    /* One row, always: three numbers side by side, never stacked. */
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin: 4px 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--tm-line);
}

.ti-person__rail-cell {
    flex: 1 1 auto;
    min-width: max-content;
    padding-right: 18px;
    margin-right: 18px;
    border-right: 1px solid var(--tm-hair);
}

.ti-person__rail-cell:last-child { padding-right: 0; margin-right: 0; border-right: 0; }

.ti-person__stat-value {
    margin: 0;
    font-family: var(--tm-display);
    font-size: clamp(26px, 2.4vw, 36px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--tm-ink);
    font-variant-numeric: tabular-nums;
}

.ti-person__stat-label {
    margin: 6px 0 0;
    max-width: 11ch;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--tm-muted);
}

/* ---------- quotes ------------------------------------------------------ */

.ti-quotes { padding: var(--tm-gap-section) 24px; background: var(--tm-milk); }
.ti-quotes__inner { max-width: 1140px; margin: 0 auto; }

.ti-quotes__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: var(--tm-gap-tight) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--tm-line);
}

.ti-quote {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 34px 4px;
    border-left: 1px solid var(--tm-line);
}

.ti-quote:first-child { padding-left: 0; border-left: 0; }

.ti-quote__text {
    flex: 1;
    margin: 0;
    font-size: 17px;
    line-height: 1.62;
    color: #2c2e33;
}

.ti-quote__text p { margin: 0; }

.ti-quote__by { display: grid; gap: 3px; font-size: 14px; }
.ti-quote__author { font-weight: 700; color: var(--tm-ink); }
.ti-quote__place { color: var(--tm-muted); }
.ti-quote__about { color: var(--tm-muted); }
.ti-quote__about a { color: var(--tm-ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--tm-hair); }
.ti-quote__about a:hover { color: var(--tm-orange-text); text-decoration: none; }

/* ---------- filter bar and groups ----------------------------------------- */

/* A segmented row of anchors. The active one is filled ink; the rest are
   hairline outlines. The count sits inside the button so a reader knows what
   each filter will show before pressing it. */
.ti-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--tm-gap-tight);
}

.ti-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--tm-hair);
    border-radius: 999px;
    background: transparent;
    color: var(--tm-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ti-filter__btn:hover { border-color: var(--tm-ink); color: var(--tm-ink); text-decoration: none; }

.ti-filter__btn.is-active {
    border-color: var(--tm-ink);
    background: var(--tm-ink);
    color: var(--tm-milk);
}

.ti-filter__btn:focus-visible { outline: 2px solid var(--tm-orange); outline-offset: 3px; }

.ti-filter__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-muted);
    font-variant-numeric: tabular-nums;
}

.ti-filter__btn.is-active .ti-filter__count { color: rgba(237, 227, 213, .7); }

.ti-group + .ti-group { margin-top: var(--tm-gap-section); }

.ti-group__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 4px;
    font-family: var(--tm-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--tm-ink);
}

.ti-group__count {
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--tm-muted);
    font-variant-numeric: tabular-nums;
}

/* A hidden group stays hidden whatever else matches. */
.ti-group[hidden] { display: none !important; }

/* ---------- cta --------------------------------------------------------- */

.ti-cta { padding: var(--tm-gap-section) 24px; background: var(--tm-milk); }
.ti-cta__inner { max-width: 620px; margin: 0 auto; text-align: center; }

.ti-cta__title {
    margin: 0 0 14px;
    font-family: var(--tm-display);
    font-size: clamp(25px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--tm-ink);
}

.ti-cta__text { margin: 0 0 30px; font-size: 16px; line-height: 1.65; color: var(--tm-body); }

/* ---- We are looking for guides: a card in the bottom corner --------------
   Out of the page flow, like a cookie notice: milk plate, hairline, a soft
   shadow so it reads as lying on the page rather than painted into it. Shown
   by team-index.js; `hidden` keeps it off the page until then. The orange
   button stays with the enquiry CTA; this one is an outline link. */
.ti-hiring {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    width: min(380px, calc(100vw - 40px));
    padding: 26px 26px 24px;
    border: 1px solid var(--tm-hair);
    border-radius: 3px;
    background: var(--tm-milk);
    box-shadow: 0 18px 40px rgba(17, 18, 20, .18);
    animation: ti-hiring-in .35s ease both;
}

.ti-hiring[hidden] { display: none; }

@keyframes ti-hiring-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.ti-hiring__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tm-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.ti-hiring__close:hover { background: rgba(17, 18, 20, .06); color: var(--tm-ink); }
.ti-hiring__close:focus-visible { outline: 2px solid var(--tm-orange); outline-offset: 2px; }

.ti-hiring__eyebrow { margin-bottom: 8px; padding-right: 32px; }

.ti-hiring__title {
    margin: 0 0 10px;
    padding-right: 24px;
    font-family: var(--tm-display);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--tm-ink);
}

.ti-hiring__text {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tm-body);
}

.ti-hiring__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1.5px solid var(--tm-ink);
    border-radius: 2px;
    background: transparent;
    color: var(--tm-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.ti-hiring__btn:hover,
.ti-hiring__btn:focus-visible { background: var(--tm-ink); color: var(--tm-milk); text-decoration: none; }
.ti-hiring__btn:focus-visible { outline: 2px solid var(--tm-orange); outline-offset: 3px; }

@media (max-width: 640px) {
    .ti-hiring { right: 12px; left: 12px; bottom: 12px; width: auto; padding: 22px 20px 20px; }
    .ti-hiring__text { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .ti-hiring { animation: none; }
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1024px) {
    .ti-person { grid-template-columns: 140px minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 32px; }
    .ti-person__plate { width: 140px; }
}

@media (max-width: 820px) {
    .ti-hero { min-height: 460px; height: 62vh; height: 62dvh; }
    .ti-hero__inner { padding-top: 140px; padding-bottom: 48px; }
    .ti-counters__cell { padding-right: 14px; margin-right: 14px; }

    /* The number moves under the text; the plate stays beside it. */
    .ti-person { grid-template-columns: 112px minmax(0, 1fr); gap: 0 22px; padding: 32px 0; }
    .ti-person__plate { position: static; width: 112px; }
    .ti-person__aside { grid-column: 2; margin-top: 22px; }
    .ti-person__rail { margin: 0 0 16px; padding-bottom: 12px; }
    .ti-person__stat-value { font-size: 28px; }
    .ti-person__rail-cell { padding-right: 12px; margin-right: 12px; }

    .ti-quotes__list { grid-template-columns: 1fr; border-top: 0; }
    .ti-quote,
    .ti-quote:first-child { padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--tm-line); }

}

@media (max-width: 640px) {
    .ti-hero__inner,
    .ti-counters-band,
    .ti-roster,
    .ti-quotes,
    .ti-cta { padding-left: 20px; padding-right: 20px; }
    .ti-hero__title { max-width: none; }
    /* Still one row on a phone: the band scrolls sideways instead of wrapping. */
    .ti-counters { overflow-x: auto; padding: 22px 0; scrollbar-width: none; }
    .ti-counters::-webkit-scrollbar { display: none; }
    .ti-counters__cell { flex: 0 0 auto; min-width: max-content; padding-right: 12px; margin-right: 12px; }
    .ti-counters__value { font-size: 24px; }
    .ti-counters__label { font-size: 11px; }
    .ti-person { grid-template-columns: 1fr; }
    .ti-person__plate { width: 120px; margin-bottom: 16px; }
    .ti-person__aside { grid-column: 1; }
    .ti-person__fact { grid-template-columns: 1fr; gap: 2px; margin-bottom: 10px; }
    .ti-tour__meta { white-space: normal; }
}

/* The pinned header stacks into a taller column on narrow phones; the title
   must still clear it on the picture. */
@media (max-width: 480px) { .ti-hero__inner { padding-top: 250px; } .ti-hero { max-height: none; height: auto; } }
@media (max-width: 340px) { .ti-hero__inner { padding-top: 300px; } }