/* ==========================================================================
   Startseite – moderne Optik (Paket 1, 28.10.2026)
   --------------------------------------------------------------------------
   Wird NUR auf der Startseite geladen (index.php, Bedingung: Route-Datei
   pages/system/home.php). Ändert nur die Optik. Zum Zurücknehmen genügt es,
   den <link>-Block in index.php zu entfernen (die Klassen „scroll-hidden
   fade-up" an den Galerie-Fotos in home.php laufen dann über das normale
   Einblend-System weiter).

   Inhalt:
   1. Schrift & Überschriften
   2. (entfallen 28.10.2026: grüne Akzentlinie – Kundenwunsch, graue Linie bleibt)
   3. Kernaussage „Seit 23 Jahren …"
   4. „Bewährte Qualitätsprodukte" mit grünen Häkchen (ohne weiße Box – Kundenwunsch)
   5. Galerien auf bewegtem Punkt-Hintergrund (Einblenden + Hover-Effekt
      stehen in galerie-effekte.css)
   6. Links im Fließtext in Facebook-Blau + größere Absatz-Einstiege
   7. Handy-Anpassungen
   ========================================================================== */

/* ---------- 1. Schrift & Überschriften ---------- */
.content-area {
    line-height: 1.7;
    color: #333;
}

.content-area > h1,
.content-area h2.card-title,
.content-area h4.card-title {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #2b2b2b;
    letter-spacing: -0.01em;
}

.content-area > h1 {
    font-size: 1.9rem;
    margin-bottom: 1.25rem !important;
}

.content-area h2.card-title {
    font-size: 1.4rem;
}

.content-area h4.card-title {
    font-size: 1.2rem;
    line-height: 1.4;
}

/* ---------- 3. Kernaussage „Seit 23 Jahren …" ---------- */
.content-area h4.scroll-hidden.fade-up {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.45;
    color: #2b2b2b;
    border-left: 4px solid var(--brand-primary);
    padding: 0.2rem 0 0.2rem 1rem;
    margin-top: 1.75rem;
}

/* ---------- 4. „Bewährte Qualitätsprodukte" (ohne weiße Box) ---------- */
/* Liste und Galerie nebeneinander (ab 992 px): senkrecht mittig zueinander. */
@media (min-width: 992px) {
    /* 29.10.2026 (Kundenwunsch): Liste und Fotos stehen auf jeder Breite ab 992 px
       senkrecht MITTIG zueinander – beide Karten als Flex-Spalte zentriert.
       Vorher: feste Verschiebung 0,5 cm (nur auf dem Computer passend) und zwei
       Tablet-Nachbesserungen (−0,5 / −1,5 cm), die auf Edwards iPad nicht griffen:
       Chrome auf dem iPad zeigt die Seite in Desktop-Breite (über 1200 px), dort
       lag die Liste trotz „Tablet-Regel“ zu tief. Die Mitte gilt jetzt überall. */
    .content-area .card:has(> .card-body > .features-list) > .card-body,
    .content-area .card:has(.main-gallery) > .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Ausgleich: die Listen-Spalte hat unten 1rem Abstand (mb-3) */
    .content-area .card:has(.main-gallery) > .card-body {
        margin-bottom: 1rem;
    }
    /* leerer Abstandshalter über den Fotos würde die Mitte nach unten ziehen */
    .content-area .card:has(.main-gallery) > .card-body > p:empty {
        display: none;
    }
}

/* Kleine PNG-Punkte ausblenden, stattdessen grünes Häkchen im Kreis */
.content-area .features-list li > img {
    display: none;
}

.content-area .features-list li {
    gap: 0.75rem;
    margin-bottom: 0.85rem !important;
}

.content-area .features-list li::before {
    content: "";
    /* 28.10.2026 spät: 25 % kleiner (22 → 16.5 px), Kundenwunsch; margin-top 4px
       = mittig zur ersten Textzeile. Die fallenden Steinchen in
       assets/js/startseite-haken.js nutzen dieselben Maße (GROESSE/OBEN). */
    flex: 0 0 16.5px;
    width: 16.5px;
    height: 16.5px;
    margin-top: 4px;
    /* 28.10.2026 spät (Kundenwunsch): quadratisch wie die Steine des Logo-Würfels und
       Granitgrau statt Grün (Grün gibt es auf der Seite schon reichlich).
       #7C7F83 = Unterseite des Würfels; weißes Häkchen darauf gut lesbar. */
    border-radius: 3px;
    background-color: #7C7F83;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.7 2.7L12 5.5'/%3E%3C/svg%3E");
    background-size: 10.5px 10.5px;
    background-position: center;
    background-repeat: no-repeat;
}

/* „Darum wählen Kunden uns:“ etwas größer als die Punkte (15 px) – vorher 14 px fest
   im HTML (Kundenwunsch 28.10.2026 spät) */
.content-area .startseite-darum {
    display: inline-block;
    font-size: 17px;
    color: #333;
    margin-bottom: 0.15rem;
}

/* Häkchen bauen sich nacheinander an Ort und Stelle auf (assets/js/startseite-haken.js),
   sobald die Überschrift „Bewährte Qualitätsprodukte“ ins Bild kommt (Kundenwunsch 29.10.2026;
   ersetzt den Flug aus dem Logo – der änderte sich beim Scrollen und sah nicht gut aus).
   Ablauf je Punkt: graues Quadrat fällt aus wenigen Pixeln auf seinen Platz und federt
   (::before), danach „zeichnet“ sich das weiße Häkchen von links nach rechts (::after,
   clip-path). Die Klassen setzt NUR das Skript; ohne JS bleibt das normale Kästchen mit
   Häkchen aus der Regel oben stehen. --hmd-nr = Nummer des Punkts (vom Skript gesetzt). */
.content-area .features-list.hmd-haken-warten li {
    position: relative;
}
.content-area .features-list.hmd-haken-warten li::before {
    background-image: none;                    /* Häkchen kommt aus ::after */
    opacity: 0;
}
.content-area .features-list.hmd-haken-warten li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;                                  /* = margin-top des Kästchens */
    width: 16.5px;
    height: 16.5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.7 2.7L12 5.5'/%3E%3C/svg%3E");
    background-size: 10.5px 10.5px;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}
@keyframes hmd-haken-kaestchen {
    0%   { opacity: 0; transform: translateY(-12px) scale(0.6); }
    55%  { opacity: 1; transform: translateY(0) scale(1.08, 0.9); }
    75%  { transform: translateY(-1px) scale(0.97, 1.04); }
    100% { opacity: 1; transform: none; }
}
@keyframes hmd-haken-zeichnen {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}
.content-area .features-list.hmd-haken-los li::before {
    animation: hmd-haken-kaestchen 0.5s ease-out both;
    animation-delay: calc(var(--hmd-nr, 0) * 0.33s);
}
.content-area .features-list.hmd-haken-los li::after {
    animation: hmd-haken-zeichnen 0.4s ease-out both;
    animation-delay: calc(var(--hmd-nr, 0) * 0.33s + 0.45s);
}

.content-area .features-list li > span {
    font-size: 15px !important;
    color: #333;
}

/* Bildunterschriften der 4 Fotos neben der Karte */
.content-area .main-gallery small {
    display: inline-block;
    margin-top: 0.45rem;
    font-size: 0.85rem;
    color: #555;
}

/* ---------- 5. Galerien auf Punkt-Hintergrund ----------
   Feines Punktraster auf Cremegrund, nachempfunden einem Video-Hintergrund,
   den Edward ausgesucht hat (28.10.2026). Reines CSS, keine Bilddatei.
   ::before = stehendes Punktraster, ::after = weicher Schleier mit hellem
   Lichtschein, der langsam auf und ab gleitet – dadurch tauchen die Punkte
   oben/unten weich auf und verschwinden wieder. Bewegt wird nur per
   transform (eigene Ebene, kein Neuzeichnen). */
.content-area .reference-gallery,
.content-area .sandstein-gallery {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #f3f1ec;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    padding: 1.25rem 1.5rem 0.75rem;
    margin-top: 1.5rem;
}

.content-area .reference-gallery::before,
.content-area .sandstein-gallery::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(120, 116, 108, 0.42) 0.9px, transparent 1.3px);
    background-size: 6px 6px;
}

.content-area .reference-gallery::after,
.content-area .sandstein-gallery::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    top: -60%;
    height: 220%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 18% 45% at 50% 62%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
        linear-gradient(to bottom,
            #f3f1ec 0%, #f3f1ec 22%,
            rgba(243, 241, 236, 0.55) 34%, rgba(243, 241, 236, 0) 46%,
            rgba(243, 241, 236, 0) 70%, rgba(243, 241, 236, 0.6) 86%,
            #f3f1ec 100%);
    animation: startseite-punkte-wogen 14s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes startseite-punkte-wogen {
    from { transform: translateY(-8%) rotate(-1.5deg); }
    to   { transform: translateY(8%) rotate(1.5deg); }
}

/* Besucher mit „Bewegung reduzieren“: Muster steht still */
@media (prefers-reduced-motion: reduce) {
    .content-area .reference-gallery::after,
    .content-area .sandstein-gallery::after {
        animation: none;
    }
}

.content-area .reference-gallery h2.card-title,
.content-area .sandstein-gallery h2.card-title {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem;
}

/* Graue Linie unter der Galerie-Überschrift ausblenden: die Fläche grenzt
   den Bereich schon ab, die Linie wirkte auf dem Punktmuster unruhig
   (Kundenwunsch 28.10.2026). Linien bei den Textabschnitten bleiben. */
.content-area .reference-gallery h2.card-title + hr,
.content-area .sandstein-gallery h2.card-title + hr {
    display: none;
}

/* main.css färbt ALLE .card/.card-body per !important beige – hier durchsichtig */
.content-area .reference-gallery .card,
.content-area .sandstein-gallery .card,
.content-area .reference-gallery .card-body,
.content-area .sandstein-gallery .card-body {
    background-color: transparent !important;
}

.content-area .reference-gallery .card-body,
.content-area .sandstein-gallery .card-body {
    padding-left: 0;
    padding-right: 0;
}

/* Einblenden beim Scrollen + Hover-Effekt der Galerien: seit 28.10.2026 in
   assets/css/galerie-effekte.css (gemeinsam mit den Referenzseiten). */

/* ---------- 6. Links im Fließtext in Facebook-Blau ----------
   Gleiches Blau wie der Facebook-Knopf in der Fußzeile (footer.php,
   .is-facebook #1877F2), kräftig unterstrichen, ohne Symbol/Pfeil
   (Kundenwunsch 28.10.2026: Links waren im Text kaum zu sehen).
   Nicht fett (Kundenwunsch). Hinweis: Kontrast auf Beige 3,76:1. */
.content-area p a {
    color: #1877F2;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: #1877F2;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    /* Luft um das Wort für den hellblauen Hover-Kasten, wie beim Menüknopf
       „HOME“ (Kundenwunsch). Dauerhaft gesetzt, damit nichts springt. */
    padding: 2px 6px;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.content-area p a:hover {
    color: #1466D6;
    background-color: rgba(24, 119, 242, 0.10);
    text-decoration-color: #1466D6;
}

/* Fett gedruckte Absatz-Einstiege („Sonderanfertigungen zu fairen Preisen“,
   „Natursteine sind ein Zeichen …“): etwas größer, Text läuft direkt
   dahinter weiter – bewusst KEINE eigene Überschriftenzeile (Kundenwunsch) */
.content-area p strong.startseite-einstieg {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: #2b2b2b;
}

/* Textmarker (29.10.2026, Kundenwunsch): „Sonderanfertigungen nach Maß“ und
   „Angesichts Haltbarkeit …“ mit hellem Marken-Grün (#CBE1A9, aufgehellt aus dem
   Logo-/Knopf-Grün #70A91E) und dunkler Schrift. Zuerst getestet: Gelbgrün #C0E85C
   aus Edwards Vorlage – wirkte neben dem Marken-Grün fremd („Technik-Farbe“).
   box-decoration-break: Marker auch bei Zeilenumbruch sauber. */
.content-area p strong.startseite-marker {
    background: #CBE1A9;
    color: #2b2b2b;
    padding: 0 4px;
    border-radius: 3px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ---------- 7. Tablet- und Handy-Anpassungen ---------- */
/* Lange Hauptüberschrift („Ihr Lieferant für Granit und Sandstein – …“):
   auf Tablet/Handy kleiner, sonst 4–5 Zeilen */
@media (max-width: 1199.98px) {
    .content-area > h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .content-area > h1 {
        font-size: 1.35rem;
    }

    .content-area h4.scroll-hidden.fade-up {
        font-size: 1.15rem;
    }

    .content-area .reference-gallery,
    .content-area .sandstein-gallery {
        padding: 1rem 1rem 0.5rem;
        border-radius: 12px;
    }
}