/* ========================================================= WCFY – Porto Override (HELL) – EIN DATEI Tokens + Overrides + Porto-Komponenten-Fixes + CI-Farben Datei: wcfy.porto.override.css Laden NACH: theme.css, theme-elements.css, default.css Empfohlen: ========================================================= */ /* ========================================================= 1) TOKENS (clamp-first, hell) ========================================================= */ .wcfy-site{ /* --- CI-Farben (vom Projekt) --- */ --wcfy-primary: #1F8F7A; --wcfy-secondary: #7A1E2B; /* sinnvolle Abstufungen (hell UI) */ --wcfy-primary-weak: rgba(31,143,122,0.12); --wcfy-primary-mid: rgba(31,143,122,0.20); --wcfy-secondary-weak: rgba(122,30,43,0.10); --wcfy-secondary-mid: rgba(122,30,43,0.18); /* Fokus-Farbton: primär, aber zurückhaltend */ --wcfy-focus: rgba(31,143,122,0.26); --wcfy-fs-body: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem); --wcfy-lh-body: 1.70; --wcfy-fs-h1: clamp(1.95rem, 1.55rem + 1.60vw, 2.75rem); --wcfy-fs-h2: clamp(1.55rem, 1.30rem + 1.10vw, 2.30rem); --wcfy-fs-h3: clamp(1.25rem, 1.12rem + 0.65vw, 1.70rem); /* --- Radius (Porto nutzt var(--border-radius) breit) --- */ --wcfy-r-12: clamp(0.60rem, 0.52rem + 0.25vw, 0.75rem); --wcfy-r-18: clamp(0.95rem, 0.86rem + 0.30vw, 1.125rem); --wcfy-r-24: clamp(1.25rem, 1.10rem + 0.45vw, 1.50rem); --wcfy-r-48: clamp(2.10rem, 1.70rem + 1.20vw, 3.00rem); --wcfy-radius-top: clamp(1.25rem, 1.10rem + 0.45vw, 1.50rem); /* Porto-Variablen gezielt „ziehen“ */ --border-radius: var(--wcfy-r-24); --border-radius2x: var(--wcfy-r-48); /* --- Spacing --- */ --wcfy-s-1: clamp(0.50rem, 0.45rem + 0.20vw, 0.65rem); --wcfy-s-2: clamp(0.75rem, 0.65rem + 0.40vw, 1.05rem); --wcfy-s-3: clamp(1.00rem, 0.85rem + 0.60vw, 1.40rem); --wcfy-s-4: clamp(1.35rem, 1.05rem + 1.00vw, 2.10rem); /* --- Light surfaces --- */ --wcfy-c-text: rgba(17,17,17,0.92); --wcfy-c-text-muted: rgba(17,17,17,0.72); --wcfy-c-border: rgba(17,17,17,0.14); --wcfy-c-border-strong: rgba(17,17,17,0.20); /* „Glass“ hell: sehr leichte Tönung + sauberer Rand */ --wcfy-glass-bg: rgba(255,255,255,0.78); --wcfy-glass-bg-2: rgba(255,255,255,0.92); --wcfy-glass-brd: rgba(17,17,17,0.12); /* --- Shadows: hell --- */ --wcfy-shadow-1: 0 0.60rem 1.60rem rgba(17,17,17,0.08); --wcfy-shadow-2: 0 0.90rem 2.40rem rgba(17,17,17,0.12); --wcfy-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.55); /* Links (Default) */ --wcfy-link: var(--wcfy-primary); --wcfy-link-hover: rgba(31,143,122,0.86); } /* ========================================================= 2) BASIS-OVERRIDES (Typo, Fokus, Radius, Grundflächen) ========================================================= */ .wcfy-site{ font-family: var(--wcfy-font-sans); color: var(--wcfy-c-text); } .wcfy-site body, body.wcfy-site{ font-family: var(--wcfy-font-sans) !important; font-size: var(--wcfy-fs-body); line-height: var(--wcfy-lh-body); color: var(--wcfy-c-text); } /* Porto-Helferklasse */ .wcfy-site .default-font{ font-family: var(--wcfy-font-sans) !important; } /* Überschriften (fluid) */ .wcfy-site h1{ font-size: var(--wcfy-fs-h1); line-height: 1.3; } .wcfy-site h2{ font-size: var(--wcfy-fs-h2); line-height: 1.88; } .wcfy-site h3{ font-size: var(--wcfy-fs-h3); line-height: 1.21; } /* Links: CI-konform, ohne Porto-Skins zu sprengen */ .wcfy-site a{ color: var(--wcfy-link); text-decoration-thickness: 0.10em; text-underline-offset: 0.18em; } .wcfy-site a:hover{ color: var(--wcfy-link-hover); } /* Fokus (barrierearm, hell) */ .wcfy-site :focus{ outline: none; } .wcfy-site :focus-visible{ box-shadow: 0 0 0 3px var(--wcfy-focus); border-radius: var(--border-radius); } /* Radius-Sweep */ .wcfy-site .btn, .wcfy-site .dropdown-menu, .wcfy-site .form-control, .wcfy-site .input-group-text, .wcfy-site .card, .wcfy-site .modal-content, .wcfy-site .alert, .wcfy-site .nav-pills .nav-link, .wcfy-site .pagination .page-link{ border-radius: var(--border-radius); } /* Grundflächen hell */ .wcfy-site .card, .wcfy-site .modal-content, .wcfy-site .dropdown-menu{ background: var(--wcfy-glass-bg); border: 1px solid var(--wcfy-glass-brd); box-shadow: var(--wcfy-shadow-1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .wcfy-site .card:hover{ box-shadow: var(--wcfy-shadow-2); } /* Inputs */ .wcfy-site .form-control{ border-color: var(--wcfy-c-border); background-color: rgba(255,255,255,0.70); color: var(--wcfy-c-text); } .wcfy-site .form-control::placeholder{ color: rgba(17,17,17,0.55); } /* Header Search (Porto) */ .wcfy-site #header .header-search .form-control{ border-radius: var(--border-radius); font-size: clamp(0.90rem, 0.86rem + 0.16vw, 1.00rem); height: auto; padding: clamp(0.45rem, 0.40rem + 0.18vw, 0.60rem) clamp(0.75rem, 0.68rem + 0.24vw, 0.95rem); background: rgba(255,255,255,0.85); } /* Simple/Search-with-select */ .wcfy-site .simple-search .form-control, .wcfy-site .simple-search .btn, .wcfy-site .search-with-select .search-form-wrapper > .form-control, .wcfy-site .search-with-select .search-form-wrapper .search-form-select-wrapper{ border-radius: var(--border-radius) !important; } /* ========================================================= 2a) CI-FARB-AKZENTE (Buttons, Badges, Alerts, Pills) ========================================================= */ /* Primary Buttons */ .wcfy-site .btn.btn-primary, .wcfy-site .btn-primary{ background-color: var(--wcfy-primary); border-color: var(--wcfy-primary); color: #fff; box-shadow: var(--wcfy-shadow-inset), var(--wcfy-shadow-1); } .wcfy-site .btn.btn-primary:hover, .wcfy-site .btn-primary:hover{ background-color: rgba(31,143,122,0.92); border-color: rgba(31,143,122,0.92); box-shadow: var(--wcfy-shadow-inset), var(--wcfy-shadow-2); } /* Secondary Buttons */ .wcfy-site .btn.btn-secondary, .wcfy-site .btn-secondary{ background-color: var(--wcfy-secondary); border-color: var(--wcfy-secondary); color: #fff; box-shadow: var(--wcfy-shadow-inset), var(--wcfy-shadow-1); } .wcfy-site .btn.btn-secondary:hover, .wcfy-site .btn-secondary:hover{ background-color: rgba(122,30,43,0.92); border-color: rgba(122,30,43,0.92); box-shadow: var(--wcfy-shadow-inset), var(--wcfy-shadow-2); } /* Outline Varianten (Porto/Bootstrap) */ .wcfy-site .btn-outline-primary{ color: var(--wcfy-primary); border-color: rgba(31,143,122,0.45); background: rgba(255,255,255,0.60); } .wcfy-site .btn-outline-primary:hover{ background: var(--wcfy-primary-weak); border-color: rgba(31,143,122,0.60); } .wcfy-site .btn-outline-secondary{ color: var(--wcfy-secondary); border-color: rgba(122,30,43,0.40); background: rgba(255,255,255,0.60); } .wcfy-site .btn-outline-secondary:hover{ background: var(--wcfy-secondary-weak); border-color: rgba(122,30,43,0.55); } /* Badges */ .wcfy-site .badge.bg-primary, .wcfy-site .badge.badge-primary{ background: var(--wcfy-primary) !important; color: #fff; } .wcfy-site .badge.bg-secondary, .wcfy-site .badge.badge-secondary{ background: var(--wcfy-secondary) !important; color: #fff; } /* Alerts (sanft, hell) */ .wcfy-site .alert-primary{ background: rgba(31,143,122,0.10); border-color: rgba(31,143,122,0.22); color: rgba(17,17,17,0.92); } .wcfy-site .alert-secondary{ background: rgba(122,30,43,0.08); border-color: rgba(122,30,43,0.20); color: rgba(17,17,17,0.92); } /* Pills active */ .wcfy-site .nav-pills .nav-link.active, .wcfy-site .nav-pills .show > .nav-link{ background: var(--wcfy-primary); color: #fff; box-shadow: var(--wcfy-shadow-inset), var(--wcfy-shadow-1); } /* Form: focus border */ .wcfy-site .form-control:focus{ border-color: rgba(31,143,122,0.45); box-shadow: 0 0 0 3px var(--wcfy-focus); } /* ========================================================= 3) Porto-Komponenten, die gern „weiß/eckig“ bleiben (hell) ========================================================= */ /* Utility */ .wcfy-site .wcfy-surface{ background: var(--wcfy-glass-bg); border: 1px solid var(--wcfy-glass-brd); border-radius: var(--border-radius); box-shadow: var(--wcfy-shadow-1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Featured Boxes */ .wcfy-site .featured-box, .wcfy-site .featured-box .box-content, .wcfy-site .featured-boxes .featured-box{ border-radius: var(--border-radius); } .wcfy-site .featured-box{ background: var(--wcfy-glass-bg); border: 1px solid var(--wcfy-glass-brd); box-shadow: var(--wcfy-shadow-1); } .wcfy-site .featured-box .box-content{ background: transparent; padding: var(--wcfy-s-3); } /* Thumb Info */ .wcfy-site .thumb-info{ border-radius: var(--border-radius); overflow: hidden; border-color: var(--wcfy-glass-brd); box-shadow: var(--wcfy-shadow-1); background: var(--wcfy-glass-bg); } .wcfy-site .thumb-info .thumb-info-wrapper{ border-radius: inherit; } /* Testimonials */ .wcfy-site .testimonial, .wcfy-site .testimonial .testimonial-author, .wcfy-site .testimonial blockquote{ border-radius: var(--border-radius); } .wcfy-site .testimonial{ background: var(--wcfy-glass-bg); border: 1px solid var(--wcfy-glass-brd); box-shadow: var(--wcfy-shadow-1); padding: var(--wcfy-s-3); } .wcfy-site .testimonial blockquote{ background: transparent; margin: 0; padding: 0; } /* Nav Tabs */ .wcfy-site .nav-tabs{ border-bottom-color: rgba(17,17,17,0.12); } .wcfy-site .nav-tabs .nav-link{ border-radius: var(--border-radius) var(--border-radius) 0 0; } .wcfy-site .nav-tabs .nav-link.active, .wcfy-site .nav-tabs .nav-item.show .nav-link{ background: var(--wcfy-glass-bg-2); border-color: var(--wcfy-glass-brd) var(--wcfy-glass-brd) transparent; box-shadow: var(--wcfy-shadow-inset); } .wcfy-site .tab-content{ background: var(--wcfy-glass-bg); border: 1px solid var(--wcfy-glass-brd); border-top: none; border-radius: 0 0 var(--border-radius) var(--border-radius); box-shadow: var(--wcfy-shadow-1); padding: var(--wcfy-s-3); } /* Accordion (Bootstrap 5) */ .wcfy-site .accordion-item{ background: var(--wcfy-glass-bg); border: 1px solid var(--wcfy-glass-brd); border-radius: var(--border-radius); box-shadow: var(--wcfy-shadow-1); overflow: hidden; } .wcfy-site .accordion-item + .accordion-item{ margin-top: var(--wcfy-s-2); } .wcfy-site .accordion-button{ background: transparent; border-radius: 0; padding: var(--wcfy-s-3); font-size: clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem); color: var(--wcfy-c-text); } .wcfy-site .accordion-button:focus{ box-shadow: 0 0 0 3px var(--wcfy-focus); } .wcfy-site .accordion-body{ padding: 0 var(--wcfy-s-3) var(--wcfy-s-3); } /* Porto Toggle */ .wcfy-site .toggle{ border-radius: var(--border-radius); overflow: hidden; border: 1px solid var(--wcfy-glass-brd); box-shadow: var(--wcfy-shadow-1); background: var(--wcfy-glass-bg); } .wcfy-site .toggle > label{ background: transparent; padding: var(--wcfy-s-3); border-bottom: 1px solid rgba(17,17,17,0.10); } .wcfy-site .toggle.active > label{ box-shadow: var(--wcfy-shadow-inset); } .wcfy-site .toggle-content{ padding: var(--wcfy-s-3); } /* Popover / Toast */ .wcfy-site .popover, .wcfy-site .toast{ border-radius: var(--border-radius); border: 1px solid var(--wcfy-glass-brd); background: var(--wcfy-glass-bg-2); box-shadow: var(--wcfy-shadow-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .wcfy-site .popover-header, .wcfy-site .toast-header{ background: transparent; border-bottom: 1px solid rgba(17,17,17,0.10); } /* Pagination / Breadcrumb */ .wcfy-site .pagination .page-link{ background: rgba(255,255,255,0.75); border-color: rgba(17,17,17,0.14); box-shadow: var(--wcfy-shadow-inset); color: var(--wcfy-c-text); } .wcfy-site .pagination .page-item.active .page-link{ background: rgba(255,255,255,0.92); border-color: rgba(17,17,17,0.18); } /* Tables */ .wcfy-site .table{ color: inherit; } .wcfy-site .table thead th{ border-bottom-color: rgba(17,17,17,0.12); } .wcfy-site .table > :not(caption) > * > *{ border-bottom-color: rgba(17,17,17,0.10); } .wcfy-site .table-responsive{ border-radius: var(--border-radius); border: 1px solid rgba(17,17,17,0.12); background: rgba(255,255,255,0.60); overflow: hidden; } /* Cards Header/Footer */ .wcfy-site .card-header, .wcfy-site .card-footer{ background: transparent; border-color: rgba(17,17,17,0.10); } .wcfy-site .card-header:first-child{ border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); } .wcfy-site .card-footer:last-child{ border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } /* ========================================================= 4) Wenige Mediaqueries (nur echte Layout-Brüche) ========================================================= */ @media (max-width: 36rem){ .wcfy-site .card, .wcfy-site .modal-content{ padding: var(--wcfy-s-2); } .wcfy-site .featured-box .box-content, .wcfy-site .testimonial, .wcfy-site .tab-content, .wcfy-site .accordion-button, .wcfy-site .accordion-body, .wcfy-site .toggle > label, .wcfy-site .toggle-content{ padding: var(--wcfy-s-2); } } /* ========================================================= WCFY – Header A11y + Touch Targets ========================================================= */ .wcfy-skip-link{ position: absolute; left: 0.75rem; top: 0.75rem; z-index: 9999; padding: 0.6rem 0.9rem; border-radius: var(--border-radius, 1rem); background: rgba(255,255,255,0.92); color: rgba(17,17,17,0.92); box-shadow: 0 0.9rem 2.4rem rgba(17,17,17,0.12); transform: translateY(-140%); transition: transform 140ms ease; text-decoration: none; } .wcfy-skip-link:focus, .wcfy-skip-link:focus-visible{ transform: translateY(0); outline: none; box-shadow: 0 0 0 3px rgba(31,143,122,0.26), 0 0.9rem 2.4rem rgba(17,17,17,0.12); } .wcfy-ico{ position: relative; top: 0.06em; margin-right: 0.4rem; } /* bessere Zielzone oben */ .wcfy-toplink{ display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.35rem 0.25rem; text-decoration: none; } /* sichtbarer Tastatur-Fokus im Header */ #header a:focus-visible, #header button:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(31,143,122,0.26); border-radius: var(--border-radius, 1rem); } /* Social Icons als echte Touch-Targets */ #header .header-social-icons a{ display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; border-radius: 999rem; } /* Skip-Link Ziel */ #main-content:focus{ outline: none; } /* ========================================================= WCFY – Footer: Fokus, Touch-Targets, Links ========================================================= */ #footer .wcfy-footer-link{ display: inline-flex; align-items: center; padding-block: 0.15rem; border-radius: var(--border-radius, 1rem); } #footer a:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(31,143,122,0.28); border-radius: var(--border-radius, 1rem); } /* Social Icons als echte Zielzonen */ .wcfy-footer-social{ display: flex; gap: clamp(0.5rem, 0.35rem + 0.6vw, 0.9rem); flex-wrap: wrap; } .wcfy-footer-social__link{ display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; border-radius: 999rem; text-decoration: none; }