/* =========================================================================== dg26-oras.css — paginile de oras (page-city-2026v3.php) --------------------------------------------------------------------------- Scos din sablon pe 6 octombrie 2026. Identic, litera cu litera. 124 de pagini il folosesc, deci se descarca o data si se tine in cache pentru toate. Se incarca prin campul `extra` din tabelul conductei. =========================================================================== */ /* ===== City Page 2026 (dg26) — v4.0 ===== */ .dg26-wrap{max-width:1240px;margin:0 auto;padding:0 16px} .dg26-wrap-wide{max-width:1640px} @media(min-width:1024px){.dg26-wrap{padding:0 32px}} .dg26-section{padding:24px 0 6px;scroll-margin-top:80px} /* blindaj anti-temă — fără glow, fonturi controlate */ h1.dg26-t,h2.dg26-h,.dg26-step h3,.dg26-acc-q,.dg26-card-name-overlay .name,.dg26-city-card .cname,.dg26-erl-title{text-shadow:none!important} h2.dg26-h{font-family:"Playfair Display",serif!important;font-style:italic;font-weight:600;font-size:21px;color:#d4af37;margin:0 0 14px;line-height:1.25} @media(min-width:768px){h2.dg26-h{font-size:29px;color:#e8d5a8}} /* Numărul de modele din titlu — informaţie, nu decor. Mai mic şi mai stins decât numele oraşului, ca să nu concureze cu el. */ .dg26-h-count{font-family:"Open Sans",Arial,sans-serif;font-style:normal;font-weight:600;font-size:13px;color:#8a8168;letter-spacing:.01em;white-space:nowrap;font-variant-numeric:tabular-nums} @media(min-width:768px){.dg26-h-count{font-size:15px}} /* ── FOCUS VIZIBIL ────────────────────────────────────────────────── `:focus-visible` se aplică doar când utilizatorul navighează cu tastatura. La click cu mouse-ul nu apare nimic, deci designul rămâne curat. */ .dg26-acc-q:focus-visible, .dg26-erl-q:focus-visible, .dg26-more:focus-visible, .dg26-btn-outline:focus-visible, .dg26-card:focus-visible, .dg26-city-card:focus-visible{outline:2px solid #c9a45c;outline-offset:3px;border-radius:6px} /* 1. Hero — comprimat pe mobil */ .dg26-city-hero{background:linear-gradient(165deg,#171410 0%,#0c0c0c 65%);border-bottom:1px solid rgba(212,175,55,.16);padding:14px 0 14px} h1.dg26-t{font-family:"Playfair Display",serif!important;font-size:27px;font-weight:700;color:#f3ecd9;margin:0 0 5px;line-height:1.15;letter-spacing:-.2px} .dg26-city-hero p.dg26-sub{font-size:14.5px;color:#b5ab90;margin:0 0 8px;max-width:65ch;line-height:1.5;font-family:"Open Sans",Arial,sans-serif} /* ── RÂNDUL DE SEMNE DIN HERO ─────────────────────────────────── Era o grilă de trei coloane cu `white-space:nowrap`: potrivită pentru trei texte scurte („Verifiziert", „Antwort in Minuten", „100% diskret"), dar nu şi de când primul element a devenit „225 Escort-Damen für Köln". Pe telefon cele trei nu mai încăpeau pe un rând şi se suprapuneau. Acum e o linie care se rupe singură: pe telefon iese pe două rânduri, pe desktop rămâne pe unul. Fiecare element rămâne nerupt în interior — „225 Escort-Damen für Köln" nu se taie niciodată la mijloc. */ .dg26-trust{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 14px;margin:0;padding:0;list-style:none} .dg26-trust li{display:flex;align-items:center;gap:5px;font-size:12px;color:#a89f86;font-family:"Open Sans",Arial,sans-serif;white-space:nowrap} .dg26-trust svg{width:14px;height:14px;stroke:#d4af37;flex-shrink:0} @media(min-width:768px){ .dg26-city-hero{padding:38px 0 32px} h1.dg26-t{font-size:46px;margin-bottom:8px} .dg26-city-hero p.dg26-sub{font-size:17.5px;margin-bottom:12px} .dg26-trust{display:flex;flex-wrap:wrap;gap:8px 18px} .dg26-trust li{font-size:14px;gap:6px} .dg26-trust svg{width:15px;height:15px} } /* ── Zona cu titlu de deasupra pozelor ───────────────────────── Titlul ei e H2-ul care acopera si textul, si grila de dedesubt. De-aceea ii scoatem linia de jos: o linie acolo ar taia titlul de fotografiile pe care tot el le eticheteaza, iar sageata ar parea ca pliaza pozele. */ .c26-sus .dg26-zone-acc{border-bottom:0;border-top:0} .c26-sus .dg26-section{padding:12px 0 0} /* Titlul si semnul „+" calatoresc impreuna. Butonul de accordion e latime plina peste tot, ceea ce e corect cand titlul e singur pe rand. Aici insa, pe desktop, titlul se termina pe la 700px iar semnul ramanea lipit de marginea dreapta, la un metru de el: parea al altcuiva. Acum butonul e cat titlul, iar plusul il urmeaza. */ .c26-sus .dg26-zone-acc .dg26-acc-q{padding:4px 0 6px;width:auto;max-width:100%; justify-content:flex-start;gap:18px} /* Plusul: putin mai mare decat sageata, pentru ca doua linii subtiri se vad mai slab decat un unghi. La deschidere se roteste in X. */ .c26-sus .dg26-acc-q .chev{width:20px;height:20px;color:#c9a45c} .c26-sus .dg26-acc-item.dg26-open .dg26-acc-q .chev{transform:rotate(45deg)} /* Grila urca direct sub titlu: titlul o eticheteaza, deci un spatiu mare intre ele ar sugera ca sunt doua lucruri diferite. */ .dg26-section.dg26-lipit{padding-top:8px} /* 2. Grid modele */ .dg26-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} @media(min-width:768px){.dg26-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}} @media(min-width:1280px){.dg26-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}} .dg26-card{background:rgba(212,175,55,.12);border:1px solid #2a2a2a;border-radius:18px;overflow:hidden;text-decoration:none;display:block;transition:border-color .2s cubic-bezier(.4,0,.2,1)} .dg26-card:hover{border-color:#4a4436} .dg26-card.dg26-hide{display:none!important} .dg26-card-img{position:relative;aspect-ratio:57/100;background:#222;overflow:hidden} @media(min-width:768px){.dg26-card-img{aspect-ratio:3/4}} .dg26-card-img img{width:100%;height:100%;object-fit:cover;display:block} .dg26-badge{position:absolute;top:12px;left:12px;z-index:2;background:#c9a45c;color:#1a1408;font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px;font-family:"Open Sans",Arial,sans-serif} .dg26-card-name-overlay{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));pointer-events:none} .dg26-card-name-overlay .name{font-size:19px;font-weight:700;color:#f3ecd9;margin:0;line-height:1.2;font-family:"Open Sans",Arial,sans-serif} @media(min-width:1280px){.dg26-card-name-overlay .name{font-size:21px}} .dg26-stats{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;row-gap:2px;padding:8px 8px 7px;background:linear-gradient(to bottom,rgba(212,175,55,.85),rgba(212,175,55,.5) 35%,rgba(212,175,55,.18) 75%,rgba(212,175,55,0));border-top:1px solid rgba(212,175,55,.85);font-variant-numeric:tabular-nums} .dg26-stat{display:flex;align-items:baseline;gap:2px;white-space:nowrap} .dg26-stat .v{font-size:12.5px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);font-family:"Open Sans",Arial,sans-serif} @media(min-width:768px){.dg26-stat .v{font-size:13.5px}} .dg26-stat .u{font-size:9.5px;font-weight:600;color:#f0dca0;text-transform:uppercase;letter-spacing:.3px;text-shadow:0 1px 3px rgba(0,0,0,.5);font-family:"Open Sans",Arial,sans-serif} @media(min-width:768px){.dg26-stat .u{font-size:10.5px}} .dg26-stat-sep{width:3px;height:3px;border-radius:50%;background:#d4af37;margin:0 8px;flex-shrink:0;opacity:.8} .dg26-btn-outline{display:block;width:100%;text-align:center;border:1.5px solid #555;color:#f3ecd9;background:transparent;padding:15px;border-radius:11px;font-size:16px;font-weight:700;margin-top:26px;cursor:pointer;font-family:"Open Sans",Arial,sans-serif;transition:border-color .2s cubic-bezier(.4,0,.2,1);text-shadow:none} .dg26-btn-outline:hover{border-color:#c9a45c} .dg26-btn-outline:active{border-color:#c9a45c;background:rgba(212,175,55,.08)} /* ---- Toggle discret (zonele pliate): text mic + săgeată, fără pastilă ---- */ .dg26-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:none;border:none;padding:0;color:#c9a45c;font-size:14px;font-weight:600;cursor:pointer;font-family:"Open Sans",Arial,sans-serif;text-shadow:none} .dg26-more:hover{color:#e8d5a8} .dg26-more .chev{width:14px;height:14px;color:currentColor;transition:transform .2s cubic-bezier(.4,0,.2,1)} .dg26-more.dg26-open .chev{transform:rotate(180deg)} /* Bloc de text — folosit de toate zonele libere. Înălțimea pliată a crescut de la 96px la 150px (190px pe mobil): 96px însemna trei rânduri din 200 de cuvinte, adică pagina arăta ca un dulap cu sertare închise. */ .dg26-textblock{position:relative;max-height:150px;overflow:hidden;font-size:15.5px;color:#ccc;line-height:1.7;font-family:"Open Sans",Arial,sans-serif} .dg26-textblock.dg26-open{max-height:none} .dg26-textblock:not(.dg26-open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(to bottom,rgba(12,12,12,0),#0c0c0c)} @media(max-width:767px){.dg26-textblock{max-height:190px;font-size:16px;line-height:1.75}} /* Zona „text complet": fără plierea și fără degradeul de jos. */ .dg26-textblock.dg26-nofold{max-height:none} .dg26-textblock.dg26-nofold::after{display:none} /* ── Zona „text complet pe desktop, pliat pe telefon" ────────────── Pe desktop desfacem textul și ascundem butonul. Pe telefon îl strângem la trei rânduri. `:not(.dg26-open)` e obligatoriu: fără el, regula de aici ar bate `.dg26-open` și textul nu s-ar mai deschide deloc la apăsare, pentru că amândouă au aceeași specificitate, iar a noastră vine mai jos în fișier. */ @media(min-width:768px){ .dg26-foldm .dg26-textblock{max-height:none} .dg26-foldm .dg26-textblock::after{display:none} .dg26-foldm .dg26-more{display:none} } @media(max-width:767px){ .dg26-foldm .dg26-textblock:not(.dg26-open){max-height:78px} .dg26-foldm .dg26-textblock:not(.dg26-open)::after{height:44px} } .dg26-textblock p{margin:0 0 12px} .dg26-textblock p:last-child{margin-bottom:0} .dg26-textblock a{color:#d4af37;text-decoration:underline;text-underline-offset:2px} .dg26-textblock h2,.dg26-textblock h3{font-family:"Playfair Display",serif;font-style:normal;font-weight:700;color:#c9a45c;margin:1.8em 0 .6em;line-height:1.3;text-shadow:none!important} .dg26-textblock h2{font-size:18px} .dg26-textblock h3{font-size:16.5px} @media(min-width:768px){ .dg26-textblock h2{font-size:20px} .dg26-textblock h3{font-size:18px} } .dg26-textblock ul,.dg26-textblock ol{margin:0 0 12px;padding-left:22px} .dg26-textblock li{margin:0 0 6px} .dg26-textblock img{max-width:100%;height:auto;border-radius:12px} .dg26-textblock iframe{max-width:100%} /* Zona în stil accordion: titlul H2 devine buton */ .dg26-zone-acc{border-top:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a} .dg26-zone-acc h2.dg26-h{margin:0} .dg26-zone-acc .dg26-acc-q{padding:18px 0} .dg26-zone-acc .dg26-acc-q span{font-family:"Playfair Display",serif;font-style:italic;font-weight:600;font-size:21px;color:#d4af37;line-height:1.25} @media(min-width:768px){.dg26-zone-acc .dg26-acc-q span{font-size:29px;color:#e8d5a8}} /* Chips (Stadtteile) + fact — disponibile în orice zonă */ .dg26-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none} .dg26-chips li{font-size:13px;color:#e8d5a8;border:1px solid rgba(212,175,55,.35);border-radius:999px;padding:6px 13px;white-space:nowrap;font-family:"Open Sans",Arial,sans-serif} .dg26-fact{display:block;margin-top:14px;font-size:14px;color:#a89f86;font-family:"Open Sans",Arial,sans-serif} .dg26-fact b{color:#f3ecd9;font-variant-numeric:tabular-nums;font-weight:700} /* 4. So funktioniert's */ .dg26-steps{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:768px){.dg26-steps{grid-template-columns:repeat(3,1fr);gap:22px}} .dg26-step{background:#161616;border:1px solid #2a2a2a;border-radius:14px;padding:20px 18px 18px} .dg26-step .k{font-family:"Playfair Display",serif;font-style:italic;font-size:15px;color:#d4af37;margin:0 0 6px} .dg26-step h3{font-family:"Open Sans",Arial,sans-serif!important;font-size:16px;color:#f3ecd9;margin:0 0 6px;font-weight:700;font-style:normal} .dg26-step p{font-size:14px;color:#999;margin:0;line-height:1.55;font-family:"Open Sans",Arial,sans-serif} /* 6. Erlebnisse — REGULILE VECHI, PĂSTRATE INTENȚIONAT. Din v6 secțiunea folosește carduri (`.c26-card`), nu accordion, deci nimic din blocul următor nu se mai aplică vreunui element de pe pagină. Îl las pentru că e ~1 KB comprimat, nu costă nicio cerere în plus, și pentru că e singura cale de întoarcere dacă vreodată vrei accordionul înapoi: schimbi markupul, stilul e deja aici. */ .dg26-erl-item{border-bottom:1px solid #2a2a2a} .dg26-erl-q{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:15px 0;cursor:pointer;background:transparent;border:none;width:100%;text-align:left;font-family:"Open Sans",Arial,sans-serif;-webkit-tap-highlight-color:transparent} .dg26-erl-q:hover,.dg26-erl-q:active{background:transparent!important;box-shadow:none!important} .dg26-erl-htext{display:block;flex:1;min-width:0} .dg26-erl-title{display:block;font-size:16.5px;font-weight:700;color:#f3ecd9;line-height:1.3} @media(min-width:768px){.dg26-erl-title{font-size:18px}} .dg26-erl-intro{position:relative;display:block;margin-top:5px;font-size:14.5px;font-weight:400;color:#b0aa99;line-height:1.55;font-family:"Open Sans",Arial,sans-serif} .dg26-erl-item .dg26-erl-intro{max-height:45px;overflow:hidden} .dg26-erl-item:not(.dg26-open) .dg26-erl-intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;background:linear-gradient(to bottom,rgba(12,12,12,0),#0c0c0c)} .dg26-erl-item.dg26-open .dg26-erl-intro{max-height:none} .dg26-erl-q .chev{width:16px;height:16px;color:#8a8168;transition:transform .2s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-top:4px} .dg26-erl-item.dg26-open .dg26-erl-q .chev{transform:rotate(180deg)} .dg26-erl-a{max-height:0;overflow:hidden;transition:max-height .25s cubic-bezier(.4,0,.2,1)} .dg26-erl-a > div{padding:0 0 16px;font-size:15px;color:#aaa;line-height:1.65;font-family:"Open Sans",Arial,sans-serif;opacity:0;transition:opacity .15s ease} .dg26-erl-item.dg26-open .dg26-erl-a > div{opacity:1;transition-delay:.1s} .dg26-erl-a a{color:#d4af37;text-decoration:underline;text-underline-offset:2px} .dg26-erl-a h3{font-family:"Playfair Display",serif;font-style:normal;font-weight:700;color:#c9a45c;font-size:15.5px;margin:14px 0 6px;line-height:1.3;text-shadow:none!important} .dg26-erl-static{border-bottom:1px solid #2a2a2a;padding:15px 0} /* Accordion (FAQ + zone) — chevron SVG */ .dg26-acc-item{border-bottom:1px solid #2a2a2a} .dg26-acc-q{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 0;cursor:pointer;font-size:16px;font-weight:600;color:#f3ecd9;background:transparent;border:none;width:100%;text-align:left;font-family:"Open Sans",Arial,sans-serif;-webkit-tap-highlight-color:transparent} .dg26-acc-q:hover,.dg26-acc-q:active{background:transparent!important;box-shadow:none!important} .dg26-acc-q .chev{width:16px;height:16px;color:#8a8168;transition:transform .2s cubic-bezier(.4,0,.2,1);flex-shrink:0} .dg26-acc-item.dg26-open .dg26-acc-q .chev{transform:rotate(180deg)} .dg26-acc-a{max-height:0;overflow:hidden;transition:max-height .25s cubic-bezier(.4,0,.2,1)} .dg26-acc-a > div{padding:0 0 16px;font-size:15px;color:#aaa;line-height:1.65;font-family:"Open Sans",Arial,sans-serif;opacity:0;transition:opacity .15s ease} .dg26-acc-item.dg26-open .dg26-acc-a > div{opacity:1;transition-delay:.1s} .dg26-acc-a a{color:#d4af37;text-decoration:underline;text-underline-offset:2px} .dg26-acc-a h3{font-family:"Playfair Display",serif;font-style:normal;font-weight:700;color:#c9a45c;font-size:15.5px;margin:14px 0 6px;line-height:1.3;text-shadow:none!important} /* 7. Orașe apropiate */ .dg26-cities-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(min-width:768px){.dg26-cities-grid{grid-template-columns:repeat(3,1fr);gap:16px}} .dg26-city-card{background:#161616;border:1px solid #2a2a2a;border-radius:14px;padding:18px 18px 16px;text-decoration:none;display:flex;flex-direction:column;gap:5px;transition:border-color .2s cubic-bezier(.4,0,.2,1)} @media(hover:hover){.dg26-city-card:hover{border-color:#c9a45c}} .dg26-city-card .cname{font-size:16px;font-weight:700;color:#f3ecd9;line-height:1.25;overflow-wrap:break-word;font-family:"Open Sans",Arial,sans-serif} .dg26-city-card .cdist{font-size:12px;color:#8a8168;font-family:"Open Sans",Arial,sans-serif;font-variant-numeric:tabular-nums} /* ── Respectăm setarea de sistem „reduce motion" ─────────────────── */ @media (prefers-reduced-motion: reduce){ .dg26-acc-a,.dg26-erl-a,.dg26-acc-a > div,.dg26-erl-a > div, .dg26-card,.dg26-city-card,.dg26-btn-outline, .dg26-more .chev,.dg26-acc-q .chev,.dg26-erl-q .chev{transition:none !important} *,*::before,*::after{scroll-behavior:auto !important} } /* ══════════════════════════════════════════════════════════════════ BLOCURI 2026 v6 — prefix `c26-` DE CE UN PREFIX NOU. Pe pagină se încarcă trei seturi de clase: `dg26-` (acest șablon), `dg26f-` și `dg26c-` (panoul de Filter din template-parts/dg26-filter.php). Verificat pe 12 septembrie 2026: `c26-` nu apare în niciunul din ele. Deci nimic din ce urmează nu poate atinge filtrul, oricât de generic ar părea numele. ══════════════════════════════════════════════════════════════════ */ /* ---- Titlu de serviciu: H2 real, dar desenat ca o etichetă discretă. Rămâne H2 pentru cititoarele de ecran şi pentru structura paginii; arată însă ca o linie de secţiune, nu ca un titlu de capitol, pentru că sub el nu urmează text de citit, ci informaţii scurte. ---- */ h2.dg26-h.c26-eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 4px; font-family:"Open Sans",Arial,sans-serif!important;font-style:normal;font-weight:700; font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:#c9a45c;line-height:1.4} h2.dg26-h.c26-eyebrow::before,h2.dg26-h.c26-eyebrow::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,transparent,#3a2f1d,transparent)} @media(min-width:768px){h2.dg26-h.c26-eyebrow{font-size:12px;color:#c9a45c}} /* ---- 1. Banda de încredere („Warum wir") ---- */ .c26-strip{display:grid;grid-template-columns:1fr;margin:14px 0 0;padding:0;list-style:none; border-top:1px solid rgba(201,164,92,.26);border-bottom:1px solid rgba(201,164,92,.26); background:linear-gradient(180deg,rgba(201,164,92,.055),rgba(201,164,92,0) 70%)} .c26-strip li{padding:18px 16px;text-align:center} .c26-strip li + li{border-top:1px solid #241d12} @media(min-width:768px){ .c26-strip{grid-template-columns:repeat(3,1fr);padding:24px 0 22px} .c26-strip li{padding:0 20px} .c26-strip li + li{border-top:0;border-left:1px solid #241d12} } .c26-ic{width:38px;height:38px;margin:0 auto 11px;border-radius:50%;display:flex; align-items:center;justify-content:center;border:1px solid rgba(201,164,92,.38); background:rgba(201,164,92,.06)} .c26-ic svg{width:19px;height:19px;stroke:#c9a45c;fill:none;stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round} .c26-strip b{display:block;font-family:"Open Sans",Arial,sans-serif;font-weight:700; font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:#e8d5a8;margin-bottom:6px} .c26-strip small{display:block;font-family:"Open Sans",Arial,sans-serif;font-size:12.5px; line-height:1.5;color:#8a8168} .c26-substrip{text-align:center;margin:14px 0 0;font-family:"Open Sans",Arial,sans-serif; font-size:11.5px;letter-spacing:.8px;color:#75706a;font-variant-numeric:tabular-nums} .c26-substrip b{color:#c9a45c;font-weight:600} /* ---- 2. Linia cu paşii („So funktioniert's") ---- */ .c26-flow{position:relative;display:grid;grid-template-columns:1fr;gap:22px; margin:22px 0 0;padding:0;list-style:none;counter-reset:none} .c26-flow li{display:flex;align-items:flex-start;gap:14px;text-align:left} .c26-dot{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#0c0c0c; border:1px solid rgba(201,164,92,.5);display:flex;align-items:center;justify-content:center; color:#c9a45c;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:15px;line-height:1} .c26-flow b{display:block;font-family:"Open Sans",Arial,sans-serif;font-weight:700; font-size:15px;color:#f3ecd9;margin-bottom:4px;line-height:1.3} .c26-flow small{display:block;font-family:"Open Sans",Arial,sans-serif;font-size:13.5px; line-height:1.55;color:#999} @media(min-width:768px){ .c26-flow{grid-template-columns:repeat(3,1fr);gap:0;padding-top:46px;margin-top:26px} .c26-flow::before{content:"";position:absolute;top:19px;left:17%;right:17%;height:1px; background:linear-gradient(90deg,transparent,rgba(201,164,92,.45) 18%,rgba(201,164,92,.45) 82%,transparent)} .c26-flow li{display:block;text-align:center;padding:0 16px;position:relative} .c26-dot{position:absolute;top:-46px;left:50%;transform:translateX(-50%);margin:0} .c26-flow b{font-size:16px} } /* ---- 3. Cardurile Erlebnisse ---- */ .c26-erl-lead{margin:-6px 0 0;font-family:"Open Sans",Arial,sans-serif;font-size:14px; line-height:1.55;color:#8a8168;max-width:70ch} .c26-cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px} @media(min-width:600px){.c26-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1024px){.c26-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}} .c26-card{display:block;width:100%;text-align:left;background:#161616;border:1px solid #2a2a2a; border-radius:16px;padding:18px 18px 16px;position:relative;overflow:hidden;color:inherit; font-family:"Open Sans",Arial,sans-serif;-webkit-appearance:none;appearance:none; -webkit-tap-highlight-color:transparent; transition:border-color .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1)} button.c26-card{cursor:pointer} .c26-card::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:0; background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(201,164,92,.13),transparent 62%); transition:opacity .3s ease} @media(hover:hover){ button.c26-card:hover{border-color:rgba(201,164,92,.5);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.5)} button.c26-card:hover::after{opacity:1} button.c26-card:hover .c26-go::after{transform:translateX(4px)} } button.c26-card:focus-visible{outline:2px solid #c9a45c;outline-offset:3px} .c26-k{display:block;font-weight:700;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase; color:#c9a45c;opacity:.85;margin-bottom:8px} .c26-ti{display:block;font-weight:700;font-size:16px;color:#e8d5a8;line-height:1.3;margin-bottom:6px} @media(min-width:768px){.c26-ti{font-size:17px}} .c26-te{display:block;font-size:13.5px;line-height:1.55;color:#a29d94} .c26-go{display:flex;align-items:center;gap:6px;margin-top:13px;font-size:12px;font-weight:700;color:#c9a45c} .c26-go::after{content:"\2192";transition:transform .25s cubic-bezier(.4,0,.2,1)} /* ---- 4. Panoul (modal) ---- */ dialog.c26-modal{border:0;padding:0;background:transparent;width:100%; max-width:min(560px,calc(100vw - 28px));color:#c3beb4; /* `cursor:pointer` pe panou pare inutil — panoul nu e un buton. E însă remediul clasic pentru iOS: Safari nu trimite evenimente de clic de pe elemente pe care nu le consideră „apăsabile", iar un cursor de mână e exact semnalul după care se ia. Fără el, atingerea pe fundalul estompat poate să nu ajungă niciodată la ascultătorul nostru. Interiorul panoului îl punem la loc pe cursor normal, mai jos. */ cursor:pointer} .c26-dlg{cursor:auto} dialog.c26-modal::backdrop{background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .c26-dwrap{position:relative} .c26-dlg{background:linear-gradient(158deg,#221b12,#161616 62%);border:1px solid rgba(201,164,92,.34); border-radius:20px;padding:26px 22px 22px;box-shadow:0 30px 90px rgba(0,0,0,.75); font-family:"Open Sans",Arial,sans-serif} @media(min-width:768px){.c26-dlg{padding:28px 26px 24px}} .c26-dlg h3{font-family:"Playfair Display",Georgia,serif!important;font-style:normal;font-weight:600; font-size:22px;color:#e8d5a8;margin:6px 0 12px;line-height:1.25;padding-right:52px;text-shadow:none!important} @media(min-width:768px){.c26-dlg h3{font-size:25px}} .c26-dlg p{margin:0 0 12px;font-size:14.5px;line-height:1.68;color:#c3beb4} .c26-dlg p:last-child{margin-bottom:0} .c26-dlg a{color:#d4af37;text-decoration:underline;text-underline-offset:2px} .c26-dlg h3 + p{margin-top:0} /* (regula de mai jos e depășită de blindajul de la finalul fișierului) */ .c26-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px; border:1px solid rgba(201,164,92,.36);background:rgba(201,164,92,.08);color:#c9a45c; font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center; font-family:"Open Sans",Arial,sans-serif;-webkit-appearance:none;appearance:none} .c26-x:hover{border-color:#c9a45c;color:#e8d5a8} .c26-x:focus-visible{outline:2px solid #c9a45c;outline-offset:3px} /* Rezervă pentru browserele foarte vechi, fără : panoul se afişează centrat, fără strat superior. Nu se ajunge aici practic niciodată — dialog e suportat peste tot din 2022 — dar mai bine aşa decât un panou lipit în mijlocul paginii. */ dialog.c26-modal:not([open]){display:none} @supports not (selector(dialog::backdrop)){ dialog.c26-modal[open]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%); z-index:99999;max-height:86vh;overflow:auto} } /* Cardul fără text lung: nu e buton, deci nu invită la click. */ .c26-card--static{cursor:default} /* ══════════════════════════════════════════════════════════════════ FAȚA CARDULUI — ÎNTREBAREA ESTE TITLUL (13 septembrie 2026) Până acum, eticheta era un rând mic de 9,5 px cu majuscule aurii, iar numele locului era titlul mare. Pe pagină, ochiul citea întâi „Hanse Stube im Excelsior" — un nume care nu spune nimic cuiva care nu-l cunoaște deja. Acum e invers: în eticheta se scrie o ÎNTREBARE („Wo können Sie in Köln essen gehen?"), iar ea devine titlul cardului. Numele locului coboară dedesubt, mic și auriu. Întrebarea stârnește curiozitatea, numele o satisface — dar abia după click. În PANOU rămâne invers, și e intenționat: acolo omul a apăsat deja, deci vrea răspunsul concret. Numele locului e H3-ul panoului. Dacă eticheta e goală, numele locului redevine titlul mare. Asta o rezolvă `:first-child`: fără etichetă, numele e primul element din buton, deci primește stilul de titlu. Nu e nevoie de nimic în PHP. ══════════════════════════════════════════════════════════════════ */ .c26-card .c26-k{ font-size:15.5px;line-height:1.32;letter-spacing:0;text-transform:none; font-weight:700;color:#e8d5a8!important;opacity:1;margin-bottom:6px} @media(min-width:768px){.c26-card .c26-k{font-size:17px}} .c26-card .c26-ti{ font-size:12.5px;line-height:1.35;letter-spacing:.5px;font-weight:700; color:#c9a45c!important;margin-bottom:8px} @media(min-width:768px){.c26-card .c26-ti{font-size:13px}} /* Card fără întrebare: numele locului rămâne titlul mare. */ .c26-card .c26-ti:first-child{ font-size:15.5px;line-height:1.3;letter-spacing:0; color:#e8d5a8!important;margin-bottom:6px} @media(min-width:768px){.c26-card .c26-ti:first-child{font-size:17px}} /* ══════════════════════════════════════════════════════════════════ BLINDAJ ANTI-TEMĂ PENTRU CARDURI (12 septembrie 2026) Ce s-a întâmplat pe site: după închiderea panoului, cardul pe care se apăsase rămânea AURIU. Părea că panoul nu s-a închis bine. Cauza: cardul e un `