/*
 * Funda Vural (Fusspflege) -- warmes Praxis-Design in Salbeigruen/Creme.
 *
 * Farben, Schriften (serif/humanist) und Feinschliff (runde Ecken, Kapsel-
 * Buttons, luftige Abstaende) kommen bereits ueber Settings/ThemeManager
 * (siehe bin/seed-funda-vural.php) -- hier steht nur, was sich darueber
 * NICHT abbilden laesst: Kapsel-Form fuer Buttons, die dieses Feld nicht
 * an --wl-button-radius anschliessen, ein durchgehender Farbband-Hintergrund
 * fuer den Leistungen-Abschnitt, die handschriftliche Notiz und die
 * Haken-Liste im Hero-Text.
 */

/* ---------- Kopfzeile ---------- */

.site-nav__inner { padding: 1.1rem 1.5rem; }

.site-nav__logo {
    height: 2.9rem;
    max-width: 260px;
}

.site-nav__links { gap: 1.85rem; }

.site-nav__link { font-size: 0.95rem; }

.site-nav__cta {
    padding: 0.7rem 1.5rem;
    font-weight: 600;
}

/* ---------- Buttons in "feature-split" (Hero, Ueber mich, CTA) ----------
   Kapsel-Form statt der vorgegebenen 0.65rem-Ecke, flaechige Hausfarbe
   statt Farbverlauf -- der Verlauf des generischen Moduls ist auf
   kraeftige Marken-Akzente ausgelegt, hier soll es ein ruhiger, flaechiger
   Ton sein. Kalender- und Pfeil-Symbol als reine CSS-Maske (dieselben
   Pfade wie App\Core\Icons::calendar-check/arrow-right), kein zusaetzliches
   Markup noetig. */
.feature-split__button {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--color-primary);
    border-radius: 999px;
    padding: 0.85rem 1.7rem;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.feature-split__button:hover { filter: brightness(1.06); }

.feature-split__button::before,
.feature-split__button::after {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    flex: none;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.feature-split__button::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h1V2a1 1 0 0 1 2 0v1h8V2a1 1 0 0 1 2 0v1h1a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-1 6v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9H4zm4.3 4.3 2.1 2.1 4.3-4.3 1.4 1.4-5.7 5.7-3.5-3.5z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 3h1V2a1 1 0 0 1 2 0v1h8V2a1 1 0 0 1 2 0v1h1a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-1 6v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V9H4zm4.3 4.3 2.1 2.1 4.3-4.3 1.4 1.4-5.7 5.7-3.5-3.5z'/></svg>");
}

.feature-split__button::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4-1.4L18 13H4a1 1 0 0 1 0-2h14l-4.7-4.7a1 1 0 0 1 0-1.4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4-1.4L18 13H4a1 1 0 0 1 0-2h14l-4.7-4.7a1 1 0 0 1 0-1.4z'/></svg>");
}

/* ---------- Bilder in "feature-split" ---------- */

.widget-feature-split { padding: 3rem 1.5rem; }

.feature-split__media {
    border-radius: 1.75rem;
    box-shadow: 0 24px 55px rgba(63, 77, 52, 0.18);
}

/* ---------- Haken-Liste im Hero-Text ("Professionell / Hygienisch / Mit
   Herz") -- eine ganz normale Aufzaehlung im Rich-Text-Feld, hier als
   Reihe kleiner Haken dargestellt statt als Liste mit Punkten. ---------- */

.feature-split__text ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    padding: 0;
    margin: 1.75rem 0 0;
}

.feature-split__text ul li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    opacity: 1;
}

.feature-split__text ul li::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    flex: none;
    background-color: var(--color-primary);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5l5 5L20 6.9l-1.6-1.6L9 14.9l-3.4-3.4z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5l5 5L20 6.9l-1.6-1.6L9 14.9l-3.4-3.4z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ---------- Handschriftliche Notiz (CTA-Abschnitt "Einfach online
   buchen") -- ueber den Zitat-Knopf der Formatierungsleiste als
   <blockquote> eingefuegt, hier als Schreibschrift mit Herz gestaltet.
   Generische Systemschrift statt Webfont (siehe Architektur-Vorgabe). ---------- */

.feature-split__text blockquote {
    margin: 1.5rem 0 0;
    font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
    font-size: 1.4rem;
    line-height: 1.35;
    color: var(--color-primary);
    opacity: 0.9;
}

.feature-split__text blockquote::after {
    content: " \2661";
}

/* ---------- Leistungen: durchgehendes Farbband ohne eigenes Markup
   (box-shadow-Spread + clip-path -- Standardtrick fuer volle Breite ohne
   den umgebenden Container zu sprengen). ---------- */

.widget-service-cards {
    background: #E8E9E0;
    box-shadow: 0 0 0 100vmax #E8E9E0;
    clip-path: inset(0 -100vmax);
    padding-top: var(--wl-section-spacing, 4rem);
    padding-bottom: var(--wl-section-spacing, 4rem);
}

.widget-service-cards__title { color: var(--wl-heading-color, var(--color-text)); }
.service-cards__eyebrow { color: var(--color-text); opacity: 0.55; }

.service-card {
    background: none;
    border: none;
    box-shadow: none;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
    gap: 0.75rem;
}

.service-card:hover { transform: translateY(-3px); box-shadow: none; }

.service-card__icon {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: #D8DDCC;
    color: var(--color-text);
    font-size: 2rem;
    margin-bottom: 0.4rem;
}

.service-card__title { font-size: 1.05rem; }
.service-card__text { text-align: center; opacity: 0.65; }

/* ---------- Symbole als duenne Strichzeichnung statt Vollflaeche --------
   App\Core\Icons liefert alle Symbole standardmaessig flaechig gefuellt
   (fill="currentColor", siehe Klassenkommentar dort) -- fuer JEDEN
   anderen Mandanten richtig so, hier aber nicht: die Vorlage zeichnet
   ausnahmslos duenne Umrisslinien (Navigation, Fusszeile, Symbol-Medaillons).
   Rein optisch per CSS umgeschaltet (nur in diesem Theme wirksam, aendert
   also nichts an anderen Mandanten), da die Pfade selbst identisch bleiben
   koennen. */
/* Icons::svg($key, true) (Farbverlauf-Variante, siehe service-cards) setzt
   "fill" NICHT auf dem <svg>, sondern auf einem inneren <g url(#gradient)> --
   eine Regel nur auf ".wl-icon" erreicht dessen eigenes Attribut nicht
   (eigenes Attribut auf einem Kind schlaegt eine nur vererbte Eigenschaft
   vom Vorfahren). Deshalb hier jedes Element einzeln adressiert. */
.wl-icon,
.wl-icon * {
    fill: none;
    stroke: currentColor;
    stroke-width: 0.9px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.icon-features__icon {
    background: #E7E7D9;
    color: var(--color-text);
}
.service-card__icon { color: var(--color-text); }

/* ---------- "Ueber mich": die 3 Merkmale (icon-features) unter die Foto-
   Spalte biegen -- siehe render.php: das Modul ist ein eigener, voll
   breiter Abschnitt und weiss nichts vom feature-split davor. Der
   Einzug haelt es optisch unter dem Fliesstext statt unter dem Foto. ---------- */

/* Das Foto beginnt dank "align-items:start" (statt der Standard-Mitte) auf
   gleicher Hoehe wie der Text -- die Merkmal-Reihe wird dadurch so weit
   nach oben gezogen, dass sie noch INNERHALB der Fotohoehe landet, statt
   erst darunter (Kundenwunsch: "sollen auf gleicher Hoehe wie das Bild
   sein"). Nur fuer dieses eine Vorkommen (":has()" prueft das FOLGENDE
   Geschwister) -- Hero/CTA nutzen "feature-split" ebenfalls, sollen aber
   weiterhin vertikal zentriert bleiben. */
.widget-feature-split:has(+ .widget-icon-features) .feature-split {
    align-items: start;
}

.widget-feature-split + .widget-icon-features {
    max-width: 1120px;
    margin: -12rem auto 0;
    padding: 0 1.5rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 0 3rem;
}

/* Dieselbe 1fr/1.25fr-Spaltenaufteilung wie ".feature-split" davor --
   beide Kinder in Spalte 2 (der Textspalte), Spalte 1 (das Foto) bleibt
   leer. So sitzt die Reihe bei JEDER Breite exakt unter dem Fliesstext,
   nicht unter dem Foto -- keine geschaetzte feste Randbreite noetig. */
.widget-feature-split + .widget-icon-features .icon-features__head,
.widget-feature-split + .widget-icon-features .icon-features {
    grid-column: 2;
    max-width: none;
}

@media (max-width: 820px) {
    .widget-feature-split:has(+ .widget-icon-features) .feature-split {
        align-items: initial;
    }
    .widget-feature-split + .widget-icon-features {
        display: block;
        margin-top: 0;
        padding-top: 0;
    }
}

/* ---------- Fusszeile: dunkles Salbeigruen, Kontakt links, Social +
   Hinweiszeile rechts in derselben Reihe (statt gestapelter Spalten). ---------- */

.site-footer--style-dark {
    background: #63744f;
    color: #f6f4ea;
}

.site-footer--columns .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2.5rem;
}

.site-footer--columns .site-footer__columns {
    order: 1;
    margin: 0;
    flex: 1 1 auto;
}

.site-footer--columns .site-footer__column ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2.25rem;
}

.site-footer--columns .site-footer__column li { margin: 0; }

.site-footer__social {
    order: 2;
    margin: 0;
    padding-right: 1.25rem;
    border-right: 1px solid rgba(255, 255, 255, 0.28);
}

.site-footer__social-link { background: rgba(255, 255, 255, 0.12); }
.site-footer__social-link:hover { background: rgba(255, 255, 255, 0.24); }

.site-footer--columns .site-footer__text {
    order: 3;
    margin: 0;
    font-style: italic;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.site-footer--columns .site-footer__text::before {
    content: "";
    width: 1.1em;
    height: 1.1em;
    flex: none;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.5 3.5c-9.4 0-16 5.2-16 13.3 0 1.2.2 2.3.5 3.3C6.9 14.8 11.3 11 16.3 8.8c-4.5 2.7-7.9 7-9 12 .9.3 1.9.4 2.9.4 8.2 0 13.3-7.2 13.3-16.7 0-.4 0-.7-.05-1z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.5 3.5c-9.4 0-16 5.2-16 13.3 0 1.2.2 2.3.5 3.3C6.9 14.8 11.3 11 16.3 8.8c-4.5 2.7-7.9 7-9 12 .9.3 1.9.4 2.9.4 8.2 0 13.3-7.2 13.3-16.7 0-.4 0-.7-.05-1z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.site-footer--columns .site-footer__bottom {
    order: 4;
    flex-basis: 100%;
    border-top-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 700px) {
    .site-footer--columns .site-footer__text { white-space: normal; }
}