/* ==========================================================================
   Teilen (Gestaltung 21.10.2026) - das Teilen-Fenster (#shareModal.aw-teilen)
   und die Dienste-Komponente (.aw-teilen-dienste), auch im Dank nach dem
   Download (.photo-modal.aw-dank).

   Die Werte folgen der Detailseite (aeonwall-detail.css, .awu-det): dieselbe
   Markenfarbe aus css/color.php (--base-h/s/l), dieselben Tinten, Linien und
   Rundungen. Die Detailseite haelt ihre Werte unter .awu-det - das Fenster
   steht ausserhalb davon und wird auch auf Profil, Suche und Sammlungen
   gebraucht. Deshalb hier ein eigener, benannter Satz (--awt-*), an einer
   Stelle, abgeleitet aus derselben Quelle. Keine Markenfarben der Dienste.
   ========================================================================== */

.aw-teilen,
.aw-teilen-dienste,
.aw-dank {
    --awt-h: var(--base-h, 256);
    --awt-s: var(--base-s, 100%);
    --awt-l: var(--base-l, 65%);

    --awt-v: hsl(var(--awt-h) var(--awt-s) var(--awt-l));
    --awt-v-600: hsl(var(--awt-h) calc(var(--awt-s) - 12%) calc(var(--awt-l) - 16%));
    --awt-v-a06: hsl(var(--awt-h) var(--awt-s) var(--awt-l) / 0.06);
    --awt-v-a12: hsl(var(--awt-h) var(--awt-s) var(--awt-l) / 0.12);
    --awt-v-a24: hsl(var(--awt-h) var(--awt-s) var(--awt-l) / 0.24);

    --awt-ink: #17171f;          /* wie --d-ink */
    --awt-ink-2: #3c3c49;        /* wie --d-ink-2 */
    --awt-muted: #6e6e7e;        /* wie --d-muted */
    --awt-paper: #ffffff;
    --awt-wash: hsl(var(--awt-h) 45% 98%);
    --awt-line: hsl(var(--awt-h) 32% 91.5%);
    --awt-ok: #0e7a55;
    --awt-fehler: #b3261e;
    --awt-fehler-linie: hsl(4 70% 85%);
    --awt-fehler-grund: hsl(4 80% 97%);

    --awt-r: 20px;
    --awt-r-sm: 12px;
    --awt-shadow:
        0 1px 2px hsl(var(--awt-h) 35% 38% / 0.06),
        0 28px 60px -28px hsl(var(--awt-h) 60% 30% / 0.38);
    --awt-fokus: 0 0 0 3px var(--awt-paper), 0 0 0 5px var(--awt-v);
    --awt-e: cubic-bezier(0.22, 0.75, 0.24, 1);
}

/* ----------------------------------------------------------- Fenster */

/* Ueber dem Abdunkler. Die Werkseite hebt .modal-backdrop auf 20000 und ihre
   Fenster (.custom--modal) auf 20010 (image_details); ohne diese Ebene laege
   der Abdunkler ueber dem Fenster. Ueberall sonst liegt es damit ohnehin oben. */
.modal.aw-teilen {
    z-index: 20010;
}

.aw-teilen .aw-teilen__dialog {
    max-width: 480px;
}

.aw-teilen .aw-teilen__inhalt {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    border: 1px solid var(--awt-line);
    border-radius: var(--awt-r);
    background: var(--awt-paper);
    box-shadow: var(--awt-shadow);
    color: var(--awt-ink);
}

.aw-teilen__kopf {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--awt-line);
}

.aw-teilen__kopftext {
    min-width: 0;
}

.aw-teilen .aw-teilen__titel {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--awt-ink);
}

.aw-teilen__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--awt-muted);
}

.aw-teilen__zu {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--awt-ink-2);
    font-size: 1.1rem;
    cursor: pointer;
}

[dir="rtl"] .aw-teilen__zu {
    margin: -8px 0 0 -8px;
}

.aw-teilen__rumpf {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 20px 20px;
}

/* Das Werk */
.aw-teilen__werk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--awt-line);
    border-radius: var(--awt-r-sm);
    background: var(--awt-wash);
}

.aw-teilen__bild {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--awt-paper);
}

.aw-teilen__werkinfo {
    min-width: 0;
}

.aw-teilen__werktitel {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.35;
    color: var(--awt-ink);
    overflow-wrap: anywhere;
}

.aw-teilen__urheber {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: 0.85rem;
    color: var(--awt-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.aw-teilen__urheber:empty {
    display: none;
}

/* Hinweis bei einem Fehler - Text und Symbol, nicht nur Farbe */
.aw-teilen__hinweis {
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--awt-fehler-linie);
    border-radius: var(--awt-r-sm);
    background: var(--awt-fehler-grund);
    color: var(--awt-fehler);
    font-size: 0.875rem;
    line-height: 1.45;
}

.aw-teilen__hinweis::before {
    content: "!";
    display: inline-flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--awt-fehler);
    color: var(--awt-paper);
    font-weight: 700;
    font-size: 0.75rem;
}

.aw-teilen__hinweis[hidden] {
    display: none;
}

/* Hauptaktion: das Teilen des Geraets */
.aw-teilen__geraet {
    margin-top: 16px;
}

.aw-teilen__primaer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--awt-r-sm);
    background: var(--awt-v);
    color: var(--awt-paper);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s var(--awt-e), transform 0.15s var(--awt-e);
}

.aw-teilen__primaer:hover {
    background: var(--awt-v-600);
}

.aw-teilen__primaer:active {
    transform: scale(0.99);
}

.aw-teilen__primaer:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Abschnittsnamen */
.aw-teilen .aw-teilen__gruppe {
    display: block;
    margin: 18px 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--awt-muted);
}

/* -------------------------------------------------- Dienste-Komponente */

/* Fuenf gleiche Spalten - alle Dienste in einer Reihe; unter 360 px drei je
   Reihe, die letzte mittig (siehe unten). */
.aw-teilen-dienste {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aw-teilen-dienste__eintrag {
    margin: 0;
    padding: 0;
}

.aw-teilen-dienst {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 76px;
    padding: 10px 2px;
    border: 1px solid var(--awt-line);
    border-radius: var(--awt-r-sm);
    background: var(--awt-paper);
    color: var(--awt-ink);
    text-decoration: none;
    transition: border-color 0.15s var(--awt-e), background-color 0.15s var(--awt-e), transform 0.15s var(--awt-e);
}

.aw-teilen-dienst:hover {
    border-color: var(--awt-v-a24);
    background: var(--awt-v-a06);
    color: var(--awt-ink);
}

.aw-teilen-dienst:active {
    transform: scale(0.98);
}

.aw-teilen-dienst__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--awt-v-a12);
    color: var(--awt-v-600);
    font-size: 1rem;
    line-height: 1;
}

.aw-teilen-dienst__name {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Kompakt (Dank nach dem Download): nur Symbole, 44 px */
.aw-teilen-dienste--kompakt {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 359.98px) {
    .aw-teilen-dienste:not(.aw-teilen-dienste--kompakt) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .aw-teilen-dienste:not(.aw-teilen-dienste--kompakt) .aw-teilen-dienste__eintrag {
        flex: 0 0 calc((100% - 16px) / 3);
    }
}

.aw-teilen-dienste--kompakt .aw-teilen-dienst {
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
}

.aw-teilen-dienste--kompakt .aw-teilen-dienst__symbol {
    width: 100%;
    height: 100%;
    background: transparent;
}

/* --------------------------------------------------- Link kopieren */

.aw-teilen__link {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.aw-teilen__adresse {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--awt-line);
    border-radius: var(--awt-r-sm);
    background: var(--awt-wash);
    color: var(--awt-ink-2);
    font: inherit;
    font-size: 0.875rem;
    text-overflow: ellipsis;
}

/* Beide Zustaende liegen in derselben Zelle: die Breite ist die des
   laengeren Textes und aendert sich beim Wechsel nicht. Ausgeblendet wird
   ueber die Deckkraft - der Name des Knopfs bleibt "Copy link". */
.aw-teilen__kopieren {
    display: inline-grid;
    flex: 0 0 auto;
    align-items: center;
    justify-items: center;
    min-width: 44px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--awt-v-a24);
    border-radius: var(--awt-r-sm);
    background: var(--awt-paper);
    color: var(--awt-v-600);
    font: inherit;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s var(--awt-e), border-color 0.15s var(--awt-e);
}

.aw-teilen__kopieren:hover {
    background: var(--awt-v-a06);
    border-color: var(--awt-v);
}

.aw-teilen__zustand {
    display: inline-flex;
    grid-area: 1 / 1;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.aw-teilen__zustand--kopiert {
    opacity: 0;
    color: var(--awt-ok);
}

.aw-teilen__kopieren.is-kopiert {
    border-color: var(--awt-ok);
}

.aw-teilen__kopieren.is-kopiert .aw-teilen__zustand--bereit {
    opacity: 0;
}

.aw-teilen__kopieren.is-kopiert .aw-teilen__zustand--kopiert {
    opacity: 1;
}

/* ------------------------------------------------- Fokus (Tastatur) */

.aw-teilen__zu:focus-visible,
.aw-teilen__primaer:focus-visible,
.aw-teilen-dienst:focus-visible,
.aw-teilen__kopieren:focus-visible,
.aw-teilen__adresse:focus-visible,
.aw-dank__zu:focus-visible {
    outline: none;
    box-shadow: var(--awt-fokus);
}

.aw-teilen__zu:hover {
    background: var(--awt-v-a06);
}

/* --------------------------------------- Handy: Blatt vom unteren Rand */

@media (max-width: 575.98px) {
    .aw-teilen .aw-teilen__dialog {
        align-items: flex-end;
        width: 100%;
        max-width: none;
        min-height: 100%;
        margin: 0;
    }

    .aw-teilen .aw-teilen__inhalt {
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
        border-bottom: 0;
        border-radius: var(--awt-r) var(--awt-r) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .aw-teilen.fade .aw-teilen__dialog {
        transform: translateY(24px);
    }

    .aw-teilen.show .aw-teilen__dialog {
        transform: none;
    }

    .aw-teilen__kopf {
        padding: 16px 16px 12px;
    }

    .aw-teilen__rumpf {
        padding: 14px 16px 18px;
    }
}

/* ------------------------------------- Dank nach dem Download (kompakt) */

.photo-modal.aw-dank {
    align-items: flex-start;
    border: 1px solid var(--awt-line);
    border-radius: var(--awt-r);
    background: var(--awt-paper);
    box-shadow: var(--awt-shadow);
    color: var(--awt-ink);
}

/* Ueber der unteren Navigation, nicht dahinter. */
body.has-awnav .photo-modal.aw-dank.active {
    bottom: calc(var(--awnav-h, 0px) + var(--awnav-safe, 0px) + 12px);
}

.aw-dank .photo-modal__img {
    width: 88px;
    max-height: 120px;
}

/* Am Handy ein kleineres Bild - die fuenf Dienste passen in eine Reihe. */
@media (max-width: 575.98px) {
    .aw-dank .photo-modal__img {
        width: 64px;
    }
}

.aw-dank .photo-modal__image {
    border-radius: var(--awt-r-sm);
}

.aw-dank .photo-modal__title {
    padding-inline-end: 40px;
    font-weight: 600;
    color: var(--awt-ink);
}

.aw-dank .photo-modal__description {
    color: var(--awt-muted);
}

.aw-dank .aw-dank__zu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: -8px;
    right: -8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--awt-ink-2);
    font-size: 1.1rem;
}

[dir="rtl"] .aw-dank .aw-dank__zu {
    right: auto;
    left: -8px;
}

/* ------------------------------------------------ Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
    .aw-teilen.fade .aw-teilen__dialog,
    .aw-teilen .aw-teilen__dialog {
        transition: none;
        transform: none;
    }

    .aw-teilen__primaer,
    .aw-teilen-dienst,
    .aw-teilen__kopieren,
    .photo-modal.aw-dank {
        transition: none;
    }

    .aw-teilen__primaer:active,
    .aw-teilen-dienst:active {
        transform: none;
    }
}