/* ==========================================================================
   custom.css — Projektkonfiguration: Rechtsanwalt Riepenhoff
   NUR CSS Custom Properties (:root {}).
   Wird ZUERST geladen (vor core.css), damit alle Variablen beim Parsen
   der Stile bereits verfügbar sind.

   Reihenfolge: custom.css → core.css → overrides.css
   ========================================================================== */

/* --- Lokale Schriftart: Serenata Vantages --------------------------------- */
@font-face {
    font-family: "Serenata Vantages";
    src: url('fonts/Serenata_Vantages_Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {

    /* =========================================================================
       PROJEKT-EINSTELLUNGEN — wird pro Projekt angepasst
       ========================================================================= */

    /* --- Primärfarben ------------------------------------------------------ */
    --color-primary:      #cbaa61;        /* Hauptfarbe Teal */
    --color-primary-dark: #2d343a;        /* Hover-Dunkelton */
    --color-split:        #3c3c3b;        /* Split-Sektion: linke Hälfte dunkel */
    --color-secondary:    #f5f5f5;
    --color-text:         #2d343a;        /* Standard-Fließtext */
    --color-border:       #d4d4d4;
    --color-white:        #ffffff;
    --color-gray:         #f1f1f1;        /* Sektion-Hintergrund hell */
    --color-gold: linear-gradient(to right, #966724, #ebca7b, #966724);
    --color-gray-dark:    #808080;
    --color-headline-dark:    #333333;
    --color-success:      #2e7d4f;        /* Valid-Zustand Formular */
    --border-base:        1px solid var(--color-border);
    --border-radius:      10px;

    /* --- Schriftarten ------------------------------------------------------ */
    /* Einzige Quelle — config.php liest per Regex für den Font-Load-Link      */
    --font-base: "Montserrat", verdana, sans-serif;   /* Fließtext  */
    --font-ui:   "Serenata Vantages", serif;              /* Überschriften */

    /* --- Header-Hintergrundbild -------------------------------------------- */
    /* Einzige Quelle — Dateiname in img/ anpassen, Pfad ../img/ beibehalten   */
    --header-image: url('../img/header.jpg');

    /* --- Header-Overlay ---------------------------------------------------- */
    /* Farbe + Deckkraft frei wählbar, z.B. rgba(0,121,153,0.5) für Teal      */
    --header-overlay: rgba(28, 37, 39, 0);

    /* --- Logo -------------------------------------------------------------- */
    --logo-width:        560px;   /* Header Desktop */
    --logo-width-tablet: 450px;   /* Header Tablet (≤980px) */
    --logo-width-mobil:  320px;   /* Header Mobil */
    /* Footer-Logo: Größe wird durch col-3 im Footer gesteuert */


    /* =========================================================================
       TECHNISCHE EINSTELLUNGEN — selten geändert
       ========================================================================= */

    /* --- Typografische Größen (clamp) -------------------------------------- */
    /*     375px   768px   980px  1440px                                       */
    --line-height:    1.6;
    --lh-sm:          1.5;
    --lh-lg:          1.7;

    --fs-xs:          clamp(0.75rem, 1.5vw, 0.8125rem);
    --fs-sm:          clamp(0.875rem, 1.5vw, 1rem);               /*  14px    14px    15px    16px  */
    --fs-md:          clamp(1rem, 2vw, 1.125rem);                  /*  16px    16px    18px    18px  */
    --fs-lg:          clamp(1rem, 0.56vw + 0.87rem, 1.375rem);    /*  16px    17px    19px    22px  */

   --font-size-hero: clamp(1.5rem, 4vw, 3.625rem); /* 22px 30px 36px 58px */
    --font-size-h1:   clamp(2.1rem, 6vw, 3.6rem);                 /*  34px    46px    59px→  58px  */
    --font-size-h2:   clamp(1.5rem, 1.79vw + 0.77rem, 2.4rem);   /*  24px    26px    30px    38px  */
    --font-size-h3:   clamp(1.25rem, 0.6vw + 1.11rem, 1.65rem);  /*  20px    22px    24px    26px  */
    --font-size-h4:   clamp(1.2rem, 2.4vw, 1.35rem);              /*  19px    19px    22px→  22px  */
    --font-size-h5:   clamp(1.05rem, 1.8vw, 1.2rem);              /*  17px    17px    18px    19px  */
    --font-size-h6:   clamp(0.975rem, 1.5vw, 1.05rem);            /*  16px    16px    17px→  17px  */

    /* --- Überschriften: Zeilenhöhen ---------------------------------------- */
    --lh-h1: 1.3;
    --lh-h2: 1.45;
    --lh-h3: 1.5;
    --lh-h4: 1.55;
    --lh-h5: 1.6;
    --lh-h6: 1.7;

    --h-upper: uppercase;

    /* --- Layout / Container ------------------------------------------------ */
    --container-max:  1320px;
    --container:      1200px;
    --container-wide: 1600px;
    --radius:         12px;

    /* --- Abstände ---------------------------------------------------------- */
    --spacing-xs:  clamp(0.25rem, 0.4vw, 0.375rem);   /*  4– 6 px */
    --spacing-sm:  clamp(0.375rem, 0.75vw, 0.5rem);   /*  6– 8 px */
    --spacing-md:  clamp(0.75rem, 1.5vw, 1rem);       /* 12–16 px */
    --spacing-lg:  clamp(1rem, 2vw, 1.5rem);          /* 16–24 px */
    --spacing-xl:  clamp(1.75rem, 4vw, 3rem);         /* 28–48 px */
    --spacing-2xl: clamp(3rem, 6.5vw, 5rem);          /* 48– 80 px */
    --spacing-3xl: clamp(12.5rem, 21vw, 18.75rem);    /* 200–300 px — Parallax */

    /* --- Section-Abstände (vertikal) --------------------------------------- */
    --section-pad-lg: 140px;
    --section-pad-md:  70px;
    --section-pad-sm:  30px;
    --section-pad-xxs:  1px;

    /* --- Raster-Gap -------------------------------------------------------- */
    --row-gap: clamp(1rem, 1.5vw + 0.65rem, 2rem); /* 375px=16px · 768px=22px · 980px=25px · 1440px=32px */

    /* --- Schatten ---------------------------------------------------------- */
    --shadow-sm: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* --- Button ------------------------------------------------------------ */
    --button-padding-y: 10px;
    --button-padding-x: 30px;

    /* --- Listen-Marker ----------------------------------------------------- */
    --marker-content: "» ";
    --marker-color:   var(--color-text);
    --marker-size:    1em;

    /* --- Navigation -------------------------------------------------------- */
    --nav-height: 48px;
    --nav-height-mobile: 42px;

}

/* --- Schriftgrößen Tablet/Mobil (≤ 980 px) -------------------------------- */
@media (max-width: 980px) {
    :root {
        --font-size-h1:   clamp(1.5rem, 4vw, 2.25rem);     /* 24–36 px */
        --font-size-h4:   clamp(1rem, 2vw, 1.25rem);       /* 16–20 px */
        --font-size-h5:   1rem;                             /* 16 px    */
        --font-size-h6:   1rem;                             /* 16 px    */
    }
}



/* ==========================================================================
   PORTFOLIO
   ========================================================================== */

.pf-section {
    background-color: var(--color-primary-dark);
    padding: var(--section-pad-md) 0;
}

.pf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: clamp(1rem, 2vw, 1.75rem);
    gap: var(--spacing-md);
}

.pf-head__title {
    font-family: var(--font-ui);
    font-size: var(--font-size-h2);
    color: var(--color-white);
    border-bottom: 3px solid var(--color-primary);
    padding-bottom: 8px;
    display: inline-block;
    margin: 0;
}

.pf-head__counter {
    font-family: var(--font-ui);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: var(--color-white);
    opacity: 0.4;
    line-height: 1;
    letter-spacing: 0.05em;
}

.pf-slide         { display: block; }
.pf-slide--hidden { display: none; }

/* ------------------------------------------------------------------
   DESKTOP > 980px
   4 Spalten: 1fr(hoch) 2fr(quer) 1fr(hoch) 2fr(quer)
   2 Zeilen, feste Höhe
------------------------------------------------------------------ */
.pf-mosaic {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
    height: clamp(240px, 28vw, 400px);
}

.pf-c1-tall { grid-column: 1; grid-row: 1 / 3; }
.pf-c2-top  { grid-column: 2; grid-row: 1;     }
.pf-c2-bot  { grid-column: 2; grid-row: 2;     }
.pf-c3-tall { grid-column: 3; grid-row: 1 / 3; }
.pf-c4-top  { grid-column: 4; grid-row: 1;     }
.pf-c4-bot  { grid-column: 4; grid-row: 2;     }

.pf-item {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background-color: #1a1f23;
    min-width: 0;
    min-height: 0;
}

.pf-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Einblend-Animation */
@keyframes pf-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pf-slide.pf-animate .pf-item              { animation: pf-in 0.4s ease-out both; }
.pf-slide.pf-animate .pf-item:nth-child(2) { animation-delay: 0.05s; }
.pf-slide.pf-animate .pf-item:nth-child(3) { animation-delay: 0.10s; }
.pf-slide.pf-animate .pf-item:nth-child(4) { animation-delay: 0.15s; }
.pf-slide.pf-animate .pf-item:nth-child(5) { animation-delay: 0.20s; }
.pf-slide.pf-animate .pf-item:nth-child(6) { animation-delay: 0.25s; }

/* Navigation */
.pf-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.pf-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.3s, border-color 0.3s;
}
.pf-arrow:hover                 { background-color: var(--color-primary); border-color: var(--color-primary); }
.pf-arrow:disabled              { opacity: 0.2; cursor: default; pointer-events: none; }

.pf-dots { display: flex; gap: var(--spacing-sm); align-items: center; }

.pf-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    background: transparent;
    cursor: pointer; padding: 0;
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}
.pf-dot--on                     { background-color: var(--color-primary); border-color: var(--color-primary); transform: scale(1.4); }
.pf-dot:hover:not(.pf-dot--on)  { border-color: var(--color-white); }

/* ------------------------------------------------------------------
   WAPPEN HINTERGRUND
------------------------------------------------------------------ */
.section--wappen {
    background-image: url('../img/wappen.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 45%;
}

/* ------------------------------------------------------------------
   TABLET 481px – 980px
   2 Spalten: 1fr(hoch) 2fr(quer/quer)
   3 Bilder pro Slide → JS zeigt nur Items 1+2+3 oder 4+5+6
   Hoch-Item: beide Zeilen; die zwei Quer übereinander
------------------------------------------------------------------ */
@media (max-width: 980px) {
    .pf-mosaic {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr 1fr;
        gap: 5px;
        height: clamp(200px, 38vw, 340px);
    }

    /* Item 1 des sichtbaren Tripels → linke Spalte, beide Zeilen */
    .pf-item:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
    /* Item 2 → rechts oben */
    .pf-item:nth-child(2) { grid-column: 2; grid-row: 1; }
    /* Item 3 → rechts unten */
    .pf-item:nth-child(3) { grid-column: 2; grid-row: 2; }

    /* Desktop-Placement-Klassen zurücksetzen */
    .pf-c1-tall, .pf-c2-top, .pf-c2-bot,
    .pf-c3-tall, .pf-c4-top, .pf-c4-bot {
        grid-column: unset;
        grid-row:    unset;
    }
}

/* ------------------------------------------------------------------
   MOBIL ≤ 480px
   1 Bild pro Slide, immer 4:3 zugeschnitten (object-fit: cover)
------------------------------------------------------------------ */
@media (max-width: 480px) {
    .pf-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 0;
        height: auto;
    }

    .pf-item {
        aspect-ratio: 4 / 3;
        grid-column: 1 !important;
        grid-row:    auto !important;
    }

    .pf-head { flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; }
}