/* ========== ÜBER-UNS (EXTRA) – FINAL (Team-Caption AUS) ========== */ /* Für HTML: */ /* ----------------------------------------------------------- 0) Safety: Fallback, falls irgendwo noch "ueber" verwendet wird ----------------------------------------------------------- */ html[data-page="ueber-uns"], html[data-page="ueber"]{ /* Marker only */ } /* ----------------------------------------------------------- 1) Timeline (optional) ----------------------------------------------------------- */ .gb-timeline{ display: grid; gap: 14px; margin-top: 14px; } .gb-timeline__item{ display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 12px; align-items: start; } .gb-timeline__dot{ width: 10px; height: 10px; border-radius: 999px; margin-top: 7px; background: linear-gradient(135deg, var(--blue-main), var(--blue-main-soft)); box-shadow: 0 10px 22px rgba(15,23,42,0.18); } .gb-timeline__title{ font-size: var(--fs-sm); font-weight: var(--fw-ui); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(21,53,88,0.86); margin-bottom: 6px; } /* ----------------------------------------------------------- 2) Team / Founder (optional Background-Varianten) (bleibt drin, falls du später umstellst) ----------------------------------------------------------- */ .gb-team{ display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; margin-top: 14px; } @media (min-width: 980px){ .gb-team{ grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr); align-items: start; } } .gb-team__media{ border-radius: var(--r-lg); border: 1px solid rgba(209,213,219,0.78); box-shadow: var(--shadow-soft); overflow: hidden; background-image: url("img/team-guardbase.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 16 / 10; } @media (max-width: 520px){ .gb-team__media{ aspect-ratio: 16 / 11; } } /* Founder */ .gb-founder{ display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 22px; } @media (min-width: 980px){ .gb-founder{ grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr); align-items: center; } } .gb-founder__media{ border-radius: var(--r-lg); border: 1px solid rgba(209,213,219,0.78); box-shadow: var(--shadow-soft); overflow: hidden; background-image: url("img/founder-oliviano-canale.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 4 / 5; } /* ----------------------------------------------------------- 3) Über-uns – Spacing/Typo (korrektes data-page) ----------------------------------------------------------- */ html[data-page="ueber-uns"] main{ gap: 26px; } @media (min-width: 980px){ html[data-page="ueber-uns"] main{ gap: 30px; } } html[data-page="ueber-uns"] .card, html[data-page="ueber-uns"] .form-card, html[data-page="ueber-uns"] .hero-intro{ padding: 24px 24px 20px; } @media (max-width: 720px){ html[data-page="ueber-uns"] .card, html[data-page="ueber-uns"] .form-card, html[data-page="ueber-uns"] .hero-intro{ padding: 20px 18px 18px; } } html[data-page="ueber-uns"] .hero-intro h1{ letter-spacing: -0.018em; line-height: 1.04; } @media (max-width: 520px){ html[data-page="ueber-uns"] .hero-intro h1{ font-size: clamp(30px, 7.6vw, 38px); line-height: 1.06; } } html[data-page="ueber-uns"] .hero-sub{ max-width: 62ch; margin-top: 10px; } html[data-page="ueber-uns"] .hero-intro p{ max-width: 72ch; } html[data-page="ueber-uns"] .pill-row{ margin-top: 14px; gap: 10px; } html[data-page="ueber-uns"] .pill-row .meta-pill{ padding: 8px 12px; } html[data-page="ueber-uns"] .grid-3{ gap: 16px; } html[data-page="ueber-uns"] .gb-timeline{ gap: 12px; } html[data-page="ueber-uns"] .gb-timeline__title{ margin-bottom: 4px; } /* ----------------------------------------------------------- 4) Media Cards: IMG + Caption ----------------------------------------------------------- */ html[data-page="ueber-uns"] .gb-media-card{ border-radius: var(--r-lg); border: 1px solid rgba(209,213,219,0.78); box-shadow: var(--shadow-soft); overflow: hidden; position: relative; background: #0b1220; isolation: isolate; } html[data-page="ueber-uns"] .gb-media-card img{ display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } /* Caption default (für Gründer ok) */ html[data-page="ueber-uns"] .gb-media-caption{ position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; padding: 12px 12px; border-radius: 14px; background: rgba(10,18,32,0.20); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.92); backdrop-filter: blur(10px); box-shadow: 0 10px 22px rgba(0,0,0,0.18); } html[data-page="ueber-uns"] .gb-media-card[aria-label*="Gründer"]{ aspect-ratio: 4 / 5; } html[data-page="ueber-uns"] .gb-media-card[aria-label*="Teamfoto"]{ aspect-ratio: 16 / 10; } @media (max-width: 520px){ html[data-page="ueber-uns"] .gb-media-card[aria-label*="Teamfoto"]{ aspect-ratio: 16 / 11; } } /* ----------------------------------------------------------- 4.1 TEAMFOTO: KEIN TEXT, KEIN OVERLAY – nur Bild clean ----------------------------------------------------------- */ /* Bild etwas nach oben (oben minimal croppen) */ html[data-page="ueber-uns"] .gb-media-card[aria-label*="Teamfoto"] img{ object-position: center 10%; } /* Team-Caption komplett deaktivieren (egal ob figcaption vorhanden ist) */ html[data-page="ueber-uns"] .gb-media-card[aria-label*="Teamfoto"] .gb-media-caption{ display: none !important; } /* Falls irgendwo ein ::after-Verlauf existiert: aus */ html[data-page="ueber-uns"] .gb-media-card[aria-label*="Teamfoto"]::after{ content: none !important; } /* ----------------------------------------------------------- 5) Listen Feinschliff ----------------------------------------------------------- */ html[data-page="ueber-uns"] .list-clean{ margin-top: 10px; } html[data-page="ueber-uns"] .list-clean li{ margin-bottom: 6px; } /* ----------------------------------------------------------- 6) Brand-Pill nur auf Über-uns ----------------------------------------------------------- */ html[data-page="ueber-uns"] .nav .brand-name{ background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(243,244,246,0.82)); border: 1px solid rgba(148,163,184,0.55); box-shadow: 0 1px 0 rgba(255,255,255,0.85), 0 18px 40px rgba(15,23,42,0.16); color: var(--blue-main); -webkit-text-fill-color: initial; background-clip: border-box; -webkit-background-clip: border-box; } html[data-page="ueber-uns"] .nav .brand-name .gb-word{ color: var(--blue-main); } html[data-page="ueber-uns"] .nav .gb-mark{ background: radial-gradient(circle at 30% 20%, rgba(63,116,181,0.14), rgba(21,53,88,0.08)); }