/*
 Theme Name:   Tiwi Trade
 Description:  Child Theme von Twenty Twenty-Five für TIWI Trade GmbH
 Author:       fourplex
 Author URI:   https://fourplex.de/
 Template:     twentytwentyfive
 Version:      2.2
 Text Domain:  tiwi-trade
*/

/* =========================================================
   GRUNDSATZ (Pflegbarkeit)
   Alles, was im Block-Editor einstellbar ist – Farben, Abstände
   (Padding/Margin), Border-Radius, Ausrichtung, Schriftgrößen –
   wird direkt am Block in Gutenberg gesetzt, NICHT hier.
   Border-Radius entspricht dem Original (4px).
   Dieses Stylesheet enthält nur noch, was Gutenberg NICHT abbilden
   kann: Karussell, Sticky-Header, Hover-Status, ::before-Häkchen,
   Icon-/Bild-Detailstyling (SVG-Größe, object-fit), CF7-Felder
   sowie das halbtransparente Feature-Box-Design (kein Theme-Preset).
   ========================================================= */

/* =========================================================
   Bilderkarussell – Gutenberg-Galerie-Block + Klasse .fp_carousel
   ========================================================= */

:root{
    --fp-carousel-height: 90px;
    --fp-carousel-speed: 20s;
}

.wp-block-gallery.fp_carousel {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    width: 100%;
}
/* Logos immer klein halten – greift auch ohne JS-Track */
.wp-block-gallery.fp_carousel img {
    height: var(--fp-carousel-height, 52px) !important;
    width: auto !important;
    max-width: none;
    object-fit: contain;
}
.wp-block-gallery.fp_carousel figure {
    margin: 0;
    flex: 0 0 auto;
}
.wp-block-gallery.fp_carousel .fp_carousel-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    animation: fp_scroll var(--fp-carousel-speed, 30s) linear infinite;
}
/* Abstand als rechte Margin auf JEDES Element (auch den letzten Klon) –
   NICHT als flex-gap. Grund: flex-gap erzeugt keinen Abstand HINTER dem
   letzten Element, wodurch der 50%-Punkt der Animation um einen halben Gap
   gegenüber dem Klon-Anfang verschoben wäre und der Loop bei jedem Durchlauf
   sichtbar „springt". Mit gleichmäßiger rechter Margin trifft translateX(-50%)
   exakt auf den Klon-Anfang und schließt nahtlos. */
.wp-block-gallery.fp_carousel .fp_carousel-track > * {
    margin-right: 1rem;
}
@keyframes fp_scroll {
    from {
        transform: translateX(0);
    }
    to   {
        /* Exakte Loop-Distanz wird per JS gemessen (offsetLeft des ersten
           Klons) und als --fp-carousel-shift gesetzt. Fallback -50% greift
           nur, falls JS nicht läuft. Das Messen ist nötig, weil beide
           Track-Hälften sonst (z.B. durch lazy-geladene Klon-Bilder) nicht
           garantiert exakt gleich breit sind → Sprung. */
        transform: translateX( calc( -1 * var( --fp-carousel-shift, 50% ) ) );
    }
}
/* Barrierefreiheit: Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    .wp-block-gallery.fp_carousel .fp_carousel-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    /* Ohne Animation kein Sprung-Risiko – hier wieder normaler gap statt
       der rechten Margin, damit umgebrochene Reihen sauber stehen. */
    .wp-block-gallery.fp_carousel .fp_carousel-track > * {
        margin-right: 0;
    }
}

/* =========================================================
   Header – vollständig über native Block-Einstellungen gelöst
   (Flex-Layout + blockGap, Farben/Padding als Block-Attribute).
   Bewusst KEIN Header-CSS mehr. Sticky wurde nicht übernommen.
   ========================================================= */

/* =========================================================
   Footer – list-style/Hover (nicht über Block-Attribute abbildbar)
   ========================================================= */
.tiwi-footer__title {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 0 0 0.85rem;
    opacity: 0.65;
}
.tiwi-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.tiwi-footer a {
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
}
.tiwi-footer a:hover {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
}
.tiwi-footer__person {
    gap: 0.9rem;
    margin-top: 0.5rem;
}
.tiwi-footer__bottom {
    opacity: 0.7;
}

/* =========================================================
   Häkchen-Liste – ::before-Pseudoelement (nicht in Gutenberg)
   ========================================================= */
.tiwi-checklist {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.tiwi-checklist li {
    position: relative;
    padding-left: 1.9rem;
}
.tiwi-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--wp--preset--color--accent);
    font-weight: 700;
}

/* =========================================================
   Feature-Boxen (Über uns) – nur das halbtransparente Design
   (kein Theme-Preset). Radius/Padding/Grid liegen in Gutenberg.
   ========================================================= */
.tiwi-feature {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
/* =========================================================
   Icon-Bilder – native Bild-Blöcke (SVG aus der Mediathek, Akzentfarbe
   eingebacken). Wrapper-Klasse sitzt am <figure>; die Größe kommt aus
   der Block-Breite (38px Feature/Standort, 28px Kontakt).
   ========================================================= */
.tiwi-feature__icon,
.tiwi-contact-item__icon,
.tiwi-map__icon {
    margin: 0;
}
.tiwi-feature__icon img,
.tiwi-contact-item__icon img,
.tiwi-map__icon img {
    display: block;
}
.tiwi-contact-item__icon {
    flex: 0 0 auto;
}
.tiwi-map__icon {
    display: flex;
    justify-content: center;
}

/* =========================================================
   Leistungs-Cards – nur Clipping/Bild-Fit (kein Block-Attribut).
   Farben, Radius, Padding, Grid und der 16/9-Zuschnitt (aspectRatio
   + scale:cover am Bild-Block) liegen in Gutenberg.
   ========================================================= */
.tiwi-card {
    overflow: hidden;         /* Bild auf Card-Radius beschneiden */
    display: flex;
    flex-direction: column;
    width: 100%;
}
.tiwi-card .wp-block-image,
.tiwi-card figure {
    margin: 0;
}
.tiwi-card img {
    width: 100%;
    object-fit: cover;        /* Sicherheitsnetz, falls Quelle nicht 16/9 */
    display: block;
}

/* =========================================================
   Kontakt – CF7-Formularfelder (keine Gutenberg-Blöcke) + Kontaktliste
   ========================================================= */
.tiwi-form-card label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.85rem;
}
.tiwi-form-card input[type="text"],
.tiwi-form-card input[type="tel"],
.tiwi-form-card input[type="email"],
.tiwi-form-card input[type="date"],
.tiwi-form-card input[type="time"],
.tiwi-form-card textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font: inherit;
    margin-top: 0.25rem;
    box-sizing: border-box;
}
.tiwi-form-card .wpcf7-acceptance {
    font-size: 0.85rem;
    font-weight: 400;
}
.tiwi-form-card input[type="submit"] {
    background: var(--wp--preset--color--accent);
    color: #fff;
    border: none;
    padding: 0.85rem 1.8rem;
    border-radius: 4px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.tiwi-form-card input[type="submit"]:hover {
    background: var(--wp--preset--color--contrast);
}
.tiwi-contact-list {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}
/* Link in einem orangefarbenen Highlight weiß halten (Akzent-Linkfarbe
   würde sonst orange auf orange ergeben). Nur bei <mark><a> nötig. */
.tiwi-kontakt mark a {
    color: var(--wp--preset--color--base);
}
.flex{
    display: flex;
    gap: 0 1rem ;
    flex-wrap: wrap;
}
.flex p{
    margin: 0;
}

/* =========================================================
   „Tiwi Trade"-Unterstrich – handgezeichnete SVG-Welle (wie auf der
   Originalseite, in Akzentfarbe). Im Inhalt wird nur „Tiwi Trade" in
   <span class="tiwi-underline"> gefasst; die Welle kommt aus dem ::after.
   ========================================================= */
.tiwi-underline {
    position: relative;
    white-space: nowrap;
}
.tiwi-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.16em;
    height: 0.26em;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2071%206'%20fill%3D'none'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0.96875%201.54183C24.0009%201.54444%2047.0304%201.43619%2070.0625%201.44011C54.0689%202.32953%2038.0753%203.32981%2022.0817%204.21793C34.7001%204.1788%2047.3288%204.38747%2059.8212%204.84'%20stroke%3D'%23EE6D3F'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-miterlimit%3D'10'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
}
@media(min-width: 1200px){
    :root{
        --fp-carousel-speed: 40s;
    }
}