/* Styles for the company pages. Loaded after the base and the solution-page stylesheets.
   About, Team, Partners, Social responsibility, Instant Pricing (reference), Product tour, Contact, Legal notice, Privacy.
   Short hero (no screenshots) + company sub-navigation · letter · milestones · team cards · organization cards · quote
   · Instant Pricing sections · click-to-load video · legal text. The "other pages" cards and the decision band come from the solution-page stylesheet. */

/* ---------- Short hero: text only, not as tall as on the solution pages ---------- */
.phero.compact .text { padding-top: 56px; padding-bottom: 50px; }
.phero.compact .sub { margin-bottom: 0; max-width: 680px; }
/* company sub-navigation: pill links below the hero text */
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.subnav a { padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(17,21,48,.22); color: var(--ink); font-size: 14.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap; }
.subnav a:hover { border-color: var(--ink); }
.subnav a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* inline link: orange with an arrow; a diagonal arrow for external links */
.more-link { color: var(--orange-text); font-weight: 600; text-decoration: none; }
.more-link::after { content: " →"; }
.more-link[target="_blank"]::after { content: " ↗"; }
.more-link:hover { text-decoration: underline; }
/* small orange label on cards and rows (job title, what the organization does) */
.role { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); line-height: 1.5; }

/* ---------- Letter (About): welcome note from the managing director ---------- */
.letter { padding: 100px 0 70px; }
.letter-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
.letter-grid img { width: min(260px, 70%); border-radius: 24px; }
.letter-text p { margin: 0 0 18px; font-size: 19px; line-height: 1.65; max-width: 660px; }
.letter .sign { margin-top: 30px; }
.letter .sign b { display: block; font-family: "Barlow Condensed", Inter, sans-serif; font-size: 30px; line-height: 1; }
.letter .sign span { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); }

/* ---------- Milestones ---------- */
.milestones { padding: 90px 0 40px; }
.ms { list-style: none; margin: 10px 0 0; padding: 0; }
.ms li { display: grid; grid-template-columns: 1fr; gap: 14px 40px; padding: 36px 0; border-top: 1px solid var(--line); }
.ms .year { font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 56px; line-height: .9; color: var(--orange-deep); }
.ms h3 { margin: 0 0 10px; font-size: 30px; line-height: 1; }
.ms p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 620px; }
.ms figure { margin: 0; }
.ms figure img { border-radius: 18px; width: 100%; max-width: 380px; }

/* ---------- Team ---------- */
.team { padding: 90px 0 40px; }
.people { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.people li { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 28px 32px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
/* the photo file is already round with transparent edges; initials use the same size and the same gray background */
.people .face { width: 132px; height: 132px; margin-bottom: 22px; }
.people .initials { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #dcdcdc; color: #6d6d6d;
  font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: 44px; letter-spacing: .04em; }
/* names keep their normal casing: uppercasing turned i into İ on the Turkish page */
.people h3 { margin: 0; font-size: 30px; line-height: 1; text-transform: none; }
.people .role { margin: 10px 0 14px; }
.people p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---------- Organizations (partners, supported charities): logo card on the left, text on the right ---------- */
.orgs { padding: 90px 0 40px; }
.org-list { list-style: none; margin: 10px 0 0; padding: 0; }
.org-list li { display: grid; grid-template-columns: 1fr; gap: 26px 60px; padding: 40px 0; border-top: 1px solid var(--line); }
/* the logo card must not stretch to the height of the text column: natural height, aligned to the top */
.org-logo { align-self: start; display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.org-logo img { width: auto; max-width: 100%; max-height: 110px; }
/* organization names are shown as written ("STELP e.V." would become "E.V." in uppercase) */
.org-text h3 { margin: 0; font-size: 34px; line-height: 1; text-transform: none; }
.org-text .role { margin: 10px 0 18px; }
.org-text p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 720px; }

/* ---------- Quote (Social responsibility) ---------- */
.pquote { padding: 80px 0 0; }
.pquote figure { margin: 0; }
.pquote blockquote { margin: 0; }
.pquote blockquote p { margin: 0; font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 700; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; max-width: 900px; }
.pquote figcaption { margin-top: 14px; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-text); }
.pquote figcaption::before { content: "— "; }

/* ---------- Instant Pricing ---------- */
.ip { padding: 90px 0 30px; }
.ip-grid { display: grid; grid-template-columns: 1fr; gap: 40px 70px; }
.ip-lead { margin: 0 0 18px; font-size: 20px; line-height: 1.5; max-width: 560px; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 0 0 12px 30px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .38em; width: 15px; height: 15px; border-radius: 50%; background: var(--drop); }
.ip .note { margin: 0; padding: 16px 20px; border-radius: 16px; background: var(--sand); font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 560px; }
/* four items: 2 × 2 (with three columns one item would be left alone) */
@media (min-width: 760px) {
  .decide .facts:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Click-to-load video: nothing is requested from YouTube until the visitor clicks ---------- */
.video-section { padding: 40px 0 70px; }
/* aspect ratio only on wide screens and while playing: combined with min-height it widened the box on narrow screens and caused horizontal overflow */
.video { display: flex; align-items: center; justify-content: center; min-height: 360px; border-radius: 24px; overflow: hidden; text-align: center; color: #fff;
  background: radial-gradient(900px 500px at 70% 30%, var(--navy-2) 0%, var(--navy) 65%); }
.video.playing { aspect-ratio: 16 / 9; min-height: 0; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-gate { max-width: 580px; padding: 34px 22px; }
.video-gate .play { width: 64px; height: 64px; color: var(--orange); }
.video-gate h2 { margin: 14px 0 12px; font-size: clamp(30px, 4vw, 48px); }
.video-gate p { margin: 0 0 24px; font-size: 15px; line-height: 1.55; color: var(--muted-dark); }
.video-gate .cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.video-gate button { cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; }

/* ---------- Legal text (German original) ---------- */
.legal-page { padding: 70px 0 100px; }
/* the "this text is in German" note is not needed on the German page */
.legal-note { display: inline-block; margin: 0 0 34px; padding: 8px 16px; border-radius: 999px; background: var(--sand); font-size: 14px; color: var(--muted); }
html[lang="de"] .legal-note { display: none; }
.legal-text { max-width: 820px; }
.legal-text h2 { margin: 46px 0 14px; font-size: 30px; line-height: 1.05; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text h3 { margin: 30px 0 10px; font-size: 22px; line-height: 1.1; }
.legal-text p, .legal-text li { font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.legal-text p { margin: 0 0 14px; }
.legal-text ul { margin: 0 0 14px; padding-left: 20px; }
.legal-text a { color: var(--orange-text); overflow-wrap: anywhere; }
.legal-text .small { font-size: 13px; color: var(--muted); }

/* ---------- Product tour: video and chapters ---------- */
.tour { padding: 70px 0 60px; }
.tour-video { border-radius: 24px; overflow: hidden; background: var(--navy); box-shadow: 0 30px 70px rgba(14,17,48,.25); }
.tour-video video { display: block; width: 100%; height: auto; }
.chapters { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chapters button { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.chapters button:hover { border-color: var(--orange); }
.chapters b { font-variant-numeric: tabular-nums; color: var(--orange-text); }
.tour-note { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
/* no video to play (site.js): cover only, no chapters; the note with the meeting button instead */
.tour-fallback { display: none; }
.tour.no-video .chapters, .tour.no-video .tour-note { display: none; }
.tour.no-video .tour-fallback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin: 24px 0 0;
  padding: 22px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.tour-fallback p { margin: 0; flex: 1 1 320px; font-size: 17px; line-height: 1.5; color: var(--ink); }

/* ---------- Contact: form and side cards ---------- */
.contact { padding: 70px 0 100px; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.cform { display: grid; gap: 18px; padding: 34px 30px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.cform .kicker { margin: 0 0 4px; }
.row2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
.f { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.f input, .f textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(17,21,48,.22); background: var(--page); font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); }
.f textarea { resize: vertical; min-height: 140px; }
.f input:focus, .f textarea:focus { outline: 3px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.consent { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.consent a { color: var(--orange-text); }
.cform button { justify-self: start; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; }
.form-msg { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--sand); font-size: 15px; line-height: 1.5; }
.form-msg[data-kind="invalid"], .form-msg[data-kind="error"] { background: #fde8e4; color: #8a1c12; }
.contact-side { display: grid; gap: 14px; }
.side-card { padding: 26px 26px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.side-card h3 { margin: 0 0 8px; font-size: 26px; line-height: 1; }
.side-card p, .side-card address { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); font-style: normal; }
.side-card a { color: var(--orange-text); }
.side-card.dark { background: var(--navy); border-color: transparent; color: #fff; }
.side-card.dark p { color: var(--muted-dark); margin-bottom: 18px; }
.side-card.dark .pill { color: #fff; }
.side-card.dark a:not(.pill) { color: var(--orange); }
.contact-side .person { background: var(--navy); border-color: transparent; }
/* in a narrow side column (tablet, small phones) photo and text side by side need more room than there is:
   the photo goes above the text, so the name stays on one line and the email address never runs out of the card */
.contact-side { container-type: inline-size; }
@container (max-width: 374px) {
  .contact-side .person { flex-direction: column; align-items: flex-start; gap: 14px; }
  .contact-side .person img { width: 72px; height: 72px; }
}

/* ---------- Breakpoints ---------- */
/* team card on narrow screens: photo on the left, name and title next to it, sentence below (keeps the stacked cards short) */
@media (max-width: 859px) {
  .people li { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 22px 22px 24px; }
  .people .face { grid-row: 1 / span 2; width: 88px; height: 88px; margin: 0; }
  .people .initials { font-size: 32px; }
  .people h3 { align-self: end; font-size: 26px; }
  .people .role { align-self: start; margin: 6px 0 0; }
  .people p:last-child { grid-column: 1 / -1; margin-top: 16px; }
}
@media (min-width: 860px) {
  /* team: three people from management, three columns */
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .letter-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 60px; }
  .letter-grid img { width: 100%; }
  .ms li { grid-template-columns: 150px minmax(0, 1fr); }
  .ms li.has-img { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 340px); }
  .org-list li { grid-template-columns: 280px minmax(0, 1fr); }
  .ip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 50px; }
  .row2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .video { aspect-ratio: 16 / 9; }
}
@media (min-width: 1100px) {
  .phero.compact { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .phero.compact .text { padding: 76px var(--gutter) 64px; }
}
@media (max-width: 899px) {
  .team, .orgs, .milestones, .ip { padding-top: 60px; }
  .letter { padding: 60px 0 40px; }
}
/* very small phones: a smaller photo leaves room for long job titles */
@media (max-width: 359px) {
  .people li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; padding: 20px 18px 22px; }
  .people .face { width: 64px; height: 64px; }
  .people .initials { font-size: 24px; }
  .people .role { letter-spacing: .08em; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .video { min-height: 420px; }
  .ms .year { font-size: 44px; }
}