/*
 * Die oeffentliche Bewerbungsstrecke — nach den Figma-Frames der Seite Application.
 *
 * Werte aus Frame 34:1071 (Step 1), 1440er Raster:
 *   Kopfzeile 130 hoch · Inhalt x=120..1320 (1200 breit)
 *   zwei Spalten je 586 bei x=120 und x=734 (Zwischenraum 28)
 *   Eingabefeld 52 hoch, radius 2, Innenabstand 18
 *   Fortschritt 4 hoch, acht Segmente, Zwischenraum 8
 *
 * Das Overlay ist dunkel: schwarzer Grund, weisse Schrift, weisse Felder.
 */

:root {
    --jgra-black: #000;
    --jgra-white: #fff;
    --jgra-beige: #efd8b9;
    --jgra-sand: #ece9e4;
    --jgra-warn: #d96161;

    --jgra-on-dark: #fff;
    --jgra-on-dark-75: rgba(255, 255, 255, 0.75);
    --jgra-on-dark-60: rgba(255, 255, 255, 0.6);
    --jgra-on-dark-45: rgba(255, 255, 255, 0.45);
    --jgra-on-dark-42: rgba(255, 255, 255, 0.42);
    --jgra-on-dark-32: rgba(255, 255, 255, 0.32);
    --jgra-on-dark-15: rgba(255, 255, 255, 0.15);

    --jgra-placeholder: rgba(0, 0, 0, 0.55);

    --jgra-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --jgra-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

    --jgra-content: 1200px;
    --jgra-col: 586px;
    --jgra-gutter: 28px;
}

/* --- Der Rahmen ----------------------------------------------------------- */

.jgra-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    background: var(--jgra-black);
    color: var(--jgra-on-dark);
    font-family: var(--jgra-sans);
    font-size: 17px;
    line-height: 27px;
    -webkit-font-smoothing: antialiased;
}

/*
 * **Die Spalte muss ausgeschrieben werden.**
 *
 * Ohne `grid-template-columns` legt das Grid eine implizite `auto`-Spalte an, und
 * die wird so breit wie ihr breitestes Kind. `.jgra-inner` traegt `width: 1200px`
 * — also war die Spalte auf jedem Telefon 1200px breit, und `max-width:
 * calc(100% - 40px)` rechnete gegen diese 1200px statt gegen die Fensterbreite.
 * Gemessen am 14.09.2026 bei 390px: `.jgra-inner` 1160px, alles rechts davon
 * abgeschnitten. `minmax(0, 1fr)` deckelt die Spalte auf die Breite des Overlays;
 * das `0` als Minimum ist der eigentliche Schalter, `auto` hiesse wieder
 * „so breit wie der Inhalt".
 */
.jgra-overlay.is-open {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(0, 1fr);
}

/*
 * Die Seite hinter dem Overlay steht still.
 *
 * `overflow: hidden` allein genuegt nicht — bei diesem Theme scrollt das
 * Wurzelelement weiter, und beim Schliessen ist man woanders als vorher. Der
 * Koerper wird deshalb festgesetzt; das Skript verschiebt ihn um die aktuelle
 * Scrollhoehe nach oben, damit optisch nichts springt.
 */
body.jgra-locked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* Das Sprungziel nach dem Absenden — mit Abstand, damit die Bestaetigung nicht
   unter einer klebenden Kopfzeile landet. */
.jgra-anchor {
    scroll-margin-top: 120px;
}

/* Der Hinweis, dass der Vertrag unterschrieben und damit alles fest ist. Hell auf
   dunkel, damit er nicht wie eine Fehlermeldung aussieht — es ist keine. */
.jgr-locked {
    margin: 0 0 40px;
    padding: 20px 24px;
    border-radius: 4px;
    background: var(--jgra-sand);
    color: var(--jgra-black);
}

.jgr-locked p {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
}

.jgr-locked p + p {
    margin-top: 8px;
}

/* --- Danke (Frame 470:692) ----------------------------------------------- */

/*
 * Der Abschluss der Strecke, nicht ein Absatz auf der Seite: dieselbe schwarze
 * Flaeche wie die acht Schritte davor, mittig, mit einem Ausgang.
 */
/* Zwei Klassen, damit die Regel `.jgra-overlay.is-open` schlaegt — die setzt ein
   dreizeiliges Raster fuer Kopf, Rumpf und Fuss, die es hier nicht gibt. */
.jgra-overlay.jgra-thanks {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    overflow-y: auto;
}

.jgra-thanks__inner {
    max-width: 700px;
    text-align: center;
}

/* Der Link auf die eigene Seite steht als Text da und ist trotzdem einer. Er kann
   lang sein — er darf umbrechen, statt die Spalte aufzureissen. */
.jgra-thanks__text a {
    color: inherit;
    overflow-wrap: anywhere;
}

.jgra-thanks__title {
    margin: 0 0 32px;
    font-family: var(--jgra-display, inherit);
    font-size: 34px;
    line-height: 42px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--jgra-white);
}

.jgra-thanks__text {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--jgra-on-dark);
}

.jgra-thanks__ref {
    margin: 44px 0 0;
}

/* Auf den Bildschirmen nach der Zusage steht die Kennzeile in einer Zeile:
   „YOUR RESIDENCY 12 – 25 Apr 2027 · 13 nights · 2 people". */
.jgra-thanks__ref .jgra-thanks__reflabel {
    display: inline;
    margin-right: 6px;
}

.jgra-thanks__reflabel {
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--jgra-on-dark);
}

/* Die Kennung ist das Einzige auf diesem Bildschirm, das jemand abschreibt. */
.jgra-thanks__refno {
    margin: 2px 0 6px;
    font-size: 17px;
    line-height: 27px;
    font-weight: 700;
    color: var(--jgra-white);
}

.jgra-thanks__block {
    margin: 44px 0 0;
}

.jgra-thanks__lead {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    color: var(--jgra-white);
}

.jgra-thanks__action {
    margin: 52px 0 0;
}

.jgra-btn--light {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 24px;
    background: var(--jgra-white);
    color: var(--jgra-black);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

.jgra-btn--light:hover,
.jgra-btn--light:focus-visible {
    background: var(--jgra-beige);
    color: var(--jgra-black);
}

/* Absenden im Fliesstext, mit dem Satz darunter, was danach passiert
   (Frame 160:692). */
.jgra-send {
    margin-top: 44px;
}

.jgra-send__note {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-45);
}

.jgra-legend {
    margin: 56px 0 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-45);
    text-align: center;
}

/* Gesperrte Felder: lesbar, aber sichtbar nicht mehr zum Tippen da. */
.jgra-overlay input[readonly] {
    opacity: 0.55;
    cursor: default;
}

/* Angekommen. Derselbe Kasten, nur in der ruhigen Farbe — er soll beruhigen und
   nicht warnen. */
.jgr-sent {
    margin: 0 0 40px;
    padding: 20px 24px;
    border-left: 3px solid var(--jgra-sand);
    background: rgba(255, 255, 255, 0.06);
}

.jgr-sent p {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
}

.jgr-sent p + p {
    margin-top: 8px;
    opacity: 0.75;
}

/*
 * Im Overlay gilt unser Inter, und dort ist 600 der fetteste Schnitt (Entscheidung
 * vom 26.08.2026). `strong` und `b` stehen im Browser auf 700 — ohne diese Zeile
 * rechnete er sich daraus einen synthetisch verfetteten 600er. Ausserhalb des
 * Overlays greift die Schrift des Themes, dort bleibt es beim Standard.
 */
.jgra-overlay strong,
.jgra-overlay b {
    font-weight: 600;
}

.jgra-inner {
    width: var(--jgra-content);
    max-width: calc(100% - 80px);
    margin: 0 auto;
}

/* --- Kopfzeile: bleibt stehen, waehrend die Mitte scrollt (M2-021) -------- */

.jgra-head {
    padding: 56px 0 0;
}

.jgra-head__row {
    display: flex;
    align-items: baseline;
    gap: 24px;
}

.jgra-step {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 1px;
    color: var(--jgra-beige);
    text-transform: uppercase;
    white-space: nowrap;
}

.jgra-saved {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 1px;
    color: var(--jgra-on-dark-42);
    text-transform: uppercase;
    white-space: nowrap;
}

.jgra-applying {
    flex: 1;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 1px;
    color: var(--jgra-on-dark-60);
    text-align: right;
    text-transform: uppercase;
}

.jgra-close {
    position: absolute;
    top: 40px;
    right: max(40px, calc((100vw - var(--jgra-content)) / 2 - 18px));
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--jgra-on-dark);
    cursor: pointer;
    line-height: 1;
}

.jgra-close svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Das Kreuz im Teilnehmerformular ist ein Verweis, kein Knopf — es fuehrt zurueck
   auf die Website. Es soll trotzdem genauso aussehen. */
a.jgra-close {
    display: block;
    font-size: 24px;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
}

.jgra-close:focus-visible {
    outline: 2px solid var(--jgra-beige);
    outline-offset: 6px;
}

/* Acht Segmente, erledigte in Beige */
.jgra-progress {
    display: flex;
    gap: 8px;
    height: 4px;
    margin-top: 27px;
}

.jgra-progress__seg {
    flex: 1 0 0;
    min-width: 1px;
    background: var(--jgra-on-dark-15);
}

.jgra-progress__seg.is-done {
    background: var(--jgra-beige);
}

/* --- Mitte: scrollt, Kopf und Fuss bleiben stehen ------------------------- */

.jgra-body {
    overflow-y: auto;
    padding: 66px 0 40px;
}

.jgra-heading {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin: 0 0 8px;
}

.jgra-heading__no {
    font-family: var(--jgra-display);
    font-size: 17px;
    line-height: 45.5px;
    color: var(--jgra-beige);
}

.jgra-heading__text {
    margin: 0;
    font-family: var(--jgra-display);
    font-size: 33px;
    font-weight: 400;
    line-height: 45.5px;
    letter-spacing: 0.5px;
    color: var(--jgra-on-dark);
    text-transform: uppercase;
}

/* Der Erklaertext steht rechts neben der Ueberschrift */
.jgra-lede {
    width: var(--jgra-col);
    margin: 0 0 0 auto;
    margin-top: -37px;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-75);
}

.jgra-groupname {
    margin: 44px 0 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 27px;
    color: var(--jgra-on-dark);
}

/* --- Felder --------------------------------------------------------------- */

.jgra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--jgra-gutter);
    row-gap: 21px;
    margin-top: 12px;
}

.jgra-field--full {
    grid-column: 1 / -1;
}

.jgra-field__label {
    display: block;
    margin: 0 0 9px;
    font-size: 15px;
    line-height: 22px;
    color: var(--jgra-on-dark-75);
}

.jgra-field input[type='text'],
.jgra-field input[type='email'],
.jgra-field input[type='tel'],
.jgra-field input[type='url'],
.jgra-field input[type='date'],
.jgra-field select,
.jgra-field textarea {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 1px solid var(--jgra-black);
    border-radius: 2px;
    background: var(--jgra-white);
    font-family: var(--jgra-sans);
    font-size: 17px;
    line-height: 27px;
    color: var(--jgra-black);
}

.jgra-field textarea {
    height: auto;
    min-height: 240px;
    padding: 14px 18px;
    line-height: 27px;
    resize: vertical;
}

/* Das Auswahlfeld fuer die Dauer traegt seinen Pfeil selbst — der eingebaute
   sitzt in jedem Browser woanders. */
.jgra-field select {
    appearance: none;
    padding-right: 44px;
    background-image: linear-gradient(45deg, transparent 50%, var(--jgra-black) 50%),
        linear-gradient(135deg, var(--jgra-black) 50%, transparent 50%);
    background-position: calc(100% - 22px) 24px, calc(100% - 16px) 24px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.jgra-field ::placeholder {
    color: var(--jgra-placeholder);
    opacity: 1;
}

.jgra-field input:focus-visible,
.jgra-field textarea:focus-visible {
    outline: 3px solid var(--jgra-beige);
    outline-offset: 2px;
}

/*
 * Fehlerdarstellung.
 *
 * Bis zum 27.08.2026 war das Feld nur sandfarben gefuellt und die Meldung stand
 * rechtsbuendig **ueber** dem Feld, in der Label-Zeile. Beides zusammen war zu
 * leise: der Farbunterschied zwischen Weiss und Sand faellt auf schwarzem Grund
 * kaum auf, und eine Meldung ueber dem Feld liest niemand, der auf das Feld
 * schaut.
 *
 * Jetzt: roter Rahmen um das Feld, Meldung **darunter**.
 */
.jgra-overlay .jgra-field.has-error input,
.jgra-overlay .jgra-field.has-error textarea {
    /* Der Ring als Schatten, damit das Feld beim Erscheinen nicht springt. Die
       Rahmenfarbe braucht `!important`, weil das Child-Theme global
       `input, textarea { border: 1px solid #222 !important }` setzt — ohne das
       bliebe der Rahmen dunkelgrau und nur der Schatten waere rot. */
    border-color: var(--jgra-warn) !important;
    box-shadow: 0 0 0 2px var(--jgra-warn);
    background: var(--jgra-sand);
}

.jgra-field.has-error .jgra-field__error {
    display: block;
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-warn);
    text-align: left;
}

.jgra-field__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 9px;
}

.jgra-field__row .jgra-field__label {
    margin: 0;
}

/* Unter dem Feld: links der Hinweis, rechts der Zaehler (Frame 160:692). Der
   Hinweis darf umbrechen, die Zahl nicht. */
.jgra-field__row--foot {
    align-items: flex-start;
    margin: 9px 0 0;
}

.jgra-field__row--foot .jgra-field__hint {
    margin: 0;
    max-width: 700px;
}

.jgra-field__row--foot .jgra-count {
    flex: none;
    white-space: nowrap;
}

/* Steht unter dem Feld und ist leer unsichtbar — sonst reisst sie eine Luecke
   in jede Zeile, in der nichts fehlt. */
.jgra-field__error {
    display: none;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-warn);
}

.jgra-field__hint {
    margin: 9px 0 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-45);
}

/* Wortzaehler: grau, ueber der Grenze schwarz — hier auf dunklem Grund beige */
/* Unter dem Feld, rechtsbuendig (Stiftung, 14.09.2026) — vorher stand der Zaehler
   als `span` neben der Beschriftung. */
.jgra-count {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-45);
    text-align: right;
}

.jgra-count.is-over {
    color: var(--jgra-beige);
    font-weight: 600;
}

/* --- Sammelmeldung: weisse Karte mit schwarzem Kreis ---------------------- */

/*
 * **Der Balken ist rot, nicht weiss** (Stiftung, 14.09.2026).
 *
 * Er stand bis dahin als weisse Karte mit schwarzem Kreis da — dieselben Farben
 * wie jedes Eingabefeld darunter, und damit sah die Sammelmeldung aus wie ein
 * weiteres Feld statt wie der Grund, warum es nicht weitergeht. Im Entwurf
 * (Frame 442:797) ist die Flaeche `#d96161`, der Kreis weiss mit rotem
 * Ausrufezeichen. Dieselbe Farbe tragen die Feldmeldungen rechts ueber den
 * Feldern; Meldung und Balken gehoeren sichtbar zusammen.
 */
.jgra-summary {
    display: none;
    align-items: center;
    gap: 20px;
    margin: 0 0 32px;
    padding: 18px 28px;
    border-radius: 4px;
    background: var(--jgra-warn);
    color: var(--jgra-white);
}

.jgra-summary.is-visible {
    display: flex;
}

.jgra-summary__icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--jgra-white);
    color: var(--jgra-warn);
    font-size: 17px;
    font-weight: 600;
    line-height: 26px;
    text-align: center;
}

.jgra-summary__text {
    margin: 0;
    font-size: 17px;
    line-height: 27px;
    font-weight: 600;
}

/* --- Personen, Portfolio, CVs --------------------------------------------- */

.jgra-person {
    padding: 24px 0 4px;
    border-top: 1px solid var(--jgra-on-dark-15);
}

.jgra-person:first-of-type {
    border-top: 0;
}

.jgra-person__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.jgra-person__name {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 27px;
}

.jgra-remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--jgra-on-dark-60);
    font-family: var(--jgra-sans);
    font-size: 14px;
    line-height: 21px;
    cursor: pointer;
    text-decoration: underline;
}

.jgra-remove:hover,
.jgra-remove:focus-visible {
    color: var(--jgra-on-dark);
}

.jgra-add {
    margin: 28px 0 0;
    padding: 0 25px;
    height: 47px;
    border: 1px solid var(--jgra-on-dark-32);
    border-radius: 25px;
    background: none;
    color: var(--jgra-on-dark);
    font-family: var(--jgra-sans);
    font-size: 15px;
    cursor: pointer;
}

.jgra-add:hover,
.jgra-add:focus-visible {
    border-color: var(--jgra-white);
}

.jgra-note {
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-60);
}

/* --- Radiopaar (Portfolio-Modus, Flexibilitaet) --------------------------- */

.jgra-choice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 27px;
    color: var(--jgra-on-dark);
    cursor: pointer;
}

/*
 * Der **ungewaehlte** Zustand ist der schwierige: ein 1px-Rand zu 75 % Weiss auf
 * schwarzem Grund verschwindet — am 27.08.2026 bemaengelt, auf Schritt 3 und beim
 * Datenschutzhaken. Jetzt zwei Pixel in vollem Weiss.
 *
 * **`!important` ist hier kein Faulheitsfehler.** Das Child-Theme setzt global
 *
 *     input, textarea { border: 1px solid #222 !important; }
 *
 * und damit blieb der Kreis 1px in Dunkelgrau auf schwarzem Grund, egal wie
 * spezifisch die Regel hier war. Gemessen am 27.08.2026: `borderTopColor` kam als
 * `rgb(34, 34, 34)` heraus, obwohl die eigene Regel griff. Gegen ein fremdes
 * `!important` hilft nur ein eigenes — die Alternative waere, das Theme zu aendern,
 * und das ist nicht unser Blatt.
 */
.jgra-overlay .jgra-choice input[type='radio'],
.jgra-overlay .jgra-choice input[type='checkbox'] {
    appearance: none;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 4px 0 0;
    border: 2px solid #fff !important;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.jgra-overlay .jgra-choice:hover input[type='radio'],
.jgra-overlay .jgra-choice:hover input[type='checkbox'] {
    box-shadow: 0 0 0 3px var(--jgra-on-dark-15);
}

.jgra-overlay .jgra-choice input[type='checkbox'] {
    border-radius: 2px;
}

.jgra-overlay .jgra-choice input[type='radio']:checked {
    background: radial-gradient(circle at center, var(--jgra-white) 0 5px, transparent 5px);
    border-color: var(--jgra-white);
}

/*
 * Der Haken wird gezeichnet, nicht nur die Flaeche gefuellt: ein weisses Quadrat
 * ohne Zeichen liest sich auf schwarzem Grund wie ein leeres Feld — beim
 * Abnahmetest am 26.08.2026 genau so passiert.
 */
.jgra-overlay .jgra-choice input[type='checkbox']:checked {
    background: var(--jgra-white)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.6 8.8 10 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E")
        center / 12px 12px no-repeat;
    border-color: var(--jgra-white);
}

.jgra-choice input:focus-visible {
    outline: 2px solid var(--jgra-beige);
    outline-offset: 3px;
}

/* Der Verweis auf die Datenschutzerklaerung war in der Farbe des Fliesstextes und
   ohne Unterstreichung nicht als Verweis zu erkennen. Ein Link, den niemand sieht,
   ist bei einer Einwilligung mehr als ein Schoenheitsfehler. */
.jgra-choice a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jgra-choice__hint {
    display: block;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-60);
}

/* --- Uploads -------------------------------------------------------------- */

/* `.jgra-upload` ist am 14.09.2026 entfallen — die drei Stellen im Bewerbungs-
   formular tragen jetzt `.jgra-drop`, siehe weiter unten. */

.jgra-files {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

/* Nach erfolgreichem Upload: Name, Groesse, kleines Kreuz. Kein Pop-up. */
.jgra-files li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-75);
}

.jgra-files__size {
    color: var(--jgra-on-dark-45);
}

/* --- Datumswahl ----------------------------------------------------------- */

/*
 * **Ein weisses Blatt je Fenster, nebeneinander** (Frame 513:1530, Stiftung
 * 13.09.2026). Die Spalten sind dieselben wie bei den beiden Datumsfeldern
 * darueber — jedes Blatt steht unter dem Feld, zu dem es gehoert.
 *
 * Bis zum 13.09.2026 lagen die Monate als helle Schrift auf der schwarzen Flaeche.
 * Das war ruhiger, aber die Tage ausserhalb eines Fensters waren kaum noch zu
 * lesen, und ein beiger Tag auf Schwarz sah aus wie eine Warnung.
 */
.jgra-daterange {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    align-items: start;
}

.jgra-month {
    box-sizing: border-box;
    padding: 16px 18px 20px;
    border: 1px solid var(--jgra-black);
    border-radius: 2px;
    background: var(--jgra-white);
    color: var(--jgra-black);
}

/*
 * Ein Fenster, das die gewaehlte Dauer nicht traegt, ist als Ganzes aus dem Spiel
 * (Frame 699:692) — aber es bleibt weiss. `opacity` auf dem ganzen Blatt hat es vor
 * der schwarzen Flaeche grau werden lassen; im Entwurf steht dort ein weisses Blatt
 * mit grauer Schrift, und nur so liest man die Zahlen ueberhaupt noch.
 */
.jgra-month.is-out .jgra-month__name {
    color: rgba(0, 0, 0, 0.35);
}

.jgra-month.is-out .jgra-days__label {
    color: rgba(0, 0, 0, 0.22);
}

.jgra-month__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.jgra-month__name {
    margin: 0;
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: var(--jgra-black);
}

.jgra-month__nav {
    display: flex;
    gap: 8px;
}

.jgra-month__arrow {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--jgra-black);
    font-family: var(--jgra-sans);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.jgra-month__arrow[disabled] {
    color: rgba(0, 0, 0, 0.2);
    cursor: default;
}

.jgra-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.jgra-days__label {
    font-size: 13px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
}

/* Wochenende: heller Kopf, keine Flaeche im Raster (Ä-15, Regel 5) */
.jgra-days__label.is-weekend {
    color: rgba(0, 0, 0, 0.3);
}

.jgra-day {
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: var(--jgra-black);
    font-family: var(--jgra-sans);
    font-size: 14px;
    cursor: pointer;
}

/* Tage ausserhalb der Fenster sind sichtbar, aber nicht waehlbar (M2-013) */
.jgra-day[disabled] {
    color: rgba(0, 0, 0, 0.25);
    cursor: default;
}

.jgra-day.is-inrange {
    background: var(--jgra-beige);
}

.jgra-day.is-end,
.jgra-day.is-start {
    background: var(--jgra-black);
    color: var(--jgra-white);
}

.jgra-day:focus-visible {
    outline: 2px solid var(--jgra-black);
    outline-offset: 2px;
}

/*
 * **Auf dem Telefon: Feld, Blatt, Feld, Blatt** (Frame 719:692).
 *
 * In der Reihenfolge des Dokuments stehen erst die beiden Felder, dann die
 * Blaetter — das ist die Reihenfolge, die der Schreibtisch braucht. `order` dreht
 * daraus das Bild des Entwurfs, ohne dass das Skript zwei Faelle kennen muesste.
 * Alles ab dem dritten Fenster faellt hinten an; der Entwurf kennt zwei.
 */
@media (max-width: 620px) {
    .jgra-daterange {
        grid-template-columns: minmax(0, 1fr);
    }

    .jgra-daterange > * {
        order: 9;
    }

    .jgra-daterange > :nth-child(1) { order: 1; }
    .jgra-daterange > :nth-child(3) { order: 2; }
    .jgra-daterange > :nth-child(2) { order: 3; }
    .jgra-daterange > :nth-child(4) { order: 4; }
}

/* Das Kalenderblatt im Datumsfeld — ein Zeichen, kein Knopf. */
.jgra-datefield {
    display: block;
    position: relative;
}

.jgra-datefield__icon {
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--jgra-black);
    transform: translateY(-50%);
    pointer-events: none;
}

.jgra-datefield input[type='text'] {
    padding-right: 44px;
}

/* --- Schritt 07: Strecke und Dauer (Frame 513:1530) ---------------------- */

/*
 * Links die Strecke mit dem Kalender, rechts die Dauer und was daraus folgt. Auf
 * schmalen Schirmen untereinander — der Kalender braucht seine Breite.
 */
.jgra-dates {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 44px;
    align-items: start;
    /* Der Vorspann steht in der rechten Haelfte und kann mehrere Zeilen lang sein —
       ohne Abstand stiess „Then — how long …" direkt darunter. */
    margin-top: 18px;
}

.jgra-dates__lead {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 24px;
    color: var(--jgra-on-dark-60);
}

@media (max-width: 900px) {
    .jgra-dates {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px 0;
    }
}

.jgra-length {
    margin: 24px 0 0;
    font-size: 17px;
    line-height: 27px;
    font-weight: 600;
    color: var(--jgra-white);
}

/* Seit dem 13.09.2026 steht hier, welches Fenster die gewaehlte Dauer nicht traegt:
   „April is too short for a 14-night stay." Leiser als die Zeile darueber — es ist
   eine Einschraenkung, kein Fehler. */
.jgra-leeway {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-60);
}

.jgra-leeway:empty {
    display: none;
}

/* Eine Dauer, die so nicht geht, faerbt sich sofort — nicht erst beim
   Weiterklicken. */
.jgra-length.is-error {
    color: var(--jgra-warn);
}

/* --- Rückschau in Schritt 08 ---------------------------------------------- */

.jgra-review {
    margin: 12px 0 0;
    border-top: 1px solid var(--jgra-on-dark-15);
}

.jgra-review__row {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--jgra-on-dark-15);
}

.jgra-review__label {
    font-size: 14px;
    line-height: 27px;
    color: var(--jgra-on-dark-60);
}

.jgra-review__value {
    font-size: 17px;
    line-height: 27px;
}

.jgra-edit {
    padding: 0;
    border: 0;
    background: none;
    color: var(--jgra-on-dark-75);
    font-family: var(--jgra-sans);
    font-size: 14px;
    line-height: 27px;
    text-decoration: underline;
    cursor: pointer;
}

.jgra-edit:hover,
.jgra-edit:focus-visible {
    color: var(--jgra-on-dark);
}

/* --- Fusszeile ------------------------------------------------------------ */

.jgra-foot {
    border-top: 1px solid var(--jgra-on-dark-32);
}

.jgra-foot__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 26px 0 34px;
}

/* „← BACK", nicht „← Back": im Entwurf tragen beide Knoepfe der Fusszeile
   Versalien und dieselbe Schrift. */
.jgra-back {
    padding: 0;
    border: 0;
    background: none;
    color: var(--jgra-on-dark-75);
    font-family: var(--jgra-display);
    font-size: 15px;
    line-height: 24px;
    text-transform: uppercase;
    cursor: pointer;
}

.jgra-back:hover,
.jgra-back:focus-visible {
    color: var(--jgra-on-dark);
}

.jgra-required {
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-45);
    text-align: center;
}

.jgra-continue {
    justify-self: end;
    height: 47px;
    padding: 0 25px;
    border: 1px solid var(--jgra-white);
    border-radius: 25px;
    background: var(--jgra-white);
    color: var(--jgra-black);
    font-family: var(--jgra-display);
    font-size: 15px;
    line-height: 45px;
    text-transform: uppercase;
    cursor: pointer;
}

.jgra-continue:hover,
.jgra-continue:focus-visible {
    background: var(--jgra-beige);
    border-color: var(--jgra-beige);
}

.jgra-continue[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Der schwarze Balken bei Verbindungsverlust (M3-010) ------------------ */

.jgra-offline {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100001;
    display: none;
    padding: 16px 24px;
    background: var(--jgra-black);
    border-bottom: 1px solid var(--jgra-on-dark-32);
    color: var(--jgra-white);
    font-size: 15px;
    line-height: 24px;
    text-align: center;
}

.jgra-offline.is-visible {
    display: block;
}

/* --- Landing page und Erfolgsseite ---------------------------------------- */

.jgra-start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 47px;
    padding: 0 32px;
    border: 0;
    border-radius: 25px;
    background: var(--jgra-black);
    color: var(--jgra-white);
    font-family: var(--jgra-display);
    font-size: 15px;
    line-height: 45px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.jgra-start:hover,
.jgra-start:focus-visible {
    background: #222;
    color: var(--jgra-white);
}

.jgra-closed {
    padding: 24px 28px;
    border-radius: 2px;
    background: var(--jgra-sand);
    font-size: 17px;
    line-height: 27px;
}

/* ==========================================================================
   Etappe 5 — die Formulare nach der Zusage.
   Dieselbe Flaeche, dieselben Felder, dieselben Abstaende wie die Bewerbung.
   Ein zweites Aussehen fuer dieselben Menschen waere ohne Grund (Frame 160:692).
   ========================================================================== */

/*
 * Der Zugang laeuft ueber einen Link im Brief; die Seite gehoert dieser einen
 * Aufgabe. Das Overlay steht deshalb auch hier ueber allem — nur ohne den
 * Schliessknopf, denn es gibt nichts, wohin man zurueckkehren wuerde.
 */
.jgra-overlay--page {
    position: fixed;
    inset: 0;
}

.jgr-subhead {
    margin: 64px 0 0;
    font-size: 26px;
    line-height: 36px;
}

.jgra-lede--left {
    width: auto;
    max-width: 760px;
    margin: 14px 0 0;
}

/* --- Eine Person ---------------------------------------------------------- */

.jgr-person-block {
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid var(--jgra-on-dark-15);
}

.jgr-person-block:first-child {
    border-top: 0;
    padding-top: 0;
}

.jgr-person-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
}

.jgr-person-block__remove {
    padding: 0;
    border: 0;
    background: none;
    color: var(--jgra-on-dark-45);
    font-family: var(--jgra-sans);
    font-size: 14px;
    line-height: 21px;
    text-decoration: underline;
    cursor: pointer;
}

.jgr-person-block__remove:hover,
.jgr-person-block__remove:focus-visible {
    color: var(--jgra-beige);
}

.jgr-addperson {
    margin-top: 36px;
}

/* --- Was schon dasteht ---------------------------------------------------- */

/*
 * Biografie und Projekttext aus der Bewerbung, gekuerzt. Sie stehen hier, damit
 * niemand sie noch einmal tippt (M8-004) — und damit sichtbar ist, was wir halten.
 */
.jgr-recap {
    margin-top: 20px;
    padding: 18px 22px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
}

.jgr-recap__label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: var(--jgra-beige);
}

.jgr-recap__text {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--jgra-on-dark-75);
}

/* --- Ablageflaeche fuer Bilder -------------------------------------------- */

.jgra-drop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    margin-top: 9px;
    padding: 20px;
    border: 1px dashed var(--jgra-on-dark-32);
    border-radius: 2px;
    cursor: pointer;
}

/*
 * **Das Dateifeld liegt durchsichtig ueber der ganzen Flaeche** (Bewerbung, seit
 * dem 14.09.2026). Ein Klick irgendwo im Kasten trifft dann das Feld, das
 * Fallenlassen funktioniert ohne Skript, und die Tastatur kommt hin — deshalb
 * greift hier auch `:focus-within`.
 *
 * `:not([hidden])` laesst die aeltere Fassung im Vertragsformular in Ruhe: dort
 * ist das Feld verborgen und das Skript klickt darauf.
 */
.jgra-drop input[type='file']:not([hidden]) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.jgra-drop:hover,
.jgra-drop:focus-within {
    border-color: var(--jgra-beige);
}

/* Fallengelassen. Die Flaeche muss beim Ueberfahren antworten, sonst weiss
   niemand, ob sie das Ziel ist. */
.jgra-drop.is-dragover {
    border-color: var(--jgra-beige);
    border-style: solid;
    background: rgba(255, 255, 255, 0.06);
}

/* Pfeil und Text stehen untereinander in der Mitte (Frame 160:692). */
.jgra-drop {
    flex-direction: column;
    gap: 6px;
    text-align: center;
}

.jgra-drop__arrow {
    font-size: 16px;
    line-height: 1;
    color: var(--jgra-on-dark-60);
    pointer-events: none;
}

.jgra-drop__text {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    color: var(--jgra-white, #fff);
    pointer-events: none;
}

/* Die Zeile mit den Formaten und Grenzen steht im Kasten, nicht darunter
   (Frames 35:1392 und 121:692) — sie beantwortet eine Frage, die man beim
   Ablegen hat, nicht danach. */
.jgra-drop__hint {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-on-dark-60);
    pointer-events: none;
}

.jgra-filelist {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.jgra-filelist li {
    font-size: 14px;
    line-height: 24px;
    color: var(--jgra-on-dark-75);
}

.jgra-filelist li.is-error {
    color: var(--jgra-beige);
}

/* --- Nach dem Aufenthalt (Frame 169:692) ---------------------------------- */

/*
 * Ueberschrift in zwei Zeilen links, der Satz rechts daneben, oben buendig. Das
 * Muster der anderen Seiten (`.jgra-lede` mit -37px) rechnet mit einer Zeile
 * Ueberschrift und saesse hier mitten in der zweiten.
 */
.jgr-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--jgra-col);
    column-gap: var(--jgra-gutter);
    align-items: start;
}

.jgr-intro__text {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 21px;
    color: var(--jgra-on-dark-75);
}

/* Feldhoehen nach Entwurf: Reflexion 200, die beiden offenen Fragen 110. */
.jgra-field textarea.jgr-area--200 {
    min-height: 200px;
}

.jgra-field textarea.jgr-area--110 {
    min-height: 110px;
}

/* Der Hinweis steht hier zwischen Beschriftung und Feld, nicht darunter. */
.jgra-field__hint.jgr-hint--top {
    margin: 0 0 9px;
}

/* Das Zitat: eine Zeile, 62 hoch, mit etwas mehr Luft links (Quote box 366:693). */
.jgra-field input.jgr-quote {
    height: 62px;
    padding: 0 24px;
    font-size: 18px;
    border-color: rgba(0, 0, 0, 0.22);
}

/* --- Just for us ---------------------------------------------------------- */

.jgr-private {
    margin-top: 56px;
}

.jgr-private__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0.5px;
    color: var(--jgra-beige);
}

.jgr-rates {
    margin-top: 28px;
}

/* Frage 420 breit, dann vier Kaesten zu 110 x 34 mit 8 Abstand. */
.jgr-rate {
    display: grid;
    grid-template-columns: 440px auto;
    align-items: center;
    row-gap: 4px;
    margin-top: 12px;
}

.jgr-rate__question {
    font-size: 15px;
    line-height: 21px;
    color: var(--jgra-on-dark-75);
}

.jgr-rate__options {
    display: flex;
    gap: 8px;
}

.jgr-rate .jgra-field__error {
    grid-column: 2;
}

.jgr-rate__option {
    position: relative;
    cursor: pointer;
}

/* Das Optionsfeld bleibt im Dokument — fuer Tastatur und Vorleser —, sichtbar ist
   nur der Kasten. */
.jgr-rate__option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.jgr-rate__option span {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 110px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 15px;
    line-height: 21px;
    color: var(--jgra-on-dark-75);
}

.jgr-rate__option:hover span {
    border-color: var(--jgra-beige);
}

.jgr-rate__option input:checked + span {
    border-color: var(--jgra-beige);
    background: var(--jgra-beige);
    color: var(--jgra-black);
}

.jgr-rate__option input:focus-visible + span {
    outline: 3px solid var(--jgra-beige);
    outline-offset: 2px;
}

.jgra-field.has-error .jgr-rate__option span {
    border-color: var(--jgra-warn);
}

/* Waehrend ein Clip hochlaedt. */
.jgra-filelist li.is-pending {
    color: var(--jgra-on-dark-45);
}

@media (max-width: 900px) {
    .jgr-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    .jgr-intro__text {
        margin-top: 16px;
        font-size: 14px;
    }

    /* Die Frage steht ueber den Kaesten; die vier teilen sich die Breite. */
    .jgr-rate {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 18px;
    }

    .jgr-rate .jgra-field__error {
        grid-column: 1;
    }

    .jgr-rate__options {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .jgr-rate__option span {
        width: auto;
        padding: 0 4px;
        font-size: 13px;
        text-align: center;
    }
}

/* --- Vorschau fuer die Stiftung ------------------------------------------- */

/* Ueber dem Overlay, damit niemand die Vorschau fuer den echten Link haelt. */
.jgr-previewbar {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 100001;
    transform: translateX(-50%);
    max-width: calc(100% - 40px);
    padding: 6px 16px;
    border-radius: 0 0 2px 2px;
    background: var(--jgra-beige);
    color: var(--jgra-black);
    font-family: var(--jgra-sans);
    font-size: 13px;
    line-height: 19px;
    text-align: center;
}

/* --- Knoepfe -------------------------------------------------------------- */

.jgra-btn--send {
    justify-self: end;
    height: 47px;
    padding: 0 25px;
    border: 1px solid var(--jgra-white);
    border-radius: 25px;
    background: var(--jgra-white);
    color: var(--jgra-black);
    font-family: var(--jgra-display);
    font-size: 15px;
    text-transform: uppercase;
    cursor: pointer;
}

.jgra-btn--send:hover,
.jgra-btn--send:focus-visible {
    background: var(--jgra-beige);
    border-color: var(--jgra-beige);
}

.jgra-btn--send[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.jgra-btn--ghost {
    height: 42px;
    padding: 0 22px;
    border: 1px solid var(--jgra-on-dark-32);
    border-radius: 21px;
    background: none;
    color: var(--jgra-on-dark);
    font-family: var(--jgra-sans);
    font-size: 14px;
    cursor: pointer;
}

.jgra-btn--ghost:hover,
.jgra-btn--ghost:focus-visible {
    border-color: var(--jgra-white);
}

.jgra-foot__note {
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    color: var(--jgra-beige);
}

/* Der Fuss dieser Formulare hat zwei Felder, nicht drei. */
.jgra-overlay--page .jgra-foot__row {
    grid-template-columns: 1fr auto;
}

/* --- Telefon: die Strecke muss dort vollstaendig benutzbar sein (Blatt 11) */

@media (max-width: 900px) {
    .jgra-inner {
        max-width: calc(100% - 40px);
    }

    .jgra-head {
        padding-top: 40px;
    }

    .jgra-head__row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .jgra-applying {
        flex-basis: 100%;
        text-align: left;
    }

    .jgra-close {
        top: 20px;
        right: 20px;
    }

    .jgra-body {
        padding-top: 40px;
    }

    .jgra-heading__text {
        font-size: 25px;
        line-height: 34px;
    }

    .jgra-lede {
        width: auto;
        margin: 16px 0 0;
    }

    .jgra-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * Die Rueckschau untereinander (Frame 719:1175). Auf dem Telefon traegt die
     * Beschriftung die Zeile — in der schmalen Spalte des Schreibtischs war sie
     * das ruhige Gegenstueck zum Wert, hier steht sie darueber und muss
     * herausstechen. „Edit" rueckt nach links unter den Wert; rechtsbuendig
     * schwebte es allein am Rand.
     */
    .jgra-review__row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .jgra-review__label {
        color: var(--jgra-white);
        font-weight: 600;
    }

    .jgra-edit {
        justify-self: start;
        text-align: left;
    }

    /* „* required" steht im Entwurf mittig ueber den beiden Knoepfen, nicht
       zwischen ihnen — nebeneinander bliebe fuer keines der drei Platz. */
    .jgra-foot__row {
        grid-template-columns: auto 1fr;
        row-gap: 14px;
    }

    .jgra-required {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .jgra-back {
        grid-row: 2;
        grid-column: 1;
    }

    .jgra-continue {
        grid-row: 2;
        grid-column: 2;
    }

    /*
     * Die Kopfzeile darf umbrechen. Gemessen am 14.09.2026: „PARTICIPANT DETAILS ·
     * ERSTE GRUPPE · AUTUMN 2027 · …" lief bis 447px hinaus. `white-space: nowrap`
     * haelt sie auf dem Schreibtisch in einer Zeile — dort ist Platz dafuer.
     */
    .jgra-step {
        white-space: normal;
    }

    /*
     * Der Vertragsupload hat genau einen Knopf, und der nimmt im Entwurf die ganze
     * Breite (Frame 720:710, Knopf 720:732: x 0, Breite 342 = volle Spalte). Auf
     * der Seite mit den Teilnehmerangaben bleibt er schmal — dort misst der
     * Entwurf 164px (721:812), und unser Knopf 159px.
     */
    .jgra-btn--send[data-role='send-agreement'] {
        width: 100%;
    }

    /*
     * Die Dankeschirme in Telefonmassen (Frames 720:692 bis 720:734).
     *
     * Sie haben keine Fusszeile und keinen Kopf — nur Text in der Mitte. Mit den
     * Schreibtischmassen (34px Ueberschrift, 44px zwischen den Bloecken) war der
     * Bestaetigungsschirm 1014px hoch und musste gescrollt werden; im Entwurf
     * steht er vollstaendig auf einem Schirm von 844px.
     */
    .jgra-overlay.jgra-thanks {
        padding: 64px 20px;
    }

    .jgra-thanks__title {
        margin-bottom: 22px;
        font-size: 22px;
        line-height: 30px;
    }

    .jgra-thanks__text,
    .jgra-thanks__lead,
    .jgra-thanks__reflabel {
        font-size: 14px;
        line-height: 21px;
    }

    .jgra-thanks__refno {
        font-size: 15px;
        line-height: 23px;
    }

    .jgra-thanks__ref,
    .jgra-thanks__block {
        margin-top: 26px;
    }

    .jgra-thanks__action {
        margin-top: 32px;
    }
}