/*
 * Kontakt-Buttons – Neugestaltung (Entwurf).
 * Gilt nur für <body class="nv-contact">. Markup bleibt appointment-area.php
 * (+ Infoabend-Hinweis aus js/infoabend-popup.js), Verhalten in js/kontakt-neu.js.
 *
 *  - ein goldener Kontakt-Knopf statt drei oranger Kreise; Tippen fächert
 *    "Termin online buchen", "Anrufen", "WhatsApp" auf
 *  - Infoabend-Hinweis als ruhige Glas-Pille: pulsiert nur einmal, mit × zum Ausblenden
 *  - über dem Titelbild, in der Scroll-Animation und über dem Footer ausgeblendet
 */

/* Farben: hell ist Standard, dunkel mit <body class="theme-dark nv-contact"> (wie css/menu-neu.css) */
.nv-contact {
    --ct-gold: var(--c-gold);                       /* Hauptknopf (wie .button.gold) */
    --ct-gold-hover: var(--c-gold-hover);
    --ct-accent: var(--c-gold-text);                     /* Icons/Infoabend-Text, dunkles Gold */
    --ct-icon-bg: rgba(201, 154, 69, 0.16);
    --ct-glass: rgba(255, 255, 255, 0.86);
    --ct-glass-hover: rgba(245, 245, 247, 0.96);
    --ct-line: rgba(0, 0, 0, 0.08);
    --ct-text: var(--c-gray-900);
    --ct-muted: var(--c-gray-600);
    --ct-text-hover: var(--c-gray-700);         /* Infoabend-Hinweis beim Hover, etwas heller als --ct-text */
    --ct-hover: rgba(0, 0, 0, 0.06);
    --ct-shadow: rgba(0, 0, 0, 0.14);
    --ct-scrim: rgba(255, 255, 255, 0.75);    /* Aufhellung hinter den offenen Optionen */
    --ct-ease: var(--ease);
    --ct-gap: max(16px, env(safe-area-inset-bottom));
    /* Abstand zum Rand = Rand des Seiteninhalts, damit Bubble und Infoabend-Hinweis bündig
       mit dem Inhalt abschließen (helle Seiten: .main-content-spacing, bis 1400px) */
    --ct-edge: var(--gallery-side-padding);
}
.theme-dark.nv-contact {
    --ct-edge: calc((100vw - min(var(--main-content-width), 1200px)) / 2);   /* SmartSight: .nv-wrap */
}
.theme-dark.nv-contact {
    --ct-gold: var(--c-gold-light);
    --ct-gold-hover: var(--c-gold-light-hover);
    --ct-accent: var(--c-gold-light);
    --ct-icon-bg: rgba(230, 186, 109, 0.16);
    --ct-glass: rgba(29, 29, 31, 0.82);
    --ct-glass-hover: rgba(44, 44, 46, 0.92);
    --ct-line: rgba(255, 255, 255, 0.14);
    --ct-text: var(--c-gray-50);
    --ct-muted: var(--c-gray-400);
    --ct-text-hover: var(--c-gray-300);
    --ct-hover: rgba(255, 255, 255, 0.1);
    --ct-shadow: rgba(0, 0, 0, 0.4);
    --ct-scrim: rgba(0, 0, 0, 0.7);
}

/* Die alten runden Buttons standen am Seitenende im Textfluss und hielten Abstand zum
   Footer. Die neuen schweben (position: fixed) – diesen Abstand hier wieder herstellen.
   (Dunkle SmartSight-Seite: dort endet die Seite mit einem großen Abschluss-Bereich.) */
.nv-contact:not(.theme-dark) main { padding-bottom: 80px; }

/* ------------------------------------------------------------------ Leiste */
.nv-contact .appointment-area,
.nv-contact .appointment-area.has-infoabend {
    position: fixed;
    left: var(--ct-edge);
    right: var(--ct-edge);
    bottom: var(--ct-gap);
    z-index: 95;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
    width: auto;
    margin: 0;
    padding: 0;
    grid-template-columns: none;
    pointer-events: none;            /* leere Fläche lässt Klicks durch */
    cursor: default;
    transition: opacity .35s var(--ct-ease), transform .35s var(--ct-ease), visibility .35s;
}
@media (min-width: 987px) {
    .nv-contact .appointment-area,
    .nv-contact .appointment-area.has-infoabend {
        left: auto;
        right: var(--ct-edge);
        bottom: 24px;
    }
}
.nv-contact .appointment-area > * { pointer-events: auto; }

/* ausgeblendet (Titelbild, Animation, Footer) */
.nv-contact .appointment-area.ct-away {
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
}
.nv-contact .appointment-area.ct-away > * { pointer-events: none; }

/* leichte Abdunklung der Seite, solange die Optionen offen sind */
.nv-contact .appointment-area::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, var(--ct-scrim) 0%, transparent 75%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ct-ease);
}
.nv-contact .appointment-area.ct-open::before { opacity: 1; }

/* ------------------------------------------------------------------ Optionen (aufgefächert) */
.nv-contact .ct-options {
    position: absolute;
    right: 0;
    bottom: 66px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}
.nv-contact .ct-options > div {
    /* .phone-button / .appointment-button / .whatsapp-button aus main.css zurücksetzen.
       Hier KEINE opacity/transform: ein halbtransparenter Vorfahre schaltet den
       Glas-Effekt (backdrop-filter) der Pille ab -> er springt sonst erst am Ende an. */
    width: auto;
    height: auto;
    border-radius: 0;
    background: none !important;
    font-size: inherit;
}
.nv-contact .appointment-area.ct-open .ct-options { pointer-events: auto; }

.nv-contact .ct-options a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 18px;
    border-radius: var(--radius-pill);
    background: var(--ct-glass);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    box-shadow: inset 0 0 0 1px var(--ct-line), 0 10px 30px var(--ct-shadow);
    color: var(--ct-text);
    font-size: var(--fs-base);
    white-space: nowrap;
    text-decoration: none;
    /* Einblenden direkt an der Pille (siehe Hinweis oben) */
    opacity: 0;
    transform: translateY(14px) scale(.94);
    transform-origin: right center;
    transition:
        opacity .32s var(--ct-ease) var(--ct-delay, 0s),
        transform .38s var(--ct-ease) var(--ct-delay, 0s),
        background-color .2s;
}
.nv-contact .appointment-area.ct-open .ct-options a { opacity: 1; transform: none; }
/* von unten nach oben auffächern, beim Schließen ohne Verzögerung */
.nv-contact .appointment-area.ct-open .ct-options > div:nth-last-child(2) a { --ct-delay: .05s; }
.nv-contact .appointment-area.ct-open .ct-options > div:nth-last-child(3) a { --ct-delay: .1s; }
.nv-contact .appointment-area.ct-open .ct-options > div:nth-last-child(4) a { --ct-delay: .15s; }

/* Infoabend als Eintrag im Menü (nach dem × am Hinweis): gleicher Abstand, goldener Text */
.nv-contact .ct-options .ct-info-option[hidden] { display: none; }
.nv-contact .ct-options .ct-info-option a { cursor: pointer; color: var(--ct-accent); }
.nv-contact .ct-options .ct-info-option a:focus-visible { outline: 2px solid var(--ct-accent); outline-offset: 2px; }
.nv-contact .ct-options a:hover { background: var(--ct-glass-hover); }
.nv-contact .ct-options a > div,
.nv-contact .ct-options .ct-info-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ct-icon-bg);
    color: var(--ct-accent);
    font-size: var(--fs-md);
}
.nv-contact .ct-options .whatsapp-icon::before { font-size: var(--fs-lg); }

/* ------------------------------------------------------------------ Hauptknopf */
.nv-contact .ct-toggle {
    all: unset;
    pointer-events: auto;   /* "all: unset" würde sonst das "none" der Leiste erben -> nicht klickbar */
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ct-gold);
    color: #000;
    box-shadow: 0 10px 30px var(--ct-shadow);
    cursor: pointer;
    transition: transform .3s var(--ct-ease), background-color .2s;
    -webkit-tap-highlight-color: transparent;
}
.nv-contact .ct-toggle:hover { background: var(--ct-gold-hover); }
.nv-contact .ct-toggle:focus-visible { outline: 2px solid var(--ct-text); outline-offset: 3px; }
.nv-contact .ct-toggle i {
    position: absolute;
    font-size: var(--fs-lg);
    transition: opacity .25s, transform .35s var(--ct-ease);
}
.nv-contact .ct-toggle .ct-ico-close { opacity: 0; transform: rotate(-90deg); }
.nv-contact .appointment-area.ct-open .ct-toggle .ct-ico-open { opacity: 0; transform: rotate(90deg); }
.nv-contact .appointment-area.ct-open .ct-toggle .ct-ico-close { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ Infoabend-Hinweis */
.nv-contact .ct-info {
    display: flex;
    align-items: center;
    margin-right: auto;              /* links in der Zeile */
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--ct-glass);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    box-shadow: inset 0 0 0 1px var(--ct-line), 0 10px 30px var(--ct-shadow);
    align-self: center;
}
@media (min-width: 987px) {
    .nv-contact .ct-info { margin-right: 6px; }
}
.nv-contact .ct-info .infoabend-badge {
    height: 44px;
    padding: 0 6px 0 16px;
    background: none;
    box-shadow: none;
    color: var(--ct-text);
    font-size: var(--fs-sm);
    animation: none;
    /* Hover über die Schriftfarbe statt opacity: Safari rendert Text während einer
       opacity-Animation anders und springt am Ende sichtbar um */
    transition: opacity .4s, transform .4s, color .3s var(--ct-ease);
}
.nv-contact .ct-info .infoabend-badge::before { color: var(--ct-accent); transition: color .3s var(--ct-ease); }
.nv-contact .ct-info .infoabend-badge:hover { background: none; color: var(--ct-text-hover); }
/* nur einmal kurz pulsieren, wenn der Hinweis erscheint */
.nv-contact .ct-info.ct-pulse { animation: ct-pulse .9s var(--ct-ease) .4s 1; }
@keyframes ct-pulse {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.07); }
}
.nv-contact .ct-info-close {
    all: unset;
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-right: 6px;
    border-radius: 50%;
    color: var(--ct-muted);
    font-size: var(--fs-xs);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
/* Beim Hover nur ein dezenter Kreis und etwas kräftigeres X (dunkles Theme: --ct-hover/--ct-text hell) */
.nv-contact .ct-info-close:hover { background: var(--ct-hover); color: var(--ct-text); }
.nv-contact .ct-info-close:focus-visible { outline: 2px solid var(--ct-accent); }
.nv-contact .ct-info.ct-gone { display: none; }

@media (prefers-reduced-motion: reduce) {
    .nv-contact .ct-info.ct-pulse { animation: none; }
}