/* Container Eingabefeld + Button */
.audit-input {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-bottom: 30px;
}

#audit-domain {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    padding: 6px 10px;
}

#audit-button {
    max-width: 130px;
    width: 100%;
    background-color: orange;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.2s;
}

#audit-button:hover {
    transform: scale(1.04);
}

/* Aufklappbare Boxen */
.audit-category {
    margin-bottom: 10px;
}

.audit-category summary {
    cursor: pointer;
    font-weight: bold;
    padding: 6px 8px;
    background-color: #f2f2f2;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Tabelle Detailergebnisse */
.audit-details {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}

.audit-details td {
    padding: 4px 6px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    max-width: 300px; /* verhindert zu breite Boxen */
}

.status-box {
    padding: 4px 8px;
    border-radius: 5px;
    color: #fff;
    min-width: 120px;
    display: inline-block;
    text-align: center;
}

/* Farbschema für Ergebnisse */
.status-green { background-color: #28a745; }   /* Grün für Kategorie-Badge */
.status-orange { background-color: #fd7e14; }
.status-red { background-color: #dc3545; }



/* Hinweistext */
.audit-results-info {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    margin-top: 20px;
}

/* Zum Angebot Button */
.audit-results-info button {
    background-color: orange;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
    transition: transform 0.2s;
}

.audit-results-info button:hover {
    transform: scale(1.04);
}

.status-box {
    padding: 4px 8px;
    border-radius: 5px;
    color: #fff;
    min-width: 120px;
    display: inline-block;
    text-align: center;
}

/* Ergebnisse in den Tabellen der aufklappbaren Boxen */
.status-gray { background-color: #6c757d; } /* Grau für "Kein Handlungsbedarf" */
.status-orange { background-color: #fd7e14; } /* Orange für "Handlungsbedarf" */
.status-red { background-color: #dc3545; } /* Rot für "Akuter Handlungsbedarf" */

.audit-details td:nth-child(2) {
    padding-right: 10px; /* Korrigiertes Padding */
    text-align: right;   /* Rechtsbündig */
}

#audit-weiter-button {
    max-width: 130px;        /* maximale Breite */
    width: 100%;             /* füllt Container bis max-width */
    font-size: 16px;         /* 2px größer als vorher */
    padding: 6px 12px;
    background-color: orange;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s;
    display: block;
    margin: 10px auto 0 auto; /* zentriert den Button */
}

#audit-weiter-button:hover {
    transform: scale(1.04);
}

/* Zusammenfassung unter den Boxen */
.audit-summary-text {
    max-width: 200px;
    margin: 20px auto 0 auto;
    text-align: left;
    font-size: 17px; /* 2px größer als Standard 14px */
    line-height: 1.5;
}

.audit-summary-text p {
    margin: 5px 0;
}

/* Hover Effekt für Hintergrundfarbe der Überschriften der Kategorien */
.audit-category summary {
    transition: background-color 0.2s ease;
}

.audit-category summary:hover {
    background-color: #e0e0e0; /* etwas dunkler als das normale #f2f2f2 */
}

/* Zusammenfassung unter den Boxen */
.audit-summary-text {
    max-width: 180px;
    margin: 30px auto; /* oben und unten 30px, links/rechts automatisch zentriert */
    text-align: left;  /* oder 'center', wenn zentriert gewünscht */
    font-size: 17px;   /* 2px größer */
    line-height: 1.5;
}


.audit-summary-text p {
    margin: 5px 0;
}

/* Separater Text "Eine professionelle Website lohnt sich..." */
.audit-professional-text {
    text-align: center;
    font-size: 17px; /* 2px größer */
    margin: 10px auto 0 auto;
}

/* Status badges */
.status-box{display:inline-block;padding:4px 8px;border-radius:4px;color:#fff;font-weight:600;font-size:12px}
.status-green{background:#28a745}
.status-orange{background:#fd7e14}
.status-red{background:#dc3545}
.status-gray{background:#6c757d}

/* Basic table styling (falls noch nicht vorhanden) */
.audit-table{width:100%;border-collapse:collapse;margin:8px 0}
.audit-table td{padding:6px;border-bottom:1px solid #eee}
.audit-box summary{cursor:pointer; font-weight:600; margin-bottom:8px}

/* Kategorie-Boxen – Optik */
.audit-cat {
    background: #f5f5f5;            /* hellgrau */
    border: 0px solid #e7e7e7;
    border-radius: 5px;             /* 5px Rundung */
    padding: 8px 10px;
    margin-bottom: 12px;
    transition: background-color .2s ease, box-shadow .2s ease;
}
.audit-cat:hover {
    background: #eeeeee;            /* leicht dunkler bei Hover */
}
.audit-cat summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.audit-cat-title {
    font-weight: 700;               /* fett */
    font-size: 15px;
}

/* Tabelle in den Boxen: Label links, Ergebnis rechtsbündig */
.audit-details td {
    padding: 6px;
    border-bottom: 1px solid #eee;
}
.audit-details td.audit-label {
    width: 60%;
    text-align: left;
}
.audit-details td.audit-result {
    width: 40%;
    text-align: right;              /* Ergebnisse rechtsbündig */
}

/* Status-Badges – bereits vorhanden, hier nur Ergänzung */
.status-box{display:inline-block;padding:4px 8px;border-radius:4px;color:#fff;font-weight:600;font-size:12px}
.status-green{background:#28a745}
.status-orange{background:#fd7e14}
.status-red{background:#dc3545}
.status-gray{background:#6c757d}

/* Spezielle Anforderung:
   Innerhalb der aufklappbaren Boxen soll "Kein Handlungsbedarf" (grün) grau erscheinen */
/* --- Tabellenlinien in den Ergebnisboxen --- */
.audit-details {
    border-collapse: collapse;
}
.audit-details td {
    border-bottom: 1px solid #ffffff; /* weiße horizontale Linie */
    border-left: 0;                   /* keine vertikalen Linien */
    border-right: 0;                  /* keine vertikalen Linien */
}

/* --- Badge-Farben je Kontext --- */
/* 1) In den aufgeklappten Tabellen: "Kein Handlungsbedarf" (green) = grau */
.audit-cat .audit-details .status-green {
    background: #6c757d;
}

/* 2) In der Kategorie-Überschrift (Summary): "Kein Handlungsbedarf" = grün */
.audit-cat > summary .status-green {
    background: #28a745;
}


/* Kategorie-Header: Badge ganz rechts */
.audit-cat summary {
    display: flex;
    align-items: center;
    gap: 8px;
}
.audit-cat summary .status-box {
    margin-left: auto !important; /* überschreibt das frühere inline margin-left */
}

/* Audit-Tabellen: keine vertikalen Linien, nur weiße horizontale */
.audit-cat .audit-details {
    border: 0 !important;
    border-collapse: collapse;   /* oder 'separate' + border-spacing:0; beides ok */
    border-spacing: 0;
}
.audit-cat .audit-details th,
.audit-cat .audit-details td {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #ffffff !important; /* horizontale Linie */
}

/* Falls ein allgemeines .audit-table td bereits Linien setzt, hier neutralisieren */
.audit-table td {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Progress-Füllung im Eingabefeld (nutzt CSS-Variable --progress) */
#audit-domain.progress{
    /* helles Grau links, transparent rechts – Übergabe via --progress */
    background-image:
        linear-gradient(to right,
            #e3e3e3 0%,
            #e3e3e3 var(--progress, 0%),
            transparent var(--progress, 0%),
            transparent 100%);
    background-repeat: no-repeat;
}

#audit-domain:disabled{
    cursor: wait;
    opacity: .95;
}

#audit-weiter-button {
  text-align: center;       /* Text zentrieren */
  text-decoration: none;    /* Unterstreichung bei <a> entfernen */
  line-height: 1.4;         /* optional: etwas hübscher */
}


/* Fixed-width loader box to prevent text shifting */
.audit-loader-box{box-sizing:border-box;}

/* Floating tooltip for audit status */
#audit-tooltip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  background: rgba(20,20,20,0.92);
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  max-width: 290px;
  line-height: 1.35;
  opacity: 0;
  transform: translate3d(0,0,0);
  transition: opacity 120ms ease;
}
#audit-tooltip.show { opacity: 1; }

/* Neutral pill for 'Bitte prüfen' */
.result-plain.neutral{
  background:#e8e8e8;
  color:#555;
  border-radius:6px;
  padding:2px 8px;
  display:inline-block;
}

.result-plain.warn{
  background:#ffd8a8;
  color:#5f3d00;
}


/* Lottie animation shown while loading instead of the button */
.audit-lottie {
    display: none;
    align-items: center;
    justify-content: center;
}
.audit-lottie dotlottie-player {
    width: 140px;
    height: 44px;
    display: block;
}