/* ============================================================================
   PPWR-Lieferantenbefragung — supplier-facing redesign
   Ported design tokens + component styling from the PPWR module design system
   (public/css/ppwr-module.css of the BeGaMo main tool).

   This stylesheet is intentionally loaded LAST so it overrides the older
   questionnaire/header/footer/error/success styles where they conflict.
   It changes look & feel only — every id/class hook used by
   QuestionnaireContent.js and header.js is preserved.
   ============================================================================ */

/* ---- Design tokens (1:1 from ppwr-module.css) ---------------------------- */
:root{
    --br-900:#643F2E; --br-700:#9A6147; --br-500:#AF856F; --br-300:#C6A896;
    --br-200:#DCCCBE; --br-100:#E7DED2; --br-50:#F1EFE5;
    --gr-900:#1C3E08; --gr-700:#3B6D10; --gr-500:#5A8C49; --gr-300:#9DB84F;
    --gr-200:#B9CA81; --gr-100:#D6DDB3; --gr-50:#F4F7EA;
    --bl-900:#1A2F4C; --bl-700:#1D538F; --bl-500:#3272B5; --bl-300:#5490CC;
    --bl-200:#7EB0E0; --bl-100:#AECDF0; --bl-50:#E5F0FC;
    --am-orange:#D9720A; --am-orangetext:#8C4A06; --am-orange-bg:#F7DFC4;
    --am-rot:#C00000; --am-rot-bg:#F3D3D3;
    --radius-s:8px; --radius-m:14px; --radius-l:22px;
    /* Arbeitsbreite des Fragebogens. War 860px -- auf einem breiten Schirm
       stand der Materialkatalog dadurch in zwei Spalten, wo vier Platz
       haetten. Der LESETEXT bleibt trotzdem begrenzt (s. .q-lesebreite),
       sonst laufen Saetze ueber 160 Zeichen. */
    --q-breite:1280px;
    --shadow:0 1px 2px rgba(100,63,46,.05),0 10px 30px -18px rgba(100,63,46,.28);
    --shadow-strong:0 10px 30px -18px rgba(100,63,46,.42);

    --text-heading:#1A2F4C;
    --text-body:#643F2E;
    --text-secondary:#9A6147;
}

/* ---- Base / page ground -------------------------------------------------- */
body{
    font-family:Calibri,Arial,sans-serif;
    color:var(--text-body);
    -webkit-font-smoothing:antialiased;
}

#page-container{
    background:linear-gradient(180deg,var(--bl-50) 0%,#F8FAFD 16%,var(--br-50) 58%,#FAFBFD 100%);
    background-attachment:fixed;
}

#main-content{
    padding:0 20px 24px;
}

:focus-visible{outline:2px solid var(--bl-500);outline-offset:2px}

/* ---- Header -------------------------------------------------------------- */
#site-header{
    background:linear-gradient(180deg,#fff 0%,#F7FAFE 100%);
    color:var(--text-heading);
    border-bottom:1px solid var(--bl-100);
    box-shadow:0 8px 20px -22px rgba(29,83,143,.45);
    align-items:center;
    padding:0;
}

#site-header .navbar-brand-wrapper{
    float:none;
    width:auto;
    height:auto;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 22px;
    /* Der Anker der Ausrichtung: alles nach dem Logo steht rechts. Vorher
       hing das an der Angabe "Angefragt von" -- fiel die weg, rutschte die
       Sprachwahl nach links. */
    margin-right:auto;
    min-width:0;
}

#site-header .navbar-brand{
    display:inline-flex;
    align-items:center;
    margin:0;
}

#site-header .navbar-brand img.logo-lg{
    height:34px;
    width:auto;
}

/* Subtle PPWR product tag next to the wordmark */
.hq-brand-tag{
    display:inline-flex;
    align-items:center;
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.055em;
    text-transform:uppercase;
    color:var(--bl-700);
    background:var(--bl-50);
    border:1px solid var(--bl-100);
    padding:4px 10px;
    border-radius:99px;
    white-space:nowrap;
    line-height:1.2;
}

#site-header .navbar-nav{
    align-items:center;
    gap:1rem;
}

/* Language switcher */
#site-header .nav-link{color:var(--bl-700)}
#site-header .img-thumbnail{
    background:#fff;
    border:1px solid var(--bl-100);
    border-radius:6px;
    padding:3px;
}
#language-dropdown.dropdown-menu{
    background:#fff;
    border:1px solid var(--bl-100);
    border-radius:var(--radius-s);
    box-shadow:var(--shadow);
    padding:4px;
    overflow:hidden;
}
#language-dropdown .dropdown-item{
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:6px;
    padding:7px 12px;
    color:var(--text-body);
    font-weight:600;
}
#language-dropdown .dropdown-item:hover,
#language-dropdown .dropdown-item:focus{
    background:var(--bl-50);
    color:var(--bl-900);
}

/* ---- Page title ---------------------------------------------------------- */
.text-header{
    max-width:var(--q-breite);
    margin:0 auto;
    background:transparent;
    color:var(--text-heading);
    text-align:center;
    font-family:Calibri,Arial,sans-serif;
    font-weight:600;
    letter-spacing:-.01em;
    font-size:1.9rem;
    padding:34px 0 10px;
}
.text-header::after{
    content:"";
    display:block;
    width:64px;
    height:4px;
    margin:14px auto 0;
    border-radius:99px;
    background:linear-gradient(90deg,var(--bl-500),var(--gr-500));
}

/* ---- Questionnaire column ------------------------------------------------ */
#questionnaire-main{
    max-width:var(--q-breite);
    margin:8px auto 0;
}

/* Section cards — one per L1..L6 block */
.q-section{
    background:linear-gradient(180deg,#fff 0%,#FCFDFF 100%);
    border:1px solid var(--bl-100);
    border-radius:var(--radius-l);
    box-shadow:var(--shadow);
    padding:22px 24px 20px;
    margin-bottom:18px;
}

/* Section header (badge + title + rule) built by _section() */
.q-section-head{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:6px;
}
/* Die Pille traegt den Blocktitel -- frueher die Kennung "L3" und daneben
   den Titel. Sie ist damit breiter und braucht Textmasse statt Zentrierung. */
.q-section-badge{
    display:inline-flex;
    align-items:center;
    margin:0;
    padding:6px 15px;
    border-radius:99px;
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500));
    color:#fff;
    font-family:Calibri,Arial,sans-serif;
    font-size:.98rem;
    font-weight:700;
    letter-spacing:.01em;
    line-height:1.25;
    flex-shrink:0;
    max-width:100%;
}
.q-section-line{
    height:1px;
    flex:1;
    background:linear-gradient(90deg,var(--bl-100),rgba(174,205,240,.10));
}
.q-section-hint{
    margin:0 0 16px;
    color:var(--text-secondary);
    font-size:.9rem;
    line-height:1.5;
}

/* ---- Fields -------------------------------------------------------------- */
.q-field{
    display:flex;
    flex-direction:column;
    margin-bottom:14px;
    max-width:460px;
}
/* Bedingte Folgefragen: braucht eigenes Gewicht, sonst schlaegt das
   display:flex eine Zeile darueber das .hidden aus tailwind. */
.q-field.hidden{ display:none; }
/* Ein Feld direkt unter der Materialliste (Kunststoffanteil) klebte an den
   Kaestchen darueber: die Liste bringt keinen Abstand nach unten mit, und
   die 14px des Feldes wirken nur nach unten. */
.q-material-list + .q-field{ margin-top:22px; }
.q-label{
    font-size:.86rem;
    font-weight:600;
    color:var(--text-body);
    margin-bottom:5px;
}
.q-field input,
.q-field select{
    padding:9px 11px;
    /* Blau wie im Haupttool (ppwr-module.css: .content input -> --bl-300).
       Vorher --br-200, ein Braunton aus dem Altbestand. */
    border:1px solid var(--bl-300);
    border-radius:var(--radius-s);
    background:#fff;
    color:var(--text-body);
    font-family:Calibri,Arial,sans-serif;
    font-size:.95rem;
    transition:border-color .15s,box-shadow .15s;
}
.q-field input:hover,
.q-field select:hover{border-color:var(--bl-200)}
.q-field input:focus,
.q-field select:focus,
.q-field input:focus-visible,
.q-field select:focus-visible{
    outline:none;
    border-color:var(--bl-500);
    box-shadow:0 0 0 3px var(--bl-50);
}
.q-field input:disabled,
.q-field select:disabled{
    background:var(--bl-50);
    color:var(--text-secondary);
    cursor:not-allowed;
}

/* Yes / No radio group — als klar getrennte, gestapelte Auswahl-Pillen */
.q-yesno{max-width:none;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.q-yesno .q-radio-option{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-right:0;
    padding:10px 20px;
    min-width:160px;
    border:1px solid var(--bl-200);
    border-radius:99px;
    background:#fff;
    cursor:pointer;
    font-size:.92rem;
    transition:border-color .15s,background .15s;
}
.q-yesno .q-radio-option:hover{border-color:var(--bl-300);background:var(--bl-50)}
.q-yesno .q-radio-option input{accent-color:var(--bl-500);cursor:pointer}

/* ---- L2 material picker -------------------------------------------------- */
.q-material-category{
    font-weight:700;
    color:var(--text-heading);
    margin:16px 0 8px;
    font-size:.9rem;
}
.q-material-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:8px 14px;
}
.q-material-option{
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 12px;
    border:1px solid var(--bl-200);
    border-radius:var(--radius-s);
    background:#fff;
    cursor:pointer;
    font-size:.92rem;
    transition:border-color .15s,background .15s;
}
.q-material-option:hover{border-color:var(--bl-300);background:var(--bl-50)}
.q-material-option input{accent-color:var(--bl-500);cursor:pointer;flex-shrink:0}
/* Ein Material je Komponente: die getroffene Wahl traegt die Antwort und
   muss auch dann erkennbar sein, wenn die Liste weitergescrollt ist. */
.q-material-option:has(input:checked){
    border-color:var(--bl-500);
    background:var(--bl-50);
    box-shadow:inset 0 0 0 1px var(--bl-500);
    font-weight:600;
}

/* Hinweis im Abschnitt (z. B. Altantwort mit mehreren Materialien) */
.q-note{
    margin:0 0 12px;
    padding:10px 14px;
    border:1px solid rgba(217,114,10,.25);
    border-radius:var(--radius-s);
    background:var(--am-orange-bg);
    color:var(--am-orangetext);
    font-size:.86rem;
    line-height:1.5;
}
.q-prev + .q-material-tools{margin-top:10px}

/* Escape checkbox ("no certificates") */
.q-escape-option{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:14px;
    padding:11px 14px;
    border:1px dashed var(--bl-200);
    border-radius:var(--radius-s);
    background:var(--bl-50);
    cursor:pointer;
    font-weight:600;
    color:var(--text-body);
}
.q-escape-option input{accent-color:var(--bl-500);cursor:pointer;flex-shrink:0}
.q-escape-option:has(input:checked){ border-style:solid; border-color:var(--bl-500); background:var(--bl-50); }
/* Freitext ohne die zugehoerige Wahl: sichtbar gesperrt, nicht ausgegraut
   verschwunden -- der Lieferant soll sehen, dass es ihn gibt. */
.q-field.is-locked{ opacity:.55; }
.q-field.is-locked input{ cursor:not-allowed; }

/* ---- Hints --------------------------------------------------------------- */
.q-readonly-hint{
    background:var(--bl-50);
    border:1px solid var(--bl-100);
    border-left:4px solid var(--bl-500);
    border-radius:var(--radius-s);
    padding:12px 16px;
    margin-bottom:18px;
    color:var(--bl-900);
    font-weight:600;
}
.q-empty-hint{
    color:var(--am-orangetext);
    background:var(--am-orange-bg);
    border:1px solid rgba(217,114,10,.25);
    border-radius:var(--radius-s);
    padding:10px 14px;
    font-size:.9rem;
}

/* ---- Uploads ------------------------------------------------------------- */
.q-upload-area{
    margin-top:16px;
    padding:16px;
    border:1px solid var(--bl-100);
    border-radius:var(--radius-m);
    background:linear-gradient(180deg,#fff,var(--bl-50));
}
.q-upload-area > .q-label{
    display:block;
    margin-bottom:10px;
}
/* Zwei Reihen: oben die Beschriftungen, unten die Bedienelemente. Eine
   Beschriftung innerhalb der Datumsspalte machte diese hoeher und schob das
   Feld nach unten -- ausgerichtete Unterkanten halfen da nichts, sichtbar
   war der Versatz oben. */
.q-upload-controls{
    display:grid;
    grid-template-columns:minmax(180px,1fr) auto;
    gap:5px 10px;
    align-items:center;
}
.q-upload-controls.mit-datum{ grid-template-columns:minmax(180px,1fr) auto auto; }
.q-upload-head{
    font-size:.78rem;
    font-weight:600;
    color:var(--text-body);
    line-height:1.3;
    min-height:1px;
}
/* Untereinander gestellt braucht es keine Kopfzeile -- die Beschriftung steht
   dann ohnehin direkt ueber ihrem Feld. */
@media (max-width:640px){
    .q-upload-controls,
    .q-upload-controls.mit-datum{ grid-template-columns:1fr; }
    .q-upload-head[aria-hidden]{ display:none; }
}
.q-file-input,
.q-valid-until{
    padding:8px 10px;
    border:1px solid var(--bl-300);
    border-radius:var(--radius-s);
    background:#fff;
    color:var(--text-body);
    font-family:Calibri,Arial,sans-serif;
    font-size:.9rem;
}
.q-file-input:focus,
.q-valid-until:focus{
    outline:none;
    border-color:var(--bl-500);
    box-shadow:0 0 0 3px rgba(50,114,181,.18);
}
.q-file-input::file-selector-button{
    border:1px solid var(--bl-200);
    background:var(--bl-50);
    color:var(--bl-700);
    font-weight:600;
    border-radius:6px;
    padding:6px 12px;
    margin-right:10px;
    cursor:pointer;
    font-family:Calibri,Arial,sans-serif;
}
.q-file-input::file-selector-button:hover{background:var(--bl-100)}

.q-document-list{
    list-style:none;
    padding:0;
    margin:0 0 12px;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.q-document-row{
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 12px;
    border:1px solid var(--br-100);
    border-radius:var(--radius-s);
    background:#fff;
    font-size:.9rem;
    color:var(--text-body);
}
.q-document-row .fa-file-pdf{color:var(--am-rot)}
.q-document-delete{
    cursor:pointer;
    color:var(--am-rot);
    margin-left:auto;
    transition:transform .15s;
}
.q-document-delete:hover{transform:scale(1.12)}

/* ---- Buttons ------------------------------------------------------------- */
/* Secondary: PDF upload */
.q-upload-button.button{
    margin:0;
    font-size:.92rem;
    font-weight:700;
    border-radius:99px;
    padding:9px 18px;
    background:#fff;
    border:1px solid var(--bl-300);
    color:var(--bl-700);
    box-shadow:none;
}
.q-upload-button.button:hover{
    background:var(--bl-50);
    transform:none;
}

/* Primary: submit */
#submit-button.button{
    margin:1rem;
    font-size:1.15rem;
    font-weight:700;
    border-radius:99px;
    padding:14px 40px;
    color:#fff;
    background:linear-gradient(135deg,var(--gr-700),var(--gr-500));
    border:1px solid var(--gr-700);
    box-shadow:0 12px 26px -14px rgba(28,62,8,.6);
}
#submit-button.button:hover{transform:translateY(-1px) scale(1.01)}
#submit-button.hidden{display:none}

/* ---- Error / Success cards ---------------------------------------------- */
.error-message,
.success-message{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:14px;
    max-width:520px;
    margin:9vh auto;
    padding:44px 40px;
    border-radius:var(--radius-l);
    background:linear-gradient(180deg,#fff 0%,#FCFDFF 100%);
    box-shadow:var(--shadow-strong);
    text-align:center;
    font-weight:600;
    font-size:1.1rem;
}
.error-message{border:1px solid var(--am-rot-bg);color:var(--text-body)}
.success-message{border:1px solid var(--gr-100);color:var(--text-body)}

.error-message i{
    font-size:3rem;
    color:var(--am-rot);
    background:var(--am-rot-bg);
    width:84px;height:84px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
}
.success-message i{
    font-size:3rem;
    color:var(--gr-700);
    background:var(--gr-50);
    width:84px;height:84px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
}
.error-message p,
.success-message p{margin:0;line-height:1.5}

.error-message .retry-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff;
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500));
    border:none;
    padding:11px 24px;
    border-radius:99px;
    font-size:1rem;
    font-weight:700;
}
.error-message .retry-button i{
    font-size:1rem;
    background:none;
    width:auto;height:auto;
    color:#fff;
    margin:0;
}
.error-message a{color:#fff;text-decoration:none}

/* ---- Footer -------------------------------------------------------------- */
#site-footer{
    background:linear-gradient(180deg,#fff 0%,#F7FAFE 100%);
    border-top:1px solid var(--bl-100);
}
#site-footer #footer-logo{max-height:2.6rem;opacity:.9}
#site-footer #footer-link-holder{
    justify-content:center;
    gap:20px;
    margin-top:10px;
}
#site-footer a{
    color:var(--bl-700);
    font-size:.85rem;
    font-weight:600;
}
#site-footer a:hover{color:var(--bl-900)}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:640px){
    #main-content{padding:0 14px 20px}
    .text-header{font-size:1.55rem;padding:26px 0 8px}
    .q-section{padding:18px 16px 16px;border-radius:var(--radius-m)}
    .q-field{max-width:none}
    .q-material-list{grid-template-columns:1fr}
    .q-yesno .q-radio-option{margin-bottom:0}
    #submit-button.button{width:100%;justify-content:center;text-align:center}
    .error-message,.success-message{margin:6vh 12px;padding:34px 22px}
}

@media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
}

/* ---- Pflichtfeld-Markierung bei unvollstaendigem Absenden ---------------- */
.q-field.invalid input,
.q-field.invalid select,
.q-field.invalid textarea{ border-color:var(--am-rot) !important; background:var(--am-rot-bg); }
.q-field.invalid .q-label{ color:var(--am-rot); }
.q-field.q-yesno.invalid .q-radio-option{ border-color:var(--am-rot); }
.q-section.invalid,
.q-upload-area.invalid{ outline:2px solid var(--am-rot); outline-offset:3px; border-radius:10px; }

/* ===== Modals im PPWR-Look (Confirm / Alert / Prompt) =======================
   Grundstil kommt aus modal.css (Legacy: Alabaster/Van-Dyke-Braun). Hier auf das
   PPWR-Design angeglichen, analog zum Haupttool (ppwr-suite.css). modal.css nutzt
   `.modal-content #id`-Selektoren (Spezifitaet 1,1,0) -> die Button-Regeln unten
   brauchen selbst ID-Spezifitaet (1,2,0), damit Farben/Kontrast durchschlagen. */
.custom-modal{ background-color:rgba(26,47,76,.45); }
.custom-modal .modal-content{
    background:#fff; border:1px solid var(--br-100); border-radius:var(--radius-l);
    box-shadow:var(--shadow-strong); padding:26px 26px 22px; width:auto;
    min-width:320px; max-width:460px; margin:15% auto; color:var(--text-body);
}
.custom-modal .modal-content p{
    font-family:inherit; font-weight:600; font-size:1.05rem; line-height:1.5;
    color:var(--text-body); text-align:center; margin:2px 0 20px;
}
.custom-modal .modal-content input{
    border:1px solid var(--bl-100); border-radius:var(--radius-s); background:#fff;
    color:var(--text-body); font-family:inherit; font-weight:400; font-size:1rem;
    height:auto; line-height:1.4; padding:9px 12px; margin-bottom:18px;
}
/* Basis fuer alle Modal-Buttons: PPWR-Blau, weisser Text, abgerundet. */
.custom-modal .modal-content button{
    border:1px solid var(--bl-700); border-radius:var(--radius-s); padding:9px 22px;
    margin:0 6px; font-family:inherit; font-weight:600; font-size:1rem; cursor:pointer;
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500)); color:#fff;
    box-shadow:var(--shadow); transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.custom-modal .modal-content button:hover,
.custom-modal .modal-content button:focus{
    background:linear-gradient(135deg,var(--bl-900),var(--bl-700)); color:#fff;
    transform:translateY(-1px); box-shadow:var(--shadow-strong); outline:none;
}
/* Primaer (Ja / OK) = Blau (ID-Spezifitaet gegen modal.css). */
.custom-modal .modal-content #confirmYes,
.custom-modal .modal-content #promptOK,
.custom-modal .modal-content #alertOk{
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500)); color:#fff; border-color:var(--bl-700);
}
.custom-modal .modal-content #confirmYes:hover,
.custom-modal .modal-content #promptOK:hover,
.custom-modal .modal-content #alertOk:hover,
.custom-modal .modal-content #alertOk:focus{
    background:linear-gradient(135deg,var(--bl-900),var(--bl-700)); color:#fff;
}
/* Sekundaer (Nein / Abbrechen) = neutral. */
.custom-modal .modal-content #confirmNo,
.custom-modal .modal-content #promptCancel{
    background:var(--br-50); color:var(--br-900); border-color:var(--br-200); box-shadow:none;
}
.custom-modal .modal-content #confirmNo:hover,
.custom-modal .modal-content #promptCancel:hover{
    background:var(--br-100); color:var(--br-900); filter:none;
}
.custom-modal .close-btn{ color:var(--br-500); }
.custom-modal .close-btn:hover,
.custom-modal .close-btn:focus{ color:var(--br-900); }

/* ===========================================================================
   Kontextkarte "Worum es geht" (T172)

   Seit T172 gehoert jeder Fragebogen zu genau einer Verpackungskomponente.
   Ohne diesen Kopf weiss der Lieferant nicht, worauf sich "Gewicht" oder
   "Lebensmittelkontakt" beziehen, sobald er mehrere Komponenten liefert.
   Bewusst dunkel abgesetzt: es ist kein Eingabeblock, sondern Kontext.
   =========================================================================== */
.q-ctx{
    background:linear-gradient(135deg,var(--bl-900),var(--bl-700));
    color:#fff;
    border-radius:var(--radius-l);
    box-shadow:var(--shadow-strong);
    padding:20px 24px;
    margin-bottom:18px;
}
.q-ctx-title{
    margin:0 0 14px;
    font-family:Calibri,Arial,sans-serif;
    font-size:1.05rem;
    font-weight:600;
    color:#fff;
}
.q-ctx-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:12px 22px;
    margin:0;
}
.q-ctx-grid dt{
    font-size:.7rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    /* bl-100 auf bl-700 = 4.76:1 an der hellsten Stelle des Verlaufs. */
    color:var(--bl-100);
    margin-bottom:2px;
}
.q-ctx-grid dd{
    margin:0;
    font-size:.94rem;
    font-weight:600;
    color:#fff;
    overflow-wrap:anywhere;
}

/* ===========================================================================
   Bestaetigen / Korrigieren fuer vorbefuellte Bloecke (L1, L2)

   Die Felder starten gesperrt mit dem Kennzeichen "bereits hinterlegt". Der
   Lieferant bestaetigt mit einem Klick oder oeffnet sie zum Korrigieren --
   er soll nicht abtippen, was das Unternehmen schon weiss (Dok f §7).
   =========================================================================== */
.q-confirm-bar{
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.q-confirmed-badge{
    display:none;
    align-items:center;
    gap:5px;
    padding:3px 10px;
    border-radius:99px;
    background:var(--gr-50);
    color:var(--gr-700);
    border:1px solid var(--gr-500);
    font-size:.7rem;
    font-weight:700;
}
.q-confirmed-badge.is-on{ display:inline-flex; }

.q-confirm-btn,
.q-edit-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 13px;
    border-radius:var(--radius-s);
    font:inherit;
    font-size:.8rem;
    font-weight:600;
    cursor:pointer;
    box-shadow:var(--shadow);
    transition:transform .15s ease, box-shadow .15s ease;
}
.q-confirm-btn{
    background:linear-gradient(135deg,var(--gr-700),var(--gr-500));
    color:#fff;
    border:1px solid var(--gr-700);
}
.q-edit-btn{
    background:#fff;
    color:var(--bl-700);
    border:1px solid var(--bl-300);
}
.q-confirm-btn:hover,
.q-edit-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-strong); }
.q-confirm-btn:focus-visible,
.q-edit-btn:focus-visible{ outline:2px solid var(--bl-500); outline-offset:2px; }
.q-confirm-btn.hidden,
.q-edit-btn.hidden{ display:none; }

/* Gesperrte Felder: ruhiger Grund statt Transparenz -- ausgegraute Schrift
   faellt beim Kontrast durch und liest sich wie ein Fehler. */
.q-section.is-locked input:disabled,
.q-section.is-locked select:disabled{
    background:var(--bl-50);
    color:var(--br-900);
    border-color:var(--bl-200);
    opacity:1;
    cursor:default;
}

/* ============================================================================
   Nachzug zu Christinas Entwurf (21.09.2026)

   Der Entwurf setzt selbst auf ppwr-module.css auf -- sein Design ist unseres.
   Nachzuziehen waren die Bauteile: Einstiegskarte, Fortschritt, Sprungleiste,
   Altwert-Zeile, Rechtsgrundlage am Blockkopf, Zertifikate im Bestand. Sie
   nutzen dieselben Tokens und Formen wie die Blockkarten darunter.
   ========================================================================= */

/* Einstieg: worum es geht, zu welcher Komponente, seit wann */
.q-intro{
    background:linear-gradient(180deg,#fff 0%,#FCFDFF 100%);
    border:1px solid var(--bl-100);
    border-radius:var(--radius-l);
    box-shadow:var(--shadow);
    padding:20px 24px 18px;
    margin-bottom:14px;
}
.q-intro-title{
    margin:0 0 8px;
    font-size:1.12rem;
    font-weight:600;
    color:var(--text-heading);
}
.q-intro-text{ margin:0 0 6px; font-size:.92rem; line-height:1.55; color:var(--text-body); }
.q-intro-privacy{ margin:0; font-size:.82rem; line-height:1.5; color:var(--text-secondary); }
.q-intro-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 26px;
    margin-top:14px;
    padding-top:13px;
    border-top:1px solid var(--bl-100);
}
.q-intro-meta b{ display:block; font-size:.95rem; color:var(--text-heading); }
.q-intro-meta span{ font-size:.78rem; color:var(--text-secondary); }
.q-intro-check{
    margin:13px 0 0;
    padding:10px 12px;
    border-radius:var(--radius-s);
    background:var(--bl-50);
    color:var(--bl-900);
    font-size:.86rem;
    line-height:1.5;
}

/* Fortschritt + Sprungleiste */
.q-orientation{ margin:0 0 18px; }
.q-progress{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.q-progress-bar{
    flex:1 1 180px;
    min-width:140px;
    height:8px;
    border-radius:99px;
    background:var(--br-100);
    overflow:hidden;
}
.q-progress-bar > span{
    display:block;
    height:100%;
    width:0;
    border-radius:99px;
    background:linear-gradient(135deg,var(--gr-700),var(--gr-500));
    transition:width .25s ease;
}
.q-progress-label{ font-size:.84rem; font-weight:700; color:var(--text-heading); white-space:nowrap; }

.q-jump{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.q-jump a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 13px;
    border-radius:99px;
    border:1px solid var(--bl-300);
    background:#fff;
    color:var(--bl-700);
    font-size:.8rem;
    font-weight:700;
    text-decoration:none;
}
.q-jump a:hover{ background:var(--bl-50); }
/* Punkt statt Haken: Farbe allein traegt hier keine Aussage -- der Text des
   Blocks steht daneben, und der Fortschritt steht als Zahl darueber. */
/* Offen = Orange (dasselbe --am-orange wie der Status "Versendet" im
   Lieferantenmodul), erledigt = Gruen. Grau las sich wie "gesperrt". */
.q-jump-dot{ width:7px; height:7px; border-radius:50%; background:var(--am-orange); flex-shrink:0; }
.q-jump-dot.is-done{ background:var(--gr-700); }

/* Rechtsgrundlage am Blockkopf */
.q-section-legal{
    margin:-2px 0 12px;
    font-size:.8rem;
    color:var(--text-secondary);
    letter-spacing:.01em;
}

/* "Zuletzt gemeldet am ...": Herkunft und Alter eines vorbefuellten Wertes */
.q-prev{
    margin-top:6px;
    font-size:.8rem;
    line-height:1.45;
    color:var(--text-secondary);
}

/* Zertifikate, die uns schon vorliegen */
.q-certs{
    margin-bottom:16px;
    border:1px solid var(--bl-100);
    border-radius:var(--radius-m);
    background:#fff;
    overflow:hidden;
}
.q-certs-title{
    padding:9px 14px;
    background:var(--bl-50);
    color:var(--bl-900);
    font-size:.8rem;
    font-weight:700;
}
.q-cert-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding:9px 14px;
    border-top:1px solid var(--bl-100);
    font-size:.86rem;
}
.q-cert-name{ color:var(--text-body); overflow-wrap:anywhere; }
.q-cert-state{
    display:inline-flex;
    align-items:center;
    padding:3px 10px;
    border-radius:99px;
    font-size:.78rem;
    font-weight:700;
    white-space:nowrap;
}
.q-cert-valid{ background:var(--gr-50); color:var(--gr-700); }
.q-cert-expired{ background:var(--am-rot-bg); color:var(--am-rot); }
.q-cert-unknown{ background:var(--am-orange-bg); color:var(--am-orangetext); }

/* ============================================================================
   Designpruefung 21.09.2026: was noch aus der Zeit vor dem Redesign stammte

   Die alten Stylesheets (modal.css, error.css, success.css) arbeiten mit der
   Vorgaenger-Palette: Knoepfe in Braun, ein roter Vollflaechen-Kasten als
   Fehlerseite, Dialoge mit brauner Kontur. Die Farbwerte selbst sind
   dieselben wie unsere --br-*-Toene -- was alt aussieht, ist ihre VERWENDUNG:
   Braun ist im neuen System die Schrift- und Flaechenfarbe, Blau die
   Handlungsfarbe. Hier wird deshalb nicht die Palette getauscht, sondern die
   Rolle der Farbe korrigiert.

   Dieses Blatt laedt zuletzt und ueberschreibt die alten Regeln, ohne sie zu
   loeschen -- sie gelten weiter fuer alles, was hier nicht steht.
   ========================================================================= */

/* ---- Ja/Nein nebeneinander ----------------------------------------------
   Zwei Antworten untereinander lesen sich wie eine Liste mit offenem Ende;
   nebeneinander sieht man auf einen Blick, dass es genau zwei sind. Bei
   schmalem Fenster bricht es von selbst um. */
.q-yesno{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; }
.q-yesno .q-label{ flex:1 1 100%; }
.q-yesno .q-radio-option{ flex:0 1 auto; min-width:120px; }

/* ---- Dialoge ------------------------------------------------------------- */
.custom-modal{ background-color:rgba(26,47,76,.42); }
.modal-content{
    background:#fff;
    border:1px solid var(--bl-100);
    border-radius:var(--radius-l);
    box-shadow:0 24px 60px -28px rgba(26,47,76,.45);
    padding:24px 26px 20px;
    color:var(--text-body);
    max-width:520px;
}
.modal-content p{
    color:var(--text-body);
    font-size:.95rem;
    line-height:1.55;
    margin:0 0 18px;
}
.modal-content input{
    border:1px solid var(--bl-300);
    border-radius:var(--radius-s);
    padding:9px 12px;
    color:var(--text-body);
    background:#fff;
}
.modal-content input:focus{
    outline:none;
    border-color:var(--bl-500);
    box-shadow:0 0 0 3px var(--bl-50);
}
/* Knoepfe: eine Form, zwei Gewichte. Die bejahende Antwort traegt den
   Blau-Verlauf des Moduls, die verneinende bleibt zurueckhaltend. */
.modal-content button{
    min-height:38px;
    padding:0 16px;
    border-radius:var(--radius-s);
    border:1px solid var(--bl-300);
    background:#fff;
    color:var(--bl-700);
    font-weight:600;
    box-shadow:var(--shadow);
    transition:transform .15s ease, box-shadow .15s ease;
}
.modal-content button:hover,
.modal-content button:focus{
    background:var(--bl-50);
    color:var(--bl-700);
    transform:translateY(-1px);
    box-shadow:var(--shadow-strong);
}
.modal-content #confirmYes,
.modal-content #promptOK,
.modal-content #alertOk{
    border-color:var(--bl-700);
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500));
    color:#fff;
}
.modal-content #confirmYes:hover,
.modal-content #promptOK:hover,
.modal-content #alertOk:hover,
.modal-content #confirmYes:focus,
.modal-content #promptOK:focus,
.modal-content #alertOk:focus{
    background:linear-gradient(135deg,var(--bl-900),var(--bl-700));
    color:#fff;
}
.close-btn{ color:var(--br-500); }
.close-btn:hover,
.close-btn:focus{ color:var(--text-heading); }

/* ---- Fehler- und Erfolgsseite -------------------------------------------
   Vorher: ein rotes bzw. gruenes Vollflaechen-Rechteck, absolut in die
   Bildschirmmitte gesetzt, mit 5rem grossem Symbol. Es sprengte die Seite
   und stand ausserhalb des Seitenflusses. Jetzt eine Karte wie jeder andere
   Block, mit dem Symbol in einem ruhigen Feld. */
.error-message,
.success-message{
    position:static !important;
    transform:none !important;
    left:auto; top:auto;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    gap:14px;
    max-width:520px;
    margin:40px auto;
    padding:32px 30px;
    background:linear-gradient(180deg,#fff 0%,#FCFDFF 100%);
    border:1px solid var(--bl-100);
    border-radius:var(--radius-l);
    box-shadow:var(--shadow);
    color:var(--text-body);
    font-size:1rem;
    font-weight:400;
    text-align:center;
}
.error-message i,
.success-message i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    border-radius:50%;
    font-size:1.6rem;
}
.error-message i{ background:var(--am-rot-bg); color:var(--am-rot); }
.success-message i{ background:var(--gr-50); color:var(--gr-700); }
.error-message p,
.success-message p{
    margin:0;
    font-size:1rem;
    line-height:1.6;
    color:var(--text-body);
}

/* Der Weg zurueck ist eine Handlung -- also ein Knopf in der Handlungsfarbe,
   nicht ein umrandeter Textblock. */
.retry-button{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:40px;
    padding:0 18px;
    border:1px solid var(--bl-700);
    border-radius:var(--radius-s);
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500));
    color:#fff !important;
    font-size:.92rem;
    font-weight:600;
    text-decoration:none;
    box-shadow:var(--shadow);
}
.retry-button:hover{ background:linear-gradient(135deg,var(--bl-900),var(--bl-700)); }
.retry-button i{ font-size:.92rem; margin:0; }

/* ---- Fragenummern, Kopfzeilen-Absender, Blockunterzeile ------------------
   Die Nummern stammen aus der Befragungsvorlage (Frage 7 bis 23) -- auf sie
   beziehen sich Rueckfragen. Sie stehen deshalb vor der Frage, nicht
   irgendwo daneben. */
.q-nr{
    color:var(--text-secondary);
    font-weight:700;
    margin-right:6px;
}
.q-escape-option .q-nr{ margin-right:2px; }

.q-section-sub{
    margin:-2px 0 12px;
    font-size:.84rem;
    line-height:1.5;
    color:var(--text-secondary);
    max-width:62ch;
}

/* "Angefragt von ..." oben rechts, neben der Sprachwahl. */
.sq-requested-by{
    display:inline-flex;
    flex-direction:column;
    align-self:center;
    padding-right:16px;
    text-align:right;
    line-height:1.25;
    min-width:0;
}
/* Ohne Firmennamen im Mandantenstamm bleibt der Platz leer -- die Ausrichtung
   haengt nicht daran (s. margin-right am Logo). */
.sq-requested-by:empty{ display:none; }
.sq-rb-label{ font-size:.7rem; color:var(--text-secondary); white-space:nowrap; }
.sq-rb-name{
    font-size:.85rem;
    font-weight:700;
    color:var(--text-heading);
    /* Lange Firmennamen duerfen die Kopfzeile nicht sprengen. */
    max-width:40vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
/* Wird es eng, weicht die Produktplakette -- sie wiederholt die Ueberschrift
   der Seite. "Angefragt von" steht nirgendwo sonst und bleibt deshalb, nur
   knapper. */
@media (max-width:640px){
    .hq-brand-tag{ display:none; }
    .sq-rb-label{ display:none; }
    .sq-rb-name{ font-size:.78rem; max-width:48vw; }
    .sq-requested-by{ padding-right:12px; }
}

/* ---- Gueltigkeitsdatum eines Zertifikats --------------------------------
   Das Datumsfeld stand ohne Beschriftung zwischen Dateiauswahl und
   Hochladen-Knopf. Was es bedeutet, stand nur im Tooltip. */
.q-valid-until-label{
    font-size:.78rem;
    font-weight:600;
    color:var(--text-secondary);
    white-space:nowrap;
}
.q-document-valid{
    margin-left:10px;
    font-size:.8rem;
    color:var(--text-secondary);
}
/* Ohne Datum laeuft der Nachweis irgendwann ab, ohne dass es jemand merkt --
   deshalb sichtbar, nicht stillschweigend leer. */
.q-document-valid.fehlt{ color:var(--am-orangetext); }
.q-hint-after{ margin:10px 0 0; }

/* Absenden: Blau ist im Modul die Handlungsfarbe -- Gruen steht dort fuer
   einen erreichten Zustand (konform, verifiziert), nicht fuer einen Knopf. */
#submit-button.button{
    background:linear-gradient(135deg,var(--bl-700),var(--bl-500));
    border:1px solid var(--bl-700);
    color:#fff;
}
#submit-button.button:hover{ background:linear-gradient(135deg,var(--bl-900),var(--bl-700)); }

/* Frage 22 im Uploadkasten, ueber den Bedienelementen. */
.q-upload-question{
    margin:8px 0 10px;
    font-size:.84rem;
    line-height:1.45;
    color:var(--text-body);
}

/* ---- Materialauswahl: Suche statt Augenarbeit --------------------------- */
.q-material-tools{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin:4px 0 6px;
}
.q-material-search{
    flex:1 1 260px;
    max-width:340px;
    padding:9px 12px;
    border:1px solid var(--bl-300);
    border-radius:var(--radius-s);
    background:#fff;
    color:var(--text-body);
    font:inherit;
    font-size:.88rem;
}
.q-material-search:focus{
    outline:none;
    border-color:var(--bl-500);
    box-shadow:0 0 0 3px var(--bl-50);
}
/* "Gewaehlt: PET": traegt dieselbe Farbe wie die hervorgehobene Karte, damit
   Zeile und Auswahl als dasselbe gelesen werden. Lange Materialnamen duerfen
   umbrechen -- nowrap schob die Zeile auf schmalen Schirmen aus der Leiste. */
.q-material-count{
    font-size:.82rem;
    font-weight:700;
    color:var(--bl-700);
}
.q-material-option.hidden,
.q-material-list.hidden,
.q-material-category.hidden{ display:none; }

/* ---- Hinweise am Ende und in der Fusszeile ------------------------------ */
.q-submit-note{
    max-width:var(--q-breite);
    margin:26px auto 0;
    padding:0 4px;
    font-size:.86rem;
    line-height:1.55;
    color:var(--text-secondary);
    text-align:center;
}
.q-footer-note{
    padding:10px 20px 0;
    font-size:.82rem;
    line-height:1.5;
    color:var(--text-secondary);
    text-align:center;
}
/* Abgelaufenes Zertifikat: der Hinweis steht in der Liste, in der es steht. */
.q-certs-note{
    padding:9px 14px;
    border-top:1px solid var(--bl-100);
    background:var(--am-rot-bg);
    color:var(--am-rot);
    font-size:.82rem;
    font-weight:600;
}

/* Lesebreite innerhalb der nun breiteren Flaeche: Fliesstext bleibt bei rund
   85 Zeichen, Raster und Felder duerfen die volle Breite nutzen. */
.q-section-sub,
.q-section-hint,
.q-section-legal,
.q-intro-text,
.q-note,
.q-prev,
.sup-subblock-hint{ max-width:85ch; }