/*
 * WordPress-Anpassungen fuer den Redaktions-Baukasten.
 * Original-Styles bleiben in styles.css unveraendert; hier stehen nur
 * Regeln fuer Block-Markup (wp:image, wp:list) und die Leistungs-Unterseiten.
 */

/* Block-Bilder ohne WP-Standardabstaende, damit die Original-Optik greift */
.wp-block-image, figure.wp-block-image { margin: 0; }
.service-image .wp-block-image img { width: 100%; }

/* Editierbare Feature-Liste (wp:list) in der Optik der Original-Haekchenliste */
ul.service-features-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-md);
    padding: 0;
}
ul.service-features-list li {
    position: relative;
    padding-left: 26px;
}
ul.service-features-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.32em;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6 12 13.5 4.5' fill='none' stroke='%23e57200' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Ansprechpartner-Foto als Block-Bild: figure fuellt die Karte wie das Original-img */
.ansprechpartner-card figure.wp-block-image { height: 100%; margin: 0; }
.ansprechpartner-card figure.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ansprechpartner-card:hover figure.wp-block-image img { transform: scale(1.08); }

/* Kopfbereich der Leistungs-Unterseiten (Abstand wie .legal-content wegen fixiertem Header) */
.page-hero {
    padding: var(--spacing-xl) 0;
    padding-top: 140px;
    background-color: var(--light-color);
}
.page-hero .section-header { margin-bottom: var(--spacing-sm); }
.page-hero .page-intro {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--dark-color);
}

/* FAQ-Bereich der Leistungs-Unterseiten */
.faq-section { padding: var(--spacing-xl) 0; background-color: var(--light-color); }
.faq-item {
    background-color: var(--white-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
/* Frage-Zeile: klickbar, mit Pfeil rechts */
.faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--primary-color);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: '';
    flex-shrink: 0;
    width: 0.7em;
    height: 0.7em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-0.15em, -0.15em);
    transition: transform var(--transition-fast);
}
.faq-item[open] > summary::after {
    transform: rotate(-135deg) translate(-0.15em, -0.15em);
}
.faq-item > summary:hover { color: var(--dark-color); }
.faq-item[open] > summary { margin-bottom: var(--spacing-sm); }
.faq-item p { margin: 0; line-height: 1.6; }

/* Abschluss-CTA der Leistungs-Unterseiten */
.page-cta { padding: var(--spacing-xl) 0; text-align: center; }
.page-cta h2 { margin-bottom: var(--spacing-sm); }
.page-cta p { color: var(--secondary-color); max-width: 640px; margin: 0 auto var(--spacing-md); }

/* ===== Neue Leistungs-Icons (Maler, Boden) im Stil der Original-Icons ===== */

/* Malerarbeiten: zweifarbige Rolle, streicht auf und ab, mit Farbklecksen */
.service-icon svg.maler-icon .walze {
    stroke: var(--primary-color);
    fill: none;
    stroke-width: 4;
}
.service-icon svg.maler-icon .buegel {
    stroke: var(--dark-color);
    fill: none;
    stroke-width: 4;
}
.service-icon svg.maler-icon .griff {
    fill: var(--dark-color);
    stroke: var(--dark-color);
}
.service-icon svg.maler-icon .roller {
    animation: rollerStrich 3s infinite ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
}
.service-icon svg.maler-icon .maler-klecks {
    fill: var(--primary-color);
    animation: farbklecksAnimation 2.5s infinite ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
}
.service-card:hover .service-icon svg.maler-icon .walze { stroke: var(--dark-color); }
.service-card:hover .service-icon svg.maler-icon .buegel { stroke: var(--primary-color); }
.service-card:hover .service-icon svg.maler-icon .griff { fill: var(--primary-color); stroke: var(--primary-color); }
.service-card:hover .service-icon svg.maler-icon .maler-klecks { fill: var(--dark-color); }

@keyframes rollerStrich {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(6px); }
    60% { transform: translateY(-3px); }
}

/* Bodenverlegung: Raster zweifarbig, eine Diele schiebt sich immer wieder ein */
.service-icon svg.boden-icon .boden-rahmen {
    stroke: var(--primary-color);
    fill: none;
    stroke-width: 4;
}
.service-icon svg.boden-icon .boden-fugen {
    stroke: var(--dark-color);
    fill: none;
    stroke-width: 4;
}
.service-icon svg.boden-icon .diele {
    fill: var(--primary-color);
    animation: dieleLegen 3s infinite ease-out;
    transform-box: fill-box;
    transform-origin: center;
}
.service-card:hover .service-icon svg.boden-icon .boden-rahmen { stroke: var(--dark-color); }
.service-card:hover .service-icon svg.boden-icon .boden-fugen { stroke: var(--primary-color); }
.service-card:hover .service-icon svg.boden-icon .diele { fill: var(--dark-color); }

@keyframes dieleLegen {
    0% { opacity: 0; transform: translateX(-16px); }
    25% { opacity: 1; transform: translateX(0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* ===== Projektberichte (CPT "projekt"): Archiv, Karten, Einzelansicht ===== */

/* Ort-Zeile mit Pin-Symbol (Content-Absatz und Karten, gebunden an Meta vectec_ort) */
.projekt-ort {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: #4a5054;
    font-weight: 600;
}
.projekt-ort::before {
    content: '';
    flex-shrink: 0;
    width: 0.95em;
    height: 0.95em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23e57200' d='M8 1.5a4.7 4.7 0 0 0-4.7 4.7c0 3.4 4.1 8 4.7 8s4.7-4.6 4.7-8A4.7 4.7 0 0 0 8 1.5Z'/%3E%3Ccircle cx='8' cy='6.2' r='1.7' fill='%23ffffff'/%3E%3C/svg%3E") center / contain no-repeat;
}
.projekt-ort:empty {
    display: none;
}

/* Filter-Leiste als Pills */
.projekte-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-xs);
}
.projekte-filter a {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--dark-color);
    transition: all var(--transition-fast);
}
.projekte-filter a:hover,
.projekte-filter a.filter-aktiv {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* Archiv-Raster und Karten */
.projekte-archiv {
    padding: var(--spacing-xl) 0;
}
.projekte-grid {
    gap: var(--spacing-md);
}
.projekt-karte {
    background-color: var(--white-color);
    border: 1px solid #ececec;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--transition-medium), transform var(--transition-medium);
}
.projekt-karte:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.projekt-karte .wp-block-post-featured-image {
    margin: 0;
}
.projekt-karte .wp-block-post-featured-image img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}
.projekt-karte-body {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}
.projekt-karte-body .wp-block-post-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
}
.projekt-karte-body .wp-block-post-title a {
    color: var(--dark-color);
}
.projekt-karte-body .wp-block-post-title a:hover {
    color: var(--primary-color);
}
.projekt-karte-body .projekt-ort {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}
.projekt-datum {
    font-size: var(--font-size-sm);
    color: #4a5054;
    margin-bottom: 0;
}

/* Einzelansicht */
.projekt-single {
    padding: var(--spacing-xl) 0;
    padding-top: 120px;
}
.projekt-container {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}
.projekt-zurueck {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
}
.projekt-single h1 {
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-xs);
}
.projekt-meta {
    gap: var(--spacing-sm) !important;
    align-items: center;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: #4a5054;
}
.projekt-meta .wp-block-post-terms {
    font-family: var(--font-heading);
    font-weight: 600;
}
.projekt-single .wp-block-post-featured-image {
    margin-bottom: var(--spacing-md);
}
.projekt-single .wp-block-post-featured-image img {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}
.projekt-cta {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-color);
    border-radius: var(--border-radius-md);
    text-align: center;
}
.projekt-cta p {
    color: #4a5054;
    max-width: 560px;
    margin: 0 auto var(--spacing-md);
}

/* Teaser-Sektion "Aktuelle Projekte" auf den Leistungsseiten */
.projekte-teaser-sektion {
    padding: var(--spacing-xl) 0;
    background-color: var(--light-color);
}
.projekte-teaser-sektion .projekte-alle-link {
    text-align: center;
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .projekt-karte .wp-block-post-featured-image img { height: 180px; }
}

/* Automatischer Verweis vom Projektbericht auf die passende Leistungsseite */
.projekt-leistung-link {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid #ececec;
    color: #4a5054;
}

/* ============================================================
   Bausteine des Redaktions-Baukastens, die es im Original-HTML
   noch nicht gab. Farben bewusst aus den CI-Variablen; Orange auf
   hellem Grund als #a34f00 (kontraststarke Variante wie in
   enhancements.css), damit Text die WCAG-Grenze haelt.
   ============================================================ */

/* ---- Preisorientierung ---- */
.preis-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--light-color);
}
.preis-liste {
    max-width: 760px;
    margin: 0 auto;
}
.preis-zeile {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid #e3e5e7;
}
.preis-zeile p {
    margin: 0;
}
.preis-wert {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #a34f00;
    white-space: nowrap;
}
.preis-hinweis {
    max-width: 760px;
    margin: var(--spacing-md) auto 0;
    font-size: var(--font-size-sm);
    color: #4a5054;
}

/* ---- Ablauf in Schritten ---- */
.ablauf-section {
    padding: var(--spacing-xl) 0;
}
.ablauf-grid {
    counter-reset: ablauf;
    gap: var(--spacing-md);
}
.ablauf-schritt {
    counter-increment: ablauf;
}
.ablauf-schritt::before {
    content: counter(ablauf);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--spacing-sm);
    border-radius: 50%;
    background-color: #a34f00;
    color: var(--white-color);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-lg);
}
.ablauf-schritt h3 {
    margin-bottom: var(--spacing-xs);
}
.ablauf-schritt p {
    color: #4a5054;
    margin-bottom: 0;
}

/* ---- Hinweis-Box ---- */
.hinweis-box {
    background-color: var(--light-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-md) 0;
}
.hinweis-box p:last-child {
    margin-bottom: 0;
}

/* ---- Einsatzgebiete ---- */
.einsatzgebiete-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--light-color);
}
.einsatzgebiete-liste {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding-left: 0;
    margin-top: var(--spacing-sm);
}
.einsatzgebiete-liste li {
    background-color: var(--white-color);
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 6px 16px;
    font-size: var(--font-size-sm);
    color: #4a5054;
}

@media (max-width: 992px) {
    .ablauf-grid.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 576px) {
    .ablauf-grid.is-layout-grid { grid-template-columns: 1fr; }
}

/* ---- Korrekturen fuer den Einzeleinsatz der Bausteine ---- */

/* Die globale Regel h1-h6 { color: dark } schlaegt die geerbte weisse Schrift
   der Zitat-Sektion. Betrifft auch die Startseite: dunkler Text auf dunklem
   Foto ist zu kontrastarm. */
.team-quote h2,
.team-quote h3 {
    color: var(--white-color);
}

/* Die Ansprechpartner-Karte ist quadratisch (aspect-ratio 1/1). Ausserhalb des
   Rasters wuerde sie sonst bildschirmbreit und damit bildschirmhoch. */
.ansprechpartner-card {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* Im Raster bekommen alle Karten dieselbe feste Groesse (400 px), unabhaengig
   davon, wie gross die hochgeladenen Bilder sind. Vorher waren die Spalten 1fr:
   ein 2048-px-Original zog seine Spalte breiter als die uebrigen, die Karten
   waren dann unterschiedlich gross. min() faengt schmale Bildschirme ab. */
.ansprechpartner-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 400px));
    justify-content: center;
}
.ansprechpartner-grid > .ansprechpartner-card {
    min-width: 0;
}

/* Hinweis-Box direkt im Seiteninhalt (ohne umgebenden Container) mittig halten. */
.hinweis-box {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* ===== Leistungs-Icon Neubau (Kran mit Last über Rohbau), Stil wie Maler/Boden ===== */
.service-icon svg.neubau-icon .kran,
.service-icon svg.neubau-icon .seil,
.service-icon svg.neubau-icon .grund {
    stroke: var(--dark-color);
    fill: none;
    stroke-width: 4;
}
.service-icon svg.neubau-icon .rohbau {
    stroke: var(--primary-color);
    fill: none;
    stroke-width: 4;
}
.service-icon svg.neubau-icon .block {
    fill: var(--primary-color);
    stroke: none;
}
.service-icon svg.neubau-icon .last {
    animation: kranLast 3s infinite ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
}
.service-card:hover .service-icon svg.neubau-icon .kran,
.service-card:hover .service-icon svg.neubau-icon .seil,
.service-card:hover .service-icon svg.neubau-icon .grund { stroke: var(--primary-color); }
.service-card:hover .service-icon svg.neubau-icon .rohbau { stroke: var(--dark-color); }
.service-card:hover .service-icon svg.neubau-icon .block { fill: var(--dark-color); }

@keyframes kranLast {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(9px); }
}

/* Leistungs-Raster mit genau vier Karten: auf breiten Bildschirmen eine Reihe statt 3 + 1.
   Tablet (2 Spalten) und Handy (1 Spalte) bleiben wie in enhancements.css. */
@media (min-width: 993px) {
    .services-grid:has(> .service-card:nth-child(4):last-child) {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Referenzen-Raster mit nur einer Karte: mittig statt eines Drittels links.
   Mit mehreren Karten greift wieder das Dreier-Raster aus enhancements.css. */
.referenzen-grid:has(> :only-child) {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
}

/* Link "Alle Projekte und Referenzen ansehen" unter dem Referenzen-Raster der Startseite:
   gleiche Darstellung wie unter den Projekte-Teasern (mittig, Abstand nach oben),
   statt linksbündig direkt an der Karte. */
.referenzen-section .projekte-alle-link {
    text-align: center;
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

/* Team-Band als Cover-Block: Hintergrundbild ist Inhalt des Blocks und per "Ersetzen"
   austauschbar, der orange Verlauf kommt aus dem Cover-Overlay. Die aelteren Regeln fuer
   .team-bg-section (festes Bild, feste Hoehe) gelten fuer den Cover-Block nicht. */
.wp-block-cover.team-bg-section {
    background-image: none;
    height: auto;
    min-height: 300px;
    padding: var(--spacing-md);
}
.wp-block-cover.team-bg-section .wp-block-cover__inner-container {
    display: flex;
    justify-content: center;
}
.wp-block-cover.team-bg-section .team-quote {
    margin: 0 auto;
}