/*
 * Layout-Ergaenzungen fuer Frontend und Editor (Kontakt, Footer, Ueber uns).
 * Grundstyles stehen in styles.css.
 */

/* ===== Kontakt: eine Karte mit zwei Haelften (dunkles Info-Panel + Formular) ===== */
.contact-content {
    grid-template-columns: 2fr 3fr;
    gap: 0;
    max-width: 1080px;
    margin: 0 auto;
    background-color: var(--white-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.contact-info {
    background-color: var(--dark-color);
    padding: var(--spacing-lg);
    justify-content: center;
    gap: var(--spacing-md);
}
.contact-info h3 {
    color: var(--white-color);
    margin-bottom: 2px;
    font-size: var(--font-size-lg);
}
.contact-info p {
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0;
}
.contact-info a {
    color: #f5a75a;
}
.contact-info a:hover {
    color: var(--white-color);
}
.info-item {
    align-items: center;
}
.info-item i {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(229, 114, 0, 0.16);
    border-radius: 50%;
    font-size: 1.3rem;
    margin-top: 0;
    margin-right: var(--spacing-sm);
    color: var(--primary-color);
    transition: background-color var(--transition-medium), color var(--transition-medium);
}
.info-item:hover i {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.contact-form {
    box-shadow: none;
    border-radius: 0;
    padding: var(--spacing-lg);
}

@media (max-width: 992px) {
    .contact-content { grid-template-columns: 1fr; }
}

/* ===== Footer: CTA als volle Zeile, darunter vier ausgewogene Spalten ===== */
.footer-content {
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: var(--spacing-lg);
}
.footer-cta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-cta p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 600;
}
.footer-contact p {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}
.footer-bottom {
    text-align: center;
}

@media (max-width: 992px) {
    .footer-content { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
    .footer-content { grid-template-columns: 1fr; }
    .footer-cta { flex-direction: column; align-items: flex-start; }
}

/* ===== Leistungs-Raster: sechs Karten als ruhiges 3x2 statt 4+2 ===== */
.services-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 992px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .services-grid { grid-template-columns: 1fr; }
}

/* Kartentitel ohne automatische Silbentrennung (kein "Renovie-rung") */
.service-card h3 {
    hyphens: manual;
}

/* ===== Leistungs-Vorschau: Anfrage-Button + Mehr-erfahren-Link nebeneinander ===== */
.service-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* ===== Referenzen und Kundenstimmen: ruhige Karten im Site-Stil ===== */
.referenzen-section {
    padding: var(--spacing-xl) 0;
}
.referenzen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}
.referenz-karte {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    background-color: var(--white-color);
    border: 1px solid #ececec;
    border-top: 3px solid var(--primary-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-medium), transform var(--transition-medium);
}
.referenz-karte:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.referenz-badge {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}
.referenz-zitat {
    font-weight: 600;
    color: var(--dark-color);
}
.referenz-karte p:not(.referenz-badge):not(.referenz-meta) {
    flex-grow: 1;
}
.referenz-meta {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: var(--spacing-sm);
    border-top: 1px solid #ececec;
    font-size: var(--font-size-sm);
    color: #4a5054;
}
.referenz-meta strong {
    color: var(--dark-color);
}
@media (max-width: 992px) {
    .referenzen-grid { grid-template-columns: 1fr; }
}

/* ===== Barrierefreiheit: Bei reduzierter Bewegung Inhalte sofort zeigen =====
   Ohne diese Regel blieben die Scroll-Einblend-Elemente fuer Nutzer mit
   prefers-reduced-motion unsichtbar, bis das JS sie einblendet. */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .animate-fade-in,
    .animate-slide-up,
    .animate-pulse {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    /* Auch die SVG-Endlosanimationen der Icons (Raeder, Hammer, Schneeflocke usw.) anhalten */
    svg, svg * {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== WCAG-AA-Kontraste (Werte aus DESIGN.md) =====
   Original-Grau #8a8d8f (3,3:1) und Orange #e57200 (3,1:1) sind auf Weiss
   als Textfarbe zu schwach. Fuer Flaechen (Buttons, Balken) bleiben die
   CI-Farben unveraendert. */
.section-header p,
.service-card p,
.service-text p,
.thank-you-content p,
.page-cta p {
    color: #4a5054;
}
main a {
    color: #a34f00;
}
main a:hover {
    color: #4a5054;
}
.btn-text,
.btn-text:hover {
    color: #a34f00;
}
.ansprechpartner-position {
    color: #a34f00;
}
.referenz-badge {
    color: #a34f00;
}
/* Weisser Button-Text auf Orange/Grau: als "grosser Text" (>=18,66px fett) genuegt 3:1 */
.btn {
    font-size: 1.1875rem;
    font-weight: 700;
}

/* ===== Sichtbare Fokus-Zustaende fuer Tastaturnutzer ===== */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 1px;
}

/* ===== Skip-Link: unsichtbar, bis er per Tastatur fokussiert wird ===== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background-color: var(--dark-color);
    color: var(--white-color);
    padding: 10px 18px;
    border-radius: 0 0 var(--border-radius-sm) 0;
}
.skip-link:focus {
    left: 0;
}

/* Der Mobile-Menue-Knopf ist jetzt ein echter <button>: Browser-Optik zuruecksetzen */
button.mobile-menu-btn {
    background: none;
    border: 0;
    padding: 0;
}

/* ===== Formular: sichtbare Labels statt Placeholder-only ===== */
.form-group > label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--dark-color);
}

/* Hinweis im Formularbereich (Pflichtfelder fehlen / Versand fehlgeschlagen) */
.form-notice {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: #f8d7da;
    color: #721c24;
    border-radius: var(--border-radius-sm);
}

/* ===== 404-Seite ===== */
.error-404-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* ===== Ueber uns: Text und Werte-Karten ausbalancieren ===== */
.about-content {
    align-items: center;
}
.value-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.value-item p {
    margin-bottom: 0;
}