/* ==================================================================== Coral skin — overlay on top of styles.css. Activates when (or .shell) has class `theme-coral`. Goal: push coral *much* further into the UI, per client feedback ("ist mir etwas zu wenig Koralle") and the reference screenshot in which the full sidebar, all row titles, and most link arrows are coral instead of dark-petrol/quiet-grey. This file only ADDS rules — it doesn't touch styles.css — so it can be loaded after styles.css to override targeted properties, or removed entirely to revert. ==================================================================== */ .theme-coral{ --accent: #ef5c4c; /* warmer coral than the original #e23a2c */ --accent-soft: #f47466; --accent-hover: #e44b3a; --accent-text: #fff; --coral-on-bg: #ff7466; /* used for text-on-petrol; slightly lighter for legibility */ --coral-rail: #ef5c4c; } /* ----- Sidebar — solid coral rail (matches the reference) ----- */ .theme-coral .sidebar{ background: var(--coral-rail); border-right: 0; } .theme-coral .sb-item{ color: rgba(255,255,255,.88); } .theme-coral .sb-item:hover{ background: rgba(255,255,255,.12); color: #fff; } .theme-coral .sb-item.is-active{ color: #fff; background: rgba(0,0,0,.18); } .theme-coral .sb-item.is-active::before{ background: #fff; /* white rail tag on coral, not red on dark */ } .theme-coral .sb-toggle, .theme-coral .sb-logo{ color: #fff; } /* ----- Topbar — softer hover/active accent on links so they tie back ----- */ .theme-coral .tb-link.is-active::after{ background: var(--coral-on-bg); } .theme-coral .tb-cta{ background: var(--accent); } .theme-coral .tb-cta:hover{ background: var(--accent-hover); } /* Headings stay in the cream foreground tone. Clemens 2026-05-26: lachsfarbene Schrift auf petrol "funktioniert für mich nicht so gut" bei vereinzelten Schlagworten — die Koralle bleibt dem CTA + echten Markierungen vorbehalten. .about-h darf coral bleiben weil dort der textlastige Block die Kontrastsetzung verträgt. */ .theme-coral .row-title, .theme-coral .popular-title, .theme-coral .faq-h, .theme-coral .page-h{ color: var(--fg); } .theme-coral .about-h{ color: var(--coral-on-bg); /* textlastiger Block — Clemens hat den OK gegeben */ } .theme-coral .row-all{ color: var(--fg-2); font-weight: 500; } .theme-coral .row-all:hover{ color: var(--fg); } .theme-coral .row-all:hover{ color: #fff; background: rgba(239, 92, 76, .18); } .theme-coral .row-nav{ border-color: rgba(239, 92, 76, .35); color: var(--coral-on-bg); } .theme-coral .row-nav:hover{ background: rgba(239, 92, 76, .14); color: #fff; border-color: var(--coral-on-bg); } /* ----- Card duration chip stays subtle, but bookmark + hover play in coral ----- */ .theme-coral .card-bookmark{ background: rgba(0,0,0,.55); } .theme-coral .card-bookmark:hover{ background: var(--accent); } .theme-coral .ph-play{ background: rgba(255,255,255,.94); color: var(--accent); } /* ----- Inline links / read-more arrows / chevrons ----- */ .theme-coral .eyebrow{ color: var(--coral-on-bg); } .theme-coral .about-more, .theme-coral .popular-more, .theme-coral a.read-more, .theme-coral .footer a:hover, .theme-coral .topic-link{ color: var(--coral-on-bg); } .theme-coral .topic-link svg path, .theme-coral .row-all svg path{ fill: currentColor; } /* ----- Hero CTA "Jetzt ansehen" — already on accent, but ensure new coral propagates ----- */ .theme-coral .btn-primary{ background: var(--accent); } .theme-coral .btn-primary:hover{ background: var(--accent-hover); filter: none; } .theme-coral .hero-kicker .dot{ background: var(--accent); } /* ----- FAQ accordion "+" markers ----- */ .theme-coral .faq-item summary::after, .theme-coral .faq-toggle{ color: var(--coral-on-bg); } .theme-coral .faq-item[open] summary{ color: #fff; } /* ----- "mit epd Text" badges — keep coral, but a deeper warmer tone ----- */ .theme-coral .epd-text-badge, .theme-coral .chip-on{ background: var(--accent); color: #fff; } /* ----- Pills used in stub pages (e.g., "Beitrag anzeigen") ----- */ .theme-coral .pill-primary, .theme-coral .popular-cta, .theme-coral .erk-cta{ background: var(--accent); color: #fff; } .theme-coral .pill-primary:hover, .theme-coral .popular-cta:hover, .theme-coral .erk-cta:hover{ background: var(--accent-hover); } /* ----- Newsletter modal CTA + check accents ----- */ .theme-coral .nl-submit{ background: var(--accent); } .theme-coral .nl-submit:hover{ background: var(--accent-hover); } .theme-coral .nl-check input:checked + .nl-check-box{ background: var(--accent); border-color: var(--accent); } /* ----- Lightbox top icon-buttons "is-on" state ----- */ .theme-coral .lb-icon-btn.is-on{ color: var(--accent); background: #fff; } .theme-coral .lb-close:hover{ background: var(--accent); color: #fff; } /* ----- The sidebar takes the bg color, so the dim-on-hover overlay needs a touch up ----- */ .theme-coral .sidebar.expanded{ background: linear-gradient(180deg, var(--coral-rail) 0%, color-mix(in oklab, var(--coral-rail) 88%, black 12%) 100%); } /* ----- Tweaks panel chip when "Coral" theme is active ----- */ .theme-coral .tweaks-panel .tw-chip.is-on{ background: var(--accent); color: #fff; border-color: var(--accent); }