========================================================= */ .site-main--full .hero, .site-main--full .section, .site-main--full .container, .site-main--full .dash-head{ max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* trotzdem nicht "kleben": schön am Rand mit Padding */ .site-main--full{ padding-left: var(--pad); padding-right: var(--pad); } /* ========================================================= CLEAN SPLIT LAYOUT (halb Bild / halb Text) – INDEX ========================================================= */ /* Header Logo wirklich ganz links */ .site-header .bar{ width:100%; padding: 14px var(--pad) 14px 8px; display:flex; align-items:center; justify-content: space-between; gap: 14px; } /* Full width für alle Seiten, wenn site-main--full */ .site-main--full .hero, .site-main--full .section, .site-main--full .container, .site-main--full .dash-head{ max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ===== Hero Split ===== */ .hero-split{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: stretch; padding: 18px var(--pad); } .hero-panel{ border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); box-shadow: var(--shadow-soft); padding: clamp(18px, 2.4vw, 28px); overflow:hidden; position:relative; } .hero-panel::before{ content:""; position:absolute; inset:0; background: radial-gradient(900px 320px at 15% 0%, rgba(59,130,246,.22), transparent 60%); pointer-events:none; opacity:.9; } .hero-panel > *{ position:relative; } .hero-pill{ display:inline-flex; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); font-weight: 900; font-size: 12px; color: rgba(255,255,255,.88); } .hero-title{ margin: 14px 0 0; font-size: clamp(30px, 4.2vw, 52px); letter-spacing: -0.03em; line-height: 1.03; } .hero-sub{ margin-top: 10px; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.65; } .hero-bullets{ margin: 14px 0 0; padding-left: 18px; color: rgba(255,255,255,.80); font-weight: 700; } .hero-bullets li{ margin: 8px 0; } .hero-cta{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 16px; } .hero-mini{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; } .mini-kpi{ border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding: 12px; display:flex; flex-direction: column; gap: 6px; } .mini-kpi span{ font-size: 12px; color: rgba(255,255,255,.68); font-weight: 900; } .mini-kpi b{ font-size: 14px; font-weight: 950; } .hero-media{ border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.62)), var(--page-hero, none); background-size: cover; background-position: center; box-shadow: var(--shadow-soft); overflow:hidden; position:relative; min-height: 420px; } .hero-media-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start; padding: 16px; } .hero-badge{ border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(10,16,32,.58); backdrop-filter: blur(10px); padding: 12px 14px; display:flex; flex-direction: column; gap: 4px; } .hero-badge b{ font-size: 18px; font-weight: 950; } .hero-badge span{ color: rgba(255,255,255,.70); font-weight: 800; font-size: 12px; } /* ===== Tiles ===== */ .section-slim{ padding: 18px var(--pad); } .tile-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .tile{ display:flex; gap: 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding: 14px; box-shadow: var(--shadow-tiny); transition: transform 140ms ease, background 140ms ease, border-color 140ms ease; } .tile:hover{ transform: translateY(-2px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); } .tile-icon{ width: 34px; height: 34px; border-radius: 12px; display:grid; place-items:center; font-weight: 950; background: rgba(59,130,246,.18); border: 1px solid rgba(59,130,246,.28); } .tile-title{ font-weight: 950; } .tile-text{ margin-top: 4px; color: rgba(255,255,255,.72); font-weight: 700; font-size: 13px; line-height:1.45; } /* ===== Split sections (alternierend) ===== */ .split-section{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px var(--pad); align-items: stretch; } .split-section.reverse .split-media{ order: 2; } .split-section.reverse .split-content{ order: 1; } .split-media{ border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.68)), var(--split-image); background-size: cover; background-position: center; min-height: 380px; box-shadow: var(--shadow-soft); } .split-content{ border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); box-shadow: var(--shadow-soft); padding: clamp(18px, 2.2vw, 26px); } .split-kicker{ display:inline-flex; font-weight: 950; font-size: 12px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.86); } .split-title{ margin: 12px 0 0; font-size: clamp(22px, 2.7vw, 34px); letter-spacing: -0.02em; } .split-text{ margin-top: 10px; color: rgba(255,255,255,.78); font-weight: 700; line-height: 1.65; } .check-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 14px; } .check{ border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding: 12px; font-weight: 850; color: rgba(255,255,255,.84); position:relative; padding-left: 40px; } .check::before{ content:"✓"; position:absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 6px; display:grid; place-items:center; background: rgba(34,197,94,.16); border: 1px solid rgba(34,197,94,.30); color: rgba(255,255,255,.92); font-weight: 950; font-size: 12px; } .pill-row{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .split-actions{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } /* ===== Gallery row ===== */ .gallery-head{ display:flex; align-items:flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .gallery-title{ margin:0; } .gallery-sub{ margin:0; color: rgba(255,255,255,.72); font-weight: 700; } .gallery-row{ margin-top: 12px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .gimg{ border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background-size: cover; background-position: center; min-height: 170px; box-shadow: var(--shadow-tiny); transition: transform 140ms ease; } .gimg:hover{ transform: translateY(-2px); } /* ===== CTA Band ===== */ .cta-band{ padding: 18px var(--pad) 40px; } .cta-card{ border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(900px 320px at 15% 0%, rgba(59,130,246,.20), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); box-shadow: var(--shadow-soft); padding: clamp(18px, 2.4vw, 28px); display:flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; } .cta-kicker{ color: rgba(255,255,255,.70); font-weight: 900; font-size: 12px; } .cta-title{ margin: 6px 0 0; font-size: clamp(22px, 2.6vw, 34px); } .cta-text{ margin-top: 8px; color: rgba(255,255,255,.78); font-weight: 700; } .cta-actions{ display:flex; gap:10px; flex-wrap:wrap; } /* ===== Responsive ===== */ @media (max-width: 980px){ .hero-split{ grid-template-columns: 1fr; } .hero-media{ min-height: 320px; } .tile-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } .split-section{ grid-template-columns: 1fr; } .split-section.reverse .split-media{ order: 1; } .split-section.reverse .split-content{ order: 2; } .gallery-row{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px){ .hero-mini{ grid-template-columns: 1fr; } .check-grid{ grid-template-columns: 1fr; } .tile-grid{ grid-template-columns: 1fr; } } /* Theme Toggle Button */ .theme-toggle{ display:inline-flex; align-items:center; gap:8px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: inherit; font-weight: 900; font-size: 13px; cursor:pointer; transition: transform 140ms ease, background 140ms ease, border-color 140ms ease; } .theme-toggle:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); } html[data-theme="light"] .theme-toggle{ border-color: rgba(10,16,32,.12); background: rgba(10,16,32,.04); } html[data-theme="light"] .theme-toggle:hover{ background: rgba(10,16,32,.06); border-color: rgba(10,16,32,.16); } .theme-icon{ width: 22px; height: 22px; border-radius: 999px; display:grid; place-items:center; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); } html[data-theme="light"] .theme-icon{ border-color: rgba(10,16,32,.12); background: rgba(10,16,32,.05); } /* ========================= LIGHT MODE: Text sichtbar machen ========================= */ html[data-theme="light"] body{ color: var(--text); } /* Headings/Text überall sauber übernehmen */ html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] p, html[data-theme="light"] li, html[data-theme="light"] .muted{ color: inherit; } /* Karten / Panels: heller Hintergrund + dunkler Text */ html[data-theme="light"] .card, html[data-theme="light"] .hero-panel, html[data-theme="light"] .split-content{ background: rgba(255,255,255,.78); border-color: rgba(10,16,32,.10); color: rgba(10,16,32,.92); } /* Der blaue glow in cards/hero-panel darf bleiben, aber dezenter */ html[data-theme="light"] .card::before, html[data-theme="light"] .hero-panel::before{ opacity: .35; } /* Pills/Badges/Tags: nicht weiß bleiben */ html[data-theme="light"] .pill, html[data-theme="light"] .hero-pill, html[data-theme="light"] .split-kicker, html[data-theme="light"] .badge, html[data-theme="light"] .tag{ background: rgba(10,16,32,.05); border-color: rgba(10,16,32,.12); color: rgba(10,16,32,.86); } /* Hero bullets */ html[data-theme="light"] .hero-bullets{ color: rgba(10,16,32,.82); } /* Buttons: Ghost Buttons im Light Mode dunkler */ html[data-theme="light"] .btn, html[data-theme="light"] .btn-ghost{ background: rgba(10,16,32,.04); border-color: rgba(10,16,32,.12); color: rgba(10,16,32,.86); } html[data-theme="light"] .btn:hover, html[data-theme="light"] .btn-ghost:hover{ background: rgba(10,16,32,.06); border-color: rgba(10,16,32,.16); } /* Primary Button bleibt blau, Text dunkler damit's modern wirkt */ html[data-theme="light"] .btn-primary{ color: #071326; } /* Tile / Check Karten ebenfalls korrekt */ html[data-theme="light"] .tile, html[data-theme="light"] .check, html[data-theme="light"] .mini, html[data-theme="light"] .stat{ background: rgba(255,255,255,.72); border-color: rgba(10,16,32,.10); color: rgba(10,16,32,.90); } /* Hero Media Badge */ html[data-theme="light"] .hero-badge{ background: rgba(255,255,255,.72); border-color: rgba(10,16,32,.10); color: rgba(10,16,32,.92); } html[data-theme="light"] .hero-badge span{ color: rgba(10,16,32,.65); } /* ========================================================= LIGHT MODE PATCH v2 Fix: graue Balken (inputs/selects) + unsichtbare Mini-Boxen ========================================================= */ /* 1) Grundsätzlich: alles soll im Light Mode dunkel lesbar sein */ html[data-theme="light"] body{ color: rgba(10,16,32,.92); } /* 2) Admin/Dashboard: Inputs/Selects/Textareas -> kein grauer Balken */ html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea{ background: rgba(255,255,255,.92) !important; color: rgba(10,16,32,.92) !important; border: 1px solid rgba(10,16,32,.16) !important; box-shadow: 0 10px 30px rgba(10,16,32,.08) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder{ color: rgba(10,16,32,.45) !important; } /* Fokus im Light Mode */ html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus{ border-color: rgba(37,99,235,.45) !important; box-shadow: 0 0 0 5px rgba(37,99,235,.14), 0 10px 30px rgba(10,16,32,.08) !important; } /* Option-Farben (wichtig bei manchen Browsern) */ html[data-theme="light"] select option{ color: rgba(10,16,32,.92); background: #fff; } /* 3) Tabellen/Admin: Header/Zellen sichtbar + sauber */ html[data-theme="light"] .admin-table-wrapper{ background: rgba(255,255,255,.85) !important; border-color: rgba(10,16,32,.12) !important; box-shadow: 0 14px 50px rgba(10,16,32,.10) !important; } html[data-theme="light"] .admin-table th{ background: rgba(10,16,32,.04) !important; color: rgba(10,16,32,.78) !important; border-bottom: 1px solid rgba(10,16,32,.10) !important; } html[data-theme="light"] .admin-table td{ color: rgba(10,16,32,.90) !important; border-bottom: 1px solid rgba(10,16,32,.08) !important; } html[data-theme="light"] .admin-table tr:hover td{ background: rgba(37,99,235,.06) !important; } /* 4) Kleine Boxen (KPI / Mini-Karten / Stats / Tiles) -> stärkerer Kontrast */ html[data-theme="light"] .mini-kpi, html[data-theme="light"] .tile, html[data-theme="light"] .stat, html[data-theme="light"] .mini, html[data-theme="light"] .kpi, html[data-theme="light"] .check{ background: rgba(255,255,255,.92) !important; border-color: rgba(10,16,32,.14) !important; color: rgba(10,16,32,.92) !important; box-shadow: 0 12px 34px rgba(10,16,32,.10) !important; } /* Text in den Mini-Boxen */ html[data-theme="light"] .mini-kpi span, html[data-theme="light"] .stat-label, html[data-theme="light"] .mini-text, html[data-theme="light"] .kpi-top{ color: rgba(10,16,32,.62) !important; } /* 5) Pills/Badges: nicht „weiß auf weiß“ */ html[data-theme="light"] .pill, html[data-theme="light"] .hero-pill, html[data-theme="light"] .split-kicker, html[data-theme="light"] .badge, html[data-theme="light"] .tag{ background: rgba(10,16,32,.05) !important; border-color: rgba(10,16,32,.12) !important; color: rgba(10,16,32,.86) !important; } /* 6) Buttons im Light Mode (Ghosts nicht ausblassen) */ html[data-theme="light"] .btn, html[data-theme="light"] .btn-ghost{ background: rgba(10,16,32,.04) !important; border-color: rgba(10,16,32,.14) !important; color: rgba(10,16,32,.86) !important; } html[data-theme="light"] .btn:hover, html[data-theme="light"] .btn-ghost:hover{ background: rgba(10,16,32,.06) !important; border-color: rgba(10,16,32,.18) !important; } /* Primary Button bleibt blau, Text gut lesbar */ html[data-theme="light"] .btn-primary{ color: #071326 !important; } /* 7) Hero Panel / Split Content: heller, aber nicht „weg“ */ html[data-theme="light"] .hero-panel, html[data-theme="light"] .split-content, html[data-theme="light"] .card{ background: rgba(255,255,255,.88) !important; border-color: rgba(10,16,32,.12) !important; color: rgba(10,16,32,.92) !important; } /* 8) Footer/Header Kontrast */ html[data-theme="light"] .site-footer{ background: rgba(247,248,251,.85) !important; border-top: 1px solid rgba(10,16,32,.10) !important; } /* ========================================================= LIGHT MODE PATCH v3 Fix: title-text / cta-kicker / tile-text + Admin Form/Modal ========================================================= */ /* 0) Globale sichere Textfarben für typische "Text-Klassen" */ html[data-theme="light"] .title-text, html[data-theme="light"] .tile-title, html[data-theme="light"] .tile-text, html[data-theme="light"] .cta-kicker, html[data-theme="light"] .cta-title, html[data-theme="light"] .cta-text, html[data-theme="light"] .gallery-title, html[data-theme="light"] .gallery-sub, html[data-theme="light"] .split-title, html[data-theme="light"] .split-text, html[data-theme="light"] .hero-title, html[data-theme="light"] .hero-sub{ color: rgba(10,16,32,.92) !important; } /* Muted Varianten */ html[data-theme="light"] .muted, html[data-theme="light"] .tile-text, html[data-theme="light"] .gallery-sub, html[data-theme="light"] .cta-kicker{ color: rgba(10,16,32,.66) !important; } /* 1) Falls irgendwo "weiß" hart drin ist -> kill-switch */ html[data-theme="light"] [style*="color: #fff"], html[data-theme="light"] [style*="color:#fff"], html[data-theme="light"] [style*="color: rgb(255, 255, 255)"]{ color: rgba(10,16,32,.92) !important; } /* 2) CTA Card: sicher sichtbar */ html[data-theme="light"] .cta-card{ background: rgba(255,255,255,.92) !important; border-color: rgba(10,16,32,.12) !important; box-shadow: 0 16px 60px rgba(10,16,32,.10) !important; } /* 3) Admin: Modal + Formulare (Komponente hinzufügen / Besuch hinzufügen) */ html[data-theme="light"] .modal{ background: rgba(10,16,32,.35) !important; backdrop-filter: blur(10px); } html[data-theme="light"] .modal-card{ background: rgba(255,255,255,.96) !important; border-color: rgba(10,16,32,.14) !important; color: rgba(10,16,32,.92) !important; box-shadow: 0 30px 120px rgba(10,16,32,.22) !important; } /* Alles im Modal soll dunklen Text haben */ html[data-theme="light"] .modal-card *{ color: rgba(10,16,32,.92); } /* Formular-Wrapper (falls du solche Klassen nutzt) */ html[data-theme="light"] .form-wrap, html[data-theme="light"] .auth-card, html[data-theme="light"] .dash-welcome{ background: rgba(255,255,255,.90) !important; border-color: rgba(10,16,32,.12) !important; color: rgba(10,16,32,.92) !important; } /* 4) Admin: Buttons im Modal (z.B. Speichern/Abbrechen) */ html[data-theme="light"] .modal-card .btn, html[data-theme="light"] .modal-card button{ background: rgba(10,16,32,.04) !important; border: 1px solid rgba(10,16,32,.14) !important; color: rgba(10,16,32,.86) !important; } html[data-theme="light"] .modal-card .btn-primary{ background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(59,130,246,.88)) !important; border-color: rgba(37,99,235,.35) !important; color: #071326 !important; } /* 5) Admin: Labels/Hint Text */ html[data-theme="light"] label, html[data-theme="light"] .user-k, html[data-theme="light"] .kpi-top{ color: rgba(10,16,32,.70) !important; } /* 6) Safety: Links im Light Mode */ html[data-theme="light"] a{ color: rgba(10,16,32,.92); } html[data-theme="light"] a:hover{ color: rgba(37,99,235,.92); } .gf-image{ background-position: center 20%; } /* ========================================================= ABOUT PAGE – clean, full-width, CEO with round photo ========================================================= */ .about-hero{ padding: 18px var(--pad); } .about-hero-inner{ border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(900px 320px at 15% 0%, rgba(59,130,246,.20), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); box-shadow: var(--shadow-soft); padding: clamp(18px, 2.6vw, 34px); } .about-kicker{ display:inline-flex; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); font-weight: 900; font-size: 12px; color: rgba(255,255,255,.88); } .about-title{ margin: 14px 0 0; font-size: clamp(30px, 4.2vw, 54px); letter-spacing: -0.03em; line-height: 1.02; } .about-lead{ margin-top: 10px; color: rgba(255,255,255,.80); font-weight: 700; max-width: 70ch; } .about-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; } .about-metrics{ margin-top: 18px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; } .metric{ border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding: 12px 14px; } .metric b{ display:block; font-weight: 950; } .metric span{ color: rgba(255,255,255,.68); font-weight: 800; font-size: 12px; } /* CEO Card */ .about-ceo{ padding: 18px var(--pad); } .ceo-card{ display:grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: stretch; border-radius: 26px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); box-shadow: var(--shadow-soft); padding: clamp(16px, 2.2vw, 24px); } .ceo-photo-wrap{ display:grid; place-items:center; border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); overflow:hidden; min-height: 320px; } .ceo-photo{ width: 220px; height: 220px; border-radius: 999px; /* ✅ rund */ object-fit: cover; object-position: center 18%; /* falls Kopf abgeschnitten -> Zahl ändern */ border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 60px rgba(0,0,0,.35); background: rgba(255,255,255,.06); } .ceo-content{ padding: 6px 4px; } .ceo-pill{ display:inline-flex; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07); font-weight: 900; font-size: 12px; color: rgba(255,255,255,.88); } .ceo-name{ margin: 12px 0 0; font-size: clamp(22px, 3vw, 36px); letter-spacing: -0.02em; } .ceo-text{ margin-top: 10px; color: rgba(255,255,255,.78); font-weight: 700; line-height: 1.65; max-width: 78ch; } .ceo-highlights{ margin-top: 14px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } .hl{ border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding: 12px 14px; font-weight: 900; color: rgba(255,255,255,.88); } .ceo-actions{ margin-top: 16px; display:flex; gap: 10px; flex-wrap: wrap; } /* Values */ .about-values{ padding: 18px var(--pad); } .values-head{ display:flex; align-items:flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .values-title{ margin:0; } .values-sub{ margin:0; color: rgba(255,255,255,.72); font-weight: 700; } .values-grid{ margin-top: 12px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } .value{ border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); padding: 14px; box-shadow: var(--shadow-tiny); } .value-top{ display:flex; gap: 10px; align-items:center; font-weight: 950; } .value-icon{ width: 34px; height: 34px; border-radius: 12px; display:grid; place-items:center; background: rgba(59,130,246,.16); border: 1px solid rgba(59,130,246,.26); } /* Gallery */ .about-gallery{ padding: 18px var(--pad); } .about-gallery-row{ margin-top: 12px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } /* Responsive */ @media (max-width: 980px){ .about-metrics{ grid-template-columns: 1fr; } .ceo-card{ grid-template-columns: 1fr; } .ceo-photo-wrap{ min-height: 260px; } .values-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } .about-gallery-row{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px){ .values-grid{ grid-template-columns: 1fr; } .about-gallery-row{ grid-template-columns: 1fr; } } /* ========================================================= QUICK FIX: About Seite Light Mode Text sichtbar ========================================================= */ html[data-theme="light"] .about-hero-inner, html[data-theme="light"] .ceo-card, html[data-theme="light"] .value, html[data-theme="light"] .metric, html[data-theme="light"] .ceo-photo-wrap{ background: rgba(255,255,255,.92) !important; border-color: rgba(10,16,32,.12) !important; color: rgba(10,16,32,.92) !important; box-shadow: 0 16px 60px rgba(10,16,32,.10) !important; } /* alle About Texte, die bei dir noch "weiß" sind */ html[data-theme="light"] .about-kicker, html[data-theme="light"] .about-title, html[data-theme="light"] .about-lead, html[data-theme="light"] .metric b, html[data-theme="light"] .ceo-pill, html[data-theme="light"] .ceo-name, html[data-theme="light"] .ceo-text, html[data-theme="light"] .hl, html[data-theme="light"] .values-title, html[data-theme="light"] .values-sub{ color: rgba(10,16,32,.92) !important; } /* muted (grauer Text) */ html[data-theme="light"] .about-lead, html[data-theme="light"] .metric span, html[data-theme="light"] .values-sub, html[data-theme="light"] .value .muted, html[data-theme="light"] .ceo-text{ color: rgba(10,16,32,.66) !important; } /* Pills/Highlights im Light Mode */ html[data-theme="light"] .about-kicker, html[data-theme="light"] .ceo-pill{ background: rgba(10,16,32,.05) !important; border-color: rgba(10,16,32,.12) !important; } html[data-theme="light"] .hl{ background: rgba(10,16,32,.04) !important; border-color: rgba(10,16,32,.12) !important; } /* Damit Buttons im About Bereich nicht ausbleichen */ html[data-theme="light"] .about-actions .btn-ghost, html[data-theme="light"] .ceo-actions .btn-ghost{ background: rgba(10,16,32,.04) !important; border-color: rgba(10,16,32,.14) !important; color: rgba(10,16,32,.86) !important; } /* ========================================================= CEO FOTO RECHTECKIG (kein Kreis mehr) ========================================================= */ .ceo-photo-wrap.rectangular{ border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-soft); background: rgba(0,0,0,.18); min-height: 420px; /* Höhe der linken Box */ } .ceo-photo-wrap.rectangular img{ width: 100%; height: 100%; object-fit: cover; object-position: center 15%; /* Kopf richtig positionieren */ display: block; } .footer-legal{ display:flex; align-items:center; gap: 10px; } .footer-legal .dot{ opacity: .65; } .footer-bottom a{ color: inherit; text-decoration: none; font-weight: 900; } .footer-bottom a:hover{ text-decoration: underline; }