/* Form-Container */
.form {
  background: var(--color-form-bg);
  width: 100%;
  margin-bottom: 8px;
}

.form label {
  display: inline-block;
  color: var(--color-form-label);
  vertical-align: middle;
  padding:0;
  margin:0;
}

.form label .inner-m {
	vertical-align: middle;
}

.form i { margin-right: 2px; color: var(--color-form-icon); }
.form p { margin-bottom: 5px; }

/* Textfelder, Passwörter, E-Mail, Zahl etc. */
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="number"],
.form input[type="date"],
.form input[type="url"],
.form input[type="tel"],
.form textarea,
.form select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-form-border);
  border-radius: 4px;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  color: var(--color-form-input-text);
}

/* Fokus-Effekte */
.form input[type="text"]:focus,
.form input[type="password"]:focus,
.form input[type="email"]:focus,
.form input[type="number"]:focus,
.form input[type="date"]:focus,
.form input[type="url"]:focus,
.form input[type="tel"]:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--color-form-border-focus);
  outline: none;
  box-shadow: 0 0 4px var(--color-form-shadow-focus);
}

/* Textarea */
.form textarea {
    min-height: 80px; /* Behält deine minimale Höhe */
    
    /* NEU: Wichtig für die automatische Anpassung */
    resize: none; /* Verhindert manuelle Größenänderung */
    /* overflow-y: hidden; /* Scrollbar ausblenden */
    
    /* Stellt sicher, dass 100% Breite korrekt funktioniert */
    width: 100%; 
    box-sizing: border-box; 
}

/* Optional: Für Elemente, die das Skript verwenden sollen */
.js-auto-resize {
    /* Fügt keine weiteren Stile hinzu, dient nur als Marker */
}

/* Select-Dropdowns */
.form select {
    /* 1. NATIVES STYLING ENTFERNEN (Muss immer zuerst stehen) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 

    /* 2. DEN PFEIL UND DIE HINTERGRUNDFARBE KOMBINIEREN */
    /* Syntax: [Farbe] [Pfeil-URL] [Wiederholung] [Position] / [Größe] */
    background: var(--color-form-select-bg) 
                url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")
                no-repeat
                right 10px center / 16px 16px; 

    /* 3. PLATZ FÜR DEN PFEIL SCHAFFEN */
    padding-right: 35px; /* Etwas mehr Platz für das Icon */

    /* WICHTIG: Sollten andere Hintergrund-Eigenschaften existieren,
       stelle sicher, dass dieser Block der letzte ist! */
}

/* Checkboxen & Radios */
.form input[type="checkbox"],
.form input[type="radio"] {
  margin-right: 6px;
  accent-color: var(--color-form-checkbox);
}

/* Basis-Button */
.btn {
  display: inline-block;
  width: auto;
  padding: 11px;
  margin-top: 15px;
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.btn:hover {
  background: var(--color-btn-hover-bg);
  color: var(--color-btn-hover-text);
}

/* Fokus-Effekt für Buttons */
.btn:focus {
  outline: none;
  border: 2px solid var(--color-btn-focus-border);
  box-shadow: 0 0 4px var(--color-btn-focus-shadow);
}

/* Buttons innerhalb von Formularen (Login/Registrierung) */
.form .btn {
  display: block;
  width: 100%;
  
  margin-top: 0px;
}

.form .togglePass {
  display: flex;
  align-items: center;
}

.form .togglePass input[type="password"] {
  flex: 1;
  min-width: 0;
}

.form .togglePass button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-form-border);
  border-radius: 4px;
  background: var(--color-form-bg);
  cursor: pointer;
  margin-left: 6px;
  padding: 0;
}

.form .togglePass button i {
  font-size: var(--font-size-togglepass-icon);
}

.form .togglePass button i.fa-eye {
  color: var(--color-success);
  width: 40px;
}

.form .togglePass button i.fa-eye-slash {
  color: var(--color-error);
  width: 40px;
}

/* Statusmeldungen */
.form .error, .form p.error, li.error, .error, .form .error label {
  color: var(--color-error);
  font-weight: bold;
}
.form .success, .form p.success, li.success, .success, .form .success label {
  color: var(--color-success);
  font-weight: bold;
}
.form .notice, .form p.notice, li.notice, .notice, .form .notice label {
	color: var(--color-notice);
}
.form .status-normal-bold { font-weight: bold; }


/* nur für Hilfe-Box */
.hilfe-header {
  display: flex;
  justify-content: space-between; /* Titel links, Icon rechts */
  align-items: center;
  margin-bottom: 0.5em;
  background: url("/images/htag-heading-bg.png") repeat-x left bottom transparent;
}

.hilfe-header .pagetitle {
  margin: 0;
  background: none; /* Hintergrund nur am Wrapper */
}


.close-link a {
  color: var(--color-status-close);
  font-size: 1.5rem;
  text-decoration: none;
  cursor: pointer;
}

.close-link a:hover {
  color: var(--color-status-close-hover);
}

/*
.status-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 4px;
  font-size: var(--font-size-status-box);
  margin-bottom: 10px;
   white-space: normal;
  overflow-wrap: break-word;
}
*/

.status-box {
  display: flex;
  align-items: center;   /* sorgt dafür, dass Icon und Text vertikal mittig stehen */
  gap: 8px;
  padding: 10px;
  border-radius: 4px;
  font-size: var(--font-size-status-box);
  margin-bottom: 10px;
  white-space: normal;
  overflow-wrap: break-word;
}

.status-box p {
  flex: 1;               /* Text nimmt Platz zwischen den Icons */
  margin: 0;             /* entfernt Standard-P-Abstand */
  line-height: 1;        /* verhindert, dass der Text höher wirkt als das Icon */
  display: flex;         /* macht den Text selbst ein Flex-Container */
  align-items: center;   /* Text-Inhalt wird vertikal mittig zum Icon ausgerichtet */
}

/* Text nimmt Platz zwischen Icon und optionalem Close-Icon */
.status-text {
  flex: 1;
  margin: 0;
}

/* Close-Icon nur wenn vorhanden */
.status-box .close-icon {
  margin-left: auto;
  cursor: pointer;
  color: var(--color-status-close, #666);
}




.status-box i {
  font-size: var(--font-size-status-box-icon);
}

/* Erfolg */
.status-box.success {
  background: var(--color-status-success-bg);
  border: 1px solid var(--color-status-success-border);
  color: var(--color-status-success-text);
}
.status-box.success i {
  color: var(--color-status-success-text);
}

/* Fehler */
.status-box.error {
  background: var(--color-status-error-bg);
  border: 1px solid var(--color-status-error-border);
  color: var(--color-status-error-text);
}
.status-box.error i {
  color: var(--color-status-error-text);
}

/* Hinweis */
.status-box.notice {
  background: var(--color-status-notice-bg);
  border: 1px solid var(--color-status-notice-border);
  color: var(--color-status-notice-text);
}
.status-box.notice i {
  color: var(--color-status-notice-text);
}


/* 1. Allgemeine Formatierung des Filter-Containers */
/* Setzt die Labels nebeneinander (Flexbox) und steuert den äußeren Abstand. */
.labellistings { 
    display: flex;
    flex-wrap: wrap; 
    gap: 4px; /* Abstand zwischen den Labels (horizontal und vertikal) */
    margin-top: 3px;
	margin-bottom: 3px;
    font-family: Arial, sans-serif;
}

/* 2. Formatierung für die einzelnen Checkbox-Labels */
.labellistings label {
    /* 3px Polsterung ringsum, wie gefordert (oben, rechts, unten, links) */
    padding: 3px; 
    /* Visuelle Abgrenzung */
    border: 1px solid #ddd;
    border-radius: 2px;
    background-color: #eee;
    cursor: pointer;
    white-space: nowrap; /* Verhindert das Umbrechen des Label-Textes */
}


/* 1. WICHTIG: Der Container um das Input-Feld muss 'position: relative' haben! */
/* (Dies muss auf das Formular #adressbuch-suche oder einen Container darum angewendet werden.) */
/* Beispiel: #adressbuch-suche { position: relative; } */

/* 2. Container, der das Listing hält und klebt */
#addressbook_listing {
    /* Positionierung */
    position: absolute; 
    z-index: 1000; 
    
    /* Breite exakt an das Elternelement anpassen */
    /* left: 0; right: 0; stellt sicher, dass es die gesamte Breite des 
     * position: relative; Elternelements einnimmt.
     */
    left: 0px; 
    right: 0px; 
	width: 100%;
	padding: 5px;
    
    /* Styling für den "Klebe-Effekt" */
    border: 1px solid #ccc;
    border-top: none; /* Entfernt die obere Linie, um es an den Input zu kleben */
    border-radius: 0 0 4px 4px; /* Rundung nur unten */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    background-color: #fff;
    max-height: 250px; 
    overflow-y: auto;
    box-sizing: border-box; 
}

/* Die ul-Liste */
#addressbook_listing .listing-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Die einzelnen Listeneinträge */
.listing-item-adressbook {
    padding: 6px 8px; /* Passt Padding an das Input-Feld an */
    cursor: pointer;
    border-bottom: 1px solid #eee; /* Leichte Trennlinie */
    font-size: 0.95em;
    line-height: 1.4;
    transition: background-color 0.2s ease;
}

/* Hover-Effekt (Interaktivität) */
.listing-item-adressbook:hover {
    background-color: #f0f0f0;
}

/* Letztes Element ohne Trennlinie */
.listing-item-adressbook:last-child {
    border-bottom: none;
}