/* Landeseiten unter /check/<thema>: eine Seite, ein Formular, kein Menue.
   Gestaltung wie praemiencheck.html (Klassen pc-*), ohne die Fristtafel der Kampagne. */
    /* EINE SEITE, EIN FORMULAR, EIN BILD. Wer von einer Anzeige kommt, sieht
       dasselbe Motiv wie in der Anzeige und daneben die drei Felder. Farben,
       Schrift und Radien wie auf swissvivo.ch (theme-navy). */
    :root { --navy: #2b52c2; --navy-deep: #1a3689; --navy-soft: #e9eefc; --navy-line: #c6d3f7;
            --coral: #f4694e; --coral-deep: #dc5840; --ink: #15192b; --soft: #5a6078; --line: #dfe3ee; --cool: #f3f5fa; --rand: clamp(18px, 3vw, 56px); }
    html, body { margin: 0; background: var(--cool); color: var(--ink); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
    .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px var(--rand) 0; padding: 0 20px; height: 56px; background: linear-gradient(90deg, #2b52c2 0%, #1f3f9c 60%, #1b3a8a 100%); border-radius: 14px; }
    .pc-brand img { height: 20px; width: auto; display: block; }
    .pc-back { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.86); text-decoration: none; font-size: 13px; font-weight: 600; }
    .pc-back:hover { color: #fff; }
    .pc-back svg { width: 16px; height: 16px; }
    .pc-tel { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
    .pc-wrap { margin: 12px var(--rand) 0; }
    .pc-card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; box-sizing: border-box; background: #fff; border: 1px solid var(--navy-line); border-radius: 28px; overflow: visible; }
    .pc-card > * { min-width: 0; }
    .pc-media { border-radius: 27px 0 0 27px; }
    .pc-media { position: relative; background: var(--navy-soft); min-height: 380px; width: 100%; overflow: hidden; }
    .pc-media img { z-index: 1; }
    .pc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
    .pc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
    .pc-form { padding: clamp(28px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
    .pc-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin-bottom: 12px; }
    .pc-kicker::before { content: ""; width: 28px; height: 2px; background: var(--coral); }
    h1 { font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 14px; color: #12285f; text-wrap: balance; }
    .pc-lead { font-size: 16px; line-height: 1.6; color: var(--soft); margin: 0 0 18px; max-width: 46ch; }
    .pc-lead b { color: var(--ink); font-weight: 600; }
    label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
    .pc-field { margin-bottom: 14px; }
    .pc-opt { font-weight: 400; color: var(--soft); }
    .pc-lbl { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
    .pc-seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
    .pc-seg label { position: relative; display: block; margin: 0; line-height: 0; }
    .pc-seg input { position: absolute; opacity: 0; inset: 0; }
    .pc-seg span { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 46px; box-sizing: border-box; text-align: center; padding: 0 8px; font-size: 14px; line-height: 1.2; font-weight: 600; color: var(--soft); cursor: pointer; }
    .pc-seg input:checked + span { background: var(--navy); color: #fff; }
    .pc-seg input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: -2px; }
    /* Eigene Auswahlliste: die Systemliste von macOS laesst sich nicht gestalten. Das <select>
       bleibt fuer Formular und Tastatur bestehen, die Liste darueber ist nur die Ansicht. */
    .pc-sel { position: relative; }
    .pc-sel select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
    .pc-sel__btn { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; text-align: left; padding: 13px 40px 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; position: relative; }
    .pc-sel__btn::after { content: ""; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: translateY(-70%) rotate(45deg); }
    .pc-sel__btn.is-leer { color: #8b93a1; }
    .pc-sel.is-open .pc-sel__btn { border-color: var(--navy); outline: 2px solid var(--navy); outline-offset: 1px; }
    .pc-sel__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: #fff; border: 1px solid var(--navy-line); border-radius: 12px; box-shadow: 0 18px 44px rgba(26, 54, 137,.16); max-height: 280px; overflow: auto; padding: 6px; margin: 0; list-style: none; display: none; }
    .pc-sel.is-open .pc-sel__list { display: block; }
    .pc-sel.is-up .pc-sel__list { top: auto; bottom: calc(100% + 6px); box-shadow: 0 -12px 36px rgba(26, 54, 137,.14); }
    .pc-sel__list li { padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--ink); cursor: pointer; }
    .pc-sel__list li:hover, .pc-sel__list li.is-active { background: var(--navy-soft); color: var(--navy); }
    .pc-sel__list li.is-selected { background: var(--navy); color: #fff; font-weight: 600; }
    input[type="text"], input[type="tel"], input[type="email"], select { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
    input:focus, select:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
    .pc-field.is-bad input { border-color: var(--coral-deep); }
    .pc-btn { width: 100%; font: inherit; font-size: 17px; font-weight: 700; padding: 15px 18px; border: 0; border-radius: 12px; background: var(--navy); color: #fff; cursor: pointer; margin-top: 4px; }
    .pc-btn:hover { background: var(--navy-deep); }
    .pc-btn:disabled { opacity: .6; cursor: default; }
    .pc-hint { font-size: 12px; color: var(--soft); line-height: 1.5; margin: 12px 0 0; }
    .pc-hint a { color: var(--navy); }
    .pc-status { margin-top: 14px; font-size: 15px; line-height: 1.5; border-radius: 10px; padding: 12px 14px; display: none; }
    .pc-status.ok { display: block; background: #e8f4ec; color: #1f6b3a; }
    .pc-status.err { display: block; background: #fbe7e5; color: #a23a2a; }
    .pc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .pc-foot { background: linear-gradient(160deg, #16327a 0%, #0f2254 45%, #0d1b2e 100%); color: rgba(255,255,255,.88); border-radius: 28px; margin: clamp(28px,4vw,56px) var(--rand) 28px; padding: clamp(24px,3vw,36px) clamp(22px,3vw,48px); }
    .pc-foot__grid { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(2, minmax(0,1fr)); gap: clamp(22px,3vw,56px); align-items: start; }
    .pc-foot__logo { height: 22px; width: auto; display: block; margin-bottom: 14px; }
    .pc-foot__claim { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.86); margin: 0; max-width: 34ch; }
    .pc-foot h2 { font-family: "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ffffff; margin: 0 0 10px; }
    .pc-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
    .pc-foot a { color: #fff; text-decoration: none; font-size: 14px; }
    .pc-foot a:hover { color: var(--coral-light); }
    .pc-foot__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: center; margin-top: clamp(18px,2.5vw,28px); padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: rgba(255,255,255,.72); }
    .pc-foot__legal a { font-size: 12px; color: rgba(255,255,255,.84); }
    @media (max-width: 760px) { .pc-foot__grid { grid-template-columns: 1fr; gap: 24px; } }
    @media (max-width: 900px) {
      .pc-card { grid-template-columns: minmax(0, 1fr); }
      .pc-media { border-radius: 27px 27px 0 0; }
      /* Auf dem Telefon das ganze Motiv zeigen, nicht einen Ausschnitt: das
         Seitenverhaeltnis der Kachel entspricht dem Bild, also kein Beschnitt. */
      .pc-media { min-height: 0; height: 120px; aspect-ratio: auto; }
      .pc-media img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
      .pc-media { min-height: 0; }
      .pc-form { padding: 16px 16px 24px; }
      /* Telefon: Tafel und Einleitung kompakt, damit das erste Feld im ersten Bild steht. */
      .pc-kicker { margin-bottom: 6px; }
      h1 { font-size: 23px; margin: 0 0 8px; }
      .pc-lead { font-size: 14px; line-height: 1.45; margin: 0 0 12px; }
      .pc-row { grid-template-columns: 1fr; gap: 0; }
      .pc-top { padding: 0 14px; }
      .pc-tel { display: none; }
      h1 { font-size: 28px; }
    }

    /* Die Punkte unter der Einleitung: drei Zeilen, die sagen, was der Besucher bekommt. */
    .pc-punkte { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
    .pc-punkte li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
    .pc-punkte li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 7px; height: 12px; border-right: 2px solid #1f6b3a; border-bottom: 2px solid #1f6b3a; transform: rotate(42deg); }
    @media (max-width: 900px) { .pc-punkte { margin-bottom: 14px; gap: 5px; } .pc-punkte li { font-size: 13.5px; } }

    /* ---- Stellenseiten /job/<stelle> ---- */
    .pc-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 14px; color: var(--soft); }
    .pc-meta li { display: inline-flex; align-items: center; gap: 7px; }
    .pc-meta svg { width: 16px; height: 16px; stroke: var(--navy); fill: none; stroke-width: 2; }
    .pc-datei { display: block; margin-top: 7px; font-size: 13px; color: var(--soft); }
    .pc-datei.hat-datei { color: #1f6b3a; font-weight: 600; }
    /* Das native Dateifeld traegt die Sprache des Browsers ("Choose File"); darum liegt es unsichtbar
       hinter einer eigenen Schaltflaeche, die der Beschriftung des Hauses folgt. */
    .pc-datei-feld { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
    .pc-datei-knopf { display: inline-flex; align-items: center; gap: 9px; box-sizing: border-box; width: 100%; justify-content: center; font-size: 15px; font-weight: 600; padding: 13px 16px; border: 1px dashed var(--navy-line); border-radius: 10px; background: var(--navy-soft); color: var(--navy-deep); cursor: pointer; margin: 0; }
    .pc-datei-knopf svg { width: 17px; height: 17px; }
    .pc-datei-knopf:hover { border-color: var(--navy); background: #e2eafc; }
    .pc-datei-feld:focus-visible + .pc-datei-knopf { outline: 2px solid var(--navy); outline-offset: 2px; }
    textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); resize: vertical; min-height: 86px; }
    textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
    /* Was die Stelle ausmacht, steht unter dem Formular: wer sofort bewirbt, scrollt nicht. */
    .pc-detail { background: #fff; border: 1px solid var(--navy-line); border-radius: 28px; margin: 14px var(--rand) 0; padding: clamp(24px, 3vw, 44px) clamp(20px, 3vw, 48px); }
    .pc-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 44px); }
    .pc-detail h2 { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-deep); margin: 0 0 12px; }
    .pc-detail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
    .pc-detail li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; color: var(--ink); }
    .pc-detail li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
    .pc-zurueck { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 15px; font-weight: 700; color: var(--navy); text-decoration: none; }
    .pc-zurueck:hover { color: var(--navy-deep); }
    @media (max-width: 900px) { .pc-detail { margin-top: 10px; border-radius: 20px; } .pc-detail li { font-size: 14px; } }

    /* Die Voraussetzungen stehen über dem Formular, nicht erst im Kleingedruckten:
       wer sie nicht erfüllt, soll es vor dem Ausfüllen sehen. */
    .pc-vor { background: var(--navy-soft); border-left: 4px solid var(--navy); border-radius: 0 12px 12px 0; padding: 12px 16px; margin: 0 0 18px; }
    .pc-vor b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-deep); margin-bottom: 7px; }
    .pc-vor ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
    .pc-vor li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.45; color: var(--ink); }
    .pc-vor li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 6px; height: 10px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(42deg); }
    @media (max-width: 900px) { .pc-vor { padding: 10px 13px; margin-bottom: 14px; } .pc-vor li { font-size: 13.5px; } }