/*
Theme Name: 4betterteam
Theme URI: https://kreowsky.de
Description: Twenty Twenty-Five Child Theme
Author: Kreowsky & Kreowsky GbR
Author URI: https: //kreowsky.de
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
*/



/* Start writing your custom styles here */

.acf-repeater .acf-row {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 6px;
}

.acf-repeater .acf-field {
    margin-bottom: 15px;
}

.acf-field input[type="text"],
.acf-field textarea,
.acf-field input[type="file"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Qualifikations-Repeater Styles */
.um-field-qualification .acf-repeater-row {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 15px;
    background: #f9f9f9;
    border-radius: 5px;
}

.um-field-qualification .acf-fields {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr;
}

.um-field-qualification .acf-field {
    display: flex;
    flex-direction: column;
}

.um-field-qualification .acf-field label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.um-field-qualification .acf-field input,
.um-field-qualification .acf-field textarea {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}

.um-field-qualification .qualification-image-preview {
    margin-top: 10px;
}

.um-field-qualification .qualification-image-preview img {
    max-width: 150px;
    height: auto;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.um-field-qualification .remove-row {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    margin-top: 15px;
    border-radius: 3px;
    justify-self: start;
}

/* Kundenstimmen-Repeater Styles */
.um-field-kundenstimmen .acf-repeater-row {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 15px;
    background: #f9f9f9;
    border-radius: 5px;
}

.um-field-kundenstimmen .acf-fields {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr 1fr;
}

.um-field-kundenstimmen .acf-field {
    display: flex;
    flex-direction: column;
}

.um-field-kundenstimmen .acf-field:nth-child(5) {
    grid-column: 1 / -1;
}

.um-field-kundenstimmen .acf-field label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.um-field-kundenstimmen .acf-field input,
.um-field-kundenstimmen .acf-field textarea {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
}

.um-field-kundenstimmen .remove-row {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    margin-top: 15px;
    border-radius: 3px;
    grid-column: 1 / -1;
    justify-self: start;
}

.um-button {
    background-color: #015f6b;
}

/* Ultimate Member Avatar Fixes für Mitgliederverzeichnis */
.um-avatar {
    transition: opacity 0.3s ease;
}

.um-avatar.fixing-avatar {
    opacity: 0.5;
    position: relative;
}

.um-avatar.fixing-avatar::after {
    content: "Lädt...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: #666;
    background: rgba(255, 255, 255, 0.8);
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.um-avatar.um-avatar-error {
    border: 2px solid #ff6b6b;
    opacity: 0.7;
}

.um-avatar.um-avatar-no-userid {
    border: 2px solid #ffa500;
    opacity: 0.8;
}

/* Verstecke das "Lädt..." Overlay wenn das Bild korrekt geladen wurde */
.um-avatar:not(.fixing-avatar)::after {
    display: none;
}

/* Verbesserte Darstellung für Grid und List View */
.um-member .um-avatar {
    background: #f0f0f0;
    border-radius: 50%;
    object-fit: cover;
}

/* Fallback für beschädigte Bilder */
.um-avatar[src*="?"],
.um-avatar[src=""],
.um-avatar:not([src]) {
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Ctext y="50%" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="14" fill="%23999"%3ELädt...%3C/text%3E%3C/svg%3E');
    background-size: cover;
    background-position: center;
}