/* Akustiker Bewertungen – Frontend (Hörstudio Hessel Look) */

:root {
    --akb-primary: #F49C42;
    --akb-primary-hover: #d9852d;
    --akb-accent: #4A1F00;
    --akb-star: #F49C42;
    --akb-star-empty: #e0d4c8;
    --akb-text: #4A1F00;
    --akb-muted: #8a6a55;
    --akb-border: #e8ddd2;
    --akb-bg-soft: #fdf6ef;
    --akb-radius: 8px;
    --akb-font: "Sofia Pro", "Sofia Pro Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.akb-form, .akb-reviews, .akb-average, .akb-thankyou {
    font-family: var(--akb-font);
    color: var(--akb-text);
}

.akb-form { max-width: 640px; margin: 0 auto; }
.akb-field { margin-bottom: 1.25rem; }
.akb-label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--akb-accent); }
.akb-required { color: var(--akb-primary); }
.akb-hint { display: block; color: var(--akb-muted); font-size: 0.85em; margin-top: 0.3rem; }

.akb-form input[type="text"],
.akb-form input[type="email"],
.akb-form select,
.akb-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--akb-border);
    border-radius: var(--akb-radius);
    font-size: 1rem;
    font-family: inherit;
    color: var(--akb-text);
    box-sizing: border-box;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.akb-form textarea { resize: vertical; min-height: 120px; }
.akb-form input:focus, .akb-form select:focus, .akb-form textarea:focus {
    outline: none;
    border-color: var(--akb-primary);
    box-shadow: 0 0 0 3px rgba(244, 156, 66, 0.2);
}

/* Sterne-Rating */
.akb-rating { display: inline-flex; flex-direction: row-reverse; gap: 0.2rem; }
.akb-rating input { position: absolute; opacity: 0; pointer-events: none; }
.akb-rating label {
    font-size: 2.4rem; line-height: 1; color: var(--akb-star-empty);
    cursor: pointer; transition: color 0.15s, transform 0.1s; user-select: none;
}
.akb-rating input:checked ~ label,
.akb-rating label:hover,
.akb-rating label:hover ~ label { color: var(--akb-star); }
.akb-rating label:hover { transform: scale(1.05); }
.akb-rating input:focus-visible + label { outline: 2px solid var(--akb-primary); outline-offset: 3px; border-radius: 4px; }

/* Checkbox */
.akb-checkbox label { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; line-height: 1.45; column-count: 1 !important; column-width: auto !important; }
.akb-checkbox input { margin-top: 0.3rem; accent-color: var(--akb-primary); flex-shrink: 0; }
.akb-checkbox span { flex: 1; min-width: 0; display: block; }
.akb-checkbox a { color: var(--akb-primary); text-decoration: underline; white-space: normal; }

/* Honeypot */
.akb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Submit-Button */
.akb-submit {
    display: inline-block;
    padding: 0.95rem 2rem;
    background: var(--akb-primary);
    color: #fff;
    border: 0;
    border-radius: var(--akb-radius);
    font-size: 1.05rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    box-shadow: 0 2px 6px rgba(74, 31, 0, 0.12);
}
.akb-submit:hover:not(:disabled) { background: var(--akb-primary-hover); }
.akb-submit:active:not(:disabled) { transform: translateY(1px); }
.akb-submit:disabled { opacity: 0.6; cursor: wait; }
.akb-note { font-size: 0.85em; color: var(--akb-muted); margin-top: 0.6rem; }

.akb-feedback { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: var(--akb-radius); display: none; }
.akb-feedback:not(:empty) { display: block; }
.akb-feedback.is-error { color: #8a2c1d; background: #fdecea; }
.akb-feedback.is-success { color: #1e5a32; background: #e8f5ec; }

/* Danke-Box */
.akb-thankyou {
    padding: 2rem 1.5rem;
    background: var(--akb-bg-soft);
    border: 1px solid var(--akb-border);
    border-radius: var(--akb-radius);
    text-align: center;
}
.akb-thankyou h3 { margin-top: 0; color: var(--akb-accent); }
.akb-google-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.85rem 1.75rem;
    background: var(--akb-accent);
    color: #fff !important;
    text-decoration: none;
    border-radius: var(--akb-radius);
    font-weight: 600;
    transition: background 0.15s;
}
.akb-google-btn:hover { background: #2e1300; }

/* Bewertungs-Liste */
.akb-review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.akb-review-item {
    background: #fff;
    border: 1px solid var(--akb-border);
    border-radius: var(--akb-radius);
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(74, 31, 0, 0.04);
    transition: box-shadow 0.2s;
}
.akb-review-item:hover { box-shadow: 0 4px 12px rgba(74, 31, 0, 0.08); }
.akb-review-head { display: flex; gap: 0.9rem; align-items: center; margin-bottom: 0.75rem; }
.akb-review-avatar {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--akb-bg-soft);
    border: 2px solid var(--akb-border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    color: var(--akb-accent);
    font-weight: 700; font-size: 1.4rem;
}
.akb-review-avatar.has-photo { background: var(--akb-primary); border-color: var(--akb-primary); }
.akb-review-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.akb-review-avatar-initial { line-height: 1; }
.akb-review-meta { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.akb-review-author { font-weight: 600; color: var(--akb-accent); }
.akb-review-stars-row { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.akb-review-date { color: var(--akb-muted); font-size: 0.9em; }
.akb-review-service { font-size: 0.9em; color: var(--akb-muted); margin: 0.25rem 0 0.6rem; }
.akb-review-service strong { color: var(--akb-accent); }
.akb-review-body { line-height: 1.6; color: var(--akb-text); }

/* Sterne-Anzeige */
.akb-stars { display: inline-flex; gap: 0.05rem; color: var(--akb-star); font-size: 1.15em; line-height: 1; }
.akb-star-empty { color: var(--akb-star-empty); }
.akb-star-half {
    background: linear-gradient(90deg, var(--akb-star) 50%, var(--akb-star-empty) 50%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Durchschnitt */
.akb-average { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.akb-average-value { font-weight: 700; color: var(--akb-accent); }
.akb-average-count { color: var(--akb-muted); font-size: 0.9em; }

.akb-empty { color: var(--akb-muted); font-style: italic; }

/* Mobile */
@media (max-width: 600px) {
    .akb-rating label { font-size: 2.6rem; }
    .akb-submit { width: 100%; }
    .akb-review-item { padding: 1.2rem; }
}