/* ========================================================= KiHelpers · main.css — CONSOLIDATED - Einmalige Tokens & Themes - Stabiles Layout - Sichtbare Topbar-Icons - Saubere Startseite (Hero, Kacheln, Pricing) ========================================================= */ /* ======================= Design Tokens & Themes ======================= */ :root{ /* Brand */ --blue:#006D8F; --orange:#FF5A1F; --sky:#00CFFF; /* Neutrals */ --gray:#E0E4E7; --fg:#222831; --bg:#ffffff; --text:#222831; /* Rhythmus */ --sec-space:36px; /* Buttons */ --btn-bg: var(--orange); --btn-fg:#fff; --btn-bg-hover:#E14D1A; --btn-outline-fg: var(--blue); --btn-outline-border: var(--blue); /* Fontstack */ --font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans", "Helvetica Neue",Arial,"Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; } /* 960px Responsive Block – vom Test ausgewertet */ @media (max-width: 960px){ #leftPane { display:block; width:100%; } /* Test erwartet #leftPane hier */ #rightPane { display:block; width:100%; } /* Test erwartet #rightPane hier */ .hero-inner { gap: 20px; } .apps .grid { grid-template-columns: repeat(2, 1fr); } } /* 720px Responsive Block – vom Test ausgewertet */ @media (max-width: 720px){ #leftPane { display:none !important; } #rightPane { display:none !important; } } @media (max-width:980px){ :root{ --sec-space:28px; } } /* Dark/Light Umschaltung über data-theme am */ :root[data-theme="dark"]{ --bg:#062232; --text:#ecf7ff; --panel:#0c2f45; --panel-2:#0e3a56; --divider:rgba(255,255,255,.12); } :root[data-theme="light"]{ --bg:#ffffff; --text:#222831; --panel:#f2f5f7; --panel-2:#e8eef2; --divider:rgba(0,0,0,.08); } @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg:#062232; --text:#ecf7ff; --panel:#0c2f45; --panel-2:#0e3a56; --divider:rgba(255,255,255,.12); } } @media (prefers-color-scheme: light){ :root:not([data-theme]){ --bg:#ffffff; --text:#222831; --panel:#f2f5f7; --panel-2:#e8eef2; --divider:rgba(0,0,0,.08); } } /* ===== Base ===== */ *{ box-sizing:border-box; } html,body{ height:100%; } html{ overflow-y:scroll; scrollbar-gutter:stable both-edges; } body{ margin:0; background:var(--bg); color:var(--text); display:flex; flex-direction:column; min-height:100vh; font-family:var(--font-sans); } /* ======================== Topbar & globale Layouts ======================== */ .topbar{ height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#0e3650; border-bottom:1px solid rgba(255,255,255,.12); position:sticky; top:0; z-index:1000; color:#e9f6ff; } .brand{ display:flex; gap:10px; align-items:center; color:#e9f6ff; } .head-actions{ display:flex; gap:8px; align-items:center; flex-wrap: nowrap; } /* 💛 BUGSEARCHER: Global Helper Avatar Styles (Desktop & Mobile) */ #globalHelperAvatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; border: 2px solid #006D8F; cursor: pointer; object-fit: cover; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; flex-shrink: 0; display: block; box-sizing: border-box; } #globalHelperAvatar:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(0, 109, 143, 0.4); } /* 💛 BUGSEARCHER: Touch-optimiert für Mobile (kein Hover-Effekt) */ @media (hover: none) and (pointer: coarse) { #globalHelperAvatar:hover { transform: scale(1); box-shadow: none; } #globalHelperAvatar:active { transform: scale(0.95); opacity: 0.8; } } #globalHelperAvatar.voice-active { border-color: #00AEEF !important; animation: pulse-blue 1.5s infinite; } @keyframes pulse-blue { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 174, 239, 0.7); border-color: #00AEEF; } 50% { box-shadow: 0 0 0 10px rgba(0, 174, 239, 0.3); border-color: #00AEEF; } 70% { box-shadow: 0 0 0 15px rgba(0, 174, 239, 0); border-color: #00AEEF; } } /* runde Icon-Buttons */ .btn-icon{ width:44px; height:44px; /* vorher 36px */ border-radius:12px; border:1px solid rgba(255,255,255,.18); background:#0f415d; color:#e7f6ff; display:grid; place-items:center; cursor:pointer; } .btn-icon svg{ width:22px; height:22px; } /* passend zur Größe */ .btn-icon:hover{ filter:brightness(1.08); } /* Hauptlayout (Sidebar + Content) */ .layout{ display:flex; flex:1 1 auto; min-height:0; width:100%; } .sidebar{ flex:0 0 220px; overflow:auto; background:#002B45; } .content{ flex:1 1 auto; min-width:0; overflow:auto; padding:20px; } .container{ position:static !important; } /* Mobile: Sidebar einklappen */ @media (max-width:720px){ .sidebar{ display:none !important; } } /* ================= Buttons einheitlich ================= */ .btn, .button, .button-primary, .button-style, .button.test{ display:inline-flex; align-items:center; gap:6px; padding:14px 22px; border-radius:14px; border:0; font-weight:700; line-height:1.1; text-decoration:none; cursor:pointer; } .btn-primary, .button-primary, .button.test{ background:var(--btn-bg) !important; color:#fff !important; border:0 !important; } .btn-primary:hover, .button-primary:hover, .button.test:hover{ background:var(--btn-bg-hover) !important; } .btn-outline, .button-ghost, .button-outline{ background:transparent !important; color:var(--btn-outline-fg) !important; border:2px solid var(--btn-outline-border) !important; } .btn-outline:hover{ background:rgba(0,109,143,.08) !important; } .btn-dark{ background:var(--blue) !important; color:#fff !important; } .btn-dark:hover{ background:#005a76 !important; } .btn:focus, .button:focus{ outline:2px solid var(--sky); outline-offset:2px; } .btn[disabled], .button[disabled]{ opacity:.6; cursor:not-allowed; } /* ================= Startseite (Hero) ================= */ .hero{ background: radial-gradient(80% 120% at 80% 20%, rgba(0,207,255,.15), transparent 60%), linear-gradient(180deg, rgba(0,109,143,.06), #0e3650 65%, #0e3650 100%); padding:48px 18px; color:#e9f6ff; /* helle Typo */ margin-bottom:var(--sec-space); } .hero-inner{ max-width:1200px; margin:0 auto; display:grid; gap:28px; grid-template-columns:1.1fr .9fr; align-items:center; } @media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; } } .hero-figure img{ width:100%; height:auto; max-height:540px; object-fit:contain; } @media (max-width:980px){ .hero-figure img{ max-height:420px; } } @media (max-width:600px){ .hero-figure img{ max-height:300px; } } /* Überschriften im Hero & Sektionen hell */ .page-home h1, .page-home h2, .page-home h3{ color:#e9f6ff; } /* CTA-Buttons im Hero (sicher einfärben) */ .page-home .hero .btn-primary{ background:var(--orange) !important; color:#fff !important; } .page-home .hero .btn-dark{ background:var(--blue) !important; color:#fff !important; } .page-home .hero .btn-outline{ color:#d5ecff !important; border:2px solid #d5ecff !important; background:transparent !important; } .page-home .hero .btn-outline:hover{ background:rgba(255,255,255,.08) !important; } @media (max-width:600px){ .page-home .cta .btn{ width:100%; justify-content:center; } } /* Start: Sidebar ausblenden, Content vollbreit */ .page-home .sidebar{ display:none !important; } .page-home .layout{ min-height:calc(100vh - 56px); } .page-home .content{ padding:0; } /* ============================== Kacheln / Apps (Startseite) (compact + icon-left) ============================== */ .page-home .apps{ max-width:1100px; margin:var(--sec-space) auto; padding:0 18px; } .page-home .apps h2{ text-align:center; margin:6px 0 16px; color:#e9f6ff; } /* kompaktere Kachel-Höhe */ .page-home .apps .grid{ display:grid; gap:14px; grid-template-columns:repeat(5,1fr); grid-auto-rows:92px; /* vorher 118px -> flacher */ list-style:none; padding:0; margin:0 auto; } @media (max-width:1100px){ .page-home .apps .grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:700px){ .page-home .apps .grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:100px; /* mobil etwas höher für Lesbarkeit */ } } /* Kachel-Layout: Icon links neben dem Titel, Text darunter */ .page-home .apps .grid .tile{ height:100%; display:grid; grid-template-columns:auto 1fr; /* Icon | Textblock */ grid-template-rows:auto auto; /* Titel | Beschreibung */ align-items:center; column-gap:10px; row-gap:2px; text-decoration:none; color:#14212b; background:#fff; border:1px solid #e6edf3; border-radius:14px; padding:12px 14px; box-shadow:0 4px 14px rgba(0,0,0,.05); transition:.12s ease transform, .12s ease box-shadow, .12s ease border-color; } .page-home .apps .grid .tile:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.08); border-color:#d8e2ea; } /* Icon links – nimmt beide Zeilen (Titel+Text) ein */ .page-home .apps .grid .tile > .ico{ grid-column:1; grid-row:1 / span 2; font-size:22px; line-height:1; margin:0; align-self:start; } /* Titel rechts vom Icon */ .page-home .apps .grid .tile strong{ grid-column:2; grid-row:1; display:block; font-weight:700; margin:0 0 2px 0; } /* Beschreibung rechts unter dem Titel, max. 2 Zeilen */ .page-home .apps .grid .tile small{ grid-column:2; grid-row:2; color:#475564; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; } @supports not (line-clamp: 2){ .page-home .apps .grid .tile small{ max-height:calc(1.25em * 2); } } /* ========================== Scroller-Sektionen & Cards ========================== */ .page-home .section { max-width: 1200px; margin: var(--sec-space) auto 0; padding: 0 18px 12px; } .page-home .section h2 { text-align: center; margin: 12px 0 10px; color: #e9f6ff; } /* Scroller – mit Flex, sauber scrollbar, ohne sichtbare Scrollbalken */ .page-home .scroller { display: flex; /* Karten nebeneinander */ gap: 14px; overflow-x: auto; /* horizontales Scrollen */ padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; max-width: 100%; overscroll-behavior-inline: contain; /* Scrollbars verstecken */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge Legacy */ } .page-home .scroller::-webkit-scrollbar { display: none; /* Safari & Chrome */ } /* Karten */ .page-home .shot { flex: 0 0 auto; /* verhindert Stretching */ background: #08314a; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 12px; width: 260px; /* fixe Breite → sorgt für Überlauf */ display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; scroll-snap-align: start; } .page-home .shot img { width: 100%; height: auto; border-radius: 12px; display: block; } .page-home .shot b { font-size: 16px; } .page-home .shot span { opacity: .9; font-size: 14px; } /* ============== Pricing & Partner ============== */ .page-home .plans{ padding:calc(var(--sec-space)*.5) 0 var(--sec-space); } .page-home .plans h2{ text-align:center; color:#e9f6ff; } .page-home .plans .intro{ text-align:center; opacity:.95; margin:.3rem 0 1rem; color:#e9f6ff; } .page-home .plans-grid{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); max-width:1100px; margin:0 auto; padding:0 18px; align-items:stretch; } @media (max-width:980px){ .page-home .plans-grid{ grid-template-columns:1fr; } } .page-home .card{ display:flex; flex-direction:column; text-align:center; background:#fff; color:#0b1f2a; border:1px solid var(--gray); border-radius:16px; padding:22px; box-shadow:0 4px 14px rgba(0,0,0,.08); transition:.12s ease transform, .12s ease box-shadow; } .page-home .card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.08); } .page-home .card h3{ margin:.25rem 0 .1rem; font-weight:800; font-size:1.2rem; } .page-home .card .meta{ font-weight:700; margin:.35rem 0 1rem; font-size:1.05rem; } .page-home .card .plan-actions{ display:flex; gap:10px; justify-content:center; margin-top:auto; } .page-home .badge{ width:96px; height:96px; object-fit:contain; margin:8px auto 12px; display:block; } .page-home .plans-note{ max-width:950px; margin:12px auto 0; padding:0 18px; text-align:center; line-height:1.45; color:#e9f6ff; } .page-home .plans-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; } .page-home .partners{ max-width:1000px; margin:var(--sec-space) auto; padding:0 18px; text-align:center; } .page-home .logo-row{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; align-items:center; } .page-home .logo-row img{ height:28px; /* vorher 36px */ opacity:.96; object-fit:contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.08)); } @media (max-width:520px){ .page-home .logo-row img{ height:22px; } /* vorher 30px */ } .page-home .logo-row.logos--mono img{ filter:grayscale(100%) opacity(.85); } .page-home .logo-row.logos--mono img:hover{ filter:grayscale(0%) opacity(1) drop-shadow(0 2px 2px rgba(0,0,0,.12)); } /* =================== Accessibility / UX =================== */ @media (prefers-reduced-motion: reduce){ .page-home .tile, .page-home .card{ transition:none !important; } } .captions{ font-size:clamp(1rem,2.5vw,1.4rem); line-height:1.5; color:#eaf6ff; } /* =================== Chat (unverändert) =================== */ .wrap{ display:flex; height:calc(100vh - 56px); } aside{ overflow:auto; } #leftPane{ width:260px; border-right:1px solid var(--gray); } #rightPane{ width:320px; border-left:1px solid var(--gray); } #chatPane{ flex:1; display:flex; flex-direction:column; min-width:0; } #chatLog{ flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px; } .row{ display:flex; } .bubble{ max-width:78%; padding:10px 12px; border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.06); word-wrap:break-word; white-space:pre-wrap; } .user{ justify-content:flex-end; } .user .bubble{ background:var(--blue); color:#fff; border-top-right-radius:6px; } .james{ justify-content:flex-start; } .james .bubble{ background:#FFF3EE; color:var(--fg); border:1px solid #ffd8c7; border-top-left-radius:6px; } /* Forms */ .ki-card{ background:rgba(255,255,255,.03); border-radius:10px; padding:18px; margin-bottom:18px; } .ki-card-title{ margin:0 0 12px; } .ki-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .ki-form-col{ display:flex; flex-direction:column; gap:8px; } .ki-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .ki-input{ padding:10px 12px; border-radius:8px; border:1px solid #d6dee3; background:#fff; color:#222; } .ki-input:focus{ outline:none; box-shadow:0 0 0 2px rgba(0,207,255,.35); border-color:#9bdff1; } .req{ color:#ffb3b3; } .muted{ color:#9ed2e7; font-size:.95rem; } @media (max-width:900px){ .ki-form-grid{ grid-template-columns:1fr; } .ki-row-2{ grid-template-columns:1fr; } } /* Selects */ select.u-full-width{ background-color:#0d2b45; color:#f0f8ff; border:1px solid var(--sky); border-radius:6px; padding:6px 8px; font-size:.95rem; appearance:none; -webkit-appearance:none; -moz-appearance:none; } select.u-full-width:focus{ background-color:#2d3e50; outline:none; border-color:var(--orange); } select.u-full-width option{ background-color:#2d3e50; color:#fff; } /* ======================== FINAL FIXES – ganz unten ======================== */ /* Topbar & Icon-Buttons */ .topbar{ height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#0e3650; border-bottom:1px solid rgba(255,255,255,.12); position:sticky; top:0; z-index:1000; color:#e9f6ff; } .brand{ display:flex; gap:10px; align-items:center; color:#e9f6ff; } .head-actions{ display:flex; gap:8px; align-items:center; } .btn-icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:#0f415d; color:#e7f6ff; /* <- SVG sichtbar */ cursor:pointer; } .btn-icon svg{ width:18px; height:18px; display:block; } .btn-icon:hover{ filter:brightness(1.1); } /* Hero & Section Headings */ .page-home h1, .page-home h2, .page-home h3, .page-home .section h2 { color:#e9f6ff !important; } /* Hero Buttons farbig erzwingen */ .page-home .hero .btn-primary{ background:var(--orange) !important; color:#fff !important; } .page-home .hero .btn-dark{ background:var(--blue) !important; color:#fff !important; } .page-home .hero .btn-outline{ color:#d5ecff !important; border:2px solid #d5ecff !important; background:transparent !important; } .page-home .hero .btn-outline:hover{ background:rgba(255,255,255,.08) !important; } /* Kacheln gleichmäßig */ .page-home .apps .grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); grid-auto-rows:118px; } .page-home .apps .grid .tile{ height:100%; display:flex; gap:12px; align-items:flex-start; background:#fff; color:#14212b; border:1px solid #e6edf3; border-radius:14px; padding:14px; box-shadow:0 4px 14px rgba(0,0,0,.05); } /* ===== Overlay / Launcher (▦) ===== */ .overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(3px); z-index:1000; align-items:center; justify-content:center; } .launcher{ width:min(92vw, 720px); max-height:78vh; overflow:auto; background:#0f415d; border:1px solid rgba(255,255,255,.15); border-radius:18px; padding:16px; color:#e9f6ff; } .appgroup{ margin:14px 0 6px; font-size:.95rem; color:#9ed2e7; } .appgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.75rem; } .tile{ background:#0b3a53; color:#e9f6ff; border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:6px; } .tile b{ font-weight:700; } .tile small{ opacity:.9; } /* Icon-Buttons (oben rechts) */ .head-actions{ display:flex; gap:8px; align-items:center; } .btn-icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:#0f415d; color:#e7f6ff; cursor:pointer; } .btn-icon svg{ width:30px; height:30px; display:block; } .btn-icon:hover{ filter:brightness(1.08); } /* Brand-Logo im Hero */ .page-home .brand-row img{ height:120px; /* <- hier ändern */ width:auto; } @media (max-width:980px){ .page-home .brand-row img{ height:72px; } } @media (max-width:600px){ .page-home .brand-row img{ height:60px; } } /* ==================== MOBILE HERO & SCROLLER (≤740px) ==================== */ @media (max-width:740px){ /* sichere Ränder (Notch) */ body{ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .topbar{ padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } /* ---------- HERO ---------- */ .page-home .hero{ padding: 64px 16px 28px; /* etwas tiefer unter Topbar */ margin-top: 26px; margin-bottom: 26px; } .page-home .hero-inner{ position: relative; display: block; max-width: 100%; } /* Textspalte links, schmaler, über James */ .page-home .hero-col--text{ position: relative; z-index: 2; text-align: left; max-width: 68vw; /* Breite des Textbereichs */ padding-right: 24vw; /* Platz für James rechts */ } .page-home .hero .brand-row img{ height: 40px; } .page-home .hero .brand-row .name{ font-size: 18px; } .page-home .hero h1{ font-size: clamp(22px, 5.8vw, 30px); line-height: 1.15; margin: 6px 0 14px; text-wrap: balance; } /* ---------- CTA Buttons ---------- */ .page-home .cta{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; width: 100%; /* ✅ statt 100vw */ max-width: 100%; padding: 0 16px; /* gleichmäßig links/rechts */ box-sizing: border-box; } /* Buttons klein, rechtsbündig, nur so breit wie Text */ .page-home .cta{ display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: nowrap; margin-top: 12px; /* über gesamte Breite, aber Innenabstände wie .hero */ width: 100vw; max-width: 100vw; margin-left: -16px; margin-right: -16px; padding: 0 16px; box-sizing: border-box; } .page-home .cta .btn{ flex: 0 0 auto; width: auto; padding: 8px 10px; font-size: 13px; line-height: 1.1; border-radius: 20px; white-space: nowrap; } /* James rechts, deutlich weiter nach unten, hinter Text */ .page-home .hero-col--figure{ position: absolute; right: -12vw; bottom: -22vw; z-index: 1; pointer-events: none; text-align: right; } .page-home .hero-col--figure img{ height: 62vh; max-height: 520px; min-height: 320px; width: auto; object-fit: contain; display: block; } /* ---------- SCROLLER (Warum du James vertrauen kannst) ---------- */ .page-home .section{ max-width: 1200px; margin: var(--sec-space) auto 0; padding: 0 18px 12px; } .page-home .section h2{ text-align:center; margin:12px 0 10px; color:#e9f6ff; } .page-home .section .scroller{ display: flex !important; /* flex (kein grid) */ flex-wrap: nowrap; gap: 14px; width: 100%; max-width: 100%; overflow-x: scroll !important; /* erzwingt sichtbaren Balken */ overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding-bottom: 8px; /* Scrollbar sichtbar (Firefox) */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) transparent; } /* Scrollbar sichtbar (WebKit) */ .page-home .section .scroller::-webkit-scrollbar{ height: 8px !important; /* statt display:none */ } .page-home .section .scroller::-webkit-scrollbar-track{ background: rgba(255,255,255,.14); border-radius: 6px; } .page-home .section .scroller::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.45); border-radius: 6px; } /* Karten – feste Breite => echter Overflow */ .page-home .section .shot{ flex: 0 0 260px; background:#08314a; color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; text-align:center; scroll-snap-align:start; } .page-home .section .shot img{ width:100%; height:auto; display:block; border-radius:12px; } .page-home .section .shot b{ font-size:16px; } .page-home .section .shot span{ opacity:.9; font-size:14px; } /* dezente Scroll-Hinweise an den Rändern */ .page-home .section .scroller::before, .page-home .section .scroller::after{ content:""; position: sticky; top:0; bottom:0; width:28px; pointer-events:none; z-index:2; } .page-home .section .scroller::before{ left:0; background: linear-gradient(90deg, rgba(6,34,50,1), rgba(6,34,50,0)); } .page-home .section .scroller::after{ right:0; background: linear-gradient(270deg, rgba(6,34,50,1), rgba(6,34,50,0)); } /* ---------- Kacheln & Pricing auf Mobile ---------- */ .page-home .apps .grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; } .page-home .apps h2{ font-size: 20px; margin: 8px 0 12px; } .page-home .plans-grid{ grid-template-columns: 1fr; gap: 14px; } .page-home .card{ padding: 16px; border-radius: 12px; } .page-home .partners .logo-row img{ height: 26px; } } /* Extra Feinschliff für sehr kleine Geräte (≤520px) */ @media (max-width:520px){ .page-home .hero{ padding: 54px 14px 22px; } .page-home .hero-col--text{ max-width: 72vw; padding-right: 26vw; } .page-home .hero-col--figure{ right: -14vw; bottom: -26vw; } .page-home .hero-col--figure img{ height: 58vh; min-height: 300px; } .page-home .cta .btn{ padding: 5px 9px; font-size: 12.5px; border-radius: 8px; } } /* ===== SCROLLER – UNIVERSAL VISIBLE BAR (non-breaking override) ===== */ .page-home .section .scroller{ display: flex !important; /* nebeneinander */ flex-wrap: nowrap; gap: 14px; width: 100%; max-width: 100%; overflow-x: scroll !important; /* Balken erzwingen (Safari/Chrome/FF) */ overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding-bottom: 8px; /* sichtbarer Balken in Firefox */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) transparent; } /* sichtbarer Balken in WebKit (Safari/Chrome) */ .page-home .section .scroller::-webkit-scrollbar{ height: 8px; } .page-home .section .scroller::-webkit-scrollbar-track{ background: rgba(255,255,255,.14); border-radius: 6px; } .page-home .section .scroller::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.45); border-radius: 6px; } /* feste Kartenbreite => echter Overflow (keine Dehnung) */ .page-home .section .shot{ flex: 0 0 260px !important; scroll-snap-align: start; } @media (max-width:520px){ .page-home .section .shot{ flex-basis: 240px !important; } } /* === NUR für "Wem James hilft": gleichmäßige Fotos & Kacheln === */ .page-home .section#people-head .scroller { display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; align-items: stretch; /* alle Cards gleiche Höhe */ } .page-home .section#people-head .shot { flex: 0 0 260px; /* gleiche Breite */ height: 320px; /* gleiche Höhe */ padding: 14px; background: #08314a; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; display: flex; flex-direction: column; justify-content: flex-start; text-align: center; scroll-snap-align: start; } .page-home .section#people-head .shot img { width: 100%; height: 170px; /* feste Bildhöhe */ object-fit: cover; /* keine Verzerrung */ border-radius: 12px; display: block; margin-bottom: 10px; /* Abstand zu Texten */ } .page-home .section#people-head .shot b, .page-home .section#people-head .shot span { display: block; line-height: 1.25; } .page-home .section#people-head .shot span { opacity: .9; } .page-home .shot img { width: 100%; height: 160px; /* feste Höhe für alle Bilder */ object-fit: cover; /* füllt gleichmäßig aus, auch wenn Seitenverhältnis anders ist */ border-radius: 12px; display: block; } /* Nur für "Wem James hilft" */ #people-head + .scroller .shot { display: flex; flex-direction: column; justify-content: flex-start; /* Inhalt immer oben */ align-items: center; padding-top: 12px; /* fixer Abstand oben */ } #people-head + .scroller .shot img { margin-top: 0; /* kein variabler Rand */ margin-bottom: 10px; /* Abstand nach unten einheitlich */ } /* Nur für "Wem James hilft" */ #people-head + .scroller .shot { display: flex; flex-direction: column; justify-content: flex-start; /* Inhalt oben ausrichten */ align-items: center; padding-top: 12px; /* gleicher oberer Abstand */ } #people-head + .scroller .shot img { margin-top: 0; /* keine zufälligen Abstände */ margin-bottom: 10px; /* gleichmäßiger Abstand zum Text */ height: 170px; /* gleiche Bildhöhe */ object-fit: cover; /* immer gefüllt, ohne Verzerrung */ } /* === NUR für "Wem James hilft": gleichmäßige Fotos & Kacheln === */ .page-home .section#people-head .scroller { display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; align-items: stretch; /* alle Cards gleiche Höhe */ } .page-home .section#people-head .shot { flex: 0 0 260px; /* gleiche Breite */ height: 320px; /* gleiche Höhe */ padding: 14px; background: #08314a; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; display: flex; flex-direction: column; justify-content: flex-start; text-align: center; scroll-snap-align: start; } .page-home .section#people-head .shot img { width: 100%; height: 170px; /* feste Bildhöhe */ object-fit: cover; /* keine Verzerrung */ border-radius: 12px; display: block; margin-bottom: 10px; /* Abstand zu Texten */ } .page-home .section#people-head .shot b, .page-home .section#people-head .shot span { display: block; line-height: 1.25; } .page-home .section#people-head .shot span { opacity: .9; } /* --- Reset accidental global image crop (affects all scrollers) --- */ .page-home .shot img{ height: auto !important; object-fit: contain !important; } /* --- ONLY for "Wem James hilft" (ID sits on the H2) --- */ /* target the scroller that directly follows the H2#people-head */ #people-head + .scroller{ display: flex; flex-wrap: nowrap; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; align-items: stretch; /* all cards same height */ } #people-head + .scroller .shot{ flex: 0 0 260px; /* same width */ height: 320px; /* same height */ padding: 14px; background: #08314a; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; display: flex; flex-direction: column; justify-content: flex-start; /* content starts at top */ text-align: center; scroll-snap-align: start; } /* images in "Wem James hilft" – fixed height, no distortion */ #people-head + .scroller .shot img{ width: 100%; height: 170px; /* uniform photo window */ object-fit: cover; /* fill without stretching */ border-radius: 12px; display: block; margin-bottom: 10px; /* spacing to texts */ } #people-head + .scroller .shot b, #people-head + .scroller .shot span{ display: block; line-height: 1.25; } #people-head + .scroller .shot span{ opacity: .9; } /* ===== Preise: Überschrift schwarz ===== */ .page-home .plans .card h3 { color: #000 !important; /* Schwarz erzwingen */ } /* ==== Footer/Support Buttons: Text weiß erzwingen ==== */ .page-home .cta-final .btn, .page-home .cta-final .btn-outline { color: #fff !important; font-weight: 700; } /* Gift/Invite page: ensure outline buttons are white for contrast */ .page-gift .btn-outline { color: #fff !important; border-color: #fff !important; } /* Gift page: center the bottom standalone donate button */ .page-gift .container > a.btn.btn-outline:last-of-type { display: block; width: max-content; margin: 20px auto 0; text-align: center; } /* Orange Button konsistent */ .page-home .cta-final .btn-primary, .page-home .cta-final .btn-orange { background: #FF5A1F !important; color: #fff !important; border: none !important; } /* ==== Plans-CTA Buttons (oberhalb) ==== */ .page-home .plans-cta .btn { color: #fff !important; /* Text weiß */ font-weight: 700; border: 2px solid #fff !important;/* weißer Rahmen */ } /* Orange Button für Spenden */ .page-home .plans-cta .btn[href*="donate"] { background: #FF5A1F !important; border: none !important; color: #fff !important; } .footer-links a { color: #fff !important; text-decoration: none; } .footer-links a:hover { text-decoration: underline; } .overlay-close { position: absolute; top: 12px; right: 16px; background: transparent; border: none; font-size: 28px; color: #fff; cursor: pointer; } .overlay-close:hover { color: #ff5a1f; /* Orange beim Hover */ } /* ===== Footer Fix ===== */ footer, .page-home .muted { color: #fff !important; /* weiße Schrift */ text-align: center; margin: 60px 0; /* Abstand nach oben/unten */ padding-bottom: 20px; /* nicht zu knapp am Bildschirmrand */ position: relative; /* nicht außerhalb des Flows */ bottom: auto; /* sicherstellen, dass es nicht klebt */ } /* ----- Footer sichtbar & gut lesbar ----- */ .site-footer{ margin: 32px auto 18px; /* mehr Abstand oben, weniger unten */ padding: 6px 18px; text-align: center; color: rgba(255,255,255,.7); /* dezenter, nicht so dominant */ opacity: .85; font-size: 0.85rem; /* kleinere Schrift */ line-height: 1.4; } .site-footer .footer-nav a{ color: rgba(255,255,255,.7); text-decoration: none; font-weight: 400; /* nicht fett */ transition: color .2s ease; } .site-footer .footer-nav a:hover{ color: #ffffff; text-decoration: none; } /* Band/Abschnitt oberhalb der Fußzeile etwas kompakter, damit die Fußzeile nicht „aus dem Sichtbereich rutscht“ */ .band--price{ margin-bottom: 18px; } .page-home .partners{ margin-bottom: 18px; } /* Close X oben rechts im Launcher */ .launcher{ position: relative; } .launcher-close{ position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; line-height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: #0b3a53; color: #e9f6ff; font-size: 22px; font-weight: 700; cursor: pointer; } .launcher-close:hover{ filter: brightness(1.08); } /* Dezenter Abschnittsabstand kurz vor der Fußzeile */ .page-home .section:last-of-type { margin-bottom: 16px; } .site-footer { margin-top: 20px; /* vorher 24px – feinjustiert */ } /* Partner-Logos Balken */ .page-home .partners { max-width: 1100px; margin: var(--sec-space) auto; padding: 20px 18px; text-align: center; background: #ffffff; /* sauber weißer Balken */ border-radius: 8px; /* leichte Abrundung, edler */ box-shadow: 0 2px 8px rgba(0,0,0,.05); } .page-home .partners h2 { color: #0b1f2a; /* dunkelblauer Text, lesbar */ font-weight: 700; margin-bottom: 18px; } .page-home .logo-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: center; } .page-home .logo-row img { height: 42px; /* größer, sichtbar */ object-fit: contain; opacity: 1; /* volle Deckkraft */ filter: none; /* KEIN Graufilter */ transition: transform .2s ease, filter .2s ease; } .page-home .logo-row img:hover { transform: scale(1.08); /* kleines Hervorheben */ filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)); } /* ========================================= PARTNER-BAND: Titel, Logos, Raster ========================================= */ .page-home .partners{ max-width: 1100px; margin: calc(var(--sec-space)*.8) auto; padding: 0 18px 24px; text-align: center; } .page-home .partners h2{ margin: 0 0 18px; font-weight: 800; color: #0b2430; /* gut lesbar auf hell */ } :root[data-theme="dark"] .page-home .partners h2{ color: #e9f6ff; /* im Dark-Theme weiterhin hell */ } /* Logos als Raster statt Zeile – zentriert, 2..3 Reihen je nach Breite */ .page-home .logo-row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 22px 28px; align-items: center; justify-items: center; } /* Logos deutlich größer & farbig (keine Graustufen) */ .page-home .logo-row img{ height: 56px; /* vorher 28px/36px */ max-width: 100%; opacity: 1; filter: none; /* Farbe anlassen */ image-rendering: -webkit-optimize-contrast; transition: transform .15s ease; } .page-home .logo-row img:hover{ transform: scale(1.05); } /* Mobil etwas kompakter */ @media (max-width: 520px){ .page-home .logo-row{ gap: 18px 16px; } .page-home .logo-row img{ height: 44px; } } /* === Partner-Band (Logos) === */ .page-home .partners { text-align: center; margin: var(--sec-space) auto; padding: 0 18px; } .page-home .partners h2 { font-size: 26px; /* klarer Titel */ font-weight: 700; margin-bottom: 20px; color: #21313d; /* dunkler, gut lesbar */ text-align: center; } .page-home .logo-row { display: flex; flex-wrap: wrap; gap: 28px; /* mehr Abstand zwischen Logos */ justify-content: center; /* zentriert alle Logos */ align-items: center; } .page-home .logo-row img { height: 48px; /* vorher 28px → jetzt größer */ max-height: 64px; /* Deckel, falls sehr hoch */ object-fit: contain; opacity: 1; /* volle Sichtbarkeit */ filter: none; /* keine Entfärbung */ } /* Boost certain narrow/detailed logos for readability */ /* Boost certain narrow/detailed logos for readability (keine Zeilenumbrüche provizieren) */ .page-home .logo-row .logo-container.boost { width: 190px; height: 64px; } .page-home .logo-row .logo-container.boost img { max-width: 190px; max-height: 64px; } /* Meta Llama extra groß für Lesbarkeit */ .page-home .logo-row .logo-container.boost-llama { width: 220px; height: 72px; } .page-home .logo-row .logo-container.boost-llama img { max-width: 220px; max-height: 72px; } /* Brand-specific fine-tuning for visual parity */ .page-home .logo-row img[alt="Mistral AI"]{ max-height: 52px; } .page-home .logo-row img[alt="Meta Llama"]{ max-height: 72px; } .page-home .logo-row img[alt="ElevenLabs"], .page-home .logo-row img[alt="Pinecone"]{ max-height: 64px; } @media (max-width: 600px){ .page-home .logo-row .logo-container.boost { width: 150px; height: 52px; } .page-home .logo-row .logo-container.boost img { max-width: 150px; max-height: 52px; } .page-home .logo-row .logo-container.boost-llama { width: 180px; height: 60px; } .page-home .logo-row .logo-container.boost-llama img { max-width: 180px; max-height: 60px; } .page-home .logo-row img[alt="Mistral AI"]{ max-height: 48px; } .page-home .logo-row img[alt="Meta Llama"]{ max-height: 64px; } .page-home .logo-row img[alt="ElevenLabs"], .page-home .logo-row img[alt="Pinecone"]{ max-height: 56px; } } @media (max-width: 600px) { .page-home .logo-row img { height: 40px; /* auf kleinen Screens leicht kleiner */ } } /* ===== Partner-Band (Titel im Band, zentriert) ===== */ .band--light{ background:#0e3650; /* dunkelblaues Band */ padding: 28px 0; /* vertikaler Innenabstand des Bandes */ } .page-home .partners{ max-width: 1100px; margin: 0 auto; /* zentrieren im Band */ padding: 0 18px; /* seitliche Luft */ text-align: center; } .page-home .partners h2{ display:block; margin: 0 0 18px; /* sauber oberhalb der Logos */ font-size: 26px; font-weight: 800; line-height: 1.2; color: #21313d; /* gut lesbar auf Weiß */ text-align: center; } /* Logos größer & zentriert */ .page-home .logo-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 28px; /* Abstand zwischen Logos */ } .page-home .logo-row img{ height: 48px; /* deutlich größer */ max-height: 64px; /* Deckel, falls sehr hoch */ object-fit: contain; opacity: 1; filter: none; /* farbig, nicht ausgegraut */ } @media (max-width: 600px){ .page-home .logo-row img{ height: 40px; } } /* Mehrere Reihen klarer getrennt */ .page-home .partners .logo-row { margin-bottom: 18px; /* Abstand zwischen den Reihen */ } .page-home .partners .logo-row:last-of-type { margin-bottom: 0; /* unten kein Extra-Abstand */ } /* Partner-Titel */ .partners-title { text-align: center; margin: var(--sec-space) auto 12px; } .partners-title h2 { font-size: 1.6rem; color: #21313d; font-weight: 700; } .logo-row img { height: 48px; /* Logos größer */ margin: 10px; transition: transform .2s ease; } .logo-row img:hover { transform: scale(1.1); /* leicht vergrößern */ } /* Tooltip-Ersatz direkt unterm Logo */ .logo-row img::after { content: attr(title); display: block; font-size: 0.85rem; color: #21313d; margin-top: 4px; opacity: 0; transition: opacity .2s ease; text-align: center; } .logo-row img:hover::after { opacity: 1; } /* ghost button (fehlte in Tests) */ .btn-ghost{ background: transparent !important; color: var(--text, #222831) !important; border: 1px solid rgba(0,0,0,.15) !important; } .page-account .account-page { display: flex; gap: 24px; align-items: flex-start; } .page-account .account-nav { flex: 0 0 240px; border-right: 1px solid #ffffff22; padding-right: 16px; } .page-account .account-nav h2 { margin: .5rem 0 1rem; } .page-account .account-nav nav { display: flex; flex-direction: column; gap: 8px; } .page-account .account-content { flex: 1 1 auto; min-width: 0; } .page-account .account-content .hint { margin-top: 1rem; color: #9ed2e7; } /* Konto-Seite: linke Navigation */ .page-account .account-nav nav a { color: #fff; /* weiße Schrift */ text-decoration: none; } .page-account .account-nav nav a:hover, .page-account .account-nav nav a:focus { color: #9ed2e7; /* dezentes Hover/Fokus-Blau */ text-decoration: underline; /* optional */ } /* Optional etwas Abstand/Lesbarkeit */ .page-account .account-nav { color: #fff; /* Überschriften/Standardtext in der Sidebar */ } .page-account .account-nav h2 { margin: .5rem 0 1rem; } /* Forms – kleine Helfer */ .ki-label{display:block;font-weight:700;margin:.35rem 0 .25rem} .ki-input{width:100%;padding:.55rem .7rem;border-radius:10px;border:1px solid #ccd6dd;background:#0f2230;color:#fff} .meta{font-size:.95rem;opacity:.85} .btn{display:inline-flex;gap:.45rem;align-items:center;padding:.6rem 1rem;border-radius:12px;border:0;cursor:pointer;font-weight:700} .btn-primary{background:#FF6A3D;color:#fff} .btn-ghost{background:#112637;color:#fff} .btn-outline{background:transparent;color:#87c9e6;border:2px solid #87c9e6} .container form{gap:.6rem} fieldset{background:#0d1e2b} /* 💛 Ghost Audio - Unsichtbarer Audio-Transport */ audio[data-ghost-audio] { position: absolute !important; width: 1px !important; height: 1px !important; left: -9999px !important; top: -9999px !important; opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }