/* ========================================================= cockpit.css – App-Bereich (Auth, Cockpit, Einladung) Baut auf styles.css auf (Dashboard-Klassen werden wiederverwendet). ========================================================= */ /* ---------- Farbwelten (Theme-Klassen am ) ---------- */ .theme-rose{--c-primary:#C65C8A;--c-primary-2:#F2A2B2;--grad-primary:linear-gradient(135deg,#F2A2B2,#C65C8A)} .theme-gold{--c-primary:#C79A3E;--c-primary-2:#EEC98C;--grad-primary:linear-gradient(135deg,#EEC98C,#C79A3E)} .theme-sage{--c-primary:#4E8C7A;--c-primary-2:#9ED0C2;--grad-primary:linear-gradient(135deg,#9ED0C2,#4E8C7A)} .theme-lavender{--c-primary:#7A5EA8;--c-primary-2:#C3B0E0;--grad-primary:linear-gradient(135deg,#C3B0E0,#7A5EA8)} .theme-dusk{--c-primary:#8A4F6D;--c-primary-2:#E08AA0;--grad-primary:linear-gradient(135deg,#E08AA0,#8A4F6D)} .layout-app,.layout-auth{background:var(--c-bg)} /* ---------- Auth (Login / Registrierung) ---------- */ .authWrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr} .authArt{position:relative;background:var(--grad-primary);color:#fff;display:grid;place-items:center;overflow:hidden;padding:40px} .authArt::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.25),transparent 40%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.18),transparent 45%)} .authArtInner{position:relative;max-width:360px} .authArtHeart{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.2);margin-bottom:24px} .authArtHeart .ic{width:32px;height:32px;fill:#fff;color:#fff} .authArtInner h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.15;margin-bottom:20px} .authArtText{color:rgba(255,255,255,.9);font-size:1.05rem} .authArtList{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px} .authArtList li{display:flex;align-items:center;gap:10px;font-weight:500} .authArtList .ic{width:22px;height:22px;background:rgba(255,255,255,.25);border-radius:50%;padding:4px;color:#fff} .authFormSide{display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,5vw,64px);max-width:560px;width:100%;margin:0 auto} .authBrand{display:inline-flex;align-items:center;gap:.5em;font-weight:800;font-size:1.2rem;margin-bottom:30px;color:var(--c-ink)} .authBrand .brandScript{font-family:'Great Vibes',cursive;font-weight:400;font-size:1.5em;color:var(--c-primary)} .authTitle{font-size:clamp(1.8rem,3.4vw,2.4rem);margin-bottom:8px} .authSub{color:var(--c-ink-soft);margin-bottom:28px} .authForm{display:flex;flex-direction:column;gap:16px} .fieldRow{display:grid;grid-template-columns:1fr 1fr;gap:18px} .authForm .field input{font-family:inherit;font-size:1rem;padding:.85em 1.1em;border-radius:var(--radius-s);border:1.5px solid var(--c-line);background:var(--c-bg);transition:border .3s,box-shadow .3s} .authForm .field input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(198,92,138,.12);background:#fff} .authSwitch{margin-top:22px;color:var(--c-ink-soft)} .authSwitch a{color:var(--c-primary);font-weight:700} /* ---------- Cockpit-Topbar ---------- */ .cockTop{position:sticky;top:0;z-index:50;background:rgba(251,245,239,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--c-line)} .cockTopInner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 22px} .cockBrand .brandMark{width:40px;height:40px} .cockWed{display:flex;flex-direction:column;line-height:1.2} .cockWed strong{font-family:'Playfair Display',serif;font-size:1.1rem} .cockWed small{color:var(--c-ink-soft);font-size:.82rem} .cockTopActions{margin-left:auto;display:flex;gap:10px} .cockShell{max-width:1180px;margin:0 auto;padding:26px 22px 70px} .cockLayout{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start} /* Sidebar */ .cockSide{position:sticky;top:86px;background:var(--c-card);border-radius:var(--radius-l);box-shadow:var(--shadow-sm);padding:24px 18px;display:flex;flex-direction:column;gap:22px} .cockMain{min-width:0} .cockMain .dashPanel{background:var(--c-card);border-radius:var(--radius-l);box-shadow:var(--shadow-sm);padding:clamp(20px,3vw,32px)} .cockMain .dashPanel:not(.is-active){display:none} /* ---------- Panel-Formulare ---------- */ .addTaskForm,.inviteForm,.addGuestForm{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px} .addTaskForm input[type=text],.addGuestForm input[type=text]{flex:1;min-width:180px} .addTaskForm input,.inviteForm input,.inviteForm select,.addGuestForm input{font-family:inherit;font-size:.95rem;padding:.7em 1em;border-radius:var(--radius-s);border:1.5px solid var(--c-line);background:var(--c-bg)} .addTaskForm input:focus,.inviteForm input:focus,.inviteForm select:focus,.addGuestForm input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(198,92,138,.1)} /* Aufgaben-Check als Button */ .taskCheck{cursor:pointer;background:none;padding:0;place-content:center} .taskCheck .ic{opacity:0;transition:opacity .25s;display:block} .taskItem.done .taskCheck .ic{opacity:1} .taskCheck:hover{border-color:var(--c-primary)} .taskDel{margin-left:auto;width:30px;height:30px;padding:0;border-radius:50%;display:grid;place-items:center;color:var(--c-ink-soft);opacity:.5;transition:.25s;flex:none} .taskDel .ic{width:16px;height:16px} .taskDel:hover{opacity:1;background:#FBE3E6;color:#B84A5B} .taskItem{gap:12px} /* ---------- Einladungslinks ---------- */ .inviteBox,.guestBox{margin-bottom:30px} .inviteBox h4,.guestBox h4{display:flex;align-items:center;gap:8px;font-size:1.1rem;margin-bottom:8px} .inviteBox h4 .ic,.guestBox h4 .ic{width:20px;height:20px;color:var(--c-primary)} .cockHint{color:var(--c-ink-soft);font-size:.9rem;margin-bottom:14px} .inviteList{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px} .inviteItem{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--c-bg);border-radius:var(--radius-s);flex-wrap:wrap} .inviteRole{font-size:.78rem;font-weight:700;padding:.35em .9em;border-radius:999px;background:rgba(214,162,74,.16);color:var(--c-accent);white-space:nowrap} .inviteRole.role-photographer{background:rgba(127,183,166,.18);color:var(--c-mint)} .inviteRole.role-viewer{background:var(--c-bg-2);color:var(--c-ink-soft)} .inviteRole.role-guest{background:rgba(198,92,138,.12);color:var(--c-primary)} .inviteUrl{flex:1;min-width:160px;font-size:.82rem;padding:.55em .8em;border-radius:10px;border:1.5px solid var(--c-line);background:#fff;color:var(--c-ink-soft)} .inviteDel{opacity:.5} /* ---------- Gäste ---------- */ .guestMenu{font-weight:400;color:var(--c-ink-soft);font-size:.78rem;background:var(--c-bg-2);padding:.1em .5em;border-radius:6px;margin-left:4px} .guestMsg{padding:8px 16px 12px 58px;color:var(--c-ink-soft);font-style:italic;font-size:.88rem;margin-top:-4px} .guestStatus.st-no{color:#B84A5B} /* Gäste-Suche & Rollenfilter */ .guestFilter{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px} .guestSearchWrap{position:relative;flex:1;min-width:200px;display:flex;align-items:center} .guestSearchIcon{position:absolute;left:14px;width:18px;height:18px;color:var(--c-ink-soft);pointer-events:none} .guestSearchWrap input{width:100%;font-family:inherit;font-size:.95rem;padding:.72em 1em .72em 2.7em;border-radius:var(--radius-s);border:1.5px solid var(--c-line);background:var(--c-bg);color:var(--c-ink)} .guestSearchWrap input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(198,92,138,.1);background:#fff} .guestFilter select{min-width:180px;flex:none} .guestNoResults{margin-top:6px} /* ---------- Foto-Upload & Galerie ---------- */ .uploadForm{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:22px} .uploadDrop{flex:1;min-width:240px;display:flex;align-items:center;gap:14px;padding:16px 20px;border:2px dashed var(--c-line);border-radius:var(--radius);cursor:pointer;transition:border .3s,background .3s} .uploadDrop:hover{border-color:var(--c-primary);background:var(--c-bg)} .uploadIcon{width:46px;height:46px;flex:none;border-radius:14px;background:var(--grad-primary);display:grid;place-items:center;color:#fff} .uploadIcon .ic{width:24px;height:24px} .uploadDrop strong{display:block;font-size:.98rem} .uploadDrop small{color:var(--c-ink-soft);font-size:.8rem} .galleryGrid.real{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .photoTile{position:relative;margin:0;border-radius:var(--radius-s);overflow:hidden;aspect-ratio:1;box-shadow:var(--shadow-sm)} .photoTile img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .photoTile:hover img{transform:scale(1.06)} .photoDel{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;opacity:0;transition:.25s} .photoTile:hover .photoDel{opacity:1} .photoDel .ic{width:16px;height:16px} .photoTile figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font-size:.72rem;padding:14px 8px 6px} /* ---------- Dankeskarten ---------- */ .cardDesigns{display:flex;gap:12px;flex-wrap:wrap} .cardDesign{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-s);border:2px solid var(--c-line);cursor:pointer;font-weight:600;font-size:.9rem;transition:border .3s} .cardDesign input{display:none} .cardDesign:has(input:checked){border-color:var(--c-primary)} .cardSwatch{width:22px;height:22px;border-radius:8px;display:inline-block} .cd-rose .cardSwatch,.cardSwatch.cd-rose{background:linear-gradient(135deg,#F2A2B2,#C65C8A)} .cd-gold .cardSwatch,.cardSwatch.cd-gold{background:linear-gradient(135deg,#EEC98C,#C79A3E)} .cd-sage .cardSwatch,.cardSwatch.cd-sage{background:linear-gradient(135deg,#9ED0C2,#4E8C7A)} .cardForm{display:flex;flex-direction:column;gap:16px;max-width:560px} .cardForm .field input,.cardForm .field textarea,.settingsForm .field input,.settingsForm .field textarea{font-family:inherit;font-size:1rem;padding:.8em 1em;border-radius:var(--radius-s);border:1.5px solid var(--c-line);background:var(--c-bg);width:100%} .cardForm textarea,.settingsForm textarea{resize:vertical} .cardHistory{margin-top:28px} .cardHistory h4{margin-bottom:12px} .cardHistItem{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--c-bg);border-radius:var(--radius-s);margin-bottom:8px} .cardHistItem small{display:block;color:var(--c-ink-soft);font-size:.8rem} /* ---------- Einstellungen ---------- */ .settingsForm{display:flex;flex-direction:column;gap:22px;max-width:680px} .settingsForm .field{gap:8px} .settingsForm .field label{font-size:.82rem;font-weight:700;margin-bottom:6px;display:block} .themePicker{display:flex;gap:10px;flex-wrap:wrap} .themeOpt{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:2px solid var(--c-line);cursor:pointer;font-weight:600;font-size:.88rem;transition:border .3s} .themeOpt input{display:none} .themeOpt.is-sel,.themeOpt:has(input:checked){border-color:var(--c-ink)} .themeDot{width:18px;height:18px;border-radius:50%} .theme-rose .themeDot,.themeOpt.theme-rose .themeDot{background:linear-gradient(135deg,#F2A2B2,#C65C8A)} .themeOpt.theme-gold .themeDot{background:linear-gradient(135deg,#EEC98C,#C79A3E)} .themeOpt.theme-sage .themeDot{background:linear-gradient(135deg,#9ED0C2,#4E8C7A)} .themeOpt.theme-lavender .themeDot{background:linear-gradient(135deg,#C3B0E0,#7A5EA8)} .themeOpt.theme-dusk .themeDot{background:linear-gradient(135deg,#E08AA0,#8A4F6D)} .dangerZone{margin-top:24px;color:var(--c-ink-soft)} .cockEmpty{color:var(--c-ink-soft);padding:18px;background:var(--c-bg);border-radius:var(--radius-s);text-align:center} /* ---------- Onboarding ---------- */ .onboardWrap{min-height:70vh;display:grid;place-items:center} .onboardCard{background:var(--c-card);border-radius:var(--radius-l);box-shadow:var(--shadow-lg);padding:40px;max-width:480px;width:100%;text-align:center} .onboardHeart{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 16px;border-radius:20px;background:var(--grad-primary);color:#fff} .onboardHeart .ic{width:30px;height:30px;fill:#fff} .onboardCard h1{font-size:1.7rem;margin-bottom:8px} .onboardCard p{color:var(--c-ink-soft);margin-bottom:24px} .onboardCard form{display:flex;flex-direction:column;gap:14px;text-align:left} .onboardCard .field input{font-family:inherit;font-size:1rem;padding:.8em 1em;border-radius:var(--radius-s);border:1.5px solid var(--c-line);background:var(--c-bg);width:100%} /* ---------- Einladungs-Seite (Gast) ---------- */ .inviteWrap{min-height:100vh;display:grid;place-items:center;background:var(--grad-warm);padding:20px} .inviteCard{background:var(--c-card);border-radius:var(--radius-l);box-shadow:var(--shadow-lg);padding:44px;max-width:460px;text-align:center} .inviteBigHeart{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:20px;background:var(--grad-primary);color:#fff} .inviteBigHeart .ic{width:32px;height:32px;fill:#fff} .inviteInvalid h1{font-size:1.8rem;margin-bottom:10px} .inviteInvalid p{color:var(--c-ink-soft);margin-bottom:22px} .inviteHero{position:relative;overflow:hidden;background:var(--grad-warm);text-align:center;padding:clamp(50px,8vw,90px) 20px clamp(40px,6vw,70px)} .inviteHeroInner{position:relative;z-index:2;max-width:640px;margin:0 auto} .inviteKicker{display:inline-flex;align-items:center;gap:.5em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--c-primary);background:rgba(198,92,138,.1);padding:.5em 1.1em;border-radius:999px} .inviteKicker .ic{width:1em;height:1em;fill:var(--c-primary)} .inviteNames{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(3rem,9vw,5.5rem);color:var(--c-primary);line-height:1;margin:18px 0 10px} .inviteNames .amp{font-family:'Playfair Display',serif;font-size:.5em;color:var(--c-ink);vertical-align:middle} .inviteDate{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--c-ink);margin-bottom:14px} .inviteWelcome{color:var(--c-ink-soft);font-size:1.05rem;max-width:34em;margin:0 auto 22px;font-style:italic} .inviteCountdown{justify-content:center;max-width:360px;margin:0 auto 20px} .inviteRoleBadge{display:inline-block;background:var(--c-card);box-shadow:var(--shadow-sm);padding:.5em 1.1em;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--c-ink)} .inviteBody{max-width:640px} .inviteSection{background:var(--c-card);border-radius:var(--radius-l);box-shadow:var(--shadow-sm);padding:clamp(22px,4vw,34px);margin-bottom:22px} .inviteSectionHead{margin-bottom:20px} .inviteSectionHead h2{display:flex;align-items:center;gap:10px;font-size:1.4rem} .inviteSectionHead h2 .ic{width:24px;height:24px;color:var(--c-primary)} .inviteSectionHead p{color:var(--c-ink-soft);margin-top:4px} .rsvpForm{display:flex;flex-direction:column;gap:16px} .rsvpForm .field input,.rsvpForm .field select,.rsvpForm .field textarea{font-family:inherit;font-size:1rem;padding:.8em 1em;border-radius:var(--radius-s);border:1.5px solid var(--c-line);background:var(--c-bg);width:100%} .rsvpChoice{display:grid;grid-template-columns:1fr 1fr;gap:12px} .rsvpOpt{position:relative;cursor:pointer} .rsvpOpt input{position:absolute;opacity:0} .rsvpOpt span{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:var(--radius-s);border:2px solid var(--c-line);font-weight:700;transition:.25s} .rsvpOpt span .ic{width:18px;height:18px} .rsvpYes input:checked+span{border-color:var(--c-mint);background:rgba(127,183,166,.12);color:var(--c-mint)} .rsvpNo input:checked+span{border-color:#D98A96;background:#FBE9EC;color:#B84A5B} .inviteFoot{text-align:center;color:var(--c-ink-soft);padding:20px 0;font-size:.88rem} .inviteFoot a{color:var(--c-primary);font-weight:700} .inviteFoot .inlineHeart{width:14px;height:14px;vertical-align:-2px} /* ---------- Responsive ---------- */ @media(max-width:860px){ .authWrap{grid-template-columns:1fr} .authArt{display:none} .cockLayout{grid-template-columns:1fr} .cockSide{position:static;flex-direction:row;flex-wrap:wrap;align-items:center} .cockSide .dashProfile{flex-direction:row;text-align:left;flex:1} .cockSide .dashRing{margin-bottom:0} .dashTabs{flex-direction:row;flex-wrap:wrap;flex:1 1 100%} .dashXp{width:100%} } @media(max-width:560px){ .fieldRow,.rsvpChoice{grid-template-columns:1fr} .cockTopActions .btn span:not(.ic){display:none} .addTaskForm,.uploadForm{flex-direction:column;align-items:stretch} } /* ===================== v3: Personalisierung & neue Bausteine ===================== */ /* --- Brautpaar-Figur (Flat-Line-SVG) --- */ .coupleFig{width:120px;height:auto;color:var(--c-primary)} .coupleFigLight{color:#fff} .coupleFigHero{width:96px} .formSection{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-primary);margin:16px 0 6px;padding-top:6px;border-top:1px solid var(--c-line)} .settingsForm .formSection:first-of-type,.authForm .formSection:first-of-type{border-top:none;padding-top:0;margin-top:2px} .formSection .ic{width:16px;height:16px} /* --- Auth-Art Couple --- */ .authCouple{display:block;margin-bottom:20px} .authCouple .coupleFig{width:130px} /* --- Onboarding Couple --- */ .onboardCouple{display:block;margin:0 auto 14px;width:120px} .onboardCouple .coupleFig{width:120px;margin:0 auto} /* --- Brautpaar-Karte (Übersicht) --- */ .coupleCard{display:flex;align-items:center;gap:24px;background:var(--grad-warm);border-radius:var(--radius-l);padding:24px 28px;margin-bottom:22px;box-shadow:inset 0 0 0 1px var(--c-line)} .coupleCardFig{flex:none} .coupleCardFig .coupleFig{width:110px} .coupleKicker{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-primary)} .coupleNames{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(2rem,4vw,2.8rem);line-height:1;color:var(--c-primary);margin:4px 0 6px} .coupleNames .amp{font-family:'Playfair Display',serif;font-size:.5em;color:var(--c-ink);vertical-align:middle} .coupleMeta{font-family:'Playfair Display',serif;color:var(--c-ink);font-size:1.05rem} .coupleOrgWrap{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:10px} .coupleOrg{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--c-ink-soft);background:var(--c-card);padding:.45em 1em;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--c-line);transition:color .25s,box-shadow .25s,transform .25s} .coupleOrg .ic{width:14px;height:14px;color:var(--c-primary)} .coupleOrg:hover{color:var(--c-primary);box-shadow:inset 0 0 0 1.5px var(--c-primary);transform:translateY(-1px)} .coupleOrgEdit{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;color:var(--c-ink-soft);cursor:pointer;padding:.15em .3em;transition:color .25s} .coupleOrgEdit .ic{width:13px;height:13px;transition:transform .25s} .coupleOrgEdit:hover{color:var(--c-primary)} .coupleOrgEdit:hover .ic{transform:translateX(3px)} /* --- Adresse & Route --- */ .coupleAddress{display:flex;align-items:flex-start;gap:7px;color:var(--c-ink-soft);font-size:.9rem;margin:6px 0 10px;line-height:1.5} .coupleAddress .ic{width:16px;height:16px;color:var(--c-primary);flex:none;margin-top:2px} .routeBtn .ic{width:16px;height:16px} .inviteLocation{display:flex;flex-direction:column;align-items:center;gap:12px;margin:10px 0 4px} .inviteAddress{display:inline-flex;align-items:flex-start;gap:8px;color:var(--c-ink);font-size:1rem;line-height:1.5;text-align:left} .inviteAddress .ic{width:18px;height:18px;color:var(--c-primary);flex:none;margin-top:3px} /* --- Brautpaar-Zeile (Gäste) --- */ .couplePair{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--c-bg);border-radius:var(--radius);padding:16px 20px;margin-bottom:24px} .pairPerson{display:flex;flex-direction:column} .pairRole{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-primary)} .pairPerson strong{font-size:1.05rem} .pairPerson small{color:var(--c-ink-soft);font-size:.82rem} .couplePair .btn{margin-left:auto} /* --- Gast-E-Mail --- */ .guestEmail{display:inline-flex;align-items:center;gap:5px;color:var(--c-ink-soft);font-size:.76rem;margin-left:8px} .guestEmail .ic{width:13px;height:13px} .inviteLock{display:inline-grid;place-items:center;color:var(--c-accent);flex:none} .inviteLock .ic{width:16px;height:16px} .lockHint{display:inline-flex;align-items:center;gap:5px;color:var(--c-accent);font-weight:600;font-size:.82rem} .lockHint .ic{width:14px;height:14px} /* --- Farbquadrate (Swatches, abgerundete Ecken) --- */ .swatchRow{display:flex;flex-wrap:wrap;gap:14px} .swatchRow[data-swatch="theme"]{gap:16px} .swatch{position:relative;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;gap:6px} .swatch input{position:absolute;opacity:0;width:0;height:0} .swatchBox{width:34px;height:34px;border-radius:10px;display:block;box-shadow:0 2px 6px rgba(120,70,90,.18);transition:transform .2s,box-shadow .2s;border:2px solid transparent} .swatchBox.sm{width:24px;height:24px;border-radius:7px} .swatch:hover .swatchBox{transform:translateY(-2px)} .swatch input:checked+.swatchBox{border-color:var(--c-ink);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--c-ink)} .swatchName{font-size:.86rem;font-weight:600;white-space:nowrap} /* Farbwelt-Auswahl als zentrierte Kacheln: Farbe oben, Text mittig darunter */ .swatchLabeled{flex-direction:column;align-items:center;justify-content:flex-start;gap:12px; padding:18px 16px 15px;min-width:100px;border-radius:var(--radius); border:2px solid var(--c-line);background:var(--c-card); transition:border .25s,background .25s,transform .25s,box-shadow .25s} .swatchLabeled:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)} .swatchLabeled .swatchBox{width:46px;height:46px;border-radius:14px;box-shadow:0 4px 12px rgba(120,70,90,.22)} .swatchLabeled .swatchName{text-align:center;color:var(--c-ink)} .swatchLabeled:has(input:checked){border-color:var(--c-primary);background:rgba(198,92,138,.07)} .swatchLabeled input:checked+.swatchBox{border-color:transparent;box-shadow:0 5px 16px rgba(120,70,90,.30)} .swatchLabeled input:checked~.swatchName{color:var(--c-primary);font-weight:700} /* Auto-Speichern-Status (oben rechts) */ .saveStatus{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;padding:.42em 1em;border-radius:999px;transition:background .3s,color .3s;white-space:nowrap} .saveDot{width:9px;height:9px;border-radius:50%;flex:none;transition:background .3s} .saveStatus[data-state="saved"]{background:rgba(127,183,166,.15);color:var(--c-mint)} .saveStatus[data-state="saved"] .saveDot{background:var(--c-mint)} .saveStatus[data-state="saving"]{background:rgba(214,162,74,.16);color:var(--c-accent)} .saveStatus[data-state="saving"] .saveDot{background:var(--c-accent);animation:pulse 1s ease-in-out infinite} .saveStatus[data-state="dirty"]{background:var(--c-bg-2);color:var(--c-ink-soft)} .saveStatus[data-state="dirty"] .saveDot{background:var(--c-ink-soft)} .saveStatus[data-state="error"]{background:#FBE3E6;color:#B84A5B} .saveStatus[data-state="error"] .saveDot{background:#B84A5B} .autosaveHint{display:flex;align-items:center;gap:8px;color:var(--c-ink-soft);font-size:.84rem;margin-top:6px} .autosaveHint .ic{width:16px;height:16px;color:var(--c-mint);background:none} .settingsForm .panelHead{align-items:center} /* --- Karten-Formen --- */ .shapeRow{display:flex;flex-wrap:wrap;gap:10px} .shapeOpt{position:relative;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-s);border:2px solid var(--c-line);transition:border .2s} .shapeOpt input{position:absolute;opacity:0} .shapeOpt input:checked~.shapeGlyph{background:var(--c-primary)} .shapeOpt:has(input:checked){border-color:var(--c-primary)} .shapeGlyph{width:22px;height:26px;background:var(--c-ink-soft);display:block;transition:background .2s} .shape-rounded{border-radius:6px} .shape-arch{border-radius:11px 11px 4px 4px} .shape-scallop{border-radius:11px;-webkit-mask:radial-gradient(circle 3px at 3px 50%,transparent 96%,#000) left/7px 100%;mask:radial-gradient(circle 3px at 3px 50%,transparent 96%,#000) left/7px 100%} .shape-frame{border-radius:6px;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px currentColor} .shapeLbl{font-size:.86rem;font-weight:600} /* --- Karten-Studio (Formular + Live-Vorschau) --- */ .cardStudio{display:grid;grid-template-columns:1fr 340px;gap:28px;align-items:start} .cardForm{max-width:none} .cardActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px} .cardPreviewWrap{position:sticky;top:96px;background:var(--c-bg);border-radius:var(--radius-l);padding:16px;text-align:center;box-shadow:inset 0 0 0 1px var(--c-line)} .cardPreviewLabel{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--c-ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px} .cardPreviewLabel .ic{width:15px;height:15px;color:var(--c-primary)} #cardCanvas{width:100%;max-width:300px;height:auto;border-radius:14px;box-shadow:var(--shadow-md)} /* --- Foto-Upload (mehrere Dateien + Fortschritt) --- */ .uploadZone{margin-bottom:22px;border-radius:var(--radius);transition:background .2s} .uploadZone.isDrag{background:rgba(198,92,138,.06);outline:2px dashed var(--c-primary);outline-offset:4px} .uploadQueue{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .uploadItem{display:grid;grid-template-columns:1fr 120px auto;gap:12px;align-items:center;padding:8px 14px;background:var(--c-bg);border-radius:var(--radius-s);font-size:.86rem} .uploadName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .uploadBarWrap{height:8px;background:var(--c-bg-2);border-radius:99px;overflow:hidden} .uploadBar{display:block;height:100%;width:0;background:var(--grad-primary);border-radius:99px;transition:width .2s} .uploadPct{font-weight:700;color:var(--c-primary);min-width:34px;text-align:right} .uploadItem.isDone .uploadPct{color:var(--c-mint)} .uploadItem.isError{background:#FBE3E6} .uploadItem.isError .uploadPct{color:#B84A5B} .panelHeadActions{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap} /* --- Lightbox --- */ .lightbox{position:fixed;inset:0;z-index:1400;background:rgba(40,28,34,.92);display:none;align-items:center;justify-content:center;padding:40px} .lightbox.isOpen{display:flex} .lightboxImg{max-width:90vw;max-height:86vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:fadeUp .35s var(--ease)} .lightboxClose{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center} .lightboxClose .ic{width:24px;height:24px} .lightboxNav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center} .lightboxNav .ic{width:26px;height:26px} .lightboxPrev{left:20px;transform:translateY(-50%) rotate(180deg)} .lightboxNext{right:20px} .lightboxClose:hover,.lightboxNav:hover{background:rgba(255,255,255,.28)} /* --- Vorschau-Banner / Passwort-Gate --- */ .previewBanner{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;background:var(--c-ink);color:#fff;padding:10px 18px;font-size:.9rem;font-weight:600} .previewBanner .ic{width:18px;height:18px} .previewBanner .btn{background:rgba(255,255,255,.15);color:#fff;box-shadow:none} .inviteLocked .field input{width:100%;font-size:1rem;padding:.85em 1.1em;border-radius:var(--radius-s);border:1.5px solid var(--c-line);background:var(--c-bg);text-align:center;letter-spacing:.1em} .inviteLocked .field input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(198,92,138,.12)} .unlockForm{display:flex;flex-direction:column;gap:14px;margin-top:8px} .inviteCouple{display:block;margin-bottom:6px} .inviteCouple .coupleFig{margin:0 auto} @media(max-width:820px){ .cardStudio{grid-template-columns:1fr} .cardPreviewWrap{position:static;order:-1;max-width:320px;margin:0 auto} .coupleCard{flex-direction:column;text-align:center} .coupleOrgWrap{align-items:center} .couplePair .btn{margin-left:0} } /* ===================== Einheitliche Auswahl-Felder (Selects) ===================== */ /* Native OS-Optik entfernen und exakt wie die Text-Eingaben stylen, inkl. eigenem Pfeil. */ .field select, .inviteForm select, .rsvpForm .field select, .settingsForm select, .authForm .field select, .onboardCard .field select, .addGuestForm select, .addTaskForm select, .uploadAlbum select, .messageForm select, .guestFilter select, .taskFilter select{ -webkit-appearance:none;-moz-appearance:none;appearance:none; font-family:inherit;font-size:1rem;color:var(--c-ink);line-height:1.3; padding:.8em 2.6em .8em 1.1em; border-radius:var(--radius-s);border:1.5px solid var(--c-line); background-color:var(--c-bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B7681' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1.05em center;background-size:16px; cursor:pointer;transition:border .3s,box-shadow .3s,background-color .3s; } /* Volle Breite nur für Selects in .field-Kontexten (nicht die Inline-Flex-Formulare) */ .field select,.settingsForm select,.messageForm select,.rsvpForm .field select,.authForm .field select,.onboardCard .field select{width:100%} .field select:focus, .inviteForm select:focus, .rsvpForm .field select:focus, .settingsForm select:focus, .authForm .field select:focus, .onboardCard .field select:focus, .addGuestForm select:focus, .addTaskForm select:focus, .uploadAlbum select:focus, .messageForm select:focus, .guestFilter select:focus, .taskFilter select:focus{ outline:none;border-color:var(--c-primary);box-shadow:0 0 0 4px rgba(198,92,138,.12);background-color:#fff; } /* Optionsliste selbst (Browser-abhängig, aber wo möglich harmonisch) */ .field select option,.inviteForm select option,.settingsForm select option{color:var(--c-ink);background:#fff} /* ===================== Galerie: Alben & Aktionen ===================== */ .albumBar{margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--c-line)} .albumBar h4{display:flex;align-items:center;gap:8px;font-size:1rem;margin-bottom:10px} .albumBar h4 .ic{width:18px;height:18px;color:var(--c-primary)} .albumForm{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px} .albumForm input{flex:1;min-width:180px} .albumChips{display:flex;flex-wrap:wrap;gap:8px} .albumChip{display:inline-flex;align-items:center;gap:6px;background:var(--c-bg);border-radius:999px;padding:.4em .5em .4em .9em;font-size:.84rem;font-weight:600} .albumChip>.ic{width:14px;height:14px;color:var(--c-accent)} .albumDel{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--c-ink-soft);opacity:.6;flex:none} .albumDel .ic{width:13px;height:13px} .albumDel:hover{opacity:1;background:#FBE3E6;color:#B84A5B} .uploadAlbum{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:.88rem;font-weight:600;color:var(--c-ink-soft)} .uploadAlbum select{width:auto;min-width:150px} .galleryFilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .filterChip{padding:.45em 1.05em;border-radius:999px;font-size:.84rem;font-weight:600;background:var(--c-bg);color:var(--c-ink-soft);transition:background .25s,color .25s} .filterChip.is-active{background:var(--grad-primary);color:#fff} .filterChip:hover:not(.is-active){color:var(--c-primary)} .photoAlbum{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:4px;background:rgba(40,28,34,.55);color:#fff;font-size:.68rem;font-weight:600;padding:.25em .6em;border-radius:999px} .photoAlbum .ic{width:11px;height:11px} .dangerBtn:hover{color:#B84A5B;box-shadow:inset 0 0 0 1.5px #D98A96} .dangerBtn .ic{width:16px;height:16px} /* ===================== Nachrichten (rollenbasiert) ===================== */ .messageForm{display:flex;flex-direction:column;gap:20px;max-width:600px;padding-bottom:6px} .messageForm>.btn{margin-top:4px;align-self:flex-start} .messageForm .field label{font-size:.82rem;font-weight:700;margin-bottom:6px;display:block} .messageForm .field input,.messageForm .field textarea{font-family:inherit;font-size:1rem;padding:.8em 1em;border-radius:var(--radius-s);border:1.5px solid var(--c-line);background:var(--c-bg);width:100%;color:var(--c-ink)} .messageForm .field input:focus,.messageForm .field textarea:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(198,92,138,.1);background:#fff} .messageForm textarea{resize:vertical} .msgAudienceIcon{width:34px;height:34px;flex:none;border-radius:10px;background:var(--grad-primary);display:grid;place-items:center;color:#fff} .msgAudienceIcon .ic{width:18px;height:18px} /* ===================== Aufgaben: Filter & Sortieren ===================== */ .taskFilter{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px} .taskStatusChips{display:flex;gap:8px;flex-wrap:wrap} .taskFilter select{min-width:180px} .taskHint{display:flex;align-items:center;gap:6px;color:var(--c-ink-soft);font-size:.8rem;margin-bottom:14px} .taskHintIcon{width:14px;height:14px;transform:rotate(90deg)} .taskLead{display:flex;align-items:center;gap:2px;flex:none} .taskHandle{display:grid;place-items:center;width:22px;height:34px;color:var(--c-ink-soft);cursor:grab;touch-action:none;opacity:.55;transition:opacity .2s,color .2s;flex:none} .taskHandle:hover{opacity:1;color:var(--c-primary)} .taskHandle:active{cursor:grabbing} .taskHandle .ic{width:18px;height:18px} .taskMove{display:flex;flex-direction:column;gap:1px;flex:none} .taskMove button{width:22px;height:19px;padding:0;border-radius:6px;display:grid;place-items:center;color:var(--c-ink-soft);transition:background .2s,color .2s} .taskMove button:hover{background:var(--c-bg-2);color:var(--c-primary)} .taskMove .ic{width:15px;height:15px;display:block} .taskDown .ic{transform:rotate(180deg)} .taskItem.justMoved{animation:taskFlash .6s var(--ease)} @keyframes taskFlash{0%{background:rgba(198,92,138,.16)}100%{background:var(--c-bg)}} /* Drag-Zustand */ .taskItem.dragging{opacity:.96;background:var(--c-card);box-shadow:var(--shadow-md);transform:scale(1.01);position:relative;z-index:5;cursor:grabbing} .taskItem.dragging:hover{transform:scale(1.01)} .taskNoResults{list-style:none} /* ===================== Upgrade / Pläne ===================== */ .upgradeBanner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--grad-warm);border:1.5px solid var(--c-primary-2);border-radius:var(--radius);padding:14px 20px;margin-bottom:22px} .upgradeBannerText{font-size:.92rem;color:var(--c-ink);display:flex;align-items:center;gap:8px} .upgradeBannerText .ic{width:18px;height:18px;color:var(--c-primary);flex:none} .planBadgeRow{margin-bottom:18px} .planBadge{display:inline-flex;align-items:center;gap:7px;background:rgba(127,183,166,.15);color:var(--c-mint);padding:.45em 1em;border-radius:999px;font-weight:700;font-size:.85rem} .planBadge .ic{width:16px;height:16px;background:var(--c-mint);color:#fff;border-radius:50%;padding:3px} .pillWarn{background:#FBE3E6 !important;color:#B84A5B !important} .upgradeLock{text-align:center;padding:clamp(28px,5vw,52px) 24px;background:var(--grad-warm);border-radius:var(--radius-l);box-shadow:inset 0 0 0 1px var(--c-line)} .upgradeLockIcon{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 18px;border-radius:20px;background:var(--c-card);box-shadow:var(--shadow-sm);color:var(--c-primary)} .upgradeLockIcon .ic{width:30px;height:30px} .upgradeLock h3{font-size:clamp(1.2rem,2.4vw,1.5rem);margin-bottom:10px} .upgradeLock p{color:var(--c-ink-soft);max-width:38em;margin:0 auto 24px} .upgradePlans{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .upgradePlans .ic{width:1.05em;height:1.05em} .upgradeNote{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;font-size:.82rem;color:var(--c-ink-soft)} .upgradeNote .ic{width:15px;height:15px;color:var(--c-mint)} .planStatusRow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px} .planTermNote{display:inline-flex;align-items:center;gap:7px;color:var(--c-ink-soft);font-size:.82rem} .planTermNote .ic{width:15px;height:15px;color:var(--c-mint)} .expiredBanner{border-color:#D98A96;background:#FBE9EC} .expiredBanner .upgradeBannerText .ic{color:#B84A5B} /* ===================== Sperr-Screen (Konto abgelaufen) ===================== */ .cockLockWrap{min-height:calc(100vh - 66px);display:grid;place-items:center;padding:30px 20px 70px;background:var(--grad-warm)} .cockLockCard{background:var(--c-card);border-radius:var(--radius-l);box-shadow:var(--shadow-lg);max-width:520px;width:100%;text-align:center;padding:44px 34px} .cockLockIcon{display:inline-grid;place-items:center;width:70px;height:70px;border-radius:50%;background:rgba(198,92,138,.12);color:var(--c-primary);margin-bottom:16px} .cockLockIcon .ic{width:34px;height:34px} .cockLockCard h1{font-family:'Playfair Display',serif;font-size:1.7rem;margin-bottom:12px} .cockLockCard>p{color:var(--c-ink-soft);line-height:1.6;margin-bottom:24px} .cockLockActions{display:flex;flex-direction:column;gap:12px;margin-bottom:18px} .cockLockActions .btn{width:100%} .cockLockNote{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--c-ink-soft);font-size:.8rem;line-height:1.4} .cockLockNote .ic{width:14px;height:14px;flex:none;color:var(--c-mint)} /* ===================== Zustimmungs-Haken (geteilt) ===================== */ .ckCheck{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-s);cursor:pointer;font-size:.9rem;line-height:1.45;margin-bottom:10px;border:1.5px solid var(--c-line);background:var(--c-bg);transition:border .2s,background .2s} .ckCheckMain{border-color:var(--c-primary-2);background:rgba(198,92,138,.05)} .ckCheck:has(input:checked){border-color:var(--c-primary)} .ckCheck input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--c-primary);cursor:pointer} .ckCheck a{color:var(--c-primary);font-weight:700;text-decoration:underline} /* ===================== Upgrade-/Checkout-Seite ===================== */ .upgradeWrap{max-width:980px;margin:0 auto;padding:30px 20px 80px} .upgradeHead{text-align:center;max-width:640px;margin:0 auto 26px} .upgradeKicker{display:inline-flex;align-items:center;gap:7px;background:rgba(198,92,138,.12);color:var(--c-primary);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:.4em 1em;border-radius:999px} .upgradeKicker .ic{width:15px;height:15px} .upgradeHead h1{font-family:'Playfair Display',serif;font-size:clamp(1.7rem,4vw,2.5rem);margin:14px 0 8px;line-height:1.1} .upgradeHead p{color:var(--c-ink-soft);font-size:1.02rem} .upgradeErr{display:flex;align-items:center;gap:10px;background:#FBE3E6;color:#B84A5B;border:1px solid #E8B4BE;border-radius:var(--radius-s);padding:13px 16px;font-size:.9rem;font-weight:600;margin-bottom:20px} .upgradeErr .ic{width:18px;height:18px;flex:none} .upgradeDone{text-align:center;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius-l);box-shadow:var(--shadow-sm);padding:44px 28px;max-width:560px;margin:0 auto} .upgradeDoneIcon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(127,183,166,.16);color:var(--c-mint);margin-bottom:14px} .upgradeDoneIcon .ic{width:32px;height:32px} .upgradeDone h2{font-family:'Playfair Display',serif;font-size:1.5rem;margin-bottom:8px} .upgradeDone p{color:var(--c-ink-soft);margin-bottom:22px} .upgradeGrid{display:grid;grid-template-columns:1.25fr .9fr;gap:26px;align-items:start} .upgradePickTitle{font-family:'Playfair Display',serif;font-size:1.25rem;margin-bottom:14px;display:flex;align-items:center;gap:10px} .upgradePickTitle:not(:first-child){margin-top:28px} .stepNum{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--grad-primary);color:#fff;font-family:'Montserrat',sans-serif;font-size:.85rem;font-weight:800;flex:none} .planOpts{display:flex;flex-direction:column;gap:14px} .planOpt{position:relative;display:block;border:2px solid var(--c-line);border-radius:var(--radius);background:var(--c-card);padding:18px 20px;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s} .planOpt:hover{border-color:var(--c-primary-2)} .planOpt input{position:absolute;opacity:0;pointer-events:none} .planOpt.isChosen{border-color:var(--c-primary);background:rgba(198,92,138,.04);box-shadow:0 0 0 4px rgba(198,92,138,.10)} .planOpt.isFeatured{border-style:solid} .planOptBody{display:block} .planOptTop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .planOptName{font-family:'Playfair Display',serif;font-weight:700;font-size:1.15rem;display:inline-flex;align-items:center;gap:8px} .planOptBadge{font-family:'Montserrat',sans-serif;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--grad-primary);padding:.28em .7em;border-radius:999px} .planOptPrice{font-weight:800;font-size:1.3rem;color:var(--c-primary);white-space:nowrap} .planOptPrice small{display:block;font-size:.68rem;font-weight:600;color:var(--c-ink-soft);text-align:right} .planOptText{color:var(--c-ink-soft);font-size:.9rem;margin:6px 0 10px} .planOptFeat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .planOptFeat li{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;color:var(--c-ink)} .planOptFeat .ic{width:16px;height:16px;flex:none;margin-top:2px;color:var(--c-mint)} /* Laufzeit-Auswahl */ .durOpts{display:grid;gap:14px} .durOpts-2{grid-template-columns:1fr 1fr} .durOpts-3{grid-template-columns:repeat(3,1fr)} .durOpt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;border:2px solid var(--c-line);border-radius:var(--radius);background:var(--c-card);padding:16px 10px;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s} .durOpt:hover{border-color:var(--c-primary-2)} .durOpt input{position:absolute;opacity:0;pointer-events:none} .durOpt.isChosen{border-color:var(--c-primary);background:rgba(198,92,138,.04);box-shadow:0 0 0 4px rgba(198,92,138,.10)} .durOptMain{font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;white-space:nowrap} .durOptSub{font-size:.74rem;font-weight:600;color:var(--c-ink-soft)} .durOptSub.is-save{color:var(--c-mint);font-weight:700} .upgradeSummary{position:sticky;top:20px;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius-l);box-shadow:var(--shadow-sm);padding:24px} .sumPrice{display:flex;align-items:flex-start;justify-content:center;gap:3px;font-family:'Playfair Display',serif;font-weight:700;color:var(--c-ink);line-height:1} .sumEuro{font-size:1.6rem;margin-top:.5em} .sumAmount{font-size:3.2rem} .sumOnce{text-align:center;color:var(--c-ink-soft);font-weight:600;margin-top:4px} .sumFacts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .sumFacts li{display:flex;align-items:flex-start;gap:9px;font-size:.86rem;color:var(--c-ink);line-height:1.4} .sumFacts .ic{width:16px;height:16px;flex:none;margin-top:2px;color:var(--c-primary)} .sumDiv{border:none;border-top:1px solid var(--c-line);margin:20px 0} .upgradeBuy{margin-top:6px} .upgradeBuy:disabled{opacity:.5;cursor:not-allowed;box-shadow:none} .sumSsl{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--c-ink-soft);font-size:.78rem;margin-top:14px;text-align:center;line-height:1.4} .sumSsl .ic{width:14px;height:14px;flex:none} .sumHint{display:flex;align-items:flex-start;gap:8px;color:var(--c-accent);background:rgba(214,162,74,.12);border-radius:var(--radius-s);padding:11px 14px;font-size:.8rem;margin-top:12px;line-height:1.45} .sumHint .ic{width:15px;height:15px;flex:none;margin-top:1px} .icFlip{transform:rotate(180deg)} @media(max-width:760px){ .upgradeGrid{grid-template-columns:1fr} .upgradeSummary{position:static} }