/* ==========================================================================
LIEBLINGS.CHAT — css/lieblings-start.css
--------------------------------------------------------------------------
Bild der Seite: Nachts, das Handy auf dem Bett. Benachrichtigungen, die
aufleuchten. Profilkarten wie in einer Dating-App. Der Ablauf als Chat.
Schriften: Fraunces (Titel), Karla (Text), Caveat (Handschrift) – lokal,
geladen von functions.php Bereich 11; Fallbacks halten das Layout.
1 Variablen & Typografie
2 Kopfzeile & Navigation
3 Bausteine (Kicker, Titel, Buttons, Handschrift)
4 Block 1 — Hero „Nachtmodus“ (Benachrichtigungen + Aussage)
5 Block 2 — Profilkarten (Auftaktkachel + Plugin-Galerie)
6 Block 3 — So funktioniert’s (als Chatverlauf)
7 Block 4 — Was dich erwartet (Nachtband)
8 Block 5 — Abschluss (die letzte Nachricht)
9 Footer (Flatsome)
10 Plugin-Seiten (Pakete, Konto, Registrierung)
11 Mobil
========================================================================== */
/* ==========================================================================
1 VARIABLEN & TYPOGRAFIE
========================================================================== */
:root{
--lb-nacht: #1f1420; /* Hero, Nachtband */
--lb-nacht-2: #2b1c2c; /* Karten auf Nacht, Footer */
--lb-nacht-3: #150d16; /* Handy-Rahmen */
--lb-creme: #faf5f2; /* Seitenhintergrund */
--lb-papier: #f4ebe7; /* zweite Fläche, Chatverlauf */
--lb-karte: #ffffff; /* Kartenweiß */
--lb-tinte: #241a1f; /* Text */
--lb-grau: #7a7075; /* Nebentext */
--lb-linie: #e6dad9; /* Rahmen auf Creme */
--lb-rose: #c4436e; /* Primärfarbe */
--lb-rose-dark: #a5335a;
--lb-rose-soft: #fde2ea; /* eigene Sprechblasen */
--lb-online: #3ec46d; /* der Punkt */
--lb-gold: #e9b96f; /* Uhrzeiten, kleine Akzente auf Nacht */
--lb-titel: 'Fraunces', Georgia, 'Times New Roman', serif;
--lb-text: 'Karla', 'Segoe UI', Arial, sans-serif;
--lb-hand: 'Caveat', 'Segoe Print', cursive;
--lb-radius: 4px;
}
body{ font-family:var(--lb-text); }
.lb-wrap{ max-width:1120px; margin:0 auto; padding:0 20px; box-sizing:border-box; }
.lb-wrap *, .lb-wrap *::before, .lb-wrap *::after{ box-sizing:border-box; }
.lb-wrap > p:empty, .lb-wrap p:empty{ display:none !important; }
/* ==========================================================================
2 KOPFZEILE & NAVIGATION
========================================================================== */
.header-main{ border-bottom:1px solid var(--lb-linie); }
.header-main .nav>li>a{ text-transform:none; letter-spacing:0; font-family:var(--lb-text); font-weight:500; font-size:16px; color:var(--lb-tinte); padding-left:12px; padding-right:12px; }
.header-main .nav>li.current-menu-item>a, .header-main .nav>li.current_page_item>a, .header-main .nav>li.current-menu-ancestor>a, .header-main .nav>li.active>a{ color:var(--lb-tinte); font-weight:500; }
.header-main .nav>li>a:hover{ color:var(--lb-rose); }
.header-main .nav>li>a::after{ display:none; }
.header-main .nav .button, .header-main .header-button-1 .button{ text-transform:none; letter-spacing:0; border-radius:999px; font-weight:700; padding:0 22px; line-height:2.5em; min-height:2.5em; background:var(--lb-rose) !important; border-color:var(--lb-rose) !important; color:#fff !important; }
.header-main .nav .button:hover, .header-main .header-button-1 .button:hover{ background:var(--lb-rose-dark) !important; border-color:var(--lb-rose-dark) !important; }
.header-main .logo img{ max-height:44px; width:auto; }
.stuck .header-main{ box-shadow:0 2px 12px rgba(0,0,0,.06); }
.off-canvas .nav>li>a{ text-transform:none; letter-spacing:0; }
/* ==========================================================================
3 BAUSTEINE
========================================================================== */
/* Kicker über der Überschrift: klein, gesperrt, Rosé */
.lb-k{ display:block; font:700 11px var(--lb-text); letter-spacing:.18em; text-transform:uppercase; color:var(--lb-rose); margin:0 0 10px; }
.lb-k.is-hell{ color:var(--lb-gold); }
/* Überschriften in Fraunces */
.lb-h{ font-family:var(--lb-titel) !important; font-weight:600 !important; font-size:clamp(30px,3.6vw,44px) !important; line-height:1.08 !important; letter-spacing:-.01em !important; color:var(--lb-tinte) !important; text-transform:none !important; margin:0 !important; }
.lb-h em{ font-style:italic; color:var(--lb-rose); }
.lb-p{ margin:14px 0 0 !important; color:var(--lb-grau) !important; font-size:16.5px !important; line-height:1.6 !important; max-width:52ch; }
/* Handschrift */
.lb-hand{ display:block; font-family:var(--lb-hand); font-size:26px; line-height:1.2; color:var(--lb-rose-dark); }
/* Buttons */
.lb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 26px; border-radius:999px; border:1.5px solid var(--lb-rose); background:var(--lb-rose); color:#fff !important; font:700 16px var(--lb-text); text-decoration:none !important; text-transform:none; letter-spacing:0; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; }
.lb-btn:hover{ background:var(--lb-rose-dark); border-color:var(--lb-rose-dark); }
.lb-btn--rand{ background:transparent; color:var(--lb-tinte) !important; border-color:var(--lb-linie); }
.lb-btn--rand:hover{ background:#fff; border-color:var(--lb-tinte); color:var(--lb-tinte) !important; }
.lb-btn--rand.is-hell{ color:#fff !important; border-color:rgba(255,255,255,.3); }
.lb-btn--rand.is-hell:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
/* Online-Punkt */
.lb-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--lb-online); box-shadow:0 0 0 4px rgba(62,196,109,.2); }
/* Sektionen: Kopf zweispaltig (links Kicker/Titel, rechts Handschrift) */
.lb-kopf{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:0 0 30px; }
.lb-kopf .lb-hand{ text-align:right; max-width:30ch; }
/* ==========================================================================
4 BLOCK 1 — HERO „NACHTMODUS“
--------------------------------------------------------------------------
Dunkel wie ein Zimmer um zwei Uhr nachts, mit ein paar weichen Lichtpunkten.
Links die Aussage, rechts ein Stapel Benachrichtigungen, die aufleuchten.
========================================================================== */
.lb-hero{
position:relative; overflow:hidden;
background:var(--lb-nacht);
background-image:
radial-gradient(circle at 12% 18%, rgba(233,185,111,.16) 0, transparent 22%),
radial-gradient(circle at 78% 82%, rgba(196,67,110,.28) 0, transparent 26%),
radial-gradient(circle at 60% 10%, rgba(255,255,255,.05) 0, transparent 18%),
repeating-linear-gradient(58deg, transparent 0 44px, rgba(255,255,255,.028) 44px 45.5px);
color:#fff;
padding:80px 0 0;
}
.lb-hero .lb-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.lb-hero .lb-h{ color:#fff !important; font-size:clamp(38px,5vw,62px) !important; }
.lb-hero .lb-h em{ color:var(--lb-gold); }
.lb-hero .lb-p{ color:rgba(255,255,255,.72) !important; max-width:44ch; }
.lb-hero__claim{ margin:22px 0 0 !important; font-family:var(--lb-titel); font-size:clamp(20px,2.2vw,26px); line-height:1.3; color:rgba(255,255,255,.85); }
.lb-hero__claim strong{ color:#fff; font-weight:600; background:linear-gradient(transparent 62%, rgba(196,67,110,.6) 62%); padding:0 3px; }
.lb-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.lb-hero__hand{ margin-top:22px; color:var(--lb-gold); font-size:24px; }
/* Benachrichtigungen */
.lb-nots{ position:relative; display:flex; flex-direction:column; gap:12px; padding:14px; }
.lb-nots::before{ content:""; position:absolute; inset:-30px -40px; background:radial-gradient(ellipse at center, rgba(255,255,255,.07), transparent 60%); pointer-events:none; }
.lb-not{
position:relative; display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:start;
background:rgba(255,255,255,.96); color:var(--lb-tinte);
border-radius:14px; padding:12px 14px 13px;
box-shadow:0 20px 50px rgba(0,0,0,.35);
transform:rotate(-1deg);
}
.lb-not:nth-child(2){ transform:rotate(.6deg) translateX(14px); }
.lb-not:nth-child(3){ transform:rotate(-.4deg) translateX(-8px); }
.lb-not__av{ width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--lb-rose-soft); background-size:150% !important; background-position:50% 14% !important; position:relative; }
.lb-not__av i{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:var(--lb-online); border:2px solid #fff; }
.lb-not__name{ display:block; font-family:var(--lb-titel); font-weight:600; font-size:16px; line-height:1.2; }
.lb-not__text{ display:block; font-size:14.5px; line-height:1.4; color:#3c3236; margin-top:2px; }
.lb-not__zeit{ font-size:12px; color:var(--lb-grau); white-space:nowrap; padding-top:2px; }
.lb-not.is-neu .lb-not__zeit{ color:var(--lb-rose); font-weight:700; }
.lb-not--tipp{ grid-template-columns:44px 1fr; }
.lb-not__tipp{ display:inline-flex; gap:4px; margin-top:4px; }
.lb-not__tipp i{ width:6px; height:6px; border-radius:50%; background:#9a8f95; opacity:.35; animation:lb-blink 1.2s infinite; }
.lb-not__tipp i:nth-child(2){ animation-delay:.2s; } .lb-not__tipp i:nth-child(3){ animation-delay:.4s; }
@keyframes lb-blink{ 0%,80%,100%{ opacity:.3 } 40%{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .lb-not__tipp i{ animation:none; opacity:.6; } }
/* Fußleiste im Hero: die drei Fakten */
.lb-hero__fuss{ grid-column:1 / -1; display:flex; justify-content:center; gap:36px; flex-wrap:wrap; padding:22px 0; margin-top:56px; border-top:1px solid rgba(255,255,255,.12); font-size:14.5px; color:rgba(255,255,255,.65); }
.lb-hero__fuss span::before{ content:"● "; color:var(--lb-online); }
/* ==========================================================================
5 BLOCK 2 — PROFILKARTEN
--------------------------------------------------------------------------
Erste Kachel ist die Auftaktkachel (große Zahl + Links), danach die Karten
aus dem Plugin. Die Plugin-Galerie wird per display:contents in dasselbe
Raster gelegt; Name und Alter sitzen unten auf dem Foto.
========================================================================== */
.lb-profile{ padding:72px 0; }
.lb-profile__raster{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.lb-profile__raster .cmp-gallery{ display:contents !important; }
/* Tabs über dem Raster – wie die Reiter auf der Paketseite: Raster, alle gleich breit */
.cmp-gallery-tabs{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:12px; margin:0 0 38px; padding:0; border:0; }
.cmp-gallery-tab{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; text-align:left; padding:18px 20px 16px; margin:0; border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); background:var(--lb-karte); color:var(--lb-tinte); cursor:pointer; position:relative; text-transform:none; letter-spacing:0; font-family:var(--lb-titel); font-weight:600; font-size:22px; line-height:1.1; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.cmp-gallery-tab em{ font:14px var(--lb-text); font-style:normal; font-weight:500; color:var(--lb-grau); background:none; padding:0; border-radius:0; }
.cmp-gallery-tab em::after{ content:" Figuren"; }
.cmp-gallery-tab:hover{ border-color:var(--lb-tinte); transform:translateY(-2px); }
.cmp-gallery-tab.is-active{ background:var(--lb-nacht); background-image:repeating-linear-gradient(58deg, transparent 0 44px, rgba(255,255,255,.05) 44px 45.5px); border-color:var(--lb-nacht); color:#fff; box-shadow:0 16px 34px rgba(31,20,32,.25); }
.cmp-gallery-tab.is-active em{ color:var(--lb-gold); }
.cmp-gallery-tab.is-active::after{ content:""; position:absolute; left:50%; bottom:-9px; width:16px; height:16px; background:var(--lb-nacht); transform:translateX(-50%) rotate(45deg); }
@media (max-width:760px){
.cmp-gallery-tabs{ grid-auto-flow:row; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 24px; }
.cmp-gallery-tab{ align-items:center; }
.cmp-gallery-tab{ flex-direction:row; align-items:baseline; gap:8px; padding:13px 14px; font-size:19px; }
.cmp-gallery-tab em{ font-size:13px; }
.cmp-gallery-tab em::after{ content:""; } /* auf dem Handy reicht die Zahl */
.cmp-gallery-tab.is-active::after{ display:none; }
}
@media (max-width:360px){ .cmp-gallery-tab{ font-size:17px; padding:12px 10px; } }
/* Video auf Touch-Geräten: erst auf Antippen, einmal durchlaufen, dann wieder Play */
.cmp-gallery-img .cmp-play{ position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%); border:0; border-radius:50%; background:rgba(21,13,22,.55); backdrop-filter:blur(2px); cursor:pointer; padding:0; z-index:3; }
.cmp-gallery-img .cmp-play::before{ content:""; position:absolute; left:52%; top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff; }
.cmp-gallery-img.is-playing .cmp-play{ display:none; }
.cmp-gallery-card[hidden]{ display:none !important; }
/* Auftaktkachel */
.lb-profile__intro{
display:flex; flex-direction:column; justify-content:space-between;
background:var(--lb-karte); border:2px solid var(--lb-rose); border-radius:var(--lb-radius);
padding:24px 22px 20px; min-height:420px;
}
.lb-profile__zahl{ display:block; font-family:var(--lb-titel); font-size:64px; font-weight:600; line-height:.95; letter-spacing:-.02em; color:var(--lb-rose-dark); }
.lb-profile__label{ display:block; margin-top:8px; font-size:15px; line-height:1.45; color:var(--lb-grau); }
.lb-profile__links{ margin-top:22px; }
.lb-profile__links a{ display:flex; justify-content:space-between; align-items:center; color:var(--lb-tinte) !important; font-size:15px; font-weight:700; text-decoration:none !important; padding:9px 0; border-top:1px dashed var(--lb-linie); transition:color .18s ease; }
.lb-profile__links a span{ color:var(--lb-rose); font-size:18px; transition:transform .18s ease; }
.lb-profile__links a:hover{ color:var(--lb-rose-dark) !important; }
.lb-profile__links a:hover span{ transform:translateX(3px); }
.lb-profile__hand{ font-size:23px; margin-top:16px; }
/* Karten aus dem Plugin */
.lb-profile .cmp-gallery-card{
position:relative; display:flex; flex-direction:column;
background:var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius);
overflow:hidden; min-height:420px;
transition:border-color .18s ease;
}
.lb-profile .cmp-gallery-card:hover{ border-color:var(--lb-tinte); }
.lb-profile .cmp-gallery-card{ transform:none !important; }
.lb-profile .cmp-gallery-img{ display:block; position:relative; aspect-ratio:4/5; background:var(--lb-rose-soft); overflow:hidden; }
.lb-profile .cmp-gallery-img img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; display:block; transition:transform .5s ease; }
.lb-profile .cmp-gallery-card:hover .cmp-gallery-img:not(.has-video) img{ transform:scale(1.03); }
/* Verlauf unten im Foto, darauf Name + Alter */
.lb-profile .cmp-gallery-img::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:46%; background:linear-gradient(to top, rgba(21,13,22,.85), rgba(21,13,22,0)); }
.lb-profile .cmp-gallery-body{ position:relative; z-index:2; margin-top:-64px; padding:0 16px 16px; display:flex; flex-direction:column; gap:0; flex:1; }
.lb-profile .cmp-gallery-body h3{ margin:0; height:64px; padding-bottom:14px; display:flex; align-items:flex-end; gap:8px; font-family:var(--lb-titel); font-size:24px; font-weight:600; letter-spacing:-.01em; color:#fff; line-height:1; text-transform:none; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.lb-profile .cmp-gallery-body h3::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--lb-online); box-shadow:0 0 0 3px rgba(62,196,109,.3); flex:0 0 9px; margin-bottom:9px; }
.lb-profile .cmp-gallery-body h3 span{ font-family:var(--lb-text); font-weight:500; font-size:15px; color:rgba(255,255,255,.85); line-height:1; padding-bottom:3px; }
.lb-profile .cmp-gallery-tagline{ margin:0; padding-top:12px; color:var(--lb-grau); font-size:14.5px; line-height:1.55; box-sizing:border-box; min-height:0; overflow:hidden; -webkit-box-orient:vertical; overflow:hidden; }
/* Eigenschaften als Chips, Profiltext aufklappbar */
.lb-profile .cmp-gallery-traits{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; min-height:0; overflow:hidden; align-content:flex-start; }
.lb-profile .cmp-gallery-traits span{ font-size:13px; line-height:18px; height:24px; box-sizing:border-box; white-space:nowrap; font-weight:700; color:var(--lb-rose-dark); background:var(--lb-rose-soft); padding:3px 9px; border-radius:999px; }
.cmp-gallery-photos{ display:inline-flex; align-items:baseline; gap:8px; margin:20px 0 0; padding:7px 12px 8px; border:1.5px dashed var(--lb-rose); border-radius:4px; color:var(--lb-rose-dark); font-size:12.5px; line-height:1.2; }
.cmp-gallery-photos[title]{ cursor:help; }
.cmp-gallery-photos .cmp-gallery-photos__i{ font-size:14px; line-height:1; align-self:center; }
.cmp-gallery-photos b{ font-weight:700; }
.cmp-gallery-photos i{ font-style:normal; font-weight:400; color:var(--lb-grau); }
.cmp-gallery-photos i::before{ content:"· "; }
.lb-profile .cmp-gallery-more{ margin-top:auto; padding-top:18px; font-size:14px; }
.lb-profile .cmp-gallery-more summary{ cursor:pointer; list-style:none; font-family:var(--lb-hand); font-size:19px; color:var(--lb-rose-dark); display:inline-flex; align-items:center; gap:6px; }
.lb-profile .cmp-gallery-more summary::-webkit-details-marker{ display:none; }
.lb-profile .cmp-gallery-more summary::after{ content:"›"; font-family:var(--lb-text); font-size:18px; transition:transform .18s ease; }
.lb-profile .cmp-gallery-more[open] summary::after{ transform:rotate(90deg); }
.lb-profile .cmp-gallery-profile{ font-size:14px; line-height:1.55; color:var(--lb-tinte); margin-top:8px; padding-top:8px; border-top:1px dashed var(--lb-linie); }
.lb-profile .cmp-gallery-profile p{ margin:0 0 8px; }
.lb-profile .cmp-gallery-btn{ display:flex; justify-content:space-between; align-items:center; padding:12px 0 0; border-top:1px dashed var(--lb-linie); margin-top:12px; color:var(--lb-rose-dark) !important; font-weight:700; font-size:14.5px; text-decoration:none !important; transition:color .18s ease; }
.lb-profile .cmp-gallery-btn::after{ content:"›"; font-size:20px; line-height:1; transition:transform .18s ease; }
.lb-profile .cmp-gallery-btn:hover{ color:var(--lb-rose) !important; }
.lb-profile .cmp-gallery-btn:hover::after{ transform:translateX(3px); }
/* ==========================================================================
6 BLOCK 3 — SO FUNKTIONIERT’S (Rundgang mit vier Stationen)
--------------------------------------------------------------------------
Gestrichelte Route mit Wegmarken, je Station Text und eine kleine
„Bildschirm“-Grafik aus echten Elementen: Zettel, Karten, Chat, Kachel.
========================================================================== */
.lb-tour{ background:var(--lb-papier); border-top:1px solid var(--lb-linie); border-bottom:1px solid var(--lb-linie); padding:56px 0; }
.lb-tour .lb-kopf{ margin-bottom:10px; }
.lb-route{ position:relative; padding-left:0; }
.lb-route::before{ content:""; position:absolute; left:50%; top:20px; bottom:20px; border-left:2px dashed var(--lb-linie); transform:translateX(-1px); }
.lb-stop{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:14px 0; }
.lb-stop__num{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:var(--lb-rose); color:#fff; font:700 15px var(--lb-text); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--lb-papier); z-index:2; }
.lb-stop__text h3{ font-family:var(--lb-titel); font-weight:600; font-size:21px; line-height:1.15; letter-spacing:-.01em; text-transform:none; color:var(--lb-tinte); margin:0 0 6px; }
.lb-stop__text p{ margin:0 0 6px !important; color:var(--lb-grau) !important; font-size:15px !important; line-height:1.55 !important; }
.lb-stop__text strong{ color:var(--lb-tinte); }
.lb-stop__text .lb-hand{ font-size:20px; }
.lb-stop--rev .lb-stop__text{ grid-column:2; grid-row:1; }
.lb-stop--rev .lb-stop__shot{ grid-column:1; grid-row:1; }
/* Mini-Grafiken */
.lb-mock{ background:var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:10px; padding:12px 14px; box-shadow:0 14px 30px rgba(31,20,32,.10); max-width:300px; margin:0 auto; font-size:12.5px; color:var(--lb-tinte); }
.lb-stop--rev .lb-mock{ transform:rotate(1deg); } .lb-stop:not(.lb-stop--rev) .lb-mock{ transform:rotate(-1deg); }
.lb-mock__kicker{ font:700 10px var(--lb-text); letter-spacing:.18em; text-transform:uppercase; color:var(--lb-rose); margin-bottom:10px; }
.lb-mock__row{ display:flex; justify-content:space-between; align-items:center; padding:7px 10px; border:1.5px solid var(--lb-linie); border-radius:6px; margin-bottom:6px; }
.lb-mock__row span{ font-weight:700; font-size:12px; } .lb-mock__row i{ font-style:normal; color:var(--lb-grau); }
.lb-mock__check{ display:flex; align-items:center; gap:8px; font-size:12.5px; margin:4px 0 10px; } .lb-mock__check b{ width:18px; height:18px; border-radius:4px; background:var(--lb-rose); color:#fff; font-size:11px; display:inline-flex; align-items:center; justify-content:center; }
.lb-mock__btn{ background:var(--lb-rose); color:#fff; text-align:center; font-weight:700; padding:10px; border-radius:999px; font-size:13.5px; }
/* Galerie */
.lb-mock__tabs{ display:flex; gap:6px; margin-bottom:10px; } .lb-mock__tabs b, .lb-mock__tabs span{ padding:5px 10px; border-radius:999px; border:1.5px solid var(--lb-linie); font-size:12px; font-weight:700; } .lb-mock__tabs b{ background:var(--lb-nacht); color:#fff; border-color:var(--lb-nacht); } .lb-mock__tabs b em{ font-style:normal; background:var(--lb-rose); padding:0 6px; border-radius:99px; font-size:11px; margin-left:4px; }
.lb-mock__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.lb-mock__card{ aspect-ratio:4/5; border-radius:6px; background:var(--lb-rose-soft) 50% 0/cover; position:relative; overflow:hidden; }
.lb-mock__card::after{ content:""; position:absolute; inset:auto 0 0 0; height:55%; background:linear-gradient(to top, rgba(21,13,22,.85), transparent); }
.lb-mock__card span{ position:absolute; left:8px; bottom:7px; z-index:2; color:#fff; font-family:var(--lb-titel); font-weight:600; font-size:14px; display:flex; align-items:center; gap:5px; } .lb-mock__card span i{ width:7px; height:7px; border-radius:50%; background:var(--lb-online); } .lb-mock__card span small{ font-family:var(--lb-text); font-weight:500; font-size:11px; opacity:.85; }
.lb-mock__chips{ display:flex; gap:5px; margin-top:10px; } .lb-mock__chips b{ font-size:11px; font-weight:700; color:var(--lb-rose-dark); background:var(--lb-rose-soft); padding:3px 8px; border-radius:99px; }
/* Chat */
.lb-mock--chat{ padding:0; overflow:hidden; }
.lb-mock__chathead{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fbf7f5; border-bottom:1px solid var(--lb-linie); } .lb-mock__chathead b{ font-family:var(--lb-titel); font-weight:600; font-size:15px; } .lb-mock__chathead small{ color:var(--lb-grau); font-size:11.5px; margin-left:auto; }
.lb-mock__av{ width:30px; height:30px; border-radius:50%; background:var(--lb-rose-soft) 50% 14%/150%; display:inline-block; }
.lb-mock__msgs{ display:flex; flex-direction:column; gap:5px; padding:10px 12px; background:#f2ebe6; }
.lb-mock__msg{ max-width:84%; padding:7px 10px; border-radius:10px; background:#fff; font-size:13px; line-height:1.4; } .lb-mock__msg--out{ align-self:flex-end; background:var(--lb-rose-soft); } .lb-mock__msg--gift{ align-self:flex-end; background:#fff4d6; font-weight:700; } .lb-mock__msg--gift small{ font-weight:400; color:var(--lb-grau); margin-left:6px; }
.lb-mock__sliders{ padding:8px 12px 10px; display:grid; gap:6px; } .lb-mock__sliders div{ display:grid; grid-template-columns:52px 1fr; align-items:center; gap:10px; font-size:12px; font-weight:700; } .lb-mock__sliders b{ position:relative; height:4px; border-radius:2px; background:var(--lb-linie); display:block; } .lb-mock__sliders b::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:var(--v); background:var(--lb-rose); border-radius:2px; } .lb-mock__sliders b::after{ content:""; position:absolute; left:var(--v); top:50%; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--lb-rose); transform:translate(-50%,-50%); }
/* Paket */
.lb-mock--pay{ display:grid; gap:12px; }
.lb-mock__pkg{ border:2px solid var(--lb-rose); border-radius:6px; padding:14px 16px; display:grid; gap:4px; } .lb-mock__pkg b{ font-family:var(--lb-titel); font-weight:600; font-size:17px; } .lb-mock__pkg em{ font-style:normal; font-family:var(--lb-titel); font-weight:600; font-size:30px; line-height:1; } .lb-mock__pkg small{ color:var(--lb-grau); margin:4px 0 8px; } .lb-mock__pkg small strong{ color:var(--lb-tinte); }
.lb-mock__done{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:#e9f7ee; border-radius:6px; font-size:13.5px; } .lb-mock__done i{ width:10px; height:10px; border-radius:50%; background:var(--lb-online); box-shadow:0 0 0 4px rgba(62,196,109,.2); }
/* Abschluss der Route */
.lb-tour__ende{ display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:18px; padding:20px 26px; background:var(--lb-nacht); color:#fff; border-radius:8px; background-image:repeating-linear-gradient(58deg, transparent 0 44px, rgba(255,255,255,.04) 44px 45.5px); }
.lb-tour__ende .lb-k{ color:var(--lb-gold); margin-bottom:6px; } .lb-tour__ende p{ margin:0; color:rgba(255,255,255,.8); max-width:60ch; }
/* ==========================================================================
7 BLOCK 4 — WAS DICH ERWARTET (Nachtband)
--------------------------------------------------------------------------
Dunkelste Stufe der Seite mit schwachen Linien; Karten leicht
durchscheinend mit Rosé-Kante oben. Sechs Karten, drei je Reihe.
========================================================================== */
.lb-band{ background:var(--lb-nacht); background-image:repeating-linear-gradient(58deg, transparent 0 44px, rgba(255,255,255,.04) 44px 45.5px); padding:72px 0; color:#fff; }
.lb-band .lb-h{ color:#fff !important; }
.lb-band .lb-p{ color:rgba(255,255,255,.65) !important; }
.lb-band .lb-hand{ color:var(--lb-gold); }
.lb-band__karten{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:34px; }
.lb-band__karte{ display:flex; flex-direction:column; padding:18px 18px 20px; background:rgba(255,255,255,.07); border-top:3px solid var(--lb-rose); border-radius:var(--lb-radius); transition:background .2s ease; }
.lb-band__karte:hover{ background:rgba(255,255,255,.12); }
.lb-band__icon{ width:36px; height:36px; color:var(--lb-gold); margin:2px 0 26px; }
.lb-band__icon svg{ width:100%; height:100%; display:block; }
.lb-band__karte b{ display:block; font-family:var(--lb-titel); font-weight:600; font-size:18px; line-height:1.25; color:#fff; margin-bottom:6px; }
.lb-band__karte p{ margin:0 !important; color:rgba(255,255,255,.7) !important; font-size:14.5px !important; line-height:1.6 !important; }
/* ==========================================================================
7b BLOCK 6 — WUNSCHFIGUR (Maßanfertigung)
--------------------------------------------------------------------------
Eine große Karte auf Creme: links Text und drei Schritte, rechts Preis,
Button und ein handschriftlicher Zettel als Beispiel.
========================================================================== */
.lb-wunsch{ padding:72px 0; }
.lb-wunsch__karte{ display:grid; grid-template-columns:1.3fr .8fr; gap:48px; align-items:center; background:var(--lb-karte); border:2px solid var(--lb-rose); border-radius:8px; padding:44px 46px; background-image:repeating-linear-gradient(45deg, transparent 0 12px, rgba(196,67,110,.04) 12px 12.8px); }
.lb-wunsch__schritte{ margin:20px 0 0; padding:0; list-style:none; counter-reset:w; display:grid; gap:10px; }
.lb-wunsch__schritte li{ counter-increment:w; position:relative; padding-left:38px; color:var(--lb-grau); font-size:15.5px; line-height:1.5; }
.lb-wunsch__schritte li::before{ content:counter(w); position:absolute; left:0; top:1px; width:26px; height:26px; border-radius:50%; background:var(--lb-rose); color:#fff; font:700 13px var(--lb-text); display:flex; align-items:center; justify-content:center; }
.lb-wunsch__schritte b{ color:var(--lb-tinte); }
.lb-wunsch__text .lb-hand{ margin-top:18px; font-size:22px; }
.lb-wunsch__side{ display:flex; flex-direction:column; gap:14px; align-items:stretch; }
.lb-wunsch__preis{ display:flex; flex-direction:column; align-items:center; padding:20px; border:1.5px solid var(--lb-linie); border-radius:6px; background:#fff; text-align:center; }
.lb-wunsch__preis small{ font:700 11px var(--lb-text); letter-spacing:.18em; text-transform:uppercase; color:var(--lb-rose); }
.lb-wunsch__preis strong{ font-family:var(--lb-titel); font-weight:600; font-size:48px; line-height:1.05; letter-spacing:-.02em; color:var(--lb-tinte); }
.lb-wunsch__preis span{ font-size:13.5px; color:var(--lb-grau); }
.lb-wunsch__side .lb-btn{ justify-content:center; }
.lb-wunsch__bild{ position:relative; max-width:240px; margin:10px auto 0; background:#fff; padding:10px 10px 46px; border-radius:2px; box-shadow:0 14px 34px rgba(31,20,32,.18), 0 1px 0 rgba(0,0,0,.06); transform:rotate(-2deg); transition:transform .25s ease; }
.lb-wunsch__bild:hover{ transform:rotate(0deg) translateY(-3px); }
.lb-wunsch__bild::before{ content:""; position:absolute; top:-10px; left:50%; width:84px; height:22px; transform:translateX(-50%) rotate(-3deg); background:rgba(233,185,111,.45); border-radius:2px; }
.lb-wunsch__bild img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:1px; }
.lb-wunsch__bild .lb-hand{ position:absolute; left:14px; right:14px; bottom:12px; text-align:center; color:var(--lb-rose); font-size:23px; text-shadow:none; }
.lb-wunsch__zettel{ background:#fff8e6; border:1px dashed #e6cf9a; border-radius:4px; padding:12px 16px; transform:rotate(-1.5deg); }
.lb-wunsch__zettel .lb-hand{ font-size:21px; color:#6b5321; }
/* ==========================================================================
8 BLOCK 5 — ABSCHLUSS (die letzte Nachricht)
--------------------------------------------------------------------------
Eine einzelne Benachrichtigung, groß, auf Creme – und die Buttons.
========================================================================== */
.lb-ende{ padding:80px 0; }
.lb-ende .lb-wrap{ max-width:760px; text-align:center; }
.lb-ende .lb-not{ transform:rotate(-1deg); text-align:left; max-width:460px; margin:0 auto 34px; box-shadow:0 20px 50px rgba(31,20,32,.16); border:1.5px solid var(--lb-linie); }
.lb-ende .lb-h{ font-size:clamp(30px,4vw,46px) !important; }
.lb-ende .lb-p{ margin:12px auto 0 !important; max-width:48ch; }
.lb-ende__cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:28px; }
.lb-ende .lb-hand{ margin-top:22px; font-size:24px; }
/* ==========================================================================
9 FOOTER (Flatsome) — Variante „Aufruf links, Wege rechts“
--------------------------------------------------------------------------
Footer 2 mit drei Text-Widgets (Aufruf / Entdecken / Rechtliches),
Absolute Footer nur noch mit dem Sternchentext. Theme Options → Footer:
Footer 2 an, 3 Spalten, Hintergrund #2b1c2c; Footer 1 aus.
========================================================================== */
.footer-wrapper{ background:var(--lb-nacht-2); }
.footer-widgets{ padding:52px 0 40px !important; color:#fff; background:var(--lb-nacht-2) !important; background-image:radial-gradient(circle at 10% 90%, rgba(233,185,111,.12) 0, transparent 26%), repeating-linear-gradient(58deg, transparent 0 44px, rgba(255,255,255,.03) 44px 45.5px) !important; }
.footer-widgets .widget{ margin-bottom:0 !important; }
.footer-widgets .widget-title{ display:none; }
.footer-widgets p{ margin:0; }
/* Spalte 1: Aufruf */
.lb-foot-cta h2, .lb-foot-cta .lb-foot-h{ font-family:var(--lb-titel) !important; font-weight:600 !important; font-size:30px !important; line-height:1.1 !important; letter-spacing:-.01em; color:#fff !important; margin:0 0 8px !important; text-transform:none !important; }
.lb-foot-cta .lb-hand{ display:block; font-size:22px; color:var(--lb-gold); margin:12px 0 24px; }
.lb-foot-cta .lb-btn{ padding:13px 24px; }
/* Spalten 2 und 3: Wege */
.lb-foot-k{ display:block; font:700 11px var(--lb-text); letter-spacing:.18em; text-transform:uppercase; color:var(--lb-rose); margin:6px 0 12px; }
.lb-foot-links{ list-style:none; margin:0; padding:0; }
.lb-foot-links li{ margin:0; padding:0; }
.lb-foot-links a{ display:block; color:rgba(255,255,255,.85) !important; text-decoration:none !important; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.14); font-size:15px; transition:color .15s ease, padding-left .15s ease; }
.lb-foot-links a:hover{ color:#fff !important; padding-left:4px; }
/* Absolute Footer: nur Sternchentext */
.absolute-footer{ background:var(--lb-nacht) !important; color:rgba(255,255,255,.5); padding:20px 0 22px; font-size:12.5px; }
.absolute-footer .copyright-footer{ font-size:12.5px; }
.absolute-footer ul.menu, .absolute-footer ul.nav{ margin-bottom:14px; }
.absolute-footer ul.menu>li>a, .absolute-footer ul.nav>li>a, .absolute-footer .nav>li>a, .absolute-footer .footer-primary a{ color:rgba(255,255,255,.75) !important; text-transform:none !important; letter-spacing:0 !important; font-size:14px !important; font-weight:400 !important; padding-left:0 !important; padding-right:22px !important; }
.absolute-footer .copyright-footer{ margin-top:12px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.12); }
.absolute-footer .footer-primary{ padding:0; }
.back-to-top{ border-color:rgba(255,255,255,.3) !important; color:rgba(255,255,255,.7) !important; }
/* Wortmarke (falls im Text benutzt) */
.id-logo{ display:inline-flex; align-items:center; gap:4px; font-family:var(--lb-titel); font-weight:600; font-size:1.5rem; letter-spacing:-.02em; color:inherit !important; text-decoration:none !important; line-height:1; }
.id-logo .id-dot{ width:11px; height:11px; border-radius:50%; background:var(--lb-online); box-shadow:0 0 0 4px rgba(62,196,109,.18); position:relative; top:1px; display:inline-block; }
.id-logo .id-tld{ opacity:.8; }
.id-footer-note{ font-size:.88rem; opacity:.7; margin:0; }
@media (max-width:849px){
.footer-widgets{ padding:34px 0 18px !important; }
.footer-widgets .widget{ margin-bottom:22px !important; }
.lb-foot-cta h2, .lb-foot-cta .lb-foot-h{ font-size:26px !important; }
.lb-foot-links{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
}
/* ==========================================================================
10 PLUGIN-SEITEN (Pakete, Konto, Registrierung)
========================================================================== */
.cmp-shop, .cmp-auth{ --cmp-accent:var(--lb-rose); --cmp-accent-dark:var(--lb-rose-dark); --cmp-border:var(--lb-linie); }
.cmp-shop-h, .cmp-auth h2{ font-family:var(--lb-titel); font-weight:600; text-transform:none; }
.cmp-shop-card{ border-radius:var(--lb-radius) !important; border:1.5px solid var(--lb-linie) !important; }
.cmp-shop-card.is-featured{ border-color:var(--lb-rose) !important; box-shadow:none !important; border-width:2px !important; }
.cmp-shop-card-price{ font-family:var(--lb-titel); font-weight:600; }
.cmp-auth-form input[type="text"], .cmp-auth-form input[type="email"], .cmp-auth-form input[type="password"], .cmp-auth-form input[type="date"]{ box-shadow:none; height:auto; border-radius:var(--lb-radius); }
/* ==========================================================================
11 MOBIL
========================================================================== */
@media (max-width:1024px){
.lb-profile__raster{ grid-template-columns:repeat(2, 1fr); }
.lb-profile__intro{ grid-column:1 / -1; min-height:0; }
.lb-band__karten{ grid-template-columns:1fr 1fr; }
}
@media (max-width:849px){
.lb-hero{ padding:48px 0 0; }
.lb-hero .lb-wrap{ grid-template-columns:1fr; gap:40px; }
.lb-hero__fuss{ margin-top:36px; gap:16px; }
.lb-nots{ padding:6px; }
.lb-kopf{ flex-direction:column; align-items:flex-start; }
.lb-kopf .lb-hand{ text-align:left; }
.lb-profile, .lb-band{ padding:52px 0; }
.lb-route::before{ left:18px; }
.lb-stop{ grid-template-columns:1fr; gap:22px; padding:22px 0 22px 48px; }
.lb-stop__num{ left:18px; top:0; transform:translate(-50%,0); width:32px; height:32px; font-size:13px; }
.lb-stop--rev .lb-stop__text, .lb-stop--rev .lb-stop__shot{ grid-column:1; grid-row:auto; }
.lb-mock{ transform:none !important; }
.lb-tour{ padding:52px 0; }
.lb-wunsch{ padding:52px 0; }
.lb-wunsch__karte{ grid-template-columns:1fr; gap:26px; padding:26px 22px; }
.lb-tour__ende{ flex-direction:column; align-items:flex-start; }
.lb-profile .cmp-gallery-card{ min-height:0; }
}
@media (max-width:640px){
.lb-profile__raster{ grid-template-columns:1fr 1fr; gap:10px; }
.lb-profile .cmp-gallery-body{ margin-top:-52px; padding:0 10px 12px; }
.lb-profile .cmp-gallery-body h3{ height:52px; padding-bottom:10px; }
.lb-profile .cmp-gallery-body h3{ font-size:19px; }
.lb-band__karten{ grid-template-columns:1fr; }
.lb-msg{ max-width:92%; }
}
/* ==========================================================================
12 MOBIL – Feinschliff (Ränder, Footer, Galerie, Hero)
========================================================================== */
@media (max-width:849px){
/* ein Seitenrand für alles */
.lb-wrap{ padding-left:20px; padding-right:20px; }
.section-content > .row, .footer-widgets .row{ margin-left:0 !important; margin-right:0 !important; }
.footer-widgets .col{ padding:0 20px !important; }
/* Hero */
.lb-hero .lb-h{ font-size:34px !important; }
.lb-hero .lb-p{ font-size:15.5px !important; }
.lb-hero__cta .lb-btn{ flex:1 1 100%; justify-content:center; }
.lb-hero__hand{ font-size:21px; }
.lb-hero__fuss{ flex-direction:column; align-items:flex-start; gap:8px; padding:18px 0; margin-top:28px; }
/* Galerie */
.lb-profile__intro{ min-height:0; padding:20px 18px 18px; }
.lb-profile__zahl{ font-size:52px; }
.lb-profile__hand{ margin-top:10px; font-size:21px; }
.lb-profile .cmp-gallery-tagline{ font-size:14.5px; }
.lb-profile .cmp-gallery-traits{ gap:6px; }
.lb-profile .cmp-gallery-traits span{ font-size:13px; line-height:18px; height:24px; padding:3px 9px; }
.lb-profile .cmp-gallery-more summary{ font-size:19px; }
.lb-profile .cmp-gallery-btn{ font-size:15px; }
.lb-profile .cmp-gallery-card--wish .cmp-gallery-btn{ padding:8px 6px; gap:4px; font-size:12.5px; letter-spacing:-.01em; white-space:nowrap; }
.lb-kopf .lb-h{ font-size:28px !important; }
/* Footer */
.footer-widgets{ padding:36px 0 8px !important; }
.footer-widgets .widget{ margin-bottom:26px !important; }
.lb-foot-cta .lb-foot-h{ font-size:26px !important; }
.lb-foot-cta .lb-hand{ font-size:21px; margin:8px 0 16px; }
.lb-foot-cta .lb-btn{ width:100%; justify-content:center; padding:14px 20px; }
.lb-foot-k{ margin-top:0; }
.lb-foot-links{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.absolute-footer{ padding:18px 0 22px; }
.absolute-footer .container{ padding:0 20px; }
.absolute-footer ul.menu, .absolute-footer ul.nav{ display:flex; flex-wrap:wrap; gap:4px 0; margin-bottom:10px; }
.absolute-footer ul.menu>li>a, .absolute-footer ul.nav>li>a{ padding-right:16px !important; font-size:13px !important; }
.absolute-footer .copyright-footer{ font-size:12px; line-height:1.5; }
}
/* ==========================================================================
13 „SO FUNKTIONIERT’S“ – Teaser (Startseite) und eigene Seite (groß)
========================================================================== */
.lb-teaser{ background:var(--lb-papier); border-top:1px solid var(--lb-linie); border-bottom:1px solid var(--lb-linie); padding:60px 0; }
.lb-teaser__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.lb-teaser__step{ display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto 1fr; gap:8px 14px; align-content:start; padding:20px 20px 22px; background:var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); text-decoration:none !important; color:var(--lb-tinte) !important; transition:border-color .18s ease, transform .18s ease; }
.lb-teaser__step:hover{ border-color:var(--lb-tinte); transform:translateY(-2px); }
.lb-teaser__step i{ grid-row:1 / 3; align-self:start; width:38px; height:38px; border-radius:50%; background:var(--lb-rose); color:#fff; font:700 15px var(--lb-text); font-style:normal; display:flex; align-items:center; justify-content:center; }
.lb-teaser__step b{ font-family:var(--lb-titel); font-weight:600; font-size:19px; line-height:1.15; }
.lb-teaser__step span{ color:var(--lb-grau); font-size:14.5px; line-height:1.5; }
.lb-teaser__more{ margin:18px 0 0 !important; }
.lb-teaser__more a{ font-family:var(--lb-hand); font-size:24px; color:var(--lb-rose-dark) !important; text-decoration:none !important; }
/* Seite: größer als der alte Block */
.lb-tour--seite{ border-top:0; padding:20px 0 40px; }
.lb-tour--seite .lb-stop{ gap:60px; padding:30px 0; }
.lb-tour--seite .lb-stop__text h3{ font-size:26px; margin-bottom:10px; }
.lb-tour--seite .lb-stop__text p{ font-size:16px !important; line-height:1.65 !important; margin-bottom:12px !important; }
.lb-tour--seite .lb-stop__text .lb-hand{ font-size:23px; }
.lb-tour--seite .lb-mock{ max-width:400px; font-size:13.5px; padding:16px 18px; }
.lb-tour--seite .lb-mock__row{ padding:9px 12px; }
.lb-tour--seite .lb-mock__msgs{ padding:12px 14px; gap:6px; }
.lb-tour--seite .lb-mock__msg{ font-size:13.5px; }
.lb-tour--seite .lb-mock__sliders{ padding:10px 14px 12px; gap:7px; }
.lb-tour--seite + .lb-ende{ padding-top:20px; }
@media (max-width:849px){
.lb-teaser{ padding:44px 0; }
.lb-teaser__row{ grid-template-columns:1fr; }
.lb-tour--seite .lb-stop{ padding:18px 0 18px 48px; gap:22px; }
}
/* Scrollbalken der Seite: schmal, Rosé */
html{ scrollbar-width:auto; scrollbar-color:rgba(196,67,110,.6) #f4ebe7; }
::-webkit-scrollbar{ width:14px; }
::-webkit-scrollbar-track{ background:#f4ebe7; }
::-webkit-scrollbar-thumb{ background:rgba(196,67,110,.6); border-radius:99px; border:3px solid #f4ebe7; }
::-webkit-scrollbar-thumb:hover{ background:#c4436e; }
/* ==========================================================================
14 VIDEO IN DER GALERIE (beim Darüberfahren)
========================================================================== */
.lb-profile .cmp-gallery-img video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; opacity:0; transition:opacity .6s ease; pointer-events:none; transform:none; }
.lb-profile .cmp-gallery-img.is-playing video{ opacity:1; }
.lb-profile .cmp-gallery-img.is-playing img{ transform:none; }
.lb-profile .cmp-gallery-img::after{ z-index:2; }
.lb-profile .cmp-gallery-body{ z-index:3; }
.lb-profile .cmp-gallery-img.has-video::before{ content:""; position:absolute; right:12px; top:12px; width:26px; height:26px; border-radius:50%; background:rgba(21,13,22,.55) url("data:image/svg+xml;utf8,") center/14px no-repeat; z-index:3; transition:opacity .3s ease; }
.lb-profile .cmp-gallery-img.is-playing::before{ opacity:0; }
/* ==========================================================================
15 FEINSCHLIFF 1.7.6 – Hero-Claim bricht nicht in der Markierung;
Teaser-Schritte immer drei nebeneinander, auch wenn WordPress die
Links in /
einpackt (wpautop im Text-Element).
========================================================================== */
.lb-hero__claim strong{ white-space:nowrap; }
.lb-teaser__row > p{ display:contents; }
.lb-teaser__row br{ display:none; }
.lb-teaser__row .lb-teaser__step{ margin:0; }
@media (max-width:640px){ .lb-hero__claim strong{ white-space:normal; } }
/* Hero: mehr Luft zwischen Text, Claim, Buttons und Handschrift (1.7.7) */
.lb-hero .lb-p{ margin-top:20px !important; }
.lb-hero__claim{ margin-top:34px !important; }
.lb-hero__cta{ margin-top:40px; gap:14px; }
.lb-hero__hand{ margin-top:32px; }
@media (max-width:849px){
.lb-hero__claim{ margin-top:26px !important; }
.lb-hero__cta{ margin-top:30px; }
.lb-hero__hand{ margin-top:24px; }
}
/* Auftaktkachel mobil kompakter */
@media (max-width:849px){
.lb-profile__intro{ padding:18px 18px 16px; }
.lb-profile__label{ margin-top:6px; font-size:14.5px; }
.lb-profile__links{ margin-top:14px; }
.lb-profile__links a{ padding:8px 0; font-size:14.5px; line-height:1.3; }
.lb-profile__hand{ margin-top:12px; font-size:20px; }
}
/* Setcard „Wunschfigur“ am Ende der Galerie (Plugin 0.24.x) – wie eine Figurenkarte, nur Button statt „Kennenlernen“ */
.lb-profile .cmp-gallery-card--wish .cmp-gallery-img-empty{ display:block; width:100%; height:100%; background:var(--lb-nacht); background-image:radial-gradient(circle at 70% 30%, rgba(196,67,110,.35) 0, transparent 40%), radial-gradient(circle at 20% 85%, rgba(233,185,111,.18) 0, transparent 30%); }
.lb-profile .cmp-gallery-card--wish .cmp-gallery-body h3::before{ display:none; }
.lb-profile .cmp-gallery-card--wish .cmp-gallery-body h3 span{ color:var(--lb-gold); font-weight:700; white-space:nowrap; }
.lb-profile .cmp-gallery-card--wish .cmp-gallery-tagline{ color:var(--lb-tinte); }
.lb-profile .cmp-gallery-card--wish .cmp-gallery-traits{ max-height:none; margin-bottom:18px; } /* keine „Mehr“-Zeile, daher Platz für alle Chips */ /* Luft zwischen Chips und Button */
.lb-profile .cmp-gallery-card--wish .cmp-gallery-btn{ margin-top:auto; color:var(--lb-rose-dark) !important; background:transparent; border:1.5px solid var(--lb-rose); border-radius:999px; padding:9px 16px; justify-content:center; gap:8px; font-weight:600; }
.lb-profile .cmp-gallery-card--wish .cmp-gallery-btn:hover{ background:var(--lb-rose); color:#fff !important; }
.lb-profile .cmp-gallery-card--wish .cmp-gallery-btn::after{ content:"›"; }
/* ==========================================================================
16 „SO FUNKTIONIERT’S“ – Stationen mit großem Bild (wie die Seitenköpfe)
========================================================================== */
.lb-tour--bild .lb-stop{ gap:56px; padding:34px 0; }
.lb-tour--bild .lb-stop__text p{ margin:0 0 12px !important; }
.lb-bild{ position:relative; margin:0; max-width:520px; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:var(--lb-nacht); box-shadow:0 24px 60px rgba(31,20,32,.22); border:1px solid rgba(31,20,32,.08); }
.lb-stop--rev .lb-bild{ margin-left:auto; transform:rotate(1deg); }
.lb-stop:not(.lb-stop--rev) .lb-bild{ transform:rotate(-1deg); }
.lb-bild img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s ease-out; }
.lb-bild:hover img{ transform:scale(1.03); }
.lb-bild::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(31,20,32,.88) 0, rgba(31,20,32,.35) 42%, rgba(31,20,32,0) 70%), repeating-linear-gradient(58deg, transparent 0 44px, rgba(255,255,255,.03) 44px 45.5px); pointer-events:none; }
.lb-bild figcaption{ position:absolute; left:22px; right:22px; bottom:18px; z-index:2; color:#fff; display:flex; flex-direction:column; gap:4px; }
.lb-bild figcaption .lb-k{ margin:0; }
.lb-bild figcaption .lb-hand{ color:#fff; font-size:26px; text-shadow:0 2px 10px rgba(0,0,0,.35); }
@media (max-width:849px){
.lb-tour--bild .lb-stop{ gap:18px; padding:22px 0 22px 48px; }
.lb-bild{ max-width:none; transform:none !important; aspect-ratio:16/10; }
.lb-bild figcaption{ left:16px; right:16px; bottom:14px; }
.lb-bild figcaption .lb-hand{ font-size:22px; }
}
/* Abschluss: eine Benachrichtigung aus [lieblings_nots] (1.7.8) */
.lb-ende .lb-nots{ padding:0; margin:0 auto 34px; max-width:460px; text-align:left; }
.lb-ende .lb-nots::before{ display:none; }
.lb-ende .lb-nots .lb-not{ margin:0; transform:rotate(-1deg); }
/* ==========================================================================
Mobiles Menü (Flatsome Off-Canvas): Nacht, Serif, Handschrift
========================================================================== */
.off-canvas .mfp-content, .off-canvas .mfp-content .mobile-sidebar{ background:var(--lb-nacht); background-image:radial-gradient(circle at 80% 8%, rgba(233,185,111,.14) 0, transparent 30%), radial-gradient(circle at 10% 95%, rgba(196,67,110,.28) 0, transparent 34%), repeating-linear-gradient(58deg, transparent 0 44px, rgba(255,255,255,.03) 44px 45.5px); color:#fff; }
.off-canvas .mfp-content .mobile-sidebar{ padding:0; }
.off-canvas .mfp-content .mfp-close{ color:#fff; opacity:.75; top:10px; right:10px; }
.off-canvas .mfp-content .mfp-close:hover{ opacity:1; }
.off-canvas .mobile-sidebar .sidebar-menu{ padding:74px 0 30px; }
.off-canvas .mobile-sidebar .sidebar-menu::before{ content:"Menü"; display:block; padding:0 28px 10px; font:700 11px var(--lb-text); letter-spacing:.2em; text-transform:uppercase; color:var(--lb-rose); }
.off-canvas .mobile-sidebar .nav-sidebar > li{ border:0 !important; }
.off-canvas .mobile-sidebar .nav-sidebar > li > a, .mfp-content .mobile-sidebar .nav>li>a{ display:block; padding:15px 28px; font-family:var(--lb-titel); font-size:25px; font-weight:600; letter-spacing:-.01em; line-height:1.15; color:#fff; border-bottom:1px solid rgba(255,255,255,.1); text-transform:none; transition:color .15s ease, padding-left .15s ease; }
.off-canvas .mobile-sidebar .nav-sidebar > li > a:hover, .off-canvas .mobile-sidebar .nav-sidebar > li.current-menu-item > a{ color:var(--lb-gold); padding-left:34px; }
.off-canvas .mobile-sidebar .nav-sidebar > li:last-child > a{ border-bottom:0; }
.off-canvas .mobile-sidebar .nav-sidebar .sub-menu a{ color:rgba(255,255,255,.75); font-family:var(--lb-text); font-size:16px; padding:8px 28px 8px 44px; }
.off-canvas .mobile-sidebar .sidebar-menu::after{ content:"Sie wartet schon."; display:block; padding:26px 28px 0; font-family:var(--lb-hand); font-size:26px; color:var(--lb-gold); }
.off-canvas .mobile-sidebar .nav-sidebar > li.menu-item-has-children > a .icon-angle-down{ color:rgba(255,255,255,.6); }
/* Setcard-Button auf sehr schmalen Handys: Pfeil weg, zweizeilig mittig statt abgeschnitten */
@media (max-width:400px){
.lb-profile .cmp-gallery-card--wish .cmp-gallery-btn{ white-space:normal; text-align:center; line-height:1.25; }
.lb-profile .cmp-gallery-card--wish .cmp-gallery-btn::after{ display:none; }
}
/* Kurzbeschreibung auf schmalen Handys: eine bzw. zwei Zeilen mehr, weiter für alle Karten gleich hoch */
/* Unter 600 px eine Karte pro Zeile: die Texte verkaufen, dafür brauchen sie Breite */
@media (max-width:600px){
.lb-profile__raster{ grid-template-columns:1fr !important; }
.lb-profile .cmp-gallery-tagline{ font-size:15.5px; }
.lb-profile .cmp-gallery-traits{ min-height:0; max-height:none; }
.lb-profile .cmp-gallery-img{ aspect-ratio:4/5; }
}