/* ========================
   Base Reset & Defaults
   ======================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body{
  width:100%; height:100%;
  max-width:100%;
  overflow-x:hidden;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.5;
  background:#fff; color:#333;
}

img, picture, video, canvas, svg{ display:block; max-width:100%; }
button, input, select, textarea{ font:inherit; background:none; border:none; outline:none; }
body{ overflow-wrap:anywhere; }

/* Utilities */
.page-title{ text-align:center; font-size:2rem; font-weight:700; margin-top:2rem; margin-bottom:2rem; color:#333; }
.site-footer{ text-align:center; font-size:.875rem; color:#666; padding:1rem; }
.mt-1{margin-top:.25rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;}
.mb-1{margin-bottom:.25rem;} .mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:1rem;}
.px-1{padding-left:.25rem;padding-right:.25rem;}
.px-2{padding-left:.5rem;padding-right:.5rem;}
.px-3{padding-left:1rem;padding-right:1rem;}
.nowrap{ white-space:nowrap; }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ========================
   Form Layout
   ======================== */
.form-standard{ max-width:1100px; margin:2rem auto; padding:1.5rem; background:#fff; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.form-standard.form--narrow{ max-width:860px; }

.form-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.form-columns{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:2rem; align-items:start; justify-items:center; }
.form-project{ display:flex; flex-direction:column; gap:1.75rem; }
.form-card-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); align-items:stretch; }
.form-card-grid--project{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  align-items:stretch;
}
@media (min-width: 1024px){
  .form-card-grid--project{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.form-card-grid--project-overview{ grid-template-columns:minmax(min(100%,320px),2fr) minmax(min(100%,240px),1fr); align-items:stretch; }
.project-row-three{
  grid-column: 1 / -1;              /* <— hier passiert die “Breitenübernahme” */
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px 24px;
}
.form-card-grid--project-overview > .form-card{ height:100%; }
.form-card--stretch{ height:100%; }
.form-card{ border:1px solid #e5e7eb; border-radius:16px; background:#fff; box-shadow:0 8px 18px rgba(15,23,42,.06); display:flex; flex-direction:column; height:100%; }
.form-card__header{ padding:1rem 1.25rem .8rem; border-bottom:1px solid #edf2f7; font-weight:600; font-size:1.05rem; color:#1f2937; }
.form-card__body{ padding:1rem 1.25rem 1.25rem; display:grid; gap:.85rem; }
.form-card__body--columns-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.form-card__body--columns-3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.form-card__body--compact{ gap:.6rem; align-content:start; }
.form-card__body--dense{ gap:.65rem; column-gap:1rem; }
.form-card__body--center{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1rem; min-height:100%; }
.form-card--full{ grid-column:1 / -1; }
.form-card--highlight{ border:1px solid #dbeafe; box-shadow:0 10px 22px rgba(59,130,246,.12); }
.form-card--compact .form-card__body{ min-height:100%; }
.form-field{ display:flex; flex-direction:column; gap:.25rem; }
.form-field label{ font-weight:600; color:#1f2937; margin-bottom:0; }
.form-field input,
.form-field select,
.form-field textarea{ margin-bottom:0; }
.form-field--static{ display:flex; flex-direction:column; gap:.35rem; }
.form-field__label{ font-weight:600; color:#1f2937; }
.form-static-value{
  display:flex;
  width:100%;
  box-sizing:border-box;
  align-items:center;
  position:relative;
  min-height:38px;
  padding:.55rem .75rem;
  border:1px dashed #cbd5f5;
  border-radius:8px;
  background:#f8fafc;
  font-weight:600;
  color:#0f172a;
  gap:.35rem;
  flex-wrap:wrap;
  overflow-wrap:anywhere;
}
.form-static-value__primary{ display:block; font-weight:600; }
.form-hint{ font-size:.9rem; line-height:1.45; margin:0 0 .5rem; }
.form-hint--warning{ color:#b45309; background:#fef3c7; border:1px solid #fcd34d; border-radius:8px; padding:.6rem .75rem; }
.form-hint--muted{ color:#6b7280; }
.form-list{ margin:.25rem 0 0; padding-left:1.15rem; color:#1f2937; }
.form-list li{ margin:.2rem 0; }
.assessment-active-list{ margin:.5rem 0 0; }
.assessment-active-list .form-field__label{ display:block; margin-bottom:.35rem; }
.form-static-value--hover{ cursor:pointer; }
.form-static-tooltip{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:20;
  min-width:220px;
  max-width:280px;
  max-height:220px;
  overflow:auto;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  box-shadow:0 14px 28px rgba(15,23,42,.18);
  padding:.75rem;
  color:#1f2937;
  font-weight:500;
  line-height:1.35;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  pointer-events:none;
}
.form-static-tooltip span{ display:block; margin-bottom:.35rem; }
.form-static-tooltip span:last-child{ margin-bottom:0; }
.form-static-value--hover:hover .form-static-tooltip,
.form-static-value--hover:focus-within .form-static-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.form-static-value--hover:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; }

.form-card--note .form-card__body{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  height:100%;
}
.form-card--note textarea{
  flex:1 1 auto;
  margin-bottom:0;
  min-height:180px;
}
.contract-upload {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .contract-upload__label {
    font-weight: 600;
  }

  .contract-preview {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
  }

  .contract-preview__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1rem;
    margin: 1rem 0;
  }

  .contract-preview__grid label {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    gap: 0.35rem;
  }

  .contract-preview__actions {
    display: flex;
    gap: 0.5rem;
  }

  .finance-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .finance-summary dl {
    margin: 0;
  }

  .finance-summary dt {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
  }

  .finance-summary dd {
    margin: 0;
    font-size: 0.95rem;
  }

  .finance-rates {
    margin: 0;
    padding-left: 1.1rem;
  }

  .finance-rates li {
    margin-bottom: 0.25rem;
  }

.contract-preview__hint {
  margin: 0 0 0.75rem;
  font-weight: 600;
}
label{ display:block; font-weight:500; margin-bottom:.5rem; color:#333; }

input, select, textarea{
  width:100%; min-width:0;
  padding:.5rem .75rem; margin-bottom:1rem;
  border:1px solid #bbb; border-radius:4px; background:#fff;
  font-size:1rem; transition:border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus{ border-color:#007bff; box-shadow:0 0 0 3px rgba(0,123,255,.15); outline:none; }
textarea{ resize:vertical; min-height:5rem; }

fieldset{ border:1px solid #e5e7eb; padding:1rem; border-radius:12px; background:#fff; }
legend{ font-weight:600; font-size:1.05rem; padding:0 .5rem; background:#f5f6f8; color:#333; }

.form-actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; align-items:center; margin-top:2rem; }

/* Inline Zeilen */
.form-row-inline{ display:flex; align-items:center; gap:1rem; }
.form-row-inline .field-grow{ flex:1 1 auto; }
.form-row-inline .field-compact{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; }

/* Assessment Block */
.fieldset-assessment{ padding:1rem; border:1px solid #e5e7eb; border-radius:12px; margin-top:1.5rem; background:#fafafa; }
.assessment-toggle{ display:flex; flex-direction:column; gap:.5rem; }
.assessment-toggle__label{ display:flex; align-items:center; gap:.75rem; font-weight:600; color:#1f2937; cursor:pointer; }
.assessment-toggle__label input{ margin:0; width:auto; }
.assessment-toggle__label span{ font-weight:500; }
#assessment-tools,
.assessment-tools{ display:flex; flex-wrap:wrap; gap:.75rem; transition:opacity .3s ease; }
#assessment-tools.hidden,
.assessment-tools.hidden{ opacity:0; pointer-events:none; height:0; overflow:hidden; }
.flex-row-assessment{ display:flex; gap:1.5rem; align-items:flex-start; margin-bottom:2rem; }
.flex-row-assessment fieldset{ flex:2; margin:0; }
.assessment-side-button{ flex:1; display:flex; align-items:flex-start; justify-content:flex-end; padding-top:2rem; }
.assessment-side-button .btn{ white-space:nowrap; }

/* Header – Logout */
.logout-link{ margin-left:auto; font-weight:500; color:#e63946; }
.logout-link i{ margin-right:.25rem; }

/* Checkbox / Radio helpers */
input[type="checkbox"], input[type="radio"]{ width:auto; margin:0; border:none; box-shadow:none; }
.checkbox-line{ display:inline-flex; align-items:flex-start; gap:.6rem; }
.checkbox-line input[type="checkbox"]{ margin-top:.2rem; flex:0 0 auto; }
label.checkbox-line{ display:flex !important; align-items:flex-start; gap:.6rem; }
label.checkbox-line input[type="checkbox"], label.checkbox-line input[type="radio"]{ margin-top:.2rem; flex:0 0 auto; }
label.checkbox-line span{ flex:1 1 auto; white-space:normal; }

/* ========================
   Cards / Tables / Admin
   ======================== */
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1rem; margin-bottom:1rem; }
.card{ border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.card__header{ padding:.75rem 1rem; border-bottom:1px solid #e5e7eb; font-weight:600; }
.card__body{ padding:1rem; }
.card.ok{ border-left:4px solid #22c55e; }
.card.bad{ border-left:4px solid #ef4444; }
.card-label{ font-size:.9rem; color:#556; }
.card-value{ font-weight:600; margin-top:.25rem; }

.detail-group{ border:1px solid #e5e7eb; border-radius:12px; padding:1rem; margin-bottom:1rem; background:#fff; }
.detail-group > legend{ font-weight:600; padding:0 .5rem; }

.table-wrap{ width:100%; max-width:100%; overflow-x:auto; border:1px solid #e5e7eb; border-radius:10px; background:#fff; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.table thead th{ position:sticky; top:0; background:#f7f8fa; color:#334; text-align:left; padding:.6rem .75rem; border-bottom:1px solid #e5e7eb; }
.table tbody td{ padding:.55rem .75rem; border-bottom:1px solid #f0f1f3; vertical-align:middle; }
.table-hover tbody tr:hover{ background:#fafbfc; }
.num{ text-align:right; white-space:nowrap; }

/* Aktionen/Status in Kandidatenliste */
.actions-head{ width:1%; }
.actions-cell{ white-space:nowrap; padding:.4rem .6rem; }
.action-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; }
.inline-action{ display:inline-flex; gap:.25rem; align-items:center; margin-left:.25rem; }

/* Icon Buttons (Größe stabil) */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid #e5e7eb; border-radius:8px;
  background:#fff; cursor:pointer; transition:background .15s, transform .05s;
}
.icon-btn:hover{ background:#f6f7f9; }
.icon-btn:active{ transform:translateY(1px); }
.icon-form{ display:inline-block; }

/* Status Badge */
.badge{ display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.85rem; font-weight:600; }
.badge--muted{   background:#f3f4f6; color:#374151; }
.badge--info{    background:#e0f2fe; color:#075985; }
.badge--warning{ background:#fff7ed; color:#9a3412; }
.badge--success{ background:#dcfce7; color:#166534; }
.badge--danger{  background:#fee2e2; color:#991b1b; }
.badge--purple{  background:#f3e8ff; color:#6b21a8; }
.badge--open{    background:#ecfdf5; color:#065f46; }
.badge--closed{  background:#fef2f2; color:#991b1b; }
.badge--billing{ background:#eff6ff; color:#1e40af; }
.badge--neutral{ background:#f3f4f6; color:#374151; }

/* Historie-Popover */
.hist-trigger{ position:relative; cursor:help; }
.hist-trigger .hist-popover{
  display:none; position:absolute; left:0; top:1.6rem; z-index:10; width:280px;
  background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:.5rem; box-shadow:0 10px 20px rgba(0,0,0,.08);
}
.hist-trigger:hover .hist-popover{ display:block; }
.hist-popover table{ width:100%; font-size:.85rem; border-collapse:collapse; }
.hist-popover th, .hist-popover td{ border-bottom:1px solid #f3f4f6; padding:.25rem .35rem; text-align:left; }

/* Icon-Dropdown (Status) */
.icon-dropdown{ position:relative; display:inline-block; }
.icon-dropdown summary{ list-style:none; }
.icon-dropdown summary::-webkit-details-marker{ display:none; }
.icon-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:20;
  min-width:220px; max-height:260px; overflow:auto;
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 10px 20px rgba(0,0,0,.08); padding:.35rem;
}
.icon-menu li{ list-style:none; }
.icon-menu__item{
  width:100%; text-align:left; padding:.4rem .55rem; border-radius:6px;
  background:none; border:0; cursor:pointer; font-size:.95rem;
}
.icon-menu__item:hover{ background:#f3f4f6; }
.icon-menu__item.is-active{ background:#eef2ff; font-weight:600; }

/* Icon-Button mit unsichtbarem Date-Input als Overlay */
.date-proxy{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* größerer Klickbereich */
  width: 44px;
  height: 44px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.date-proxy:hover{ background:#f9fafb; border-color:#dfe3e8; }
.date-proxy:active{ transform: translateY(1px); }

/* Das Icon selbst soll Klicks durchlassen, damit der Input darunter sie bekommt */
.date-proxy i,
.date-proxy svg{
  pointer-events: none;
  width: 22px;
  height: 22px;
}

/* Der eigentliche Date-Input liegt über der ganzen Fläche, ist unsichtbar,
   öffnet aber bei Klick den nativen Picker */
.date-proxy__input{
  position: absolute;
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  opacity: 0;            /* unsichtbar */
  cursor: pointer;
  border: 0;
  background: transparent;
  /* verhindert Browser-spezifische UI-Artefakte */
  -webkit-appearance: none;
  appearance: none;
}

/* Optional: In sehr engen Layouts Breite leicht reduzieren */
@media (max-width: 420px){
  .date-proxy{ width: 36px; height: 36px; }
}

/* Wrapper: erlaubt das Auge absolut zu positionieren */
.password-field {
  position: relative;
}

/* Platz rechts im Input für das Icon */
.password-field input {
  width: 100%;
  padding-right: 2.5rem; /* damit Text nicht unter das Icon läuft */
  box-sizing: border-box;
}

/* Auge: rechts, vertikal zentriert */
.password-field .toggle-password {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%); /* vertikal zentrieren */
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

/* optional: Fokus-/Hover-Feedback */
.password-field .toggle-password:focus-visible,
.password-field .toggle-password:hover {
  outline: 2px solid #aac7ff;
  border-radius: .4rem;
}

/* Warn- & Error-Boxen */
.error-box{
  position:relative; padding:15px 2.25rem 15px 15px;
  background:#f8d7da; border:1px solid #f5c6cb; color:#721c24;
  border-radius:5px; margin:10px auto; width:auto; max-width:clamp(320px,92vw,720px);
  justify-self:center; align-self:flex-start;
}
.alert-close{ background:none; border:0; color:#721c24; font-size:18px; position:absolute; top:5px; right:5px; cursor:pointer; }
.alert-title{ font-weight:700; margin-bottom:10px; }
.alert-list{ list-style:none; padding:0; margin:0; }
.alert-list li{ margin:5px 0; }
.alert.error {
      background: #fff7d6;
      border: 1px solid #ef4444;
      color: #7c2d12;
      margin-bottom: 1rem;
    }
    .field-error {
      outline: none;
      border: 2px solid #ef4444 !important;
      background: #fff7f7;
    }
    .success-box {
      background: #ecfdf5;
      border: 1px solid #34d399;
      color: #065f46;
      padding: .75rem 1rem;
      border-radius: 10px;
      margin-bottom: 1rem;
      font-size: .95rem;
    }
    .demo-link {
      margin-top: .5rem;
      background: #eef2ff;
      border: 1px solid #c7d2fe;
      padding: .6rem .8rem;
      border-radius: 10px;
      word-break: break-all;
    }

.field-error input, .field-error select, .field-error textarea{ border-color:#dc3545; box-shadow:0 0 0 3px rgba(220,53,69,.15); }

/* Unsaved-Warnbox: initial hidden; via JS .is-visible */
#unsaved-warning{ display:none !important; }
#unsaved-warning.is-visible{
  display:flex !important; position:relative; gap:.75rem;
  padding:.65rem .75rem; background:#fff7ed; border:1px solid #fdba74; color:#5a2a00;
  border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.warn-box__content{ flex:1; font-size:.95rem; }
.warn-box__actions{ display:flex; gap:.5rem; }
.warn-box.is-visible{ animation:fadeIn .15s ease-out both; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;} }

/* Layout-Container */
.admin-narrow{ max-width:1100px; margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; }
.container.admin-narrow{ width:auto; max-width:1100px; }
.toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* Toolbox-Layout */
.toolbox-grid{ display:grid; gap:1rem; grid-template-columns:minmax(280px,1fr) 2fr; }
.stack{ display:grid; gap:1rem; }
.table-responsive{ overflow:auto; }
.taglist{ list-style:none; padding:0; margin:0; display:flex; gap:.35rem; flex-wrap:wrap; }
.tag{ background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff; border-radius:999px; padding:.15rem .5rem; font-size:.85rem; }

.grid{ display:grid; gap:1rem; }
.grid--2col{ grid-template-columns:repeat(auto-fit, minmax(min(100%,280px), 1fr)); }

/* ========================
   Responsive
   ======================== */
@media (max-width:980px){
  .form-columns{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .form-card-grid--project-overview{ grid-template-columns:1fr; }
  .project-row-three{ grid-template-columns:1fr; }
  .action-row{ flex-wrap:wrap; }
  .actions-cell{ white-space:normal; }
  .toolbox-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  main.container,
  .container,
  .form-standard{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    padding-left:1rem;
    padding-right:1rem;
  }
  .page-title{
    font-size:1.6rem;
    overflow-wrap:anywhere;
  }
  .form-card,
  .card,
  .detail-group,
  fieldset{
    min-width:0;
  }
  .form-actions,
  .button-group{
    justify-content:center;
  }
  .form-row-inline{ flex-direction:column; align-items:stretch; gap:.5rem; }
  .form-row-inline .field-compact{ justify-content:flex-start; }
}
@media (max-width:480px){
  .hist-trigger .hist-popover{ left:auto; right:0; width:240px; }
}

/* ========================
   Print
   ======================== */
@media print{
  /* ausblenden */
  header, nav, footer,
  .form-actions, .btn, .btn--ghost, .btn--secondary,
  .warn-box, .toolbox, .card__header .btn, .alert, .inline-action,
  .print-hide { display:none !important; }

  .table-wrap{ overflow:visible !important; max-height:none !important; }

  /* Container */
  main.container, .container{ max-width:100% !important; margin:0 !important; padding:0 !important; }

  /* Karten/Gruppen neutralisieren */
  .card, .detail-group{ box-shadow:none !important; border:0 !important; background:#fff !important; padding:0 !important; margin:0 0 .75rem 0 !important; }
  .card__header, legend{ border:0 !important; padding:0 0 .25rem 0 !important; }
  .card__body{ padding:0 !important; }

  /* Tabellen */
  table{ width:100%; border-collapse:collapse; }
  th, td{ border:1px solid #000; padding:4pt 6pt; vertical-align:top; }

  /* Header/Foot korrekt */
  .table thead  { display:table-header-group !important; }
  .table tbody  { display:table-row-group   !important; }
  .table tfoot  { display:table-footer-group !important; }

  /* Sticky-Header aus, Brüche vermeiden */
  .table thead th{ position:static !important; top:auto !important; }
  .table, .table thead, .table tbody, .table tr, .table th, .table td{
    break-inside:avoid !important; page-break-inside:avoid !important;
  }

  /* Sektionen dürfen umbrechen (keine großen Lücken) */
  .detail-group, .card, .table-wrap{
    break-inside:auto !important; page-break-inside:auto !important;
    break-before:auto !important; page-break-before:auto !important;
    break-after:auto !important; page-break-after:auto !important;
  }

  /* Aktionen-Spalte ausblenden */
  th.actions-head, td.actions-cell{ display:none !important; }

  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  @page{ margin:14mm; }
}
/* Log-Viewer */
.log-wrap{ border:1px solid #e3e6eb; border-radius:10px; background:#0b0c0e; }
.log-meta{ color:#c7cbd1; padding:.5rem .75rem; }
.log-pre{
  margin:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color:#e6edf3;
  padding:.75rem;
  max-height:60vh;
  overflow:auto;

  /* NEU: Zeilen umbrechen */
  white-space: pre-wrap;      /* Zeilenumbrüche erhalten, aber umbrechen erlauben */
  word-break: break-word;     /* lange Tokens umbrechen */
  overflow-wrap: anywhere;    /* zur Not überall umbrechen */
}
.assessment-select {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.assessment-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-overlay:not(.hidden) {
  display: flex;
}
.modal-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* Button-Basis (für <a> und <button>) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  transition: background .12s ease, transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn:hover{ background:#f6f7f9; }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:2px solid rgba(59,130,246,.18); outline-offset:3px; }

/* Primär / "Neu" Button */
.btn-add {
  background: linear-gradient(180deg,#3b82f6,#2563eb);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 18px rgba(37,99,235,.12);
  padding: .5rem .95rem;
}
.btn-add:hover{
  filter: brightness(.98);
  box-shadow: 0 10px 22px rgba(37,99,235,.14);
}

/* Kleine Variante / kompakt */
.btn--small { padding: .325rem .6rem; font-size:.9rem; border-radius:8px; }

/* Disabled */
.btn[disabled], .btn[aria-disabled="true"]{
  opacity:.5; cursor:not-allowed; pointer-events:none; box-shadow:none;
}

/* Button-Gruppierung in Kacheln */
.button-group{
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:flex-start;
  margin-top:.5rem;
}

/* Wenn ein Link als Button (inline) genutzt wird, sicherstellen, dass es Semantik bewahrt */
a.btn, a.btn-add{ display:inline-flex; }

/* --- Force button appearance for links/buttons inside tiles --- */
/* hohe Spezifität, greift überall (Desktop & Mobile) und überschreibt lokale/medienabhängige Regeln */
.kachel .button-group > a,
.kachel .button-group > a.btn,
.kachel .button-group > a.btn-add,
.kachel .button-group > button,
.kachel .button-group > button.btn,
.kachel .button-group > button.btn-add {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .45rem .8rem !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  color: #0f172a !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
  transition: background .12s ease, transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Primär / "Neu" Variante innerhalb der Kachel */
.kachel .button-group > a.btn-add,
.kachel .button-group > button.btn-add {
  background: linear-gradient(180deg,#3b82f6,#2563eb) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.12) !important;
  padding: .5rem .95rem !important;
}

/* Hover / Active / Focus (ebenfalls priorisiert) */
.kachel .button-group > a:hover,
.kachel .button-group > button:hover,
.kachel .button-group > a.btn-add:hover,
.kachel .button-group > button.btn-add:hover {
  filter: brightness(.98);
  transform: translateY(0);
}
.kachel .button-group > a:active,
.kachel .button-group > button:active,
.kachel .button-group > a.btn-add:active,
.kachel .button-group > button.btn-add:active {
  transform: translateY(1px);
}
.kachel .button-group > a:focus-visible,
.kachel .button-group > button:focus-visible,
.kachel .button-group > a.btn-add:focus-visible,
.kachel .button-group > button.btn-add:focus-visible {
  outline: 2px solid rgba(59,130,246,.18) !important;
  outline-offset: 3px;
}

/* Schutz: Falls andere Regeln Links in .kachel generell blocken, begrenze die Button-Links auf Inhaltsgröße */
.kachel .button-group > a,
.kachel .button-group > button { max-width: max-content; }

/* Stell sicher, dass klickbare Kachel-Links (.kachel.kachel-clickable) ihre Kachel-Optik behalten,
   aber interne .btn-Links nicht beeinflusst werden (dezenter Reset). */
.kachel.kachel-clickable {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Falls mobile Media-Queries irgendwo a.btn auf block setzen, erzwingen wir inline-flex explizit für Kachel-Buttons */
@media (max-width: 980px) {
  .kachel .button-group > a,
  .kachel .button-group > button {
    display: inline-flex !important;
  }
}