/*
Theme Name:  Schleip & Collegen – Child
Theme URI:   https://www.rechtsanwalt-eisenach.com/
Description: Child-Theme auf GeneratePress-Basis für die Rechtsanwaltskanzlei schleip & collegen, Eisenach. Seriöses, vertrauensbildendes Design mit lokal gehosteten Schriften (DSGVO-konform). Erstellt und gepflegt von Franzel IT.
Author:      Tobias Franzel IT
Author URI:  https://www.franzel.de
Template:    generatepress
Version:     1.0.3
Text Domain: schleip-child
License:     GNU General Public License v2 or later
*/

/* =============================================================
   CHANGELOG
   -------------------------------------------------------------
   1.0.3 (2026-06-23)
   - Kontaktkarte ueber die Cookiebar geloest (data-cb-src). Eigener
     Lade-Button/JS entfernt; Freigabe + Platzhalter uebernimmt die
     Cookiebar nach Einwilligung. Voraussetzung: Google-Maps-Blocker
     in der Cookiebar aktiv.

   1.0.2 (2026-06-23)
   - Kontaktkarte: Klick-zum-Laden statt data-cb-src (lädt jetzt
     zuverlässig, weiterhin DSGVO-konform, ohne Plugin-Abhängigkeit).
     Echtes Kanzlei-Embed hinterlegt.

   1.0.1 (2026-06-23)
   - Footer: Datenschutz-Link auf /datenschutz/ korrigiert.

   1.0.0 (2026-06-23)
   - Erstausstattung: GeneratePress-Child von Grund auf.
   - Eigenes Branding (Deep Navy / Messing / warmes Papier).
   - Lokal gehostete Schriften Lora + Inter (DSGVO).
   - Custom-Startseite (front-page.php): Hero, Werte-Strip,
     Rechtsgebiete-Raster, Kanzlei/Team, Kontakt mit
     consent-gebundener Karte (data-cb-src).
   - WordPress-/GeneratePress-Credits entfernt, dynamischer
     Copyright-Hinweis mit Impressum + Datenschutz.
   ============================================================= */


/* =============================================================
   1. DESIGN TOKENS
   ============================================================= */
:root {
    /* Farben */
    --sc-ink:          #15263F; /* tiefes Anwaltsblau – Marke, Headlines, Hero */
    --sc-ink-2:        #1E3350; /* aufgehellte Schicht */
    --sc-paper:        #F4F2EC; /* warmes Papier – Seitengrund */
    --sc-paper-2:      #EEEBE1; /* abgesetztes Papier (Streifen) */
    --sc-surface:      #FFFFFF; /* Karten */
    --sc-brass:        #A6803F; /* zurückhaltendes Messing – Akzent */
    --sc-brass-bright: #C8A05A; /* Messing auf dunklem Grund */
    --sc-text:         #2A3340; /* Fließtext auf hell */
    --sc-muted:        #687085; /* Sekundärtext */
    --sc-line:         #E1DBCF; /* warme Haarlinie */
    --sc-line-dark:    rgba(255,255,255,.14); /* Haarlinie auf dunkel */
    --sc-paper-soft:   #FBFAF6;

    /* Typografie */
    --sc-serif: "Lora", Georgia, "Times New Roman", serif;
    --sc-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Maße */
    --sc-maxw: 1140px;
    --sc-maxw-narrow: 760px;
    --sc-radius: 4px;
    --sc-gap: clamp(1.25rem, 3vw, 2.25rem);
    --sc-section-y: clamp(3.5rem, 7vw, 6rem);

    /* Schatten */
    --sc-shadow: 0 1px 2px rgba(21,38,63,.04), 0 12px 28px -18px rgba(21,38,63,.28);
    --sc-shadow-lift: 0 2px 4px rgba(21,38,63,.06), 0 20px 40px -20px rgba(21,38,63,.40);

    --sc-ease: cubic-bezier(.2,.7,.2,1);
}


/* =============================================================
   2. BASIS / GENERATEPRESS-INTEGRATION
   ============================================================= */
body {
    font-family: var(--sc-sans);
    color: var(--sc-text);
    background-color: var(--sc-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .sc-serif {
    font-family: var(--sc-serif);
    color: var(--sc-ink);
    font-weight: 600;
    letter-spacing: -.01em;
}

a { color: var(--sc-brass); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sc-ink); }

/* Sichtbarer Tastatur-Fokus (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
.sc-btn:focus-visible {
    outline: 2px solid var(--sc-brass);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Custom-Startseite: GeneratePress nutzt flexbox auf .site-content.
   Für die Full-Width-Startseite wird das gezielt auf die Body-Klasse
   .schleip-front aufgehoben (Layout-Lernerfahrung aus früheren Themes). */
body.schleip-front .site-content {
    display: block;
    padding: 0;
}
body.schleip-front #primary,
body.schleip-front .content-area {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}
body.schleip-front .site-main { margin: 0; }
body.schleip-front .entry-content { margin: 0; }


/* =============================================================
   3. KOPFBEREICH / NAVIGATION (GeneratePress-Header)
   ============================================================= */
.site-header {
    background-color: var(--sc-paper-soft);
    border-bottom: 1px solid var(--sc-line);
}
.site-header .site-logo img,
.site-header .header-image { max-height: 60px; width: auto; }

.main-title,
.site-title a {
    font-family: var(--sc-serif);
    color: var(--sc-ink) !important;
    font-weight: 600;
    letter-spacing: -.01em;
}
.site-description { color: var(--sc-muted); font-family: var(--sc-sans); }

.main-navigation,
.main-navigation ul { background-color: transparent; }
.main-navigation .main-nav ul li a {
    font-family: var(--sc-sans);
    font-weight: 500;
    font-size: .95rem;
    letter-spacing: .01em;
    color: var(--sc-ink);
    text-transform: none;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--sc-brass);
    background-color: transparent;
}
/* feine Messing-Unterstreichung beim Hover */
.main-navigation .main-nav ul li > a::after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    background: var(--sc-brass);
    transition: width .25s var(--sc-ease);
    margin-top: 4px;
}
.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li.current-menu-item > a::after { width: 100%; }


/* =============================================================
   4. WIEDERVERWENDBARE BAUSTEINE
   ============================================================= */
.sc-container { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }
.sc-narrow { max-width: var(--sc-maxw-narrow); }

.sc-eyebrow {
    font-family: var(--sc-sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sc-brass);
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1rem;
}
.sc-eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: var(--sc-brass);
    display: inline-block;
}
.sc-section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; margin: 0 0 1rem; }
.sc-lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.7; color: var(--sc-text); }

.sc-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--sc-sans);
    font-weight: 600;
    font-size: .98rem;
    line-height: 1;
    padding: .95rem 1.6rem;
    border-radius: var(--sc-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .2s var(--sc-ease), background-color .2s var(--sc-ease), color .2s var(--sc-ease), border-color .2s var(--sc-ease);
    text-decoration: none;
}
.sc-btn--primary { background: var(--sc-brass); color: #fff; }
.sc-btn--primary:hover { background: var(--sc-brass-bright); color: #1a1408; transform: translateY(-1px); }
.sc-btn--ghost { background: transparent; color: #fff; border-color: var(--sc-line-dark); }
.sc-btn--ghost:hover { border-color: var(--sc-brass-bright); color: var(--sc-brass-bright); }
.sc-btn--dark { background: var(--sc-ink); color: #fff; }
.sc-btn--dark:hover { background: var(--sc-ink-2); color: #fff; transform: translateY(-1px); }


/* =============================================================
   5. HERO  (das "Thesis"-Element)
   ============================================================= */
.sc-hero {
    position: relative;
    background: var(--sc-ink);
    color: #EAF0F7;
    overflow: hidden;
    isolation: isolate;
}
/* Signatur: feine vertikale "Kannelierung" (Säule/Aktenregister) sehr dezent */
.sc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.045) 0,
        rgba(255,255,255,.045) 1px,
        transparent 1px,
        transparent 34px
    );
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 100%);
            mask-image: linear-gradient(90deg, transparent, #000 30%, #000 100%);
    pointer-events: none;
    z-index: -1;
}
/* Messing-Lichtschein oben rechts */
.sc-hero::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 120%;
    background: radial-gradient(closest-side, rgba(200,160,90,.16), transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.sc-hero__inner {
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    padding-block: clamp(4.5rem, 11vw, 8rem);
    max-width: 820px;
}
.sc-hero .sc-eyebrow { color: var(--sc-brass-bright); }
.sc-hero .sc-eyebrow::before { background: var(--sc-brass-bright); }
.sc-hero h1 {
    color: #fff;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.05;
    margin: 0;
}
.sc-hero h1 .sc-hero__lead-word {
    display: block;
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-family: var(--sc-sans);
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--sc-brass-bright);
    margin-bottom: .5rem;
}
.sc-hero p.sc-lead { color: #C7D2E0; max-width: 56ch; }
.sc-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .5rem; align-items: center; }
.sc-hero__note {
    font-size: .88rem;
    color: #98A6BB;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.sc-hero__note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-brass-bright); display: inline-block; }


/* =============================================================
   6. WERTE-STRIP
   ============================================================= */
.sc-values {
    background: var(--sc-paper-2);
    border-bottom: 1px solid var(--sc-line);
}
.sc-values__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--sc-line);
    border-inline: 1px solid var(--sc-line);
    margin-block: 0;
}
.sc-value {
    background: var(--sc-paper-2);
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
}
.sc-value h3 { font-size: 1.12rem; margin: 0 0 .4rem; }
.sc-value p { margin: 0; color: var(--sc-muted); font-size: .96rem; line-height: 1.6; }
.sc-value__num {
    font-family: var(--sc-serif);
    color: var(--sc-brass);
    font-size: .95rem;
    font-weight: 600;
    display: block;
    margin-bottom: .75rem;
}


/* =============================================================
   7. RECHTSGEBIETE (Karten-Raster)
   ============================================================= */
.sc-areas { padding-block: var(--sc-section-y); }
.sc-areas__head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sc-areas__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}
.sc-area {
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-radius);
    padding: 1.6rem 1.5rem;
    transition: transform .25s var(--sc-ease), box-shadow .25s var(--sc-ease), border-color .25s var(--sc-ease);
    position: relative;
}
.sc-area::before {
    content: "";
    position: absolute;
    left: 0; top: 1.6rem; bottom: 1.6rem;
    width: 3px;
    background: var(--sc-brass);
    border-radius: 3px;
    opacity: 0;
    transition: opacity .25s var(--sc-ease);
}
.sc-area:hover {
    transform: translateY(-3px);
    box-shadow: var(--sc-shadow-lift);
    border-color: transparent;
}
.sc-area:hover::before { opacity: 1; }
.sc-area h3 { font-size: 1.15rem; margin: 0 0 .45rem; }
.sc-area p { margin: 0; color: var(--sc-muted); font-size: .94rem; line-height: 1.6; }


/* =============================================================
   8. KANZLEI / TEAM
   ============================================================= */
.sc-firm { background: var(--sc-paper-soft); border-block: 1px solid var(--sc-line); padding-block: var(--sc-section-y); }
.sc-firm__head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }

.sc-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.sc-person { background: var(--sc-surface); border: 1px solid var(--sc-line); border-radius: var(--sc-radius); overflow: hidden; }
.sc-person--lead { grid-column: span 1; }
.sc-person__photo {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--sc-ink) 0%, var(--sc-ink-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-brass-bright);
    font-family: var(--sc-serif);
    font-size: 2.4rem;
    position: relative;
}
.sc-person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-person__photo[data-initials]::after { content: attr(data-initials); }
.sc-person__body { padding: 1.2rem 1.3rem 1.4rem; }
.sc-person__name { font-size: 1.18rem; margin: 0 0 .15rem; }
.sc-person__role { color: var(--sc-brass); font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .8rem; }
.sc-person__fields { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.sc-person__fields li { font-size: .9rem; color: var(--sc-text); padding: .18rem 0 .18rem 1rem; position: relative; break-inside: avoid; }
.sc-person__fields li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--sc-brass); border-radius: 1px; }
.sc-person__link { display: inline-block; margin-top: 1rem; font-weight: 600; font-size: .92rem; }


/* =============================================================
   9. KONTAKT
   ============================================================= */
.sc-contact { padding-block: var(--sc-section-y); }
.sc-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.sc-contact__info { max-width: 38ch; }
.sc-contact dl { margin: 1.5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.25rem; }
.sc-contact dt { color: var(--sc-muted); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding-top: .15rem; }
.sc-contact dd { margin: 0; font-size: 1.02rem; color: var(--sc-ink); }
.sc-contact dd a { color: var(--sc-ink); font-weight: 500; }
.sc-contact dd a:hover { color: var(--sc-brass); }
.sc-contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* consent-gebundene Karte */
.sc-map {
    position: relative;
    min-height: 340px;
    height: 100%;
    border-radius: var(--sc-radius);
    overflow: hidden;
    border: 1px solid var(--sc-line);
    background: var(--sc-paper-2);
}
.sc-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
/* Hinweis: die Cookiebar zeigt vor der Einwilligung ihren eigenen
   Platzhalter in diesem Container und setzt danach src auf das iframe. */


/* =============================================================
   10. FOOTER (GeneratePress)
   ============================================================= */
.site-footer,
.site-info {
    background: var(--sc-ink);
    color: #9FB0C4;
}
.site-info { font-size: .9rem; text-align: center; padding-block: 1.5rem; }
.site-info a { color: var(--sc-brass-bright); }
.site-info a:hover { color: #fff; }


/* =============================================================
   11. SCROLL-REVEAL (durch JS gesteuert)
   ============================================================= */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--sc-ease), transform .6s var(--sc-ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }


/* =============================================================
   12. RESPONSIVE
   ============================================================= */
@media (max-width: 860px) {
    .sc-values__grid { grid-template-columns: 1fr; }
    .sc-contact__grid { grid-template-columns: 1fr; }
    .sc-person__fields { columns: 1; }
}
@media (max-width: 600px) {
    .sc-hero__actions { flex-direction: column; align-items: stretch; }
    .sc-hero__actions .sc-btn { justify-content: center; }
    .sc-hero__note { justify-content: center; margin-top: .25rem; }
}


/* =============================================================
   13. REDUZIERTE BEWEGUNG (Barrierefreiheit)
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}