*/ .content.numbered{ counter-reset:blk; } .content.numbered section.block > h2::before{ counter-increment:blk; content:counter(blk, decimal-leading-zero); display:inline-block; margin-right:14px; font-style:italic; color:var(--gold); font-size:1.05rem; } h3{ font-family:var(--body); font-weight:600; font-size:1.02rem; margin:24px 0 8px; color:var(--gold-soft); } p{ margin-bottom:14px; } p.small, .small{ font-size:.88rem; color:var(--muted); } address{ font-style:normal; } ul.plain{ margin:0 0 14px 4px; list-style:none; } ul.plain li{ padding:5px 0 5px 24px; position:relative; color:var(--muted); } ul.plain li::before{ content:"—"; position:absolute; left:0; color:var(--gold); } ul.plain li strong{ color:var(--ivory); } ul.check li::before, ul.rights li::before{ content:"✓"; } .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px 28px; margin:10px 0 18px; transition:border-color .3s ease; } .card:hover{ border-color:color-mix(in srgb, var(--gold) 40%, var(--line)); } .card p{ margin-bottom:4px; } .card .label{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:10px; } .duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:640px){ .duo{ grid-template-columns:1fr; } } /* Ehrlichkeits-Kasten: „wann das hier NICHT passt" */ .honest{ border:1px dashed color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius:var(--radius); padding:26px 28px; margin:14px 0 18px; background:var(--panel); } .honest .lead-in{ font-family:var(--display); font-style:italic; font-size:1.08rem; color:var(--gold-soft); margin-bottom:12px; } /* Selbsttest-Kasten (Ratgeber) */ .selftest{ border:1px dashed color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius:var(--radius); padding:26px 28px; margin:14px 0 18px; background:var(--panel); } .selftest p{ margin-bottom:10px; } .selftest .verdict{ display:block; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--display); font-style:italic; font-size:1.05rem; color:var(--gold-soft); } /* Preis-Karte */ .price-card{ border:1px solid transparent; border-radius:20px; padding:34px 32px; margin:14px 0 18px; background:linear-gradient(var(--panel-2), var(--panel-2)) padding-box, linear-gradient(160deg, rgba(201,164,104,.7), rgba(36,53,45,.5) 45%, rgba(201,164,104,.35)) border-box; } .price-card .price{ font-family:var(--display); font-size:2.6rem; color:var(--gold-soft); margin:0 0 2px; letter-spacing:-0.01em; } .price-card .price small{ font-family:var(--body); font-size:.8rem; color:var(--muted); font-weight:500; margin-left:8px; } .price-card .note{ color:var(--muted); font-size:.85rem; margin-bottom:18px; } .price-card ul{ list-style:none; margin:0; } .price-card li{ padding:9px 0 9px 26px; position:relative; color:var(--muted); font-size:.95rem; border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); } .price-card li:last-child{ border-bottom:none; } .price-card li::before{ content:"✓"; position:absolute; left:0; color:var(--gold); } .price-card li strong{ color:var(--ivory); font-weight:600; } /* ---------- FAQ ---------- */ .faq{ max-width:44rem; } details{ border-bottom:1px solid var(--line); padding:20px 0; border-left:2px solid transparent; transition:border-color .3s ease, padding-left .3s ease; } details[open]{ border-left-color:var(--gold); padding-left:18px; } summary{ cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; } summary::-webkit-details-marker{ display:none; } summary::after{ content:"+"; font-family:var(--display); font-size:1.4rem; color:var(--gold); transition:transform .25s ease; flex:none; } details[open] summary::after{ transform:rotate(45deg); } details[open] summary{ color:var(--gold-soft); } details p{ color:var(--muted); font-size:.97rem; max-width:40rem; padding:14px 0 8px; } /* ---------- Kontakt-Karte (oben) ---------- */ .contact-card{ border-radius:20px; padding:40px 36px; margin:0 0 30px; position:relative; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(201,164,104,.10); display:grid; grid-template-columns:1fr auto; gap:10px 28px; align-items:center; border:1px solid transparent; background:linear-gradient(var(--panel-2), var(--panel-2)) padding-box, linear-gradient(160deg, rgba(201,164,104,.8), rgba(36,53,45,.55) 45%, rgba(201,164,104,.4)) border-box; } .contact-card::before{ content:""; position:absolute; inset:-55% auto auto -18%; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, rgba(201,164,104,.12), transparent 65%); animation:breathe 18s ease-in-out infinite; pointer-events:none; } .contact-card > *{ position:relative; } .contact-card h2{ font-family:var(--display); font-weight:400; font-size:1.5rem; margin:0 0 6px; border:none; padding:0; display:block; } .contact-card p{ color:var(--muted); font-size:.95rem; margin:0; max-width:32rem; } .contact-card p strong{ color:var(--gold-soft); font-weight:600; } .contact-card .cc-action{ text-align:right; } .contact-card .cc-note{ display:block; margin-top:10px; font-size:.8rem; color:var(--muted); } @media (max-width:640px){ .contact-card{ grid-template-columns:1fr; padding:32px 24px; text-align:left; } .contact-card .cc-action{ text-align:left; } .contact-card .btn{ display:block; text-align:center; } } /* ---------- Abschluss-Kontakt (unten, zentriert) ---------- */ .contact-final{ border-radius:20px; padding:56px 36px; text-align:center; position:relative; overflow:hidden; margin:56px 0 0; border:1px solid transparent; background:linear-gradient(var(--panel-2), var(--panel-2)) padding-box, linear-gradient(150deg, rgba(201,164,104,.55), rgba(36,53,45,.45) 40%, rgba(201,164,104,.3)) border-box; } .contact-final::before{ content:""; position:absolute; inset:-40% auto auto -20%; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(201,164,104,.10), transparent 65%); animation:breathe 18s ease-in-out infinite; pointer-events:none; } .contact-final > *{ position:relative; } .contact-final h2{ border:none; padding:0; justify-content:center; font-size:1.7rem; margin-bottom:6px; } .contact-final p{ color:var(--muted); max-width:32rem; margin:10px auto 28px; } .contact-final .ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }