/* ========================================================================== LIEBLINGS.CHAT — css/lieblings-seiten.css -------------------------------------------------------------------------- Alle Seiten außer der Startseite. Gleiche Sprache wie lieblings-start.css: Nacht, Papier, Kicker, Fraunces/Karla/Caveat, dünne Rahmen, Rahmen-Hover. Die Seitenköpfe hängt functions.php (Bereich 12) automatisch an. 1 Seitenkopf (alle Unterseiten) 2 Pakete — Kacheln, Auftakt, Bestellung, Checkout 3 Registrierung & Anmeldung — Zettel auf Papier 4 Konto 5 Rechtstexte (Impressum, Datenschutz, AGB, Widerruf) 6 Mobil ========================================================================== */ /* ========================================================================== 1 SEITENKOPF ========================================================================== */ body.lb-seite .page-title, body.lb-seite .page-header-inner{ display:none !important; } body.lb-seite #content{ padding-bottom:70px; background:var(--lb-papier); } body.lb-seite{ --lb-linie:#dccbca; --lb-hatch:repeating-linear-gradient(45deg, transparent 0 12px, rgba(196,67,110,.05) 12px 12.8px); } .lb-kopf-seite{ position:relative; overflow:hidden; background:var(--lb-nacht); color:#fff; border-radius:6px; padding:44px 46px 40px; margin:30px 0 34px; background-image: radial-gradient(circle at 85% 20%, rgba(196,67,110,.28) 0, transparent 30%), 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,.035) 44px 45.5px); } .lb-kopf-seite .lb-k{ color:var(--lb-gold); } .lb-kopf-seite h1{ font-family:var(--lb-titel) !important; font-weight:600 !important; font-size:clamp(30px,3.8vw,46px) !important; line-height:1.08 !important; letter-spacing:-.01em !important; color:#fff !important; margin:0 !important; text-transform:none !important; hyphens:none !important; } .lb-kopf-seite h1 em{ font-style:italic; color:var(--lb-gold); } .lb-kopf-seite p{ margin:14px 0 0 !important; color:rgba(255,255,255,.72) !important; font-size:16px !important; line-height:1.6 !important; max-width:60ch; } .lb-kopf-seite .lb-hand{ margin-top:18px; color:var(--lb-gold); font-size:24px; } .lb-kopf-seite--schmal{ padding:36px 38px 32px; } /* ========================================================================== 2 PAKETE -------------------------------------------------------------------------- Plugin-Markup: .cmp-shop → .cmp-shop-account, .cmp-shop-h, .cmp-shop-grid mit .cmp-shop-card, .cmp-shop-order (Checkout / Status). ========================================================================== */ body.lb-seite .cmp-shop{ max-width:1120px; } /* Kontozeile als Kachel */ body.lb-seite .cmp-shop-account{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; padding:14px 18px; background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); margin:0 0 30px; font-size:15px; color:var(--lb-tinte); } body.lb-seite .cmp-shop-account span::before{ content:"● "; color:var(--lb-online); } body.lb-seite .cmp-shop-account a{ margin-left:auto; font-weight:700; color:var(--lb-rose-dark) !important; text-decoration:none !important; border-bottom:1px solid currentColor; } /* Abschnittstitel als Kicker + Fraunces */ body.lb-seite .cmp-shop-h{ font-family:var(--lb-titel) !important; font-weight:600 !important; font-size:26px !important; letter-spacing:-.01em; color:var(--lb-tinte) !important; margin:34px 0 4px !important; text-transform:none !important; } body.lb-seite .cmp-shop-h::before{ content:"Preise"; display:block; font:700 11px var(--lb-text); letter-spacing:.18em; text-transform:uppercase; color:var(--lb-rose); margin-bottom:8px; } body.lb-seite .cmp-shop-h:nth-of-type(2)::before{ content:"Geschenke"; } body.lb-seite .cmp-shop-sub{ margin:0 0 18px !important; color:var(--lb-grau) !important; font-size:15.5px; } body.lb-seite .cmp-shop-h--small{ font-size:19px !important; margin-top:calc(var(--lb-abstand) + 20px) !important; padding-top:26px; border-top:1px dashed var(--lb-linie); } body.lb-seite .cmp-shop-h--small::before{ content:"Bisher"; } /* Kacheln */ body.lb-seite .cmp-shop-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; } body.lb-seite .cmp-shop-card{ position:relative; display:flex; flex-direction:column; gap:2px; background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); padding:26px 24px 24px; min-height:0; box-shadow:none !important; cursor:pointer; user-select:none; transition:border-color .15s ease, background .15s ease, transform .15s ease; } body.lb-seite .cmp-shop-card:hover{ border-color:var(--lb-tinte); transform:translateY(-2px); } body.lb-seite .cmp-shop-card.is-featured::before{ content:"Beliebteste Wahl"; position:absolute; top:-11px; left:18px; background:var(--lb-rose); color:#fff; font:700 11.5px var(--lb-text); letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:99px; } body.lb-seite .cmp-shop-card-name{ display:block; font-family:var(--lb-titel); font-weight:600; font-size:19px; color:var(--lb-tinte); padding-right:36px; } body.lb-seite .cmp-shop-card-unit{ color:var(--lb-grau); font-size:13.5px; } body.lb-seite .cmp-shop-card-price{ font-family:var(--lb-titel); font-weight:600; font-size:40px; line-height:1; letter-spacing:-.02em; color:var(--lb-tinte); margin:16px 0 4px; } body.lb-seite .cmp-shop-card-desc{ color:var(--lb-grau); font-size:14px; min-height:0; } body.lb-seite .cmp-shop-btn{ display:inline-flex; align-items:center; justify-content:center; width:100%; padding:12px 18px; border-radius:999px; border:1.5px solid var(--lb-rose); background:var(--lb-rose); color:#fff !important; font:700 15px var(--lb-text); text-transform:none; letter-spacing:0; text-decoration:none !important; cursor:pointer; margin:0; transition:background .18s ease; } body.lb-seite .cmp-shop-btn:hover{ background:var(--lb-rose-dark); border-color:var(--lb-rose-dark); } body.lb-seite .cmp-shop-note{ color:var(--lb-grau); font-size:13.5px; margin-top:18px !important; } body.lb-seite .cmp-shop-notice{ background:#fff7e6; border:1.5px solid #f0d9a6; color:#6b5321; padding:12px 16px; border-radius:var(--lb-radius); margin:0 0 20px; } /* Bestellungen des Nutzers */ body.lb-seite .cmp-shop-orders{ width:100%; border-collapse:collapse; font-size:14.5px; border-top:1px dashed var(--lb-linie); } body.lb-seite .cmp-shop-orders td{ padding:11px 8px 11px 0; border-bottom:1px dashed var(--lb-linie); } body.lb-seite .cmp-shop-orders td:first-child a{ font-family:var(--lb-titel); font-weight:600; color:var(--lb-tinte) !important; text-decoration:none !important; } body.lb-seite .cmp-status--paid{ color:#1a7f37; font-weight:700; } body.lb-seite .cmp-status--pending{ color:#8a6d1a; font-weight:700; } body.lb-seite .cmp-status--expired, body.lb-seite .cmp-status--cancelled{ color:var(--lb-grau); } /* Bestellung / Checkout */ body.lb-seite .cmp-shop-order{ max-width:620px; } body.lb-seite .cmp-shop-back{ margin:0 0 20px; } body.lb-seite .cmp-shop-back a{ color:var(--lb-grau) !important; text-decoration:none !important; font-size:14px; } body.lb-seite .cmp-shop-order .cmp-shop-h::before{ content:"Bestellung"; } body.lb-seite .cmp-shop-summary{ display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 22px; background:var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); margin:22px 0 14px; } body.lb-seite .cmp-shop-summary span:first-child{ display:flex; align-items:center; min-width:0; font-family:var(--lb-titel); font-weight:600; font-size:18.5px; } body.lb-seite .cmp-shop-summary span:last-child{ flex:0 0 auto; white-space:nowrap; font-family:var(--lb-titel); font-weight:600; font-size:26px; } body.lb-seite .cmp-shop-gateways{ border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); padding:4px 20px 12px; margin:0 0 20px; background:var(--lb-karte); } body.lb-seite .cmp-shop-gateways legend{ font:700 11px var(--lb-text); letter-spacing:.18em; text-transform:uppercase; color:var(--lb-rose); padding:0 6px; } body.lb-seite .cmp-shop-gateways label{ display:block; padding:15px 20px; margin:0 -20px; border-top:1px dashed var(--lb-linie); cursor:pointer; font-weight:700; color:var(--lb-tinte); transition:background .15s ease; } body.lb-seite .cmp-shop-gateways label:hover{ background:var(--lb-papier); } body.lb-seite .cmp-shop-gateways label:has(input:checked){ background:var(--lb-papier); color:var(--lb-rose-dark); } body.lb-seite .cmp-shop-gateways label:has(input:checked) small{ color:var(--lb-tinte); } body.lb-seite .cmp-shop-gateways label:first-of-type{ border-top:0; } body.lb-seite .cmp-shop-gateways label small{ display:block; margin:4px 0 0 26px; font-weight:400; color:var(--lb-grau); font-size:13.5px; } body.lb-seite .cmp-shop-gateways input[type="radio"]{ accent-color:var(--lb-rose); margin-right:8px; } body.lb-seite .cmp-shop-consent{ display:flex; gap:14px; align-items:flex-start; background:var(--lb-papier); border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); padding:17px 19px; margin:0 0 18px; font-size:14.5px; line-height:1.55; } body.lb-seite .cmp-shop-consent input{ margin:2px 0 0; flex:0 0 auto; width:18px; height:18px; accent-color:var(--lb-rose); } body.lb-seite .cmp-shop-coupon{ margin:0 0 16px; } body.lb-seite .cmp-shop-coupon label{ display:block; font:700 11px var(--lb-text); letter-spacing:.18em; text-transform:uppercase; color:var(--lb-rose); margin:0 0 6px; } body.lb-seite .cmp-shop-coupon__row{ display:flex; gap:8px; } body.lb-seite .cmp-shop-coupon__row input{ flex:1; min-width:0; padding:12px 13px; border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); font:15.5px var(--lb-text); color:var(--lb-tinte); background:#fff; box-shadow:none; height:auto; margin:0; } body.lb-seite .cmp-shop-coupon__row input:not(:placeholder-shown){ text-transform:uppercase; } body.lb-seite .cmp-shop-coupon__row .cmp-shop-btn{ width:auto; flex:0 0 auto; } body.lb-seite .cmp-shop-btn--ghost{ background:transparent; color:var(--lb-tinte) !important; border-color:var(--lb-linie); } body.lb-seite .cmp-shop-btn--ghost:hover{ background:#fff; border-color:var(--lb-tinte); } body.lb-seite .cmp-shop-coupon-note{ margin:0 0 26px; font-size:14px; color:var(--lb-grau); } body.lb-seite .cmp-shop-coupon-note strong{ color:var(--lb-tinte); } body.lb-seite .cmp-shop-legal{ font-size:13.5px; color:var(--lb-grau); margin:0 0 24px !important; } body.lb-seite .cmp-shop-legal a{ color:var(--lb-rose-dark); font-weight:700; } body.lb-seite .cmp-shop-btn--big{ padding:17px 28px; font-size:16.5px; } body.lb-seite .cmp-shop-cancel{ margin-top:30px; text-align:center; } body.lb-seite .cmp-shop-link{ background:none; border:0; padding:0; color:var(--lb-grau); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:inherit; font-size:13.5px; } body.lb-seite .cmp-shop-box{ padding:18px 20px; border-radius:var(--lb-radius); background:var(--lb-karte); border:1.5px solid var(--lb-linie); border-left:4px solid var(--lb-grau); line-height:1.55; } body.lb-seite .cmp-shop-box--ok{ border-left-color:var(--lb-online); } body.lb-seite .cmp-shop-box--warn{ border-left-color:#e0a63a; } body.lb-seite .cmp-shop-box--wait{ border-left-color:var(--lb-rose); } body.lb-seite .cmp-shop-box strong{ font-family:var(--lb-titel); font-weight:600; font-size:17px; } body.lb-seite .cmp-shop-box pre{ white-space:pre-wrap; margin:12px 0; padding:12px 14px; background:var(--lb-papier); border:1px dashed var(--lb-linie); border-radius:var(--lb-radius); font:15px/1.5 var(--lb-text); } body.lb-seite .cmp-shop-box .cmp-shop-btn{ width:auto; margin-top:12px; } /* ========================================================================== 3 REGISTRIERUNG & ANMELDUNG — Zettel auf Papier ========================================================================== */ body.lb-seite--auth #content{ background:var(--lb-papier); } body.lb-seite .cmp-auth{ max-width:480px; margin:0 auto; } body.lb-seite .cmp-auth *, body.lb-seite .cmp-shop *{ box-sizing:border-box; } body.lb-seite .cmp-auth-form{ display:flex; flex-direction:column; gap:14px; background:var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:6px; padding:28px 28px 26px; box-shadow:0 14px 40px rgba(31,20,32,.08); } body.lb-seite .cmp-auth-form label{ display:flex; flex-direction:column; gap:6px; font:700 13px var(--lb-text); letter-spacing:.02em; color:var(--lb-tinte); } body.lb-seite .cmp-auth-form label small{ font-weight:400; color:var(--lb-grau); } body.lb-seite .cmp-auth-form input[type="text"], body.lb-seite .cmp-auth-form input[type="email"], body.lb-seite .cmp-auth-form input[type="password"], body.lb-seite .cmp-auth-form input[type="date"]{ width:100%; padding:12px 13px; border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); font:15.5px var(--lb-text); color:var(--lb-tinte); background:#fff; box-shadow:none; height:auto; margin:0; } body.lb-seite .cmp-auth-form input:focus{ outline:none; border-color:var(--lb-rose); box-shadow:0 0 0 3px rgba(196,67,110,.14); } body.lb-seite .cmp-auth-check{ flex-direction:row !important; align-items:flex-start; gap:10px !important; font-weight:400 !important; font-size:14.5px !important; letter-spacing:0 !important; padding-top:4px; } body.lb-seite .cmp-auth-check input{ margin-top:3px; accent-color:var(--lb-rose); } body.lb-seite .cmp-auth-check a{ color:var(--lb-rose-dark); font-weight:700; } body.lb-seite .cmp-auth-note{ margin:0; font-size:13.5px; color:var(--lb-grau); } body.lb-seite .cmp-auth-btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 22px; border-radius:999px; border:1.5px solid var(--lb-rose); background:var(--lb-rose); color:#fff !important; font:700 16px var(--lb-text); text-transform:none; letter-spacing:0; text-decoration:none !important; cursor:pointer; margin:6px 0 0; transition:background .18s ease; } body.lb-seite .cmp-auth-btn:hover{ background:var(--lb-rose-dark); border-color:var(--lb-rose-dark); } body.lb-seite .cmp-auth-form > .cmp-auth-btn{ align-self:stretch; } body.lb-seite .cmp-auth-btn--ghost{ background:transparent; color:var(--lb-tinte) !important; border-color:var(--lb-linie); } body.lb-seite .cmp-auth-btn--ghost:hover{ background:#fff; border-color:var(--lb-tinte); } body.lb-seite .cmp-auth-btn--danger{ background:#b3261e; border-color:#b3261e; } body.lb-seite .cmp-auth-btn--danger:hover{ background:#8f1d17; border-color:#8f1d17; } body.lb-seite .cmp-auth-alt{ font-size:14.5px; color:var(--lb-grau); margin:14px 0 0; text-align:center; } body.lb-seite .cmp-auth-alt a{ color:var(--lb-rose-dark); font-weight:700; } body.lb-seite .cmp-auth-error, body.lb-seite .cmp-auth-ok, body.lb-seite .cmp-auth-warn{ padding:12px 16px; border-radius:var(--lb-radius); margin-bottom:16px; font-size:14.5px; line-height:1.5; border:1.5px solid transparent; } body.lb-seite .cmp-auth-error{ background:#fdecea; border-color:#f3c3be; color:#8f1d17; } body.lb-seite .cmp-auth-ok{ background:#e9f7ee; border-color:#bfe6cb; color:#1a5d2e; } body.lb-seite .cmp-auth-warn{ background:#fff7e6; border-color:#f0d9a6; color:#6b5321; } body.lb-seite .cmp-auth-link{ background:none; border:0; padding:0; color:var(--lb-rose-dark); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; } body.lb-seite .cmp-inline-form{ display:inline; } body.lb-seite .cmp-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Schon angemeldet: der Hinweis als Zettel mit Button */ body.lb-seite--auth .cmp-auth > p{ background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:6px; padding:26px 24px; text-align:center; font-size:16px; box-shadow:0 14px 40px rgba(31,20,32,.08); } body.lb-seite--auth .cmp-auth > p a{ display:inline-flex; margin:14px auto 0; padding:12px 22px; border-radius:999px; background:var(--lb-rose); color:#fff !important; font-weight:700; text-decoration:none !important; } body.lb-seite--auth .cmp-auth > p a:hover{ background:var(--lb-rose-dark); } body.lb-seite--auth .cmp-auth > p a + a{ background:transparent; color:var(--lb-tinte) !important; border:1.5px solid var(--lb-linie); margin-left:8px; } /* Handschrift unter dem Zettel */ body.lb-seite .cmp-auth::after{ content:none; display:block; text-align:center; font-family:var(--lb-hand); font-size:24px; color:var(--lb-rose-dark); margin-top:22px; } /* ========================================================================== 4 KONTO ========================================================================== */ body.lb-seite .cmp-account{ max-width:none; } body.lb-seite .cmp-account .cmp-auth-form{ box-shadow:none; padding:18px 0 6px; border:0; max-width:520px; background:transparent; } body.lb-seite .cmp-account-status{ display:grid; grid-template-columns:1fr 1fr 1.4fr auto; gap:14px; padding:0 !important; border:0 !important; margin:0 0 22px; background:transparent !important; align-items:stretch; } body.lb-seite .cmp-account-status div{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-top:3px solid var(--lb-rose); border-radius:var(--lb-radius); } body.lb-seite .cmp-account-status span{ font:700 11px var(--lb-text); letter-spacing:.18em; text-transform:uppercase; color:var(--lb-rose); } body.lb-seite .cmp-account-status strong{ font-family:var(--lb-titel); font-weight:600; font-size:18px; color:var(--lb-tinte); overflow-wrap:anywhere; } body.lb-seite .cmp-account-status .cmp-auth-btn{ grid-column:auto; align-self:center; justify-self:end; margin:0; white-space:nowrap; } body.lb-seite .cmp-account-section{ background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-left:4px solid var(--lb-rose); border-radius:var(--lb-radius); padding:0 20px; margin-bottom:12px; } body.lb-seite .cmp-account-section summary{ padding:16px 0; font-family:var(--lb-titel); font-weight:600; font-size:17px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; } body.lb-seite .cmp-account-section summary::after{ content:"›"; font-size:22px; color:var(--lb-rose); transition:transform .18s ease; } body.lb-seite .cmp-account-section[open] summary::after{ transform:rotate(90deg); } body.lb-seite .cmp-account-section summary::-webkit-details-marker{ display:none; } body.lb-seite .cmp-account-section > *:not(summary){ margin-bottom:18px; } body.lb-seite .cmp-account-section .cmp-auth-form p{ margin:0; color:var(--lb-grau); font-size:14.5px; } body.lb-seite .cmp-auth-danger{ margin-top:16px !important; padding-top:18px !important; border-top:1px dashed var(--lb-linie) !important; } body.lb-seite .cmp-account .cmp-auth-alt{ text-align:left; } body.lb-seite .cmp-account-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; padding-top:22px; border-top:1px dashed var(--lb-linie); } body.lb-seite .cmp-account-go{ display:inline-flex; flex-direction:column; gap:2px; padding:14px 22px 14px 20px; border-radius:var(--lb-radius); background:var(--lb-nacht); color:#fff !important; text-decoration:none !important; border:1.5px solid var(--lb-nacht); background-image:repeating-linear-gradient(58deg, transparent 0 44px, rgba(255,255,255,.05) 44px 45.5px); box-shadow:0 14px 30px rgba(31,20,32,.22); transition:transform .18s ease, box-shadow .18s ease; } body.lb-seite .cmp-account-go:hover{ transform:translateY(-2px); box-shadow:0 18px 36px rgba(31,20,32,.3); } body.lb-seite .cmp-account-go__k{ font-family:var(--lb-hand); font-size:17px; color:var(--lb-gold); line-height:1; } body.lb-seite .cmp-account-go__t{ font-family:var(--lb-titel); font-weight:600; font-size:21px; letter-spacing:-.01em; line-height:1.1; } body.lb-seite .cmp-account-out{ color:var(--lb-grau) !important; font-size:14.5px; text-decoration:underline; text-underline-offset:3px; } body.lb-seite .cmp-account-out:hover{ color:var(--lb-tinte) !important; } @media (max-width:520px){ body.lb-seite .cmp-account-foot{ flex-direction:column; align-items:stretch; } body.lb-seite .cmp-account-go{ text-align:center; align-items:center; } body.lb-seite .cmp-account-out{ text-align:center; } } body.lb-seite .cmp-account .cmp-auth-warn, body.lb-seite .cmp-account .cmp-auth-ok, body.lb-seite .cmp-account .cmp-auth-error{ margin-bottom:18px; } /* ========================================================================== 5 RECHTSTEXTE -------------------------------------------------------------------------- Plugin-Entwürfe sind flaches HTML (h2/h3/p). Jede h2 bekommt eine Kante, der erste Absatz („Entwurf – vom Anwalt prüfen lassen“) wird zum Zettel. ========================================================================== */ body.lb-seite--recht .entry-content{ max-width:920px; margin:0 auto; font-size:15.5px; line-height:1.7; color:var(--lb-tinte); } body.lb-seite--recht .entry-content > p:first-of-type{ border-radius:var(--lb-radius); color:#6b5321; font-size:14px; } body.lb-seite--recht .entry-content h2{ font-family:var(--lb-titel) !important; font-weight:600 !important; font-size:22px !important; text-transform:none !important; letter-spacing:-.01em; color:var(--lb-tinte) !important; margin:0 0 12px !important; } body.lb-seite--recht .entry-content h3{ font-family:var(--lb-titel) !important; font-weight:600 !important; font-size:17px !important; text-transform:none !important; color:var(--lb-tinte) !important; margin:22px 0 6px !important; } body.lb-seite--recht .entry-content p{ margin:0 0 12px; } body.lb-seite--recht .entry-content a{ color:var(--lb-rose-dark); font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; } body.lb-seite--recht .entry-content strong{ color:var(--lb-tinte); } body.lb-seite--recht .entry-content em{ color:var(--lb-grau); } body.lb-seite--recht .entry-content ul{ margin:0 0 12px 20px; } /* ========================================================================== 6 MOBIL ========================================================================== */ @media (max-width:849px){ .lb-kopf-seite{ padding:28px 22px 26px; margin:16px 0 24px; } body.lb-seite .cmp-account-status{ grid-template-columns:1fr; } body.lb-seite .cmp-auth-form{ padding:22px 18px 20px; } } /* ===== Pakete: „Für wen?“ mit Bildern ===== */ body.lb-seite .cmp-shop-who{ display:block; padding:6px 18px 8px; background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); margin:0 0 26px; } body.lb-seite .cmp-shop-who__list{ display:flex; flex-wrap:wrap; gap:10px; } body.lb-seite .cmp-shop-who__item{ display:flex; flex-direction:column; align-items:center; gap:6px; width:80px; padding:8px 4px 6px; text-align:center; text-decoration:none !important; color:var(--lb-tinte) !important; background:transparent; border:1.5px solid transparent; border-radius:8px; cursor:pointer; font:inherit; font-weight:400; transition:none; text-transform:none !important; letter-spacing:0 !important; } body.lb-seite .cmp-shop-who__item b{ display:block; margin-top:2px; font-weight:700; font-size:12.5px; line-height:1.15; text-transform:none; } body.lb-seite .cmp-shop-who__item small{ color:var(--lb-grau); font-size:11px; } body.lb-seite .cmp-shop-summary img{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 12%; flex:0 0 auto; margin-right:14px; } /* ===== Wunschfigur: Fragebogen und Paket-Kachel ===== */ body.lb-seite .cmp-custom-form textarea{ width:100%; padding:12px 13px; border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); font:15px var(--lb-text); color:var(--lb-tinte); background:#fff; min-height:96px; resize:vertical; box-shadow:none; } body.lb-seite .cmp-custom-form textarea:focus{ outline:none; border-color:var(--lb-rose); box-shadow:0 0 0 3px rgba(196,67,110,.14); } body.lb-seite .cmp-custom-form label{ font-family:var(--lb-titel); font-weight:600; font-size:17px; letter-spacing:0; gap:8px; } body.lb-seite .cmp-custom-form label small{ font-family:var(--lb-text); font-weight:400; font-size:13.5px; color:var(--lb-grau); line-height:1.45; } body.lb-seite .cmp-custom-price{ display:grid; grid-template-columns:1fr auto; gap:2px 16px; align-items:center; padding:16px 18px; border:2px solid var(--lb-rose); border-radius:var(--lb-radius); background:var(--lb-hatch), #fff8fa; margin-top:6px; } body.lb-seite .cmp-custom-price span{ font-family:var(--lb-titel); font-weight:600; font-size:18px; } body.lb-seite .cmp-custom-price strong{ font-family:var(--lb-titel); font-weight:600; font-size:30px; grid-row:1 / 3; } body.lb-seite .cmp-custom-price small{ color:var(--lb-grau); font-size:13px; } body.lb-seite--custom .cmp-auth::after{ content:"Sie gibt es noch nicht. Noch."; display:block; text-align:center; font-family:var(--lb-hand); font-size:24px; color:var(--lb-rose-dark); margin-top:22px; } body.lb-seite--auth .cmp-auth::after{ content:"Sie wartet schon."; } body.lb-seite .cmp-shop-custom{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; margin:40px 0 0; padding:26px 28px; background:var(--lb-hatch), var(--lb-karte); border:2px solid var(--lb-rose); border-radius:var(--lb-radius); } body.lb-seite .cmp-shop-custom .cmp-shop-h{ margin:0 0 4px !important; } body.lb-seite .cmp-shop-custom .cmp-shop-h::before{ content:"Maßanfertigung"; } body.lb-seite .cmp-shop-custom__text{ margin:8px 0 0 !important; color:var(--lb-tinte) !important; max-width:60ch; } body.lb-seite .cmp-shop-custom__side{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:200px; text-align:center; } body.lb-seite .cmp-shop-custom__side strong{ font-family:var(--lb-titel); font-weight:600; font-size:38px; line-height:1; } body.lb-seite .cmp-shop-custom__side small{ color:var(--lb-grau); } body.lb-seite .cmp-shop-custom__side .cmp-shop-btn{ width:auto; margin-top:8px; } @media (max-width:849px){ body.lb-seite .cmp-shop-custom{ grid-template-columns:1fr; } } /* ===== „Für wen?“ nach Rubriken ===== */ body.lb-seite .cmp-shop-who__group{ display:flex; align-items:flex-start; gap:14px; padding:10px 0; border-top:1px dashed var(--lb-linie); } body.lb-seite .cmp-shop-who__group:first-of-type{ border-top:0; } body.lb-seite .cmp-shop-who__title{ flex:0 0 110px; padding-top:22px; font:700 11px var(--lb-text); letter-spacing:.18em; text-transform:uppercase; color:var(--lb-rose); } @media (max-width:640px){ body.lb-seite .cmp-shop-who__group{ flex-direction:column; gap:4px; } body.lb-seite .cmp-shop-who__title{ padding-top:4px; } } /* ===== Paketseite als Auswahl (0.11): Schritte, Kästchen, Kauf-Leiste ===== */ body.lb-seite .cmp-step{ margin:0 0 34px; } body.lb-seite .cmp-step .cmp-shop-h::before{ content:none; } body.lb-seite .cmp-step .cmp-shop-h{ display:flex; align-items:center; gap:12px; margin:0 0 6px !important; } body.lb-seite .cmp-step .cmp-shop-h em{ font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--lb-rose); color:#fff; font:700 14px var(--lb-text); flex:0 0 auto; } body.lb-seite .cmp-shop-hint{ color:#8f1d17; font-weight:700; margin:10px 0 0 !important; } /* Kästchen */ body.lb-seite .cmp-shop-card input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; } body.lb-seite .cmp-shop-card-check{ position:absolute; top:14px; right:14px; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--lb-linie); background:#fff; transition:all .15s ease; } body.lb-seite .cmp-shop-card-check::after{ content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); opacity:0; } body.lb-seite .cmp-shop-card.is-featured{ border:1.5px solid var(--lb-linie); background:var(--lb-hatch), var(--lb-karte); } body.lb-seite .cmp-shop-card.is-selected{ border:2px solid var(--lb-rose); background:var(--lb-hatch), #fff8fa; transform:translateY(-2px); } body.lb-seite .cmp-shop-card.is-selected .cmp-shop-card-check{ background:var(--lb-rose); border-color:var(--lb-rose); } body.lb-seite .cmp-shop-card.is-selected .cmp-shop-card-check::after{ opacity:1; } body.lb-seite .cmp-shop-card-unit, body.lb-seite .cmp-shop-card-price, body.lb-seite .cmp-shop-card-desc{ display:block; } /* Kauf-Leiste */ body.lb-seite .cmp-shop-bar{ position:static; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; margin:var(--lb-abstand) 0; background:var(--lb-nacht); color:#fff; border-radius:8px; box-shadow:0 18px 40px rgba(31,20,32,.25); background-image:repeating-linear-gradient(58deg, transparent 0 44px, rgba(255,255,255,.04) 44px 45.5px); } body.lb-seite .cmp-shop-bar__sum{ display:flex; flex-direction:column; gap:2px; } body.lb-seite .cmp-shop-bar__sum span{ font-size:14px; color:rgba(255,255,255,.75); } body.lb-seite .cmp-shop-bar__sum b{ font-family:var(--lb-titel); font-weight:600; font-size:26px; line-height:1; } body.lb-seite .cmp-shop-bar .cmp-shop-btn{ width:auto; margin:0; padding:15px 30px; } @media (max-width:640px){ body.lb-seite .cmp-shop-bar{ flex-direction:column; align-items:stretch; } body.lb-seite .cmp-shop-bar .cmp-shop-btn{ width:100%; } } /* Avatare: Gesicht oben, nicht Mitte */ /* Wunschfigur-Kachel: ganz klickbar, über der Kauf-Leiste */ body.lb-seite a.cmp-shop-custom{ text-decoration:none !important; color:inherit; margin:34px 0 8px; transition:border-color .15s ease, transform .15s ease; } body.lb-seite a.cmp-shop-custom:hover{ border-color:var(--lb-tinte); transform:translateY(-2px); } body.lb-seite .cmp-shop-custom .cmp-shop-btn{ display:inline-flex; } /* ===== Abstände Paketseite – ein Maß für alles ===== */ body.lb-seite .cmp-shop{ --lb-abstand:44px; } body.lb-seite .cmp-shop-account{ margin-bottom:var(--lb-abstand); } body.lb-seite .cmp-step{ margin-bottom:var(--lb-abstand); } body.lb-seite .cmp-shop-custom, body.lb-seite a.cmp-shop-custom{ margin:0 0 18px; padding:30px 32px; } body.lb-seite .cmp-shop-custom .cmp-shop-btn{ padding:14px 26px; margin-top:12px; } body.lb-seite .cmp-shop-note{ margin:0 0 var(--lb-abstand) !important; } body.lb-seite .cmp-shop-orders{ margin-top:6px; } body.lb-seite .cmp-shop-custom--gift{ border-color:#c9a24a; } body.lb-seite .cmp-shop-custom--gift .cmp-shop-h::before{ content:"Wunschgeschenk"; color:#a8842f; } body.lb-seite .cmp-shop-custom--gift .cmp-shop-btn{ background:#a8842f; border-color:#a8842f; } body.lb-seite .cmp-shop-custom--gift .cmp-shop-btn:hover{ background:#8c6c22; } /* ===== Wunsch-Seiten: Hinweis, drei Kacheln ===== */ body.lb-seite .cmp-custom-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 26px; } body.lb-seite .cmp-custom-tile{ padding:16px 16px 14px; background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-top:3px solid var(--lb-rose); border-radius:var(--lb-radius); } body.lb-seite .cmp-custom-tile b{ display:block; font-family:var(--lb-titel); font-weight:600; font-size:16px; margin-bottom:4px; } body.lb-seite .cmp-custom-tile span{ font-size:13.5px; color:var(--lb-grau); line-height:1.45; } body.lb-seite .cmp-custom-hint{ background:#fff8e6; border:1px dashed #e6cf9a; border-radius:var(--lb-radius); padding:12px 16px; font-size:14.5px; line-height:1.5; color:#6b5321; } body.lb-seite .cmp-custom-form select{ width:100%; padding:11px 13px; border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); font:15px var(--lb-text); background:#fff; height:auto; box-shadow:none; } body.lb-seite--custom .cmp-custom--gift .cmp-custom-tile{ border-top-color:#c9a24a; } @media (max-width:640px){ body.lb-seite .cmp-custom-tiles{ grid-template-columns:1fr; } } /* ===== Wunschfigur-Seite: verschwommener Avatar im Seitenkopf (URL anpassen) ===== */ body.lb-seite--custom .lb-kopf-seite{ background-image:linear-gradient(90deg, var(--lb-nacht) 30%, rgba(31,20,32,.55) 52%, rgba(31,20,32,.05) 80%), url(/media/bild/wunschfigur-2.jpg); background-size:cover, cover; background-position:center, center 40%; background-repeat:no-repeat; min-height:320px; } @media (max-width:849px){ body.lb-seite--custom .lb-kopf-seite{ background-image:linear-gradient(90deg, var(--lb-nacht) 42%, rgba(31,20,32,.6) 66%, rgba(31,20,32,.08) 100%), url(/media/bild/wunschfigur-2.jpg); background-size:cover, cover; background-position:center, 82% 30%; min-height:0; padding:24px 20px 22px; } body.lb-seite--custom .lb-kopf-seite p{ max-width:34ch; } } /* Wunsch-Seiten: Kacheln volle Breite, Formular schmal */ body.lb-seite--custom .cmp-auth{ max-width:none; } body.lb-seite--custom .cmp-custom-tiles{ max-width:none; } body.lb-seite--custom .cmp-auth-form, body.lb-seite--custom .cmp-auth-warn, body.lb-seite--custom .cmp-auth-ok, body.lb-seite--custom .cmp-auth-error{ max-width:680px; margin-left:auto; margin-right:auto; } body.lb-seite--custom .cmp-auth::after{ max-width:680px; margin-left:auto; margin-right:auto; } /* ===== Mobil: Preis in einer Zeile, Footer kompakt ===== */ body.lb-seite .cmp-custom-price strong{ white-space:nowrap; } @media (max-width:640px){ body.lb-seite .cmp-custom-price{ grid-template-columns:1fr; text-align:left; } body.lb-seite .cmp-custom-price strong{ grid-row:auto; font-size:32px; margin:4px 0 2px; } body.lb-seite .lb-kopf-seite{ padding:24px 20px 22px; } body.lb-seite .lb-kopf-seite h1{ font-size:28px !important; } body.lb-seite .cmp-custom-tiles{ gap:8px; } body.lb-seite .cmp-custom-tile{ padding:12px 14px 10px; } } @media (max-width:849px){ body.lb-seite .lb-kopf-seite{ min-height:0; } } /* Anker-Ziel unter fester Kopfzeile */ body.lb-seite #wunschgeschenk, body.lb-seite #wunschfigur{ scroll-margin-top:110px; } /* Schon angemeldet – Zettel */ body.lb-seite--auth .cmp-auth > p{ display:none; } body.lb-seite--auth .cmp-auth-in{ background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:6px; box-shadow:0 14px 40px rgba(31,20,32,.08); padding:30px 26px 26px; } body.lb-seite--auth .cmp-auth-in__avatar{ font-family:var(--lb-titel); background:var(--lb-rose-soft); color:var(--lb-rose-dark); width:64px; height:64px; font-size:26px; } body.lb-seite--auth .cmp-auth-in__text strong{ font-family:var(--lb-titel); font-weight:600; font-size:22px; letter-spacing:-.01em; } body.lb-seite--auth .cmp-auth-in__text span{ color:var(--lb-grau); } body.lb-seite--auth .cmp-auth-in__actions .cmp-auth-btn{ padding:12px 22px; } body.lb-seite--auth .cmp-auth-link-btn{ color:var(--lb-grau); } /* ========================================================================== RECHTSTEXTE – gestaltete Seiten (Kurz gesagt, Inhalt, Karten, Datenblatt) ========================================================================== */ .lb-legal__k{ display:block; font:700 11px var(--lb-text); letter-spacing:.18em; text-transform:uppercase; color:var(--lb-rose); margin:0 0 8px; } .lb-legal__kurz{ background:var(--lb-nacht-2); color:#fff; border-radius:8px; padding:22px 24px 24px; margin:0 0 22px; background-image:repeating-linear-gradient(58deg, transparent 0 44px, rgba(255,255,255,.035) 44px 45.5px); } .lb-legal__kurz .lb-legal__k{ color:var(--lb-gold); } .lb-legal__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .lb-legal__tile{ padding:14px 16px; background:rgba(255,255,255,.07); border-top:3px solid var(--lb-rose); border-radius:var(--lb-radius); } .lb-legal__tile b{ display:block; font-family:var(--lb-titel); font-weight:600; font-size:17px; color:#fff; margin-bottom:4px; } .lb-legal__tile span{ font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.72); } .lb-legal__box{ background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-left:4px solid var(--lb-rose); border-radius:var(--lb-radius); padding:20px 24px 18px; margin:0 0 14px; scroll-margin-top:110px; } .lb-legal__box h2{ font-family:var(--lb-titel) !important; font-weight:600 !important; font-size:22px !important; letter-spacing:-.01em; margin:0 0 12px !important; } .lb-legal__box h3{ font-family:var(--lb-titel) !important; font-weight:600 !important; font-size:16.5px !important; margin:18px 0 6px !important; display:flex; gap:10px; align-items:baseline; } .lb-legal__box h3 span{ font:700 11px var(--lb-text); color:var(--lb-rose); letter-spacing:.06em; } .lb-legal__box p{ margin:0 0 10px; font-size:15.5px; line-height:1.65; } .lb-legal__box p:last-child{ margin-bottom:0; } .lb-legal__box p strong{ color:var(--lb-tinte); } .lb-legal__dl{ display:grid; grid-template-columns:220px 1fr; gap:0; margin:0; } .lb-legal__dl dt{ font:700 12px var(--lb-text); letter-spacing:.08em; text-transform:uppercase; color:var(--lb-grau); padding:11px 0; border-top:1px dashed var(--lb-linie); } .lb-legal__dl dd{ margin:0; padding:10px 0; border-top:1px dashed var(--lb-linie); font-size:15.5px; line-height:1.55; } .lb-legal__dl dt:first-of-type, .lb-legal__dl dd:first-of-type{ border-top:0; } .lb-legal__formular{ border-left-color:#c9a24a; background:var(--lb-hatch), #fffaf0; } .lb-legal__formular .lb-legal__k{ color:#a8842f; } .lb-legal__formular p{ font-family:var(--lb-text); } .lb-legal__btn{ display:inline-flex; align-items:center; padding:12px 22px; border-radius:999px; background:var(--lb-rose); color:#fff !important; font-weight:700; text-decoration:none !important; border:0 !important; margin-top:6px; } .lb-legal__btn:hover{ background:var(--lb-rose-dark); } @media (max-width:849px){ .lb-legal__tiles{ grid-template-columns:1fr; } .lb-legal__dl{ grid-template-columns:1fr; } .lb-legal__dl dt{ padding-bottom:2px; } .lb-legal__dl dd{ border-top:0; padding-top:0; } .lb-legal__box{ padding:16px 16px 14px; } } /* Rechtsseiten: Sprungmarken-Leiste ausblenden */ .lb-legal__toc{ display:none; } /* Seite „So funktioniert’s“: Kopf im Container, Blöcke darunter in voller Breite */ body.lb-seite--tour .lb-kopf-seite{ margin-bottom:0; } body.lb-seite--tour #content{ background:var(--lb-papier); padding-bottom:0; } body.lb-seite--tour .lb-ende{ background:var(--lb-creme); } /* „Für wen?“ – fester Kreis, Zoom innen, keine Versalien */ body.lb-seite .cmp-shop-who__pic{ width:56px; height:56px; margin:0 auto 4px; border-radius:50%; overflow:hidden; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--lb-linie); position:relative; transition:box-shadow .4s ease-out; } body.lb-seite .cmp-shop-who__pic img{ width:100%; height:100%; border-radius:inherit; border:0; box-shadow:none; object-fit:cover; object-position:50% 0; transform:scale(1.35); transform-origin:50% 22%; transition:transform .6s ease-out; } body.lb-seite .cmp-shop-who__item:hover .cmp-shop-who__pic{ transform:translateY(-2px); } /* Paket-Kacheln: drei Spalten */ @media (max-width:849px){ body.lb-seite .cmp-shop-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ body.lb-seite .cmp-shop-grid{ grid-template-columns:1fr; } } /* „Für wen?“ – Endfassung: Kreis fest, Name darunter, Hover in Rosé */ body.lb-seite .cmp-shop-who__item.is-active{ background:transparent; border-color:transparent; } body.lb-seite .cmp-shop-who__item.is-active b{ color:var(--lb-rose-dark); } /* Bio-Karte unter „Für wen?“ – im Seitenstil */ body.lb-seite .cmp-shop-bio{ background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-left:4px solid var(--lb-rose); border-radius:var(--lb-radius); } body.lb-seite .cmp-shop-bio h3{ font-family:var(--lb-titel); font-weight:600; letter-spacing:-.01em; text-transform:none; } body.lb-seite .cmp-shop-bio__tag{ color:var(--lb-grau); } body.lb-seite .cmp-shop-bio__traits span{ color:var(--lb-rose-dark); background:var(--lb-rose-soft); } body.lb-seite .cmp-shop-bio__text{ color:var(--lb-tinte); } /* Bilder-Hinweis in der Bio: Plakette (Stil aus lieblings-start.css) + Erklärung darunter */ body.lb-seite .cmp-shop-bio__photos{ margin:14px 0 14px; } body.lb-seite .cmp-shop-bio__photos .cmp-gallery-photos{ margin:0; } body.lb-seite .cmp-shop-bio__photos small{ display:block; margin:7px 0 0; max-width:48ch; color:var(--lb-grau); font-size:12.5px; line-height:1.5; } body.lb-seite .cmp-shop-bio__ok{ font-family:var(--lb-hand); font-size:20px; font-weight:400; color:#1a7f37; } body.lb-seite .cmp-shop-bio{ overflow:hidden; padding:0; } body.lb-seite .cmp-shop-bio__pic{ background:var(--lb-rose-soft); } @media (max-width:640px){ body.lb-seite .cmp-shop-bio__body{ padding:16px 16px 18px; } } /* Bio-Karte: mehr Luft, Hinweis unten; mobil ganzes Bild */ body.lb-seite .cmp-shop-bio__body{ display:flex; flex-direction:column; padding:30px 32px 28px 8px; min-height:100%; } body.lb-seite .cmp-shop-bio__text{ margin-top:6px; } body.lb-seite .cmp-shop-bio__ok{ margin-top:auto; padding-top:22px; } @media (max-width:640px){ body.lb-seite .cmp-shop-bio__pic img{ aspect-ratio:4/5; max-height:none; } body.lb-seite .cmp-shop-bio__body{ padding:18px 18px 20px; } body.lb-seite .cmp-shop-bio__ok{ padding-top:14px; } } /* „Für wen?“: Hover dezent */ body.lb-seite .cmp-shop-who__item:hover .cmp-shop-who__pic{ box-shadow:0 0 0 2px var(--lb-rose-soft), 0 0 0 3px rgba(196,67,110,.55); } body.lb-seite .cmp-shop-who__item.is-active .cmp-shop-who__pic, body.lb-seite .cmp-shop-who__item.is-active:hover .cmp-shop-who__pic{ box-shadow:0 0 0 3px var(--lb-rose); } /* „Für wen?“: ruhiger Hover – kein Federn, lange lineare Blende */ body.lb-seite .cmp-shop-who__item:hover .cmp-shop-who__pic img{ transform:scale(1.38); } /* Bio-Karte: Video */ body.lb-seite .cmp-shop-bio__pic{ position:relative; } body.lb-seite .cmp-shop-bio__pic video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; } /* Wunschgeschenk-Seite: eigenes Kopfbild */ body.lb-seite--customgift .lb-kopf-seite{ background-image:linear-gradient(90deg, var(--lb-nacht) 30%, rgba(31,20,32,.55) 52%, rgba(31,20,32,.05) 80%), url(/media/bild/wunschgeschenk.jpg); } @media (max-width:849px){ body.lb-seite--customgift .lb-kopf-seite{ background-image:linear-gradient(90deg, var(--lb-nacht) 42%, rgba(31,20,32,.6) 66%, rgba(31,20,32,.08) 100%), url(/media/bild/wunschgeschenk.jpg); } } body.lb-seite--customgift .lb-kopf-seite .lb-hand{ color:#e9b96f; } /* Zettel „schon angemeldet“ / „noch nicht angemeldet“ auf allen Plugin-Seiten (Konto, Pakete …) */ body.lb-seite .cmp-auth-in{ background:var(--lb-hatch), var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:6px; box-shadow:0 14px 40px rgba(31,20,32,.08); padding:30px 26px 26px; } body.lb-seite .cmp-auth-in__avatar{ font-family:var(--lb-titel); background:var(--lb-rose-soft); color:var(--lb-rose-dark); width:64px; height:64px; font-size:24px; } body.lb-seite .cmp-auth-in__text strong{ font-family:var(--lb-titel); font-weight:600; font-size:22px; letter-spacing:-.01em; } body.lb-seite .cmp-auth-in__text span{ color:var(--lb-grau); } body.lb-seite .cmp-auth-in__actions .cmp-auth-btn{ padding:12px 22px; margin:0; } body.lb-seite .cmp-auth--out{ max-width:480px; margin:0 auto; } body.lb-seite .cmp-auth--out::after{ content:"Sie wartet schon."; display:block; text-align:center; font-family:var(--lb-hand); font-size:24px; color:var(--lb-rose-dark); margin-top:22px; } /* Passwort vergessen / zurücksetzen (Plugin 0.27.0) und Hinweis „E-Mail bestätigen“ */ body.lb-seite .cmp-auth-intro{ margin:0 0 4px; color:var(--lb-grau); font-size:15.5px; line-height:1.55; } body.lb-seite .cmp-auth-warn--verify{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } body.lb-seite .cmp-auth-btn--small{ padding:10px 18px; font-size:14px; margin:0; } body.lb-seite--auth .cmp-auth--lost::after{ content:"Passiert den Besten."; } body.lb-seite--auth .cmp-auth--reset::after{ content:"Und dann zurück zu ihr."; } /* „Wähle deine Figur“: mehr/weniger anzeigen (Plugin 0.28.4) */ body.lb-seite .cmp-shop-who__more{ display:inline-flex; align-items:center; align-self:center; height:56px; margin:8px 4px 6px; padding:0 16px; border:1.5px dashed var(--lb-linie); border-radius:999px; background:#fff; font:700 13px var(--lb-text); color:var(--lb-rose-dark); cursor:pointer; text-transform:none; letter-spacing:0; transition:border-color .18s ease; } body.lb-seite .cmp-shop-who__more:hover{ border-color:var(--lb-rose); } /* Registrierung: „Ich bin“ als Pills (Plugin 0.28.5) */ body.lb-seite .cmp-auth-pills{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } body.lb-seite .cmp-auth-pills__label{ flex-basis:100%; font:700 13px var(--lb-text); letter-spacing:.02em; color:var(--lb-tinte); margin-bottom:2px; } body.lb-seite .cmp-auth-pills label{ display:inline-flex; flex-direction:row; gap:0; margin:0; font-weight:400; letter-spacing:0; } body.lb-seite .cmp-auth-pills input{ position:absolute; opacity:0; width:0; height:0; } body.lb-seite .cmp-auth-pills label span{ display:inline-block; padding:9px 18px; border-radius:999px; border:1.5px solid var(--lb-linie); background:#fff; font:700 14.5px var(--lb-text); color:var(--lb-tinte); cursor:pointer; transition:border-color .18s ease, background .18s ease, color .18s ease; } body.lb-seite .cmp-auth-pills label span:hover{ border-color:var(--lb-tinte); } body.lb-seite .cmp-auth-pills input:checked + span{ background:var(--lb-nacht); border-color:var(--lb-nacht); color:#fff; } /* Paketseite: drei Reiter als große Kacheln (Figur & Paket · Credits · Anfertigungen) */ body.lb-seite .cmp-shop-tabs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:0 0 38px; padding:0; border:0; } body.lb-seite .cmp-shop-tab{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:18px 20px 16px; margin:0; border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); background:var(--lb-hatch), var(--lb-karte); color:var(--lb-tinte); cursor:pointer; position:relative; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } body.lb-seite .cmp-shop-tab b{ font-family:var(--lb-titel); font-weight:600; font-size:22px; letter-spacing:-.01em; line-height:1.1; } body.lb-seite .cmp-shop-tab small{ font:14px var(--lb-text); color:var(--lb-grau); } body.lb-seite .cmp-shop-tab:hover{ border-color:var(--lb-tinte); transform:translateY(-2px); } body.lb-seite .cmp-shop-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); } body.lb-seite .cmp-shop-tab.is-active small{ color:var(--lb-gold); } body.lb-seite .cmp-shop-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:640px){ body.lb-seite .cmp-shop-tabs{ grid-template-columns:1fr; gap:8px; } body.lb-seite .cmp-shop-tab{ flex-direction:row; align-items:baseline; gap:10px; padding:14px 16px; } body.lb-seite .cmp-shop-tab b{ font-size:19px; } body.lb-seite .cmp-shop-tab.is-active::after{ display:none; } } body.lb-seite .cmp-shop-panel{ display:none; } body.lb-seite .cmp-shop-panel.is-active{ display:block; } body.lb-seite .cmp-shop-panel[data-panel="custom"] .cmp-shop-custom, body.lb-seite .cmp-shop-panel[data-panel="custom"] a.cmp-shop-custom{ margin:0 0 18px; } body.lb-seite .cmp-shop-bar[hidden]{ display:none; } /* Kontaktseite: gleiche Optik wie Anmelden, Textfeld dazu */ body.lb-seite .cmp-contact .cmp-auth-form textarea{ width:100%; padding:12px 13px; border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); font:15.5px var(--lb-text); color:var(--lb-tinte); background:#fff; min-height:150px; resize:vertical; box-shadow:none; margin:0; } body.lb-seite .cmp-contact .cmp-auth-form textarea:focus{ outline:none; border-color:var(--lb-rose); box-shadow:0 0 0 3px rgba(196,67,110,.14); } body.lb-seite .cmp-contact .cmp-auth-in__avatar{ background:#e6f6ec; color:#1f8a47; } body.lb-seite--auth .cmp-contact::after{ content:"Ein Mensch liest das."; } /* Konto: Profilbild */ body.lb-seite .cmp-account-avatar{ display:flex; gap:18px; align-items:center; padding:16px 18px; background:var(--lb-karte); border:1.5px solid var(--lb-linie); border-radius:var(--lb-radius); } body.lb-seite .cmp-account-avatar__pic{ width:76px; height:76px; border-radius:50%; overflow:hidden; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--lb-rose-soft, #fde2ea); color:var(--lb-rose-dark); font-family:var(--lb-titel); font-size:30px; font-weight:600; border:2px solid #fff; box-shadow:0 6px 18px rgba(31,20,32,.12); } body.lb-seite .cmp-account-avatar__pic img{ width:100%; height:100%; object-fit:cover; display:block; } body.lb-seite .cmp-account-avatar__body{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-width:0; } body.lb-seite .cmp-file{ position:relative; display:inline-flex; align-items:center; gap:12px; font-weight:400; max-width:100%; } body.lb-seite .cmp-file input[type="file"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; margin:0; } body.lb-seite .cmp-file__btn{ display:inline-flex; align-items:center; padding:10px 18px; border-radius:999px; border:1.5px solid var(--lb-linie); background:#fff; color:var(--lb-tinte); font:700 14.5px var(--lb-text); white-space:nowrap; transition:border-color .15s ease; } body.lb-seite .cmp-file:hover .cmp-file__btn{ border-color:var(--lb-tinte); } body.lb-seite .cmp-file__name{ color:var(--lb-grau); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }