/* MEISTERHILFE - „Handwerker finden": Zeichen des Betriebs und Karte einer Aktion
   Developed by Toni Sciacca - mail@tonisciacca.com
   Eigene Datei, weil dieselbe Karte an zwei Stellen erscheint: im öffentlichen Verzeichnis (finden.php)
   und als Vorschau in der App (Webseite & Termine › Aktionen). Die Farben kommen aus Variablen:
   im Verzeichnis aus landing.css, in der App aus dem Rahmen .vz-vorschau. */

.fd-zeichen { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 58px; height: 58px; border-radius: 18px; background: var(--f, #f6a200); color: var(--s, #111);
              font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; box-shadow: 0 10px 22px -14px var(--f, #f6a200); }
.fd-zeichen--logo { background: #fff; box-shadow: inset 0 0 0 1px var(--linie); padding: 7px; }
.fd-zeichen--logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fd-zeichen--klein { width: 38px; height: 38px; border-radius: 12px; font-size: .82rem; }
.fd-zeichen--gross { width: 92px; height: 92px; border-radius: 28px; font-size: 1.85rem; }
.fd-beispiel { display: inline-flex; align-items: center; vertical-align: middle; padding: 2px 9px; border-radius: 999px; background: var(--flaeche); color: var(--leise); font-size: .68rem; font-weight: 600;
               letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--linie); }

/* Aktion als Karte */
.fd-aktionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fd-aktionen--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-aktionen-zelle { display: flex; min-width: 0; }
.fd-aktionen-zelle[hidden] { display: none; }
.fd-aktionen-zelle > .fd-aktion { width: 100%; }
.fd-aktion { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 18px; border-radius: 26px; background: linear-gradient(180deg, var(--ton) 0, var(--ton) 122px, #fff 122px); color: var(--text);
             box-shadow: var(--schatten); transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; overflow: hidden; isolation: isolate; }
.fd-aktion::before { content: ""; position: absolute; right: -46px; top: -46px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .55); z-index: -1; }
.fd-aktion:hover { transform: translateY(-5px); box-shadow: var(--schatten-gross); }
.fd-aktion-oben { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.fd-aktion-art { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; background: #fff; color: var(--ton-s); font-size: .78rem; font-weight: 700; white-space: nowrap; }
.fd-aktion-rest { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--ton-s); white-space: nowrap; opacity: .85; }
.fd-aktion-rest.eilig { opacity: 1; }
.fd-aktion-titel { margin-top: 16px; min-height: 2.5em; font-size: 1.22rem; line-height: 1.22; font-weight: 700; letter-spacing: -.02em; color: var(--tinte); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-aktion-kurz { margin-top: 22px; font-size: .92rem; line-height: 1.5; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fd-aktion-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 16px; }
.fd-aktion-preis b { font-size: 2.15rem; line-height: 1; font-weight: 800; letter-spacing: -.035em; color: var(--tinte); font-variant-numeric: tabular-nums; }
.fd-aktion-preis s { font-size: .9rem; color: var(--leise); text-decoration-thickness: 1.5px; }
.fd-aktion-preis em { font-style: normal; padding: 3px 9px; border-radius: 999px; background: var(--ton); color: var(--ton-s); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.fd-aktion-preis small { flex-basis: 100%; font-size: .78rem; color: var(--leise); }
.fd-aktion-frei { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .8rem; font-weight: 600; color: var(--ton-s); }
.fd-aktion-luft { flex: 1; min-height: 20px; }
.fd-aktion-fuss { display: flex; align-items: center; gap: 11px; padding-top: 16px; border-top: 1.5px dashed var(--linie); }
.fd-aktion-wer { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; flex: 1; }
.fd-aktion-wer b { font-size: .9rem; font-weight: 600; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-aktion-wer span { font-size: .8rem; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-aktion-pfeil { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--flaeche); color: var(--tinte); transition: background-color .15s, transform .2s; }
.fd-aktion:hover .fd-aktion-pfeil { background: var(--gelb); transform: translateX(3px); }

/* Aktion mit Bild: das Bild steht oben, die getönte Fläche entfällt */
.fd-aktion--bild { background: #fff; padding-top: 0; }
.fd-aktion--bild::before { display: none; }
.fd-aktion-foto { display: block; margin: 0 -22px 18px; height: 150px; overflow: hidden; background: var(--ton); }
.fd-aktion-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.fd-aktion--bild:hover .fd-aktion-foto img { transform: scale(1.05); }
.fd-aktion--bild .fd-aktion-art { background: var(--ton); }
.fd-aktion--bild .fd-aktion-kurz { margin-top: 10px; }

/* Landkarte aus Punkten */
.fd-karte { display: block; width: 100%; height: auto; overflow: visible; }
.fd-karte-land { fill: none; stroke: #dfe3ea; stroke-width: 5.2; stroke-linecap: round; }
.fd-karte--nah { border-radius: 18px; overflow: hidden; background: #fafbfc; }
.fd-karte-kreis { fill: rgba(246, 162, 0, .16); stroke: var(--gelb); stroke-width: calc(1.8px * var(--k, 1)); stroke-dasharray: calc(5px * var(--k, 1)) calc(5px * var(--k, 1)); }
.fd-karte-mitte { fill: var(--tinte); }
.fd-karte-ort { cursor: pointer; }
.fd-karte-punkt { fill: var(--gelb); stroke: #fff; stroke-width: calc(2.4px * var(--k, 1)); transition: fill .15s; }
.fd-karte-puls { fill: var(--gelb); opacity: .5; transform-box: fill-box; transform-origin: center; animation: fd-puls 3.2s ease-out infinite; animation-delay: calc(var(--v) * .45s); }
.fd-karte-zahl { font-size: calc(10px * var(--k, 1)); font-weight: 700; fill: var(--tinte); text-anchor: middle; pointer-events: none; }
.fd-karte-name { font-size: calc(11.5px * var(--k, 1)); font-weight: 600; fill: var(--tinte); paint-order: stroke; stroke: #fff; stroke-width: calc(4px * var(--k, 1)); stroke-linejoin: round; pointer-events: none; }
.fd-karte-ort:hover .fd-karte-punkt, .fd-karte-ort:focus .fd-karte-punkt { fill: var(--gelb-d); }
@keyframes fd-puls { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.5); opacity: 0; } }