/* ==========================================================================
   Übersetzerportal — profischnell.com
   Zurückhaltendes, redaktionelles Erscheinungsbild: nahezu monochrome
   Fläche, ein einziger Akzentton (Markenblau), Serif für Überschriften als
   ruhiger Kontrast zu IBM Plex Sans im Fließtext. Keine Farbverläufe, keine
   bunten Badge-Flächen als Standard.
   ========================================================================== */

:root{
  /* Basis — Weiß, wie im Kundenportal */
  --bg:        #FFFFFF;   /* Seiten-Hintergrund */
  --card:      #FFFFFF;   /* Karten-Hintergrund */
  --card-soft: #F7F6F3;   /* dezente helle Fläche für Kopfzeilen etc. */

  /* Textfarben — Variablennamen bleiben wie zuvor (--paper/--paper-dim),
     damit alle bestehenden PHP-Templates unverändert funktionieren. */
  --paper:      #12303D;  /* kräftige Schrift — dunkles Markenblau */
  --paper-dim:  #5C7078;  /* gedämpfte Schrift, blaugrau */

  /* Akzente — Variablennamen unverändert (--accent/--gold/--error/--petrol*).
     --gold ist bewusst nur noch ein Reserve-Ton für Sonderfälle, NICHT mehr
     der Standard für Badges/Zierlinien — das wirkte zu bunt/generisch. */
  --accent:      #0E3A4C; /* Markenblau — primäre Aktion, „erledigt/bestätigt“ */
  --accent-soft: #E3EBEC; /* helles Blau für Flächen/Badges */
  --gold:        #E2793E; /* Reserve-Akzent, nur noch gezielt/sparsam einsetzen */
  --gold-soft:   #FBE7D4;
  --sun:         #EE8F4E;
  --error:       #C6433F;
  --error-soft:  #FBE6E4;

  --petrol-dark: #08222E; /* dunkelster Markenton, für Hover-Zustände etc. */
  --petrol:      #FFFFFF; /* Karten-/Panel-Hintergrund (ehem. dunkel) */

  --hair: rgba(18,48,61,.14);
  --line: rgba(14,58,76,0.14);
  --shadow: 0 1px 2px rgba(14,48,61,.05), 0 8px 24px rgba(14,48,61,.07);
  --shadow-hover: 0 2px 4px rgba(14,48,61,.07), 0 14px 32px rgba(14,58,76,.16);
  --radius: 18px;
  --radius-sm: 10px;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--paper);
  font-family:'IBM Plex Sans', -apple-system, Segoe UI, Arial, sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:0;
  color:var(--paper);
  margin:0 0 .45em;
}
h1{font-size:clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); line-height:1.2;}
h3{font-size:1.15rem; font-weight:500;}

.bullet-list{list-style:none;margin:0 0 20px;padding:0;}
.bullet-list li{position:relative;padding:0 0 10px 22px;color:var(--paper-dim);}
.bullet-list li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--accent);
}
.bullet-list li strong{color:var(--paper);}

a{color:var(--accent); text-decoration:none; text-underline-offset:3px;}
a:hover{text-decoration:underline;}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

.wrap{max-width:1440px;margin:0 auto;padding:0 32px;}
.wrap.wrap-narrow{max-width:600px;}

/* ---- Eyebrow: schlichtes Kicker-Label, keine bunte Pille mehr ---- */
.eyebrow{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:.82rem;
  font-weight:600;
  color:var(--paper-dim);
  letter-spacing:.01em;
  display:inline-block;
  padding-bottom:12px;
  border-bottom:1px solid var(--hair);
}
.eyebrow::before{content:none;}

/* ---- Navigation ---- */
.navbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.navbar .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 32px;max-width:1600px;flex-wrap:wrap;gap:10px 20px;
}
.navbar .brand{
  font-family:'IBM Plex Sans',sans-serif; font-weight:600;
  color:var(--paper); font-size:1.02rem;
  display:flex; align-items:center;
}
.navbar a.nl{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.88rem; font-weight:600;
  color:var(--paper-dim); text-decoration:none;
  margin-left:22px; padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.navbar a.nl:hover{color:var(--accent); border-bottom-color:var(--accent); text-decoration:none;}

/* ---- Karten ("doc" = Formular-/Inhaltskarte) — Haarlinie statt Farbverlauf ---- */
.doc{
  margin:40px auto;
  background:var(--card);
  border:1px solid var(--hair);
  border-top:2px solid var(--accent);
  border-radius:var(--radius);
  overflow:hidden;
}
.doc.doc-danger{border-top-color:var(--error);}
.doc-head{
  padding:20px 32px;
  background:var(--card-soft);
  border-bottom:1px solid var(--hair);
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.doc-head .ref{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  color:var(--paper-dim);
}

form{padding:32px;}
.field{margin-bottom:22px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field-row .field{margin-bottom:22px;}
@media (max-width:640px){.field-row{grid-template-columns:1fr;}}
label{
  display:block; font-family:'IBM Plex Sans',sans-serif;
  font-size:.9rem; font-weight:600; color:var(--paper);
  margin-bottom:7px;
}
input,select,textarea{
  width:100%;
  background:var(--card-soft);
  border:1.5px solid var(--hair);
  border-radius:var(--radius-sm);
  color:var(--paper);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.98rem;
  padding:11px 14px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder,textarea::placeholder{color:#A29BB0;}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  background:var(--card);
  box-shadow:0 0 0 4px var(--accent-soft);
}
select option{background:var(--card);}
textarea{resize:vertical;min-height:96px;}

/* Checkboxen/Radios sollen nicht wie Textfelder aussehen (kein Padding/Hintergrund) */
input[type=checkbox],input[type=radio]{
  width:auto; padding:0; background:none; flex-shrink:0;
  accent-color:var(--accent); margin:0;
}

/* Einwilligungs-Zeile (Datenschutz-Checkbox + Fließtext): Text steht in EINEM
   Span, damit er als ein Flex-Element umbricht statt wortweise in Spalten
   zu zerfallen. */
.consent{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.85rem; font-weight:400; color:var(--paper-dim);
  margin:6px 0 26px; cursor:pointer; line-height:1.55;
}
.consent input{margin:0 10px 0 0; margin-top:3px;}

/* Interne Einschätzung im Mitarbeiter-Dashboard — nur intern sichtbar */
.bewertung-select{
  width:auto; padding:8px 10px; font-size:.84rem; font-weight:600;
}
.bewertung-select.bewertung-offen{background:var(--card-soft); color:var(--paper-dim); border-color:var(--hair);}
.bewertung-select.bewertung-passend{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
.bewertung-select.bewertung-nicht_passend{background:var(--error-soft); color:var(--error); border-color:var(--error);}

.btn{
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.94rem; font-weight:700;
  padding:13px 26px;
  border-radius:999px;
  text-decoration:none;
  display:inline-block;
  border:1.5px solid var(--accent);
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover{
  background:var(--petrol-dark);
  box-shadow:var(--shadow-hover);
  transform:translateY(-1px);
  text-decoration:none;
}
.btn:active{transform:translateY(0);}
.btn-block{width:100%; justify-content:center; text-align:center;}
.btn-ghost{background:transparent; color:var(--paper-dim); border-color:var(--hair); box-shadow:none;}
.btn-ghost:hover{background:var(--card-soft); color:var(--paper); box-shadow:none; transform:none;}
.btn-danger{background:var(--error); border-color:var(--error);}
.btn-danger:hover{background:#9C2B2B; border-color:#9C2B2B;}

.note{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--hair);
  font-size:.84rem; color:var(--paper-dim); line-height:1.75;
}

.flash-error{
  border:1.5px solid var(--error); border-left-width:4px; background:var(--error-soft); color:#9C2B2B;
  border-radius:var(--radius-sm); padding:14px 18px; font-size:.92rem;
  margin:24px 0 0; font-weight:600;
}
.flash-ok{
  border:1.5px solid var(--accent); border-left-width:4px; background:var(--accent-soft); color:#0E3A4C;
  border-radius:var(--radius-sm); padding:14px 18px; font-size:.92rem;
  margin:24px 0 0; font-weight:600;
}

table.apps{width:100%;border-collapse:collapse;font-size:.9rem;}
table.apps th{
  text-align:left; font-family:'IBM Plex Sans',sans-serif;
  font-size:.78rem; font-weight:700; color:var(--paper-dim);
  padding:12px 16px; border-bottom:1.5px solid var(--hair);
}
table.apps td{
  padding:15px 16px; border-bottom:1px solid var(--hair); color:var(--paper-dim);
}
table.apps tr:last-child td{border-bottom:none;}
table.apps tbody tr:nth-child(odd) td{background:rgba(14,58,76,.018);}
table.apps tr:hover td{background:var(--card-soft);}

.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:.76rem; font-weight:700;
  padding:5px 13px; border-radius:999px;
  background:var(--card-soft); color:var(--paper-dim); border:1px solid var(--hair);
}
.badge::before{content:none;}
.badge.done{background:var(--accent-soft); color:#0E3A4C; border-color:transparent;}

.mini-steps{list-style:none;margin:0;padding:24px 32px 4px;counter-reset:s;}
.mini-steps li{
  counter-increment:s; position:relative; padding:0 0 18px 40px;
  font-size:.92rem; color:var(--paper-dim);
}
.mini-steps li::before{
  content:counter(s);
  position:absolute; left:0; top:-1px; width:26px;height:26px;
  border:1.5px solid var(--accent); border-radius:50%; color:var(--accent);
  font-family:var(--serif); font-size:.8rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:4px 24px;}
.checkbox-grid.scroll{
  max-height:230px; overflow-y:auto;
  border:1.5px solid var(--hair); border-radius:var(--radius-sm);
  padding:8px 10px; background:var(--card-soft);
}
.checkbox-item{
  display:flex; align-items:flex-start; gap:10px; font-size:.92rem;
  color:var(--paper-dim); padding:8px 10px; border-radius:var(--radius-sm);
  cursor:pointer; font-family:'IBM Plex Sans',sans-serif;
  transition:background .12s ease, color .12s ease;
}
.checkbox-item input{width:auto;margin-top:3px;accent-color:var(--accent);}
.checkbox-item:hover{color:var(--paper); background:var(--card-soft);}

@media (max-width:600px){
  .checkbox-grid{grid-template-columns:1fr;}
  form{padding:24px;}
  .doc-head{padding:18px 24px;}
}

@media (prefers-reduced-motion: reduce){
  .btn, .checkbox-item, input, select, textarea, .navbar a.nl{transition:none;}
}