/* ══════════════════════════════════
   Life Design Portfolio - CSS
   Alle Farben über CSS-Variablen steuerbar
   ══════════════════════════════════ */

:root {
    --ld-accent: #2563eb;
    --ld-badge-bg: #1a1a1a;
    --ld-card-bg: #f8f8f8;
    --ld-btn-bg: #ffffff;
    --ld-btn-hover: #1a1a1a;
    --ld-filter-active: #1a1a1a;
}

.ld-portfolio-wrap {
    font-family: var(--ld-font-family);
    color: #1a1a1a;
}

/* ── Filter Toolbar ── */
.ld-filter-toolbar {
    margin-bottom: 44px;
    display: flex;
    justify-content: center;
}
.ld-filter-toolbar-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border-radius: 16px;
    padding: 7px;
}

/* Toolbar Button (shared for Alle + Leistungen + Branche toggle) */
.ld-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 12px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    position: relative;
}
.ld-toolbar-btn:hover {
    color: #555;
    background: rgba(0,0,0,0.04);
}
.ld-toolbar-btn.active {
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ld-toolbar-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Alle Button */
.ld-toolbar-all svg { width: 15px; height: 15px; }

/* Divider */
.ld-toolbar-divider {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Branche Dropdown */
.ld-branche-dropdown {
    position: relative;
}
.ld-branche-toggle.has-selection {
    background: var(--ld-filter-active);
    color: var(--ld-filter-text) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ld-branche-icon { width: 15px; height: 15px; }
.ld-branche-chevron {
    width: 13px;
    height: 13px;
    transition: transform 0.25s ease;
    opacity: 0.5;
}
.ld-branche-toggle.open .ld-branche-chevron { transform: rotate(180deg); }
.ld-branche-toggle.has-selection .ld-branche-icon { display: none; }
.ld-branche-toggle.has-selection .ld-branche-chevron { display: none; }

/* Branche Panel */
.ld-branche-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 10px;
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 200px;
    max-width: 380px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    z-index: 100;
}
.ld-branche-panel.open { display: flex; }

.ld-branche-option {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1.5px solid #eee;
    background: #fafafa;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.ld-branche-option:hover { border-color: var(--ld-accent); color: var(--ld-accent); background: #f0f4ff; }
.ld-branche-option.active { background: var(--ld-filter-active); color: var(--ld-filter-text); border-color: var(--ld-filter-active); }

/* Responsive Toolbar */
@media (max-width: 768px) {
    .ld-filter-toolbar-inner {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 4px;
        padding: 6px;
    }
    .ld-toolbar-btn { padding: 9px 16px; font-size: 13px; }
    .ld-toolbar-divider { display: none; }
    .ld-branche-panel { right: auto; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 420px) {
    .ld-toolbar-btn { padding: 8px 12px; font-size: 12px; gap: 5px; }
    .ld-toolbar-btn svg { width: 14px; height: 14px; }
}

/* ── Load More ── */
.ld-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.ld-load-more-wrap.ld-hidden { display: none; }

.ld-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 14px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    transition: all 0.25s ease;
}
.ld-load-more-btn:hover {
    border-color: var(--ld-accent);
    color: var(--ld-accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.ld-load-more-btn svg { width: 16px; height: 16px; }
/* Der Weiter-Knopf ist nur noch Rückfallebene. Ohne diese Zeile würde das
   display:flex oben das hidden-Attribut schlagen und er wäre immer sichtbar. */
.ld-load-more-wrap[hidden] { display: none; }

/* ── Suche ──
   Eine weiche Pille in derselben Formsprache wie die Filterleiste darunter, damit
   beide als EIN Bedienfeld gelesen werden. Ohne Rahmen im Ruhezustand, die Kante
   kommt erst beim Hineinklicken. */
.ld-search {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.ld-search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    height: 54px;
    padding: 0 8px 0 20px;
    background: #f5f5f5;
    border: 1.5px solid transparent;
    border-radius: 999px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ld-search-field:hover { background: #efefef; }
.ld-search-field:focus-within {
    background: #fff;
    border-color: var(--ld-accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.13);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ld-accent) 16%, transparent);
}
.ld-search-icon {
    width: 19px;
    height: 19px;
    color: #9a9a9a;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.ld-search-field:focus-within .ld-search-icon { color: var(--ld-accent); }

/* Das Eingabefeld muss nackt sein, sonst steht eine Box in der Box.
   Themes greifen hier hart durch: Zephyr/UpSolution setzt jedem
   input[type=search] eine Mindesthöhe (--inputs-height, hier 55px), eigenes
   Padding, einen Rahmen und eine eigene Schriftgröße. Genau das hat das Feld
   am 05.09.2026 zerlegt. Deshalb hohe Spezifität UND !important, sonst gewinnt
   das Theme. Wer das hier aufräumen will: vorher im Browser nachsehen, was das
   aktive Theme auf input[type=search] legt. */
.ld-portfolio-wrap input.ld-search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: inherit !important;
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    color: #1a1a1a !important;
    text-transform: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.ld-portfolio-wrap input.ld-search-input::placeholder { color: #9d9d9d; opacity: 1; }
/* Das eingebaute Kreuz von Chrome und Safari weg: wir haben einen eigenen Knopf,
   sonst stehen zwei nebeneinander. */
.ld-portfolio-wrap input.ld-search-input::-webkit-search-cancel-button,
.ld-portfolio-wrap input.ld-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}
.ld-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #8a8a8a;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}
.ld-search-clear:hover { background: rgba(0,0,0,0.06); color: #1a1a1a; }
.ld-search-clear svg { width: 13px; height: 13px; }
.ld-search-clear[hidden] { display: none; }

/* ── Trefferzahl ──
   min-height hält die Zeile auch dann frei, wenn sie leer ist. Sonst hüpft
   das ganze Raster beim Tippen um ein paar Pixel. */
.ld-result-count {
    min-height: 19px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 13.5px;
    color: #9a9a9a;
}

/* ── Nichts gefunden ── */
.ld-empty {
    padding: 56px 20px 40px;
    text-align: center;
    color: #999;
}
.ld-empty[hidden] { display: none; }
.ld-empty svg { width: 40px; height: 40px; color: #d8d8d8; margin-bottom: 14px; }
.ld-empty-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
}
.ld-empty-text { margin: 0 0 20px; font-size: 14.5px; }
.ld-empty-reset {
    padding: 11px 24px;
    border-radius: 12px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.ld-empty-reset:hover { border-color: var(--ld-accent); color: var(--ld-accent); }

/* ── Endloses Nachladen ──
   Drei Punkte statt Knopf. Sie sind meist nur kurz zu sehen, weil schon
   400 Pixel vorher nachgeladen wird. */
.ld-infinite {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    height: 12px;
    margin-top: 40px;
}
.ld-infinite[hidden] { display: none; }
.ld-infinite-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d0d0d0;
    animation: ld-infinite-pulse 1.1s ease-in-out infinite;
}
.ld-infinite-dot:nth-child(2) { animation-delay: 0.15s; }
.ld-infinite-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes ld-infinite-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50%      { opacity: 1;   transform: scale(1); }
}
/* Wer im System "Bewegung reduzieren" eingestellt hat, bekommt ruhige Punkte. */
@media (prefers-reduced-motion: reduce) {
    .ld-infinite-dot { animation: none; opacity: 0.55; }
}

@media (max-width: 600px) {
    .ld-search-field { height: 50px; padding: 0 6px 0 16px; gap: 10px; }
    /* Unter 16px zoomt iOS beim Hineintippen in das Feld hinein. */
    .ld-portfolio-wrap input.ld-search-input { font-size: 16px !important; }
    .ld-result-count { font-size: 12.5px; margin-bottom: 16px; }
}

/* ── Grid ── */
.ld-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(var(--ld-grid-cols, 2), 1fr);
    gap: 40px;
}
@media (max-width: 991px) {
    .ld-portfolio-grid { grid-template-columns: repeat(min(2, var(--ld-grid-cols, 2)), 1fr); }
}
@media (max-width: 600px) {
    .ld-portfolio-grid { grid-template-columns: 1fr; }
}

/* ── Card ── */
.ld-portfolio-card {
    background: var(--ld-card-bg);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='24' fill='rgba(245,245,245,0.96)' stroke='%23cccccc' stroke-width='1.5'/%3E%3Ccircle cx='24' cy='23' r='8.5' fill='none' stroke='%231a1a1a' stroke-width='2.2'/%3E%3Cline x1='30.5' y1='29.5' x2='36' y2='35' stroke='%231a1a1a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='24' y1='19.5' x2='24' y2='26.5' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='20.5' y1='23' x2='27.5' y2='23' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 26 26, pointer;
}
.ld-portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ld-card-shadow);
}

/* Filter states */
.ld-portfolio-card.ld-filter-gone {
    display: none;
}
.ld-portfolio-card.ld-page-hidden {
    display: none;
}

/* Einblenden (seit 1.8.0): Eine Karte, die neu auf die Fläche kommt, wartet
   unsichtbar, bis sie ins Bild scrollt; dann blendet portfolio.js sie EINMAL
   per Web-Animation ein. Früher stand hier die CSS-Animation .ld-initial-load
   (ldCardIn). Die startete bei jedem Nachladen, Filtern und Umhängen neu, und
   die Karten verschwanden mitten im Bild. Einblenden und Filter-Blenden macht
   jetzt nur noch das Skript, keine Klasse und kein Inline-Stil mehr. */
.ld-portfolio-wrap .ld-portfolio-card.ld-wartet {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce), print {
    .ld-portfolio-wrap .ld-portfolio-card.ld-wartet { opacity: 1; }
}

/* ── Image ── */
.ld-card-image {
    position: relative;
    overflow: hidden;
    height: var(--ld-grid-height, 300px);
}
.ld-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ld-portfolio-card:hover .ld-card-image img { transform: scale(1.03); }

/* ── Label ── */
.ld-card-label {
    position: absolute;
    top: 16px; left: 16px;
    padding: 6px 16px;
    background: var(--ld-accent-gradient);
    color: #fff;
    font-size: var(--ld-label-new-size, 12px);
    font-weight: 600;
    border-radius: 50px;
    letter-spacing: 0.3px;
    z-index: 3;
    text-transform: uppercase;
}

/* ── Overlay ── */
.ld-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 55%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.ld-portfolio-card:hover .ld-card-overlay { opacity: 1; }

.ld-overlay-buttons { display: flex; gap: 10px; align-items: center; }

.ld-btn-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    color: #1a1a1a;
}
.ld-btn-detail:hover { background: var(--ld-btn-hover); color: var(--ld-btn-h-text) !important; }
.ld-btn-detail svg { width: 20px; height: 20px; }

.ld-view-project-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    background: var(--ld-btn-bg);
    color: var(--ld-btn-text);
    border: none;
    border-radius: 50px;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--ld-btn-weight);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.ld-view-project-btn:hover { background: var(--ld-btn-hover); color: var(--ld-btn-h-text) !important; }
.ld-view-project-btn svg { width: 16px; height: 16px; transition: transform 0.25s ease; }
.ld-view-project-btn:hover svg { transform: translate(2px, -2px); }

/* ── Card Content ── */
.ld-card-content {
    padding: 24px 28px 28px;
}
.ld-card-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.ld-card-title {
    font-family: var(--ld-font-family) !important;
    font-size: var(--ld-title-size) !important;
    font-weight: var(--ld-title-weight) !important;
    letter-spacing: -0.3px;
    margin: 0;
    color: var(--ld-title-color);
}
.ld-card-year-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: var(--ld-badge-bg);
    color: var(--ld-badge-text);
    border-radius: 50px;
    font-size: var(--ld-badge-size);
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ld-card-year-badge svg { width: 12px; height: 12px; }

.ld-card-description {
    font-family: var(--ld-font-family);
    font-size: var(--ld-desc-size);
    color: var(--ld-desc-color);
    line-height: 1.5;
    margin-bottom: 12px;
    /* Limit to 1 line with ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ld-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1.2px solid #d4d4d4;
    font-size: var(--ld-tag-size, 11px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.ld-tag svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ══ MODAL ══ */
.ld-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.ld-modal-backdrop.open { opacity: 1; pointer-events: all; }

.ld-modal {
    background: #fff;
    border-radius: 20px;
    width: 90%; max-width: 900px; max-height: 85vh;
    overflow-y: auto;
    transform: translateY(30px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 40px 100px rgba(0,0,0,0.25);
    position: relative;
}
.ld-modal-backdrop.open .ld-modal { transform: translateY(0) scale(1); }

.ld-modal-close {
    position: sticky;
    top: 20px;
    right: 20px;
    float: right;
    width: 48px; height: 48px;
    margin-right: 20px;
    margin-bottom: -60px; /* Overlap image */
    border-radius: 50%; border: none;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    pointer-events: all;
}
.ld-modal-close:hover { background: #1a1a1a; color: #fff; transform: scale(1.1); }

.ld-modal-hero {
    width: 100%; height: var(--ld-modal-height, 400px);
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background: #e2e2e2;
}
.ld-modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.ld-modal-hero[hidden] { display: none; }
/* Titelbild als Geräte-Grafik (Kachelbild 4:3 aus life-design-core, seit 1.8.0):
   16:9 statt des flachen Streifens, damit Gerät und Kopf der Website zu sehen sind.
   Angeschnitten wird vor allem unten; oben bleibt etwas Luft über dem Gerät
   (bei 62 % stieß der Laptop oben an die Kante). */
.ld-modal-hero.ld-hero-kachel { height: auto; background: #eef0f2; }
/* Das Seitenverhältnis sitzt am Bild selbst: height:100% löst sich im Kasten mit
   aspect-ratio nicht zuverlässig auf, dann stand das Bild in voller Höhe und das
   Gerät rutschte nach unten (im Test gesehen). */
.ld-modal-hero.ld-hero-kachel img { display: block; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; }

.ld-modal-body { padding: 36px 40px 40px; }

.ld-modal-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.ld-modal-title-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.ld-modal-title {
    font-family: var(--ld-font-family) !important;
    font-size: var(--ld-modal-title-size) !important;
    font-weight: var(--ld-title-weight) !important;
    letter-spacing: -0.5px;
    margin: 0;
    color: var(--ld-modal-title);
}
.ld-modal-view-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 22px;
    background: var(--ld-btn-hover);
    color: var(--ld-btn-h-text) !important;
    border: none;
    border-radius: 50px;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--ld-btn-weight);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.ld-modal-view-btn:hover { opacity: 0.85; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.ld-modal-view-btn svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.ld-modal-view-btn:hover svg { transform: translate(2px, -2px); }

.ld-modal-description { 
    font-family: var(--ld-font-family);
    font-size: var(--ld-modal-desc-size); 
    color: var(--ld-modal-desc); 
    line-height: 1.7; 
    margin-bottom: 28px; 
}

.ld-modal-gallery-wrapper {
    position: relative;
    width: 100%;
}
.ld-modal-gallery {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    overflow-x: auto;
    padding-bottom: 5px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    cursor: grab;
}
.ld-modal-gallery.grabbing { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.ld-modal-gallery::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */
.ld-modal-gallery:empty { display: none; }

.ld-gallery-item {
    position: relative;
    flex: 0 0 45%; 
    min-width: 200px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: pointer;
}
.ld-gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.ld-gallery-item:hover img { transform: scale(1.05); }

.ld-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateY(-14px); /* Adjust for margin-bottom of gallery */
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 5;
    color: #1a1a1a;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
}
.ld-modal-gallery-wrapper:hover .ld-gallery-nav {
    opacity: 1;
    visibility: visible;
}
.ld-nav-prev { left: -15px; }
.ld-nav-next { right: -15px; }
.ld-gallery-nav:hover { background: #1a1a1a; color: #fff; transform: translateY(-50%) translateY(-14px) scale(1.1); }
.ld-gallery-nav svg { width: 22px; height: 22px; }

.ld-gallery-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.ld-gallery-item:hover .ld-gallery-overlay { opacity: 1; }
.ld-gallery-overlay svg { width: 24px; height: 24px; color: #fff; }

/* Lightbox */
.ld-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(8px);
    z-index: 100000;
    display: none; align-items: center; justify-content: center;
    cursor: default;
    overflow: hidden;
}
.ld-lb-loader {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 48px; height: 48px;
    border: 3px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    border-top-color: #fff;
    animation: ldSpin 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100001;
    pointer-events: none;
}
.ld-lb-loader.visible { opacity: 1; }
@keyframes ldSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
.ld-lightbox.open { display: flex; }
.ld-lightbox img { 
    max-width: 78%; max-height: 78%; 
    border-radius: 4px; 
    box-shadow: 0 0 50px rgba(0,0,0,0.5); 
    transition: opacity 0.3s ease; 
    cursor: grab;
    user-select: none;
}
.ld-lightbox img:active { cursor: grabbing; }
.ld-lightbox img.fade-out { opacity: 0; }

.ld-lightbox-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100002;
}
.ld-lightbox-nav:hover { background: #fff; color: #000; scale: 1.05; }
.ld-lightbox-nav svg { width: 30px; height: 30px; }
.ld-lb-prev { left: 40px; }
.ld-lb-next { right: 40px; }

.ld-lightbox-close {
    position: absolute;
    top: 40px; right: 40px;
    color: #fff;
    font-size: 50px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    z-index: 100003;
}
.ld-lightbox-close:hover { opacity: 1; }

@media (max-width: 768px) {
    .ld-lightbox-nav { width: 44px; height: 44px; }
    .ld-lb-prev { left: 15px; }
    .ld-lb-next { right: 15px; }
}

.ld-modal-details {
    display: flex; gap: 40px;
    padding-top: 24px;
    margin-top: 10px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
}
.ld-modal-detail-item { display: flex; flex-direction: column; gap: 4px; }
.ld-modal-detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: #999; font-weight: 600; }
.ld-modal-detail-value { font-size: 15px; font-weight: 600; color: #1a1a1a; }


.ld-modal::-webkit-scrollbar { width: 6px; }
.ld-modal::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .ld-portfolio-grid { grid-template-columns: 1fr; gap: 28px; }
    .ld-modal { width: 95%; }
    .ld-modal-body { padding: 24px; }
    .ld-modal-gallery { grid-template-columns: 1fr; }
    .ld-modal-details { flex-direction: column; gap: 16px; }
    .ld-modal-title-row { flex-direction: column; align-items: flex-start; }
}

.ld-tag svg { width: 13px; height: 13px; stroke-width: 2.2px; }


/* ═══════════════════════════════════════════════════════════════════════════
   Layout „versetzt" ([portfolio layout="versetzt" limit="6"], seit 1.5.0)
   Die neuesten Projekte als große Kacheln in zwei versetzten Spalten, quer und
   hoch gemischt, Titel unter dem Bild. Die Karte bleibt eine .ld-portfolio-card
   mit allen data-Attributen, deshalb öffnet ein Klick dasselbe Fenster wie in
   der vollen Ansicht.
   ═══════════════════════════════════════════════════════════════════════════ */
.ld-portfolio-wrap.ld-versetzt { font-family: inherit; }
.ld-versetzt .ld-portfolio-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(36px, 7vw, 130px); align-items: start; }
.ld-v-spalte { display: grid; gap: clamp(56px, 7vw, 104px); min-width: 0; }
.ld-v-spalte:nth-child(2) { padding-top: clamp(80px, 11vw, 180px); }
.ld-versetzt .ld-portfolio-card.ld-v-karte { display: block; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; padding: 0; cursor: pointer; opacity: 1; transform: none; animation: none; }
.ld-versetzt .ld-portfolio-card.ld-v-karte:hover { transform: none; box-shadow: none; }
.ld-v-spalte:nth-child(1) .ld-v-karte:nth-child(2) { width: 84%; margin-left: auto; }
.ld-v-spalte:nth-child(2) .ld-v-karte:nth-child(2) { width: 90%; }
.ld-v-spalte:nth-child(2) .ld-v-karte:nth-child(3) { width: 84%; margin-left: auto; }
.ld-v-bild { position: relative; overflow: hidden; border-radius: 22px; background: #f1f1f2; }
.ld-v-quer { aspect-ratio: 4 / 3; }
.ld-v-hoch { aspect-ratio: 3 / 4; }
.ld-versetzt .ld-v-bild img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: 50% 0; transition: transform 1.1s cubic-bezier(.32, .72, 0, 1); }
.ld-v-karte:hover .ld-v-bild img, .ld-v-karte:focus-visible .ld-v-bild img { transform: scale(1.04); }
.ld-v-bild::after { content: ""; position: absolute; inset: 0; background: rgba(1, 25, 38, .28); opacity: 0; transition: opacity .35s ease; }
.ld-v-karte:hover .ld-v-bild::after { opacity: 1; }
/* „Projekt ansehen": steht fest in der Bildmitte und blendet nur ein (kein mitlaufender Kreis) */
.ld-v-ansehen { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; background: #fff; color: #0a1720; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1; white-space: nowrap; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.ld-v-ansehen svg { width: 16px; height: 16px; }
.ld-v-karte:hover .ld-v-ansehen, .ld-v-karte:focus-visible .ld-v-ansehen { opacity: 1; }
.ld-v-neu { position: absolute; z-index: 2; left: 18px; top: 18px; padding: 8px 14px; border-radius: 999px; background: #0a1720; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.ld-v-neu::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #34d399; vertical-align: 1px; }
.ld-versetzt .ld-v-titel { margin: 22px 0 12px; padding: 0; font-family: inherit; font-size: clamp(1.375rem, 2vw, 2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #0a1720; transition: translate .5s cubic-bezier(.32, .72, 0, 1); }
.ld-v-karte:hover .ld-v-titel { translate: 8px 0; }
.ld-versetzt .ld-v-marken { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ld-v-marken span { padding: 7px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(10, 23, 32, .12); font-size: 13px; font-weight: 700; line-height: 1; color: rgba(10, 23, 32, .64); }
@media (max-width: 700px) {
  .ld-versetzt .ld-portfolio-grid { grid-template-columns: 1fr; gap: 40px; }
  .ld-v-spalte { gap: 40px; }
  .ld-v-spalte:nth-child(2) { padding-top: 0; }
  .ld-versetzt .ld-v-karte { width: 100% !important; margin-left: 0 !important; }
  .ld-v-hoch { aspect-ratio: 4 / 5; }
  .ld-v-bild::after, .ld-v-ansehen { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ld-v-bild img, .ld-v-titel { transition: none; } }


/* ═══════════════════════════════════════════════════════════════════════════
   Neuer Look der Karten (1.5.1, 20.09.2026): angepasst an die neue Website.
   Zwei Spalten bleiben; das Titelbild ist höher (4:3 statt flachem Streifen),
   die Karte hat keinen Kasten mehr, Titel und Angaben stehen frei darunter.
   Schrift kommt von der Seite (Manrope), Farben Dunkelblau und ruhiges Grau.
   ═══════════════════════════════════════════════════════════════════════════ */
.ld-portfolio-wrap:not(.ld-versetzt) { font-family: inherit; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 28px; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-card { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; cursor: pointer; font-family: inherit; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-card:hover { transform: none; box-shadow: none; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-image { position: relative; aspect-ratio: 3 / 2; height: auto; border-radius: 24px !important; overflow: hidden; background: #f1f1f2; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-image img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 0; transition: transform 1.1s cubic-bezier(.32, .72, 0, 1); }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-card:hover .ld-card-image img { transform: scale(1.04); }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-overlay { background: rgba(1, 25, 38, .34); transition: opacity .35s ease; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-label { left: 18px; top: 18px; right: auto; padding: 8px 14px; border-radius: 999px; background: #0a1720; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-content { padding: 22px 2px 0; background: none; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-title { margin: 0; font-family: inherit; font-size: clamp(1.375rem, 1.9vw, 1.875rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #0a1720; transition: translate .5s cubic-bezier(.32, .72, 0, 1); }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-card:hover .ld-card-title { translate: 8px 0; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-year-badge { padding: 0; background: none; color: rgba(10, 23, 32, .55); font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: 0; text-transform: none; border: 0; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-year-badge svg { display: none; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-description { margin: 10px 0 14px; font-family: inherit; font-size: 1rem; line-height: 1.6; color: rgba(10, 23, 32, .64); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-overflow: clip; max-width: 60ch; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-tag { padding: 7px 13px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1.5px rgba(10, 23, 32, .12); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1; color: rgba(10, 23, 32, .64); }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-tag svg { display: none; }
.ld-portfolio-wrap .ld-search-input, .ld-portfolio-wrap .ld-toolbar-btn, .ld-portfolio-wrap .ld-result-count, .ld-portfolio-wrap .ld-branche-option { font-family: inherit; }
.ld-portfolio-wrap .ld-toolbar-btn.active { color: #0a1720; }
@media (max-width: 760px) { .ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-grid { grid-template-columns: 1fr; gap: 44px; } }


/* ═══════════════════════════════════════════════════════════════════════════
   Runde 10 (1.5.2, 20.09.2026): Suche und Filter im Look der Website; jede Projektkarte
   ist wieder als eigene Fläche erkennbar (feine Linie, mehr Abstand); Datum im Layout
   „versetzt".
   ═══════════════════════════════════════════════════════════════════════════ */
/* Suche + Filter in EINER Zeile: links die Filter, rechts die Suche */
.ld-portfolio-wrap:not(.ld-kompakt) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 16px 24px; align-items: center; }
.ld-portfolio-wrap:not(.ld-kompakt) > * { grid-column: 1 / -1; }
.ld-portfolio-wrap:not(.ld-kompakt) > .ld-filter-toolbar { grid-column: 1; grid-row: 1; margin: 0; justify-self: start; max-width: 100%; }
.ld-portfolio-wrap:not(.ld-kompakt) > .ld-search { grid-column: 2; grid-row: 1; margin: 0; width: 100%; max-width: none; }
.ld-portfolio-wrap .ld-search-field { position: relative; width: 100%; max-width: none; margin: 0; }
.ld-portfolio-wrap .ld-search-input { width: 100%; height: 56px; padding: 0 48px 0 52px; border: 1.5px solid rgba(10, 23, 32, .12); border-radius: 999px; background: #fff; box-shadow: none; font-size: 16px; font-weight: 600; color: #0a1720; transition: border-color .25s ease, box-shadow .25s ease; }
.ld-portfolio-wrap .ld-search-input:focus { outline: none; border-color: #012f47; box-shadow: 0 0 0 4px rgba(1, 47, 71, .1); }
.ld-portfolio-wrap .ld-search-input::placeholder { color: rgba(10, 23, 32, .45); font-weight: 500; }
.ld-portfolio-wrap .ld-search-icon { left: 20px; color: #0a1720; }
.ld-portfolio-wrap .ld-filter-toolbar { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.ld-portfolio-wrap .ld-filter-toolbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.ld-portfolio-wrap .ld-toolbar-divider { display: none; }
.ld-portfolio-wrap .ld-toolbar-btn { height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: #f1f1f2; box-shadow: none; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #0a1720; transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.32, .72, 0, 1); }
.ld-portfolio-wrap .ld-toolbar-btn:hover { background: #e4e4e7; color: #0a1720; }
.ld-portfolio-wrap .ld-toolbar-btn:active { transform: scale(.96); }
.ld-portfolio-wrap .ld-toolbar-btn.active, .ld-portfolio-wrap .ld-branche-toggle.open, .ld-portfolio-wrap .ld-branche-toggle.has-value { background: #012f47; color: #fff; box-shadow: none; }
.ld-portfolio-wrap .ld-toolbar-btn.active svg { color: #fff; }
.ld-portfolio-wrap .ld-branche-panel { border: 0; border-radius: 20px; padding: 8px; box-shadow: 0 0 0 1px rgba(10, 23, 32, .07), 0 30px 60px -30px rgba(1, 25, 38, .45); }
.ld-portfolio-wrap .ld-branche-option { border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600; color: #0a1720; }
.ld-portfolio-wrap .ld-branche-option:hover, .ld-portfolio-wrap .ld-branche-option.active { background: #f1f1f2; color: #0a1720; }
.ld-portfolio-wrap .ld-result-count { margin: 20px 0 28px; text-align: left; font-size: 14px; font-weight: 600; color: rgba(10, 23, 32, .55); }

/* Karten: eigene Fläche mit feiner Linie, mehr Abstand */
.ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-grid { gap: 40px 36px; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-card { padding: 14px 14px 26px; background: #fff; border: 1.5px solid rgba(10, 23, 32, .1); border-radius: 30px; transition: border-color .35s ease, box-shadow .45s ease, translate .5s cubic-bezier(.32, .72, 0, 1); }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-card:hover { border-color: rgba(10, 23, 32, .22); box-shadow: 0 30px 60px -40px rgba(1, 25, 38, .45); translate: 0 -4px; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-image { border-radius: 18px !important; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-content { padding: 22px 12px 0; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-card:hover .ld-card-title { translate: none; }

/* Layout „versetzt": Datum neben dem Titel */
.ld-v-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 22px 0 12px; }
.ld-versetzt .ld-v-zeile .ld-v-titel { margin: 0; }
.ld-v-datum { font-size: 13.5px; font-weight: 700; color: rgba(10, 23, 32, .55); white-space: nowrap; }
@media (max-width: 900px) {
  .ld-portfolio-wrap:not(.ld-kompakt) { grid-template-columns: 1fr; }
  .ld-portfolio-wrap:not(.ld-kompakt) > .ld-search { grid-column: 1; grid-row: 1; }
  .ld-portfolio-wrap:not(.ld-kompakt) > .ld-filter-toolbar { grid-row: 2; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Runde 13 (1.6.0, 21.09.2026): Umschalter zwei oder drei Spalten.
   Standard sind drei; die Wahl merkt sich der Browser. Unter 900 px zeigt das
   Raster immer eine Spalte, der Umschalter ist dort ausgeblendet.
   ═══════════════════════════════════════════════════════════════════════════ */
.ld-unterzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 20px 0 28px; }
.ld-unterzeile .ld-result-count { margin: 0; }
.ld-spalten-wahl { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #f1f1f2; }
.ld-portfolio-wrap .ld-spalten-wahl button { display: grid; place-items: center; width: 40px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: none; color: rgba(10, 23, 32, .5); cursor: pointer; transition: background .25s ease, color .25s ease; }
.ld-portfolio-wrap .ld-spalten-wahl button:hover { color: #0a1720; }
.ld-portfolio-wrap .ld-spalten-wahl button[aria-pressed="true"] { background: #fff; color: #012f47; box-shadow: 0 2px 6px -2px rgba(10, 23, 32, .25); }
.ld-spalten-wahl svg { width: 17px; height: 17px; }

.ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-grid.ld-spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-spalten-3 .ld-portfolio-card { padding: 12px 12px 22px; border-radius: 26px; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-spalten-3 .ld-card-content { padding: 18px 10px 0; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-spalten-3 .ld-card-title { font-size: clamp(1.125rem, 1.4vw, 1.375rem); }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-spalten-3 .ld-card-description { font-size: .9375rem; margin: 8px 0 12px; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-spalten-3 .ld-tag { padding: 6px 11px; font-size: 12.5px; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-spalten-3 .ld-card-year-badge { font-size: 12.5px; }
@media (max-width: 1100px) { .ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-grid.ld-spalten-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-grid.ld-spalten-2,
  .ld-portfolio-wrap:not(.ld-versetzt) .ld-portfolio-grid.ld-spalten-3 { grid-template-columns: 1fr; gap: 28px; }
  .ld-spalten-wahl { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Runde 18 (1.7.0, 22.09.2026)
   · Galerie-Ansicht der vollen Liste (dritter Knopf): wie auf der Startseite,
     zwei versetzte Spalten, Geräte-Grafiken, jede dritte hoch
   · Erscheinungsdatum als deutliche Plakette auf dem Bild
   · „Neu" kräftig in Blau, mit pulsierendem Punkt
   ═══════════════════════════════════════════════════════════════════════════ */
/* „Neu" und Datum, beide Layouts */
.ld-portfolio-wrap .ld-portfolio-card .ld-card-label, .ld-versetzt .ld-v-neu {
  position: absolute; z-index: 3; left: 16px; top: 16px; right: auto;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 12px; border-radius: 999px;
  background: linear-gradient(100deg, #0a84c9, #1fb1fb); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 12px 26px -10px rgba(10, 132, 201, .85);
}
.ld-portfolio-wrap .ld-portfolio-card .ld-card-label::before, .ld-versetzt .ld-v-neu::before { content: ""; width: 7px; height: 7px; margin: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: ldNeuPuls 1.8s ease-out infinite; }
@keyframes ldNeuPuls { to { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
.ld-card-datum, .ld-v-datum-pille {
  position: absolute; z-index: 3; right: 16px; top: 16px;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .96); color: #0a1720; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: -.005em; line-height: 1;
  box-shadow: 0 10px 24px -12px rgba(1, 25, 38, .55);
}
.ld-card-datum svg, .ld-v-datum-pille svg { width: 14px; height: 14px; color: #0a84c9; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-year-badge, .ld-versetzt .ld-v-datum { display: none; }
@media (prefers-reduced-motion: reduce) { .ld-portfolio-wrap .ld-card-label::before, .ld-versetzt .ld-v-neu::before { animation: none; } }

/* Galerie-Ansicht: zwei echte Spalten, portfolio.js verteilt abwechselnd links und rechts (1.7.2) */
.ld-portfolio-wrap .ld-portfolio-grid.ld-ansicht-galerie { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(36px, 7vw, 130px); align-items: start; }
.ld-g-spalte { display: grid; gap: clamp(56px, 7vw, 104px); align-content: start; min-width: 0; }
.ld-g-spalte + .ld-g-spalte { padding-top: clamp(80px, 11vw, 180px); }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-portfolio-card { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; translate: none; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-g-spalte:first-child .ld-portfolio-card:nth-child(3n+2) { width: 84%; margin-left: auto; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-g-spalte + .ld-g-spalte .ld-portfolio-card:nth-child(3n+2) { width: 90%; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-g-spalte + .ld-g-spalte .ld-portfolio-card:nth-child(3n) { width: 84%; margin-left: auto; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-portfolio-card:hover { box-shadow: none; translate: none; }
.ld-ansicht-galerie .ld-portfolio-card.ld-filter-gone, .ld-ansicht-galerie .ld-portfolio-card.ld-page-hidden { display: none !important; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-card-image { aspect-ratio: 4 / 3; border-radius: 22px !important; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-g-hoch .ld-card-image { aspect-ratio: 3 / 4; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-card-content { padding: 22px 0 0; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-card-title { font-size: clamp(1.5rem, 2vw, 2rem); }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-portfolio-card:hover .ld-card-title { translate: 8px 0; }
.ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-card-description { display: none; }
@media (max-width: 760px) {
  .ld-portfolio-wrap .ld-portfolio-grid.ld-ansicht-galerie { grid-template-columns: minmax(0, 1fr); }
  .ld-g-spalte { gap: 44px; }
  .ld-g-spalte + .ld-g-spalte { padding-top: 0; }
  .ld-portfolio-wrap:not(.ld-versetzt) .ld-ansicht-galerie .ld-g-spalte .ld-portfolio-card { width: 100% !important; margin-left: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOGO-TITELBILD (Runde 35, 27.09.2026)
   Filter „Logo Design" auf /projekte/: Über dem Kartenbild blendet ein Bild ein, in dem das
   Logo im Mittelpunkt steht (portfolio.js, Block LOGO-TITELBILD). Die Ebene liegt direkt
   hinter dem Kartenbild im DOM, ohne z-index: „Neu" und die Knöpfe beim Überfahren bleiben
   darüber. Maße und Hover-Zoom übernimmt sie von der Regel für das Kartenbild.
   ═══════════════════════════════════════════════════════════════════════════ */
.ld-portfolio-wrap .ld-card-image img.ld-logo-cover,
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-image img.ld-logo-cover {
  position: absolute; inset: 0; margin: 0;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; pointer-events: none;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform 1.1s cubic-bezier(.32, .72, 0, 1);
}
.ld-portfolio-wrap .ld-logo-an .ld-card-image img.ld-logo-cover { opacity: 1; }
/* Hohe Karte, aber nur ein queres Bild (eigenes Logo-Titelbild aus der Mediathek): ganz zeigen,
   die freie Fläche bekommt die Randfarbe des Bildes (JS) */
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-image img.ld-logo-cover.ld-logo-ganz { object-fit: contain; }

/* Projektfenster: Logo-Titelbild ganz, nicht beschnitten; die Fläche daneben in der Randfarbe
   des Bildes (JS), damit das Bild nahtlos in der Fläche steht */
.ld-modal-backdrop .ld-modal-hero.ld-hero-logo { height: auto; background: #f1f1f2; transition: background-color .3s ease; }
.ld-modal-backdrop .ld-modal-hero.ld-hero-logo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: 50% 50%; }
.ld-modal-gallery .ld-logo-galerie { cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  .ld-portfolio-wrap .ld-card-image img.ld-logo-cover,
  .ld-portfolio-wrap:not(.ld-versetzt) .ld-card-image img.ld-logo-cover { transition: none; }
}
@media print {
  .ld-portfolio-wrap .ld-card-image img.ld-logo-cover { transition: none; }
}
/* ── Ende LOGO-TITELBILD ── */

/* ═══ Runde 35 (27.09.2026): Handy ═══════════════════════════════════════════
   · Suchfeld: das Eingabefeld war nur 22 px hoch (ältere Regel mit height: auto !important);
     jetzt füllt es die ganze Pille, jeder Tipp darauf setzt den Cursor
   · Filter am Handy linksbündig wie der Rest der Seite (vorher mittig umgebrochen)
   · Schlagwörter unter den Karten 13 px statt 12,5 px
   ═══════════════════════════════════════════════════════════════════════════ */
.ld-portfolio-wrap .ld-search-field input.ld-search-input { height: 100% !important; align-self: stretch; }
@media (max-width: 768px) {
  .ld-portfolio-wrap .ld-filter-toolbar { justify-content: flex-start; }
  .ld-portfolio-wrap .ld-filter-toolbar-inner { justify-content: flex-start; }
}
@media (max-width: 900px) { .ld-portfolio-wrap .ld-portfolio-grid .ld-tag { font-size: 13px; } }

/* ═══ PROJEKTFENSTER-BILDER-GANZ (Runde 35, 27.09.2026) ═══════════════════════════════════════
   Marcel: „Wenn ich eine Projektkarte öffne … da soll dann ein volles Bild angezeigt werden.“
   Die Titelbilder aus life-design-core (kachel-<slug>.webp) sind seit Runde 35 schlichte Screenshots
   im Format 4:3 statt Geräte-Grafiken. Im Fenster steht das Bild deshalb ganz, im eigenen
   Seitenverhältnis, ohne Anschnitt (vorher 16:9 mit object-fit: cover, oben und unten beschnitten).
   Die Galerie-Screenshots sind 16:10 (1920 × 1200): Kacheln im selben Format, Bild ganz (contain),
   eine abweichende Aufnahme steht auf ruhiger Fläche statt beschnitten.
   ═══════════════════════════════════════════════════════════════════════════ */
.ld-modal-backdrop .ld-modal-hero.ld-hero-kachel { height: auto; background: #f1f2f4; }
.ld-modal-backdrop .ld-modal-hero.ld-hero-kachel img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; object-position: 50% 50%; }
.ld-modal-backdrop .ld-gallery-item { aspect-ratio: 16 / 10; background: #f1f2f4; }
.ld-modal-backdrop .ld-gallery-item img { display: block; object-fit: contain; object-position: 50% 50%; }
/* ── Ende PROJEKTFENSTER-BILDER-GANZ ── */

/* ═══ Runde 37 (1.9.6, 28.09.2026) ═══════════════════════════════════════════════════════════
   Marcel: kein dunkler Schleier mehr über dem ganzen Bild, nur unten ein dunkler Verlauf hinter
   den Knöpfen; in der 2er- und 3er-Ansicht das Browserfenster größer, oben weniger Leerraum;
   „Neu" ohne pulsierenden Punkt; im geöffneten Projekt das Bild ganz ausgefüllt, ohne Fenster.
   Die Titelbilder (kachel-*.webp aus life-design-core) sind alle gleich gebaut: 1200 × 900,
   Browserleiste 160 bis 205, Seiteninhalt x 80 bis 1120 und y 206 bis 856 (16:10).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* Schleier: nur unten, damit die Knöpfe Kontrast haben */
.ld-portfolio-wrap:not(.ld-versetzt) .ld-card-overlay { background: linear-gradient(0deg, rgba(1, 25, 38, .62) 0%, rgba(1, 25, 38, .28) 22%, rgba(1, 25, 38, 0) 42%); }
.ld-v-bild::after { background: linear-gradient(0deg, rgba(1, 25, 38, .62) 0%, rgba(1, 25, 38, .28) 22%, rgba(1, 25, 38, 0) 42%); }
.ld-v-ansehen { top: auto; bottom: 20px; translate: -50% 0; }

/* 2er und 3er: Ausschnitt x 40 bis 1160, y 120 bis 867 (3:2), das Fenster füllt die Karte fast ganz */
.ld-portfolio-wrap:not(.ld-versetzt) .ld-spalten-2 .ld-card-image img[src*="/kachel-"]:not(.ld-logo-cover),
.ld-portfolio-wrap:not(.ld-versetzt) .ld-spalten-3 .ld-card-image img[src*="/kachel-"]:not(.ld-logo-cover) {
  position: absolute; left: -3.5714%; top: -16.0714%; width: 107.1429% !important; height: auto !important; max-width: none; object-fit: fill;
}

/* „Neu": Punkt ruhig */
.ld-portfolio-wrap .ld-portfolio-card .ld-card-label::before, .ld-versetzt .ld-v-neu::before { animation: none !important; box-shadow: none; }

/* Geöffnetes Projekt: nur der Seiteninhalt (16:10), ohne Browserleiste und ohne Rand */
.ld-modal-backdrop .ld-modal-hero.ld-hero-kachel { position: relative; aspect-ratio: 16 / 10; height: auto; overflow: hidden; background: #fff; }
.ld-modal-backdrop .ld-modal-hero.ld-hero-kachel img { position: absolute; left: -7.6923%; top: -31.6923%; width: 115.3846% !important; height: auto !important; max-width: none; aspect-ratio: auto; object-fit: fill; }
/* ── Ende Runde 37 ── */