/* feedback.bpam.lu — B&P Corporate Design
   Farben aus CI-Guidelines (Farbschema 20.09.2022):
   Hauptfarbe 1 #004C92 · Hauptfarbe 2 #4A575F · Kontrast #1C2B34/#323E45/#636F77/#858E93 */

:root{
  --bp-blue:#004C92; --bp-blue-hover:#003E75; --bp-blue-050:#E9F0F8;
  --bp-grey:#4A575F;
  --ground:#F4F7FA; --card:#FFFFFF;
  --ink:#1C2B34; --ink-2:#323E45; --ink-3:#636F77; --ink-4:#858E93;
  --line:#E4EAF0; --line-2:#EEF2F7; --field:#FFFFFF; --field-line:#C9D4DF;
  --ok:#1E7A52; --ok-bg:#E7F4EE; --ok-line:#BFE1CF;
  --danger:#C0392B; --danger-bg:#FBECEA;
  --radius:11px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(28,43,52,.05), 0 14px 34px -14px rgba(28,43,52,.16);
  --logo-filter:none;
}
@media (prefers-color-scheme: dark){
  :root{
    --bp-blue:#4692D8; --bp-blue-hover:#5AA6EC; --bp-blue-050:#12233A;
    --bp-grey:#98A4AF;
    --ground:#0E151C; --card:#16212C;
    --ink:#EEF3F8; --ink-2:#C2CBD3; --ink-3:#8A96A0; --ink-4:#6B7784;
    --line:#26333F; --line-2:#1D2732; --field:#0F1922; --field-line:#2E3D4B;
    --ok:#4CC38A; --ok-bg:#0F261F; --ok-line:#1F4A3A;
    --danger:#E06A5C; --danger-bg:#2A1613;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 20px 44px -16px rgba(0,0,0,.6);
    --logo-filter:brightness(0) invert(1);
  }
}
:root[data-theme="light"]{
  --bp-blue:#004C92; --bp-blue-hover:#003E75; --bp-blue-050:#E9F0F8; --bp-grey:#4A575F;
  --ground:#F4F7FA; --card:#FFFFFF; --ink:#1C2B34; --ink-2:#323E45; --ink-3:#636F77; --ink-4:#858E93;
  --line:#E4EAF0; --line-2:#EEF2F7; --field:#FFFFFF; --field-line:#C9D4DF;
  --ok:#1E7A52; --ok-bg:#E7F4EE; --ok-line:#BFE1CF; --danger:#C0392B; --danger-bg:#FBECEA;
  --logo-filter:none;
}
:root[data-theme="dark"]{
  --bp-blue:#4692D8; --bp-blue-hover:#5AA6EC; --bp-blue-050:#12233A; --bp-grey:#98A4AF;
  --ground:#0E151C; --card:#16212C; --ink:#EEF3F8; --ink-2:#C2CBD3; --ink-3:#8A96A0; --ink-4:#6B7784;
  --line:#26333F; --line-2:#1D2732; --field:#0F1922; --field-line:#2E3D4B;
  --ok:#4CC38A; --ok-bg:#0F261F; --ok-line:#1F4A3A; --danger:#E06A5C; --danger-bg:#2A1613;
  --logo-filter:brightness(0) invert(1);
}

*{box-sizing:border-box}
/* Muss die display-Regeln weiter unten schlagen: .field/form/.redirect-panel setzen
   display:flex und heben damit die Browser-Regel [hidden]{display:none} auf. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; padding:28px 16px 40px;
}
.wrap{width:100%; max-width:564px}

.brand{display:flex; align-items:center; gap:12px; margin:0 2px 18px}
.brand img{height:30px; width:auto; filter:var(--logo-filter)}
.brand .sep{width:1px; height:26px; background:var(--line)}
.brand .role{font-size:12.5px; color:var(--ink-3); line-height:1.3}
.brand .role b{display:block; color:var(--ink-2); font-weight:600}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden}
.card-top{padding:20px 22px 16px; border-bottom:1px solid var(--line-2);
  display:flex; align-items:flex-start; gap:13px}
.card-top .icon{width:40px; height:40px; border-radius:9px; flex-shrink:0; background:var(--bp-blue-050);
  color:var(--bp-blue); display:flex; align-items:center; justify-content:center}
.card-top h1{margin:0; font-size:17px; font-weight:600; letter-spacing:-.01em; text-wrap:balance}
.card-top p{margin:2px 0 0; font-size:13px; color:var(--ink-2)}

.source{display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:9px 22px; background:var(--bp-blue-050); border-bottom:1px solid var(--line-2);
  font-size:12.5px; color:var(--bp-grey)}
.source b{color:var(--ink); font-weight:600}
.source .dot{width:6px; height:6px; border-radius:50%; background:var(--bp-blue)}

/* ---------- Schritt 1: Vorauswahl Kunde / Vermittler ---------- */
.choice{padding:22px}
.choice-lead{margin:0 0 14px; font-size:13px; font-weight:600; color:var(--ink)}
.choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.choice-card{display:flex; flex-direction:column; align-items:flex-start; gap:7px; text-align:left;
  padding:18px 16px; font:inherit; cursor:pointer;
  background:var(--card); border:1px solid var(--field-line); border-radius:var(--radius);
  transition:border-color .13s, background .13s, transform .05s}
.choice-card:hover{border-color:var(--bp-blue); background:var(--bp-blue-050)}
.choice-card:active{transform:translateY(1px)}
.choice-card .ci{width:38px; height:38px; border-radius:9px; background:var(--bp-blue-050);
  color:var(--bp-blue); display:flex; align-items:center; justify-content:center}
.choice-card:hover .ci{background:var(--card)}
.choice-card .ct{font-size:15px; font-weight:600; color:var(--ink)}
.choice-card .cd{font-size:12.5px; color:var(--ink-3); line-height:1.45}
.choice-hint{display:flex; gap:8px; margin:16px 0 0; padding:12px 14px;
  background:var(--line-2); border-radius:var(--radius-sm);
  font-size:12.5px; color:var(--ink-2); line-height:1.5}
.choice-hint a{color:var(--bp-blue)}

/* ---------- Rollenleiste im Formular ---------- */
.trackbar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 13px; background:var(--bp-blue-050); border:1px solid var(--line);
  border-radius:var(--radius-sm)}
.tb-label{font-size:13px; font-weight:600; color:var(--bp-blue)}
.tb-label::before{content:"Rolle: "; font-weight:500; color:var(--ink-3)}
.tb-change{font:inherit; font-size:12.5px; background:none; border:none; cursor:pointer;
  color:var(--bp-blue); text-decoration:underline; padding:0}

form{padding:22px; display:flex; flex-direction:column; gap:19px}
.field{display:flex; flex-direction:column; gap:6px}
label.lab{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink)}
label.lab.sm{font-size:12.5px; font-weight:500; color:var(--ink-2); margin-bottom:5px}
label.lab .req{color:var(--danger); font-weight:700}
.hint{font-size:12px; color:var(--ink-3); margin:0}

input[type=email], input[type=text], input[type=tel], select, textarea{
  width:100%; font:inherit; font-size:14.5px; color:var(--ink);
  background:var(--field); border:1px solid var(--field-line); border-radius:var(--radius-sm);
  padding:10px 12px; transition:border-color .12s, box-shadow .12s}
textarea{resize:vertical; min-height:120px; line-height:1.55}
select{appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23636F77' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--bp-blue);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bp-blue) 20%, transparent)}
.field.invalid input, .field.invalid select, .field.invalid textarea{border-color:var(--danger)}
.err{display:none; font-size:12px; color:var(--danger); font-weight:500}
.field.invalid .err{display:block}

/* ---------- Erreichbarkeit ---------- */
.radios{display:flex; gap:10px; flex-wrap:wrap}
.radio{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 14px; border:1px solid var(--field-line); border-radius:var(--radius-sm);
  background:var(--field); font-size:14px; color:var(--ink); transition:border-color .12s, background .12s}
.radio:hover{border-color:var(--bp-blue)}
.radio input{accent-color:var(--bp-blue); margin:0}
.radio:has(input:checked){border-color:var(--bp-blue); background:var(--bp-blue-050)}
.phonegrid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}

/* ---------- Weiterleitung statt Ticket ---------- */
.redirect-panel{display:flex; gap:13px; align-items:flex-start;
  background:var(--bp-blue-050); border:1px solid var(--bp-blue); border-radius:var(--radius);
  padding:17px 19px}
.redirect-panel .rp-ico{color:var(--bp-blue); flex-shrink:0; margin-top:1px}
.redirect-panel h2{margin:0 0 5px; font-size:15px; color:var(--ink)}
.redirect-panel p{margin:0 0 12px; font-size:13.5px; color:var(--ink-2); line-height:1.55}
.rp-btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--bp-blue); color:#fff; font-size:14px; font-weight:600;
  padding:10px 18px; border-radius:var(--radius-sm); transition:background .12s}
.rp-btn:hover{background:var(--bp-blue-hover)}

.ta-wrap{position:relative}
.counter{position:absolute; right:10px; bottom:8px; font-size:11.5px; color:var(--ink-3);
  background:var(--field); padding:0 4px; pointer-events:none; font-variant-numeric:tabular-nums}
.counter.warn{color:#B06A00}

.attach-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px}
.attach-btn{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:500;
  color:var(--bp-grey); background:transparent; border:1px dashed var(--field-line); border-radius:var(--radius-sm);
  padding:7px 12px; cursor:pointer; transition:border-color .12s, color .12s}
.attach-btn:hover{border-color:var(--bp-blue); color:var(--bp-blue)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--bp-blue-050);
  border:1px solid var(--line); border-radius:6px; padding:4px 6px 4px 8px; font-size:12px; color:var(--ink); max-width:190px}
.chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip img{width:18px; height:18px; border-radius:3px; object-fit:cover; flex-shrink:0}
.chip button{background:none; border:none; color:var(--ink-3); cursor:pointer; padding:0; display:flex; line-height:0}
.chip button:hover{color:var(--danger)}

/* ALTCHA-Widget (self-hosted) – an B&P-CI angepasst */
.guard-label{font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:6px; margin:0 0 4px}
altcha-widget{display:block; max-width:100%;
  --altcha-max-width:100%; --altcha-border-radius:var(--radius-sm); --altcha-border-width:1px;
  --altcha-color-base:var(--field); --altcha-color-border:var(--field-line);
  --altcha-color-text:var(--ink-2); --altcha-color-border-focus:var(--bp-blue);
  --altcha-color-checkbox-check:var(--bp-blue)}

.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}

.banner{display:none; gap:9px; align-items:flex-start; font-size:13px;
  background:var(--danger-bg); border:1px solid var(--danger); color:var(--danger);
  border-radius:var(--radius-sm); padding:11px 13px}
.banner.show{display:flex}

.foot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--line-2); padding-top:17px}
.privacy{font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:6px; max-width:290px}
.privacy a{color:var(--bp-blue); text-decoration:none}
.privacy a:hover{text-decoration:underline}
.submit{display:inline-flex; align-items:center; gap:9px; font:inherit; font-size:14.5px; font-weight:600;
  color:#fff; background:var(--bp-blue); border:1px solid var(--bp-blue); border-radius:var(--radius-sm);
  padding:11px 22px; cursor:pointer; transition:background .12s, transform .04s}
.submit:hover{background:var(--bp-blue-hover); border-color:var(--bp-blue-hover)}
.submit:active{transform:translateY(1px)}
.submit[disabled]{opacity:.55; cursor:not-allowed}

.success{display:none; gap:12px; align-items:flex-start; margin:0 22px 22px;
  background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:var(--radius); padding:18px 20px}
.success.show{display:flex}
.success .ico{color:var(--ok); flex-shrink:0; margin-top:1px}
.success h2{margin:0 0 3px; font-size:15px; color:var(--ok)}
.success p{margin:0; font-size:13px; color:var(--ink-2)}
.success code{background:var(--card); border:1px solid var(--ok-line); border-radius:5px;
  padding:1px 7px; font-size:12.5px; color:var(--ink); font-weight:600}

.pagefoot{margin:16px 4px 0; font-size:11.5px; color:var(--ink-3); text-align:center; line-height:1.6}
.pagefoot b{color:var(--bp-grey)}

*:focus-visible{outline:2px solid var(--bp-blue); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

@media (max-width:520px){
  body{padding:18px 12px 32px}
  .choice-grid{grid-template-columns:1fr}
  .phonegrid{grid-template-columns:1fr}
  .foot{flex-direction:column; align-items:stretch}
  .submit{justify-content:center}
}