/* rc-tec — pharao.monitoring standalone site Shared stylesheet — matches the CI used on the rc-tec Squarespace site: Colors: Red #E30A18, dark backgrounds #212121 / #1C1B1B, grey #706F6F / #999 / #DADADA Fonts: Source Sans Pro (headings/UI), Tajawal (body text) */ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,600;0,700&family=Tajawal:wght@300;400&display=swap'); :root{ /* CI-Konstanten — in beiden Modi identisch */ --red:#E30A18; --red-dark:#c00815; --on-red:#ffffff; /* Dark Mode (Standard) */ --bg-dark:#212121; --bg-darker:#1C1B1B; --bg-darkest:#151414; --border:#3a3a3a; --text-strong:#ffffff; --text-grey:#A8A8A8; --text-light-grey:#DADADA; --text-muted:#9C9C9C; /* CI-Rot erreicht als Kleintext auf Dunkel nur 3,3:1 — aufgehellte Variante nur fuer Textrot, Flaechen/Rahmen bleiben --red */ --red-text:#FF3B47; --sweep:rgba(227,10,24,0.10); --video-bg:#000000; --diamond-alt:rgba(255,255,255,0.03); --header-scrolled-bg:rgba(33,33,33,0.85); --shadow-header:0 4px 24px rgba(0,0,0,0.4); --shadow-cover:0 20px 50px -12px rgba(0,0,0,0.6); color-scheme:dark; } /* Light Mode — aktiv ueber data-theme="light" am . Dark bleibt der Standard; die Wahl merkt sich der Browser in localStorage unter "rct-theme". */ :root[data-theme="light"]{ --bg-dark:#ffffff; --bg-darker:#f4f4f4; --bg-darkest:#efefef; --border:#d9d9d9; --text-strong:#1C1B1B; --text-grey:#5a5a5a; --text-light-grey:#3d3d3d; --text-muted:#5d5c5c; --red-text:#CE0916; --sweep:rgba(227,10,24,0.07); --video-bg:#e6e6e6; --diamond-alt:rgba(0,0,0,0.05); --header-scrolled-bg:rgba(255,255,255,0.85); --shadow-header:0 4px 24px rgba(0,0,0,0.12); --shadow-cover:0 20px 50px -12px rgba(0,0,0,0.25); color-scheme:light; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg-dark); color:var(--text-strong); font-family:'Tajawal', sans-serif; font-weight:400; line-height:1.6; } h1,h2,h3,h4{ font-family:'Source Sans Pro', sans-serif; margin:0; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .wrap{ max-width:1200px; margin:0 auto; padding:0 48px; } @media (max-width:780px){ .wrap{ padding:0 24px; } } /* ---------- Header / Nav ---------- */ .site-header{ position:sticky; top:0; z-index:50; background:var(--bg-dark); border-bottom:1px solid var(--border); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; } .site-logo{ display:flex; align-items:center; gap:10px; } .site-logo img{ height:44px; width:auto; } .site-logo span{ font-family:'Source Sans Pro', sans-serif; font-size:15px; letter-spacing:0.04em; } .site-nav{ display:flex; align-items:center; gap:28px; } .site-nav a{ font-family:'Source Sans Pro', sans-serif; font-size:13px; letter-spacing:0.05em; color:var(--text-light-grey); } .site-nav a:hover{ color:var(--red-text); } .site-nav .cta-btn{ background:var(--red); color:var(--on-red); padding:10px 20px; letter-spacing:0.05em; } .site-nav .cta-btn:hover{ background:var(--red-dark); color:var(--on-red); } @media (max-width:780px){ .site-nav{ gap:14px; flex-wrap:wrap; justify-content:flex-end; } .site-nav a{ font-size:12px; } } /* ---------- Diamond accent ---------- */ .diamond{ width:28px; height:28px; background:var(--red); transform:rotate(45deg); margin-bottom:20px; } /* ---------- Hero ---------- */ .hero{ background:var(--bg-dark); padding:64px 0 48px; } .hero .eyebrow{ font-family:'Source Sans Pro', sans-serif; font-size:13px; letter-spacing:0.08em; color:var(--red-text); margin:0 0 10px; } .hero h1{ font-weight:200; font-size:44px; line-height:1.2; margin:0 0 20px; max-width:700px; } .hero h1 span{ font-weight:600; color:var(--red); } .hero p.lead{ font-family:'Tajawal', sans-serif; font-weight:400; font-size:16px; line-height:1.7; color:var(--text-light-grey); max-width:680px; margin:0 0 16px; } .hero p.lead strong{ color:var(--text-strong); font-weight:600; } /* ---------- Numbered cards (3/4 up), with staggered glow ---------- */ .section-dark{ background:var(--bg-darker); padding:44px 0; } .section-mid{ background:var(--bg-dark); padding:44px 0; } .num-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .num-card{ border:1px solid var(--border); padding:20px 18px; } .num-card .num{ font-family:'Source Sans Pro', sans-serif; font-weight:600; font-size:20px; color:var(--red); margin:0 0 10px; } .num-card .title{ font-family:'Source Sans Pro', sans-serif; font-size:15px; color:var(--text-strong); margin:0 0 8px; } .num-card .desc{ font-family:'Tajawal', sans-serif; font-size:13px; color:var(--text-grey); margin:0; line-height:1.6; } @media (max-width:780px){ .num-grid{ grid-template-columns:1fr; } } /* ---------- Implementierung / plain text block ---------- */ .text-block{ padding:8px 0 32px; } .text-block h2{ font-weight:300; font-size:22px; margin:0 0 14px; } .text-block p{ font-family:'Tajawal', sans-serif; font-weight:400; font-size:14px; line-height:1.7; color:var(--text-light-grey); max-width:760px; margin:0; } /* ---------- Einfache Implementierung (highlighted strip, no box) ---------- */ .impl-strip{ border-left:3px solid var(--red); padding:24px 32px; max-width:none; background:rgba(227,10,24,0.06); } .impl-strip-title{ display:flex; align-items:center; gap:14px; margin-bottom:12px; } .impl-strip-title svg{ width:28px; height:28px; stroke:var(--red); flex-shrink:0; } .impl-strip-title p{ font-family:'Source Sans Pro', sans-serif; font-weight:600; font-size:20px; color:var(--text-strong); margin:0; } .impl-strip-desc{ font-family:'Tajawal', sans-serif; font-weight:400; font-size:16px; line-height:1.75; color:var(--text-light-grey); margin:0; white-space:nowrap; } @media (max-width:900px){ .impl-strip-desc{ white-space:normal; } } /* ---------- Funktionen (feature cards paired with screenshots) ---------- */ .funktionen-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } .feature-card{ border:1px solid var(--border); padding:20px 18px; } .feature-card svg{ width:26px; height:26px; stroke:var(--red); } .feature-card .title{ font-family:'Source Sans Pro', sans-serif; font-size:16px; color:var(--text-strong); margin:14px 0 6px; } .feature-card .desc{ font-family:'Tajawal', sans-serif; font-size:13px; color:var(--text-grey); margin:0 0 16px; line-height:1.6; } .feature-card .img-frame{ border:1px solid var(--border); padding:6px; } @media (max-width:780px){ .funktionen-grid{ grid-template-columns:1fr; } } /* ---------- Video showcase ---------- */ .video-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .video-item{ border:1px solid var(--border); padding:16px; } .video-item h3{ font-weight:300; font-size:17px; margin:0 0 12px; } .video-item video{ width:100%; border:1px solid var(--border); background:var(--video-bg); } @media (max-width:780px){ .video-grid{ grid-template-columns:1fr; } } /* ---------- Stats (used on company page) ---------- */ .stats-hero{ background:var(--bg-darker); padding:32px 0 40px; } @keyframes rct-count-underline { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); } } .stats-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; } .stat{ padding:0 20px 4px 0; border-right:1px solid var(--border); } .stat:nth-child(2){ padding-left:20px; } .stat:nth-child(3){ padding-left:20px; border-right:none; text-align:right; } .stat .value{ font-family:'Source Sans Pro', sans-serif; font-weight:600; font-size:44px; color:var(--text-strong); } .stat .label{ font-family:'Tajawal', sans-serif; font-size:13px; color:var(--text-grey); margin:22px 0 12px; } .stat .underline{ height:2px; background:var(--red); transform-origin:left; transform:scaleX(0); animation:rct-count-underline 1.8s ease-out forwards; } .stat:nth-child(2) .underline{ animation-delay:0.3s; } .stat:nth-child(3) .underline{ transform-origin:right; margin-left:auto; animation-delay:0.6s; } @media (max-width:780px){ .stats-grid{ grid-template-columns:1fr; } .stat{ border-right:none; padding:16px 0 4px !important; text-align:left !important; } .stat .underline{ transform-origin:left !important; margin-left:0 !important; } } /* ---------- Two-column text (Wer sind wir / Warum rc-tec) ---------- */ .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; } .two-col h3{ font-family:'Source Sans Pro', sans-serif; font-size:14px; font-weight:700; margin:0 0 14px; } .two-col h3 .accent{ color:var(--red-text); } .two-col p{ font-family:'Tajawal', sans-serif; font-weight:400; font-size:14px; line-height:1.75; color:var(--text-light-grey); margin:0 0 14px; } @media (max-width:780px){ .two-col{ grid-template-columns:1fr; gap:28px; } } /* ---------- CTA banner ---------- */ .cta-banner{ background:var(--bg-darker); padding:56px 0; text-align:center; } .cta-banner h2{ font-weight:200; font-size:30px; margin:0 0 24px; } .cta-banner h2 span{ font-weight:600; color:var(--red); } .btn-red{ display:inline-block; background:var(--red); color:var(--on-red); font-family:'Source Sans Pro', sans-serif; font-size:13px; letter-spacing:0.05em; padding:13px 28px; } .btn-red:hover{ background:var(--red-dark); color:var(--on-red); } .btn-outline{ display:inline-block; border:1px solid var(--border); color:var(--text-strong); font-family:'Source Sans Pro', sans-serif; font-size:13px; letter-spacing:0.05em; padding:12px 27px; margin-left:12px; } .btn-outline:hover{ border-color:var(--red-text); color:var(--red-text); } /* ---------- Brochure block — reworked to stand out ---------- */ .brochure{ border:1px solid var(--border); padding:40px; display:flex; align-items:center; gap:40px; transition:border-color 0.3s ease, box-shadow 0.3s ease; } .brochure:hover{ border-color:var(--red); box-shadow:0 0 40px -6px rgba(227,10,24,0.28); } .brochure .cover-wrap{ position:relative; flex-shrink:0; } .brochure .cover-wrap img{ width:170px; border:1px solid var(--border); transition:transform 0.3s ease; box-shadow:var(--shadow-cover); } .brochure:hover .cover-wrap img{ transform:translateY(-6px) rotate(-2deg) scale(1.03); } .brochure .cover-badge{ position:absolute; top:-10px; right:-10px; background:var(--red); color:var(--on-red); font-family:'Source Sans Pro', sans-serif; font-size:11px; font-weight:700; letter-spacing:0.04em; padding:5px 10px; } .brochure .info p.eyebrow-small{ font-family:'Source Sans Pro', sans-serif; font-size:12px; letter-spacing:0.08em; color:var(--red-text); margin:0 0 8px; } .brochure .info h3{ font-weight:300; font-size:24px; margin:0 0 12px; } .brochure .info p.desc{ font-family:'Tajawal', sans-serif; font-size:14px; color:var(--text-light-grey); margin:0 0 18px; max-width:420px; } .brochure .info ul{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:8px; } .brochure .info ul li{ font-family:'Tajawal', sans-serif; font-size:13px; color:var(--text-grey); display:flex; align-items:center; gap:10px; } .brochure .info ul li::before{ content:'✓'; color:var(--red-text); font-weight:700; } @media (max-width:700px){ .brochure{ flex-direction:column; text-align:center; padding:32px 24px; } .brochure .info ul li{ justify-content:center; } } /* ---------- Scroll-reveal ---------- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible{ opacity:1; transform:translateY(0); } .reveal-delay-1.is-visible{ transition-delay:0.1s; } .reveal-delay-2.is-visible{ transition-delay:0.2s; } .reveal-delay-3.is-visible{ transition-delay:0.3s; } /* ---------- Diagonaler Lichtschimmer ---------- Weich und langsam, nicht als harter Balken: geringe Deckkraft, Blur, lineare Bewegung und Ein-/Ausblenden an den Raendern. Sonst zieht er mehr Aufmerksamkeit als der Text daneben. */ @keyframes rct-sweep{ 0% { left:-25%; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { left:120%; opacity:0; } } .sweep-wrap{ position:absolute; inset:0; overflow:hidden; pointer-events:none; } .sweep-bar{ position:absolute; top:-20%; left:0; width:240px; height:140%; transform:rotate(9deg); background:linear-gradient(90deg, transparent, var(--sweep), transparent); filter:blur(10px); animation:rct-sweep 9s linear infinite; } /* ---------- Pulsing dot ---------- */ @keyframes rct-dot-pulse { 0%, 100% { box-shadow:0 0 0 0 rgba(227,10,24,0.5); } 50% { box-shadow:0 0 0 8px rgba(227,10,24,0); } } .pulse-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); animation:rct-dot-pulse 1.8s ease-in-out infinite; flex-shrink:0; } /* ---------- Animated diamond grid backdrop ---------- */ @keyframes rct-diamond-drift { 0% { background-position:0 0; } 100% { background-position:80px 80px; } } .diamond-field{ position:absolute; inset:0; opacity:0.5; pointer-events:none; background-image: linear-gradient(45deg, transparent 48%, rgba(227,10,24,0.06) 49%, rgba(227,10,24,0.06) 51%, transparent 52%), linear-gradient(-45deg, transparent 48%, var(--diamond-alt) 49%, var(--diamond-alt) 51%, transparent 52%); background-size:80px 80px; animation:rct-diamond-drift 14s linear infinite; } /* ---------- Hover lift on cards ---------- */ .num-card, .feature-card{ transition:transform 0.25s ease, border-color 0.25s ease; } .num-card:hover, .feature-card:hover{ transform:translateY(-4px); border-color:var(--red); } /* ---------- Nav link underline animation ---------- */ .site-nav a:not(.cta-btn){ position:relative; padding-bottom:4px; } .site-nav a:not(.cta-btn)::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--red); transition:right 0.25s ease; } .site-nav a:not(.cta-btn):hover::after{ right:0; } .site-nav .cta-btn{ transition:background 0.2s ease, transform 0.2s ease; } .site-nav .cta-btn:hover{ transform:translateY(-1px); } /* ---------- Zigzag feature rows (Funktionen v2) ---------- */ .func-row{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:56px 0; border-bottom:1px solid var(--border); } .func-row:last-child{ border-bottom:none; } .func-row.reverse .func-text{ order:2; } .func-row.reverse .func-media{ order:1; } .func-text .num-tag{ font-family:'Source Sans Pro', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.1em; color:var(--red-text); margin:0 0 12px; } .func-text h3{ font-weight:300; font-size:26px; margin:0 0 16px; } .func-text p{ font-family:'Tajawal', sans-serif; font-weight:400; font-size:15px; line-height:1.75; color:var(--text-light-grey); margin:0; max-width:480px; } .func-media{ position:relative; } .func-media .img-frame{ border:1px solid var(--border); padding:8px; transition:border-color 0.3s ease, transform 0.3s ease; } .func-media:hover .img-frame{ border-color:var(--red); transform:scale(1.015); } .func-media .tag-dot{ position:absolute; top:-14px; left:24px; display:flex; align-items:center; gap:8px; background:var(--bg-dark); padding:6px 14px; border:1px solid var(--border); font-family:'Source Sans Pro', sans-serif; font-size:11px; letter-spacing:0.05em; color:var(--text-light-grey); } @media (max-width:900px){ .func-row{ grid-template-columns:1fr; gap:28px; } .func-row.reverse .func-text, .func-row.reverse .func-media{ order:initial; } } /* ---------- Animated counter number (used in hero stat strip if added) ---------- */ .hero-stats{ display:flex; gap:48px; margin-top:36px; flex-wrap:wrap; } .hero-stat .value{ font-family:'Source Sans Pro', sans-serif; font-weight:600; font-size:32px; color:var(--text-strong); } .hero-stat .label{ font-family:'Tajawal', sans-serif; font-size:12px; color:var(--text-grey); margin-top:4px; } /* ---------- Section eyebrow with dot ---------- */ .eyebrow-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; } .eyebrow-row p{ margin:0; } /* ---------- Button hover ---------- */ .btn-red{ transition:background 0.2s ease, transform 0.2s ease; } .btn-red:hover{ transform:translateY(-2px); } .btn-outline{ transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .btn-outline:hover{ transform:translateY(-2px); } /* ---------- CTA banner with sweep + diamond field ---------- */ .cta-banner{ position:relative; overflow:hidden; } /* ---------- Scroll progress bar ---------- */ .scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:var(--red); z-index:100; box-shadow:0 0 8px rgba(227,10,24,0.6); transition:width 0.1s linear; } /* ---------- Hero entrance ---------- */ @keyframes rct-hero-in { 0% { opacity:0; transform:translateY(24px); } 100% { opacity:1; transform:translateY(0); } } .hero-anim-1{ animation:rct-hero-in 0.7s ease-out; } .hero-anim-2{ animation:rct-hero-in 0.7s ease-out 0.15s backwards; } .hero-anim-3{ animation:rct-hero-in 0.7s ease-out 0.3s backwards; } .hero-anim-4{ animation:rct-hero-in 0.7s ease-out 0.45s backwards; } .hero-anim-5{ animation:rct-hero-in 0.7s ease-out 0.6s backwards; } /* Karten reagieren auf Hover, glimmen aber nicht dauerhaft */ .num-card:hover{ border-color:var(--red); box-shadow:0 0 28px -4px rgba(227,10,24,0.5); } /* ---------- Pulsing CTA button ---------- */ @keyframes rct-btn-pulse { 0%, 100% { box-shadow:0 0 0 0 rgba(227,10,24,0.35); } 50% { box-shadow:0 0 0 7px rgba(227,10,24,0); } } .btn-red.pulse{ animation:rct-btn-pulse 4.5s ease-in-out infinite; } /* ---------- Big animated headline underline ---------- */ @keyframes rct-underline-grow { 0% { transform:scaleX(0); } 100% { transform:scaleX(1); } } .hero h1{ font-size:56px; } .hero-underline{ height:3px; width:120px; background:var(--red); transform-origin:left; animation:rct-underline-grow 1s ease-out 0.5s backwards; margin:20px 0 28px; } /* ---------- Sticky nav blur on scroll ---------- */ .site-header{ transition:background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; } .site-header.scrolled{ background:var(--header-scrolled-bg); backdrop-filter:blur(10px); box-shadow:var(--shadow-header); } /* ---------- Func-media: Hover statt Dauerpuls ---------- */ .func-media:hover .img-frame{ border-color:var(--red); transform:scale(1.03); box-shadow:0 12px 40px -8px rgba(227,10,24,0.4); } /* ---------- Bigger tag-dot / numbers ---------- */ .func-text .num-tag{ font-size:15px; } .func-text h3{ font-size:30px; } /* ---------- Marquee strip (subtle motion element) ---------- */ .marquee-wrap{ overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-darker); padding:14px 0; } .marquee-track{ display:flex; gap:48px; white-space:nowrap; animation:rct-marquee 22s linear infinite; width:max-content; } .marquee-track span{ font-family:'Source Sans Pro', sans-serif; font-size:13px; letter-spacing:0.08em; color:var(--text-muted); display:flex; align-items:center; gap:12px; } .marquee-track span::after{ content:'◆'; color:var(--red-text); font-size:9px; margin-left:36px; } @keyframes rct-marquee { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } } /* ---------- App screenshot showcase — arrow-paginated carousel ---------- */ .app-showcase{ position:relative; overflow:hidden; } .app-carousel-wrap{ display:flex; align-items:center; gap:20px; } .app-carousel-viewport{ overflow:hidden; flex:1; } .app-carousel-track{ display:flex; gap:28px; transition:transform 0.5s cubic-bezier(.4,0,.2,1); } .app-shot{ flex:0 0 calc((100% - 56px) / 3); } .app-shot .img-frame{ border:1px solid var(--border); padding:14px; transition:transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .app-shot:hover .img-frame{ border-color:var(--red); transform:translateY(-8px); box-shadow:0 20px 50px -12px rgba(227,10,24,0.4); } .app-shot .shot-label{ font-family:'Source Sans Pro', sans-serif; font-size:14px; color:var(--text-light-grey); text-align:center; margin:18px 0 0; } .carousel-arrow{ flex-shrink:0; width:56px; height:56px; border-radius:50%; border:2px solid var(--red); background:var(--bg-darker); color:var(--red); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .carousel-arrow svg{ width:24px; height:24px; } .carousel-arrow:hover{ background:var(--red); color:var(--on-red); transform:scale(1.08); } .carousel-arrow:disabled{ opacity:0.25; cursor:default; box-shadow:none; } .carousel-dots{ display:flex; justify-content:center; gap:10px; margin-top:32px; } .carousel-dots .dot{ width:8px; height:8px; border-radius:50%; background:var(--border); cursor:pointer; transition:background 0.2s ease, transform 0.2s ease; } .carousel-dots .dot.active{ background:var(--red); transform:scale(1.3); } @media (max-width:900px){ .app-shot{ flex:0 0 calc((100% - 28px) / 2); } .carousel-arrow{ width:44px; height:44px; } } @media (max-width:600px){ .app-shot{ flex:0 0 100%; } .carousel-arrow{ width:40px; height:40px; } } /* ---------- Video showcase — groesserer Rahmen ---------- */ .video-item-large{ max-width:900px; padding:20px; transition:border-color 0.3s ease, box-shadow 0.3s ease; } .video-item-large:hover{ border-color:var(--red); box-shadow:0 0 50px -8px rgba(227,10,24,0.25); } .video-item-large video{ border:none; } /* ---------- Impressum page ---------- */ .impressum-grid{ display:flex; flex-direction:column; gap:36px; max-width:760px; } .impressum-block h3{ font-family:'Source Sans Pro', sans-serif; font-weight:600; font-size:16px; color:var(--text-strong); margin:0 0 12px; } .impressum-block p{ font-family:'Tajawal', sans-serif; font-weight:400; font-size:14px; line-height:1.75; color:var(--text-light-grey); margin:0 0 10px; } .impressum-block a{ color:var(--red-text); } .impressum-block a:hover{ text-decoration:underline; } /* ---------- Kontakt page: form + contact details ---------- */ .kontakt-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:64px; } .kontakt-form{ display:flex; flex-direction:column; gap:16px; max-width:460px; } .kontakt-form label{ display:flex; flex-direction:column; gap:6px; font-family:'Source Sans Pro', sans-serif; font-size:12px; letter-spacing:0.04em; color:var(--text-grey); } .kontakt-form input, .kontakt-form textarea{ font-family:'Tajawal', sans-serif; font-size:14px; color:var(--text-strong); background:var(--bg-darkest); border:1px solid var(--border); padding:12px 14px; transition:border-color 0.2s ease; resize:vertical; } .kontakt-form input:focus, .kontakt-form textarea:focus{ outline:none; border-color:var(--red); } .kontakt-form button{ margin-top:6px; width:fit-content; } .kontakt-info-col{ padding-left:0; display:flex; flex-direction:column; gap:28px; } .kontakt-info-item{ display:flex; gap:16px; align-items:flex-start; } .kontakt-info-item svg{ width:24px; height:24px; flex-shrink:0; margin-top:2px; } .kontakt-info-item .label{ font-family:'Source Sans Pro', sans-serif; font-size:12px; letter-spacing:0.05em; color:var(--text-muted); margin:0 0 4px; } .kontakt-info-item .value{ font-family:'Tajawal', sans-serif; font-size:15px; color:var(--text-strong); margin:0; line-height:1.6; } .kontakt-info-item .value a{ color:var(--text-strong); } .kontakt-info-item .value a:hover{ color:var(--red-text); } @media (max-width:900px){ .kontakt-grid{ grid-template-columns:1fr; gap:40px; } } /* ---------- Footer ---------- */ .site-footer{ background:var(--bg-darker); border-top:1px solid var(--border); padding:48px 0 32px; } .footer-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; margin-bottom:32px; } .footer-grid h4{ font-family:'Source Sans Pro', sans-serif; font-size:13px; letter-spacing:0.05em; color:var(--text-muted); margin:0 0 14px; } .footer-grid a, .footer-grid p{ display:block; font-family:'Tajawal', sans-serif; font-size:13px; color:var(--text-light-grey); margin:0 0 8px; line-height:1.6; } .footer-grid a:hover{ color:var(--red-text); } .footer-legal{ border-top:1px solid var(--border); padding-top:20px; } .footer-legal p{ font-family:'Tajawal', sans-serif; font-size:12px; color:var(--text-muted); margin:0; line-height:1.6; } @media (max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } } /* ---------- Theme-Umschalter (Dark/Light) ---------- */ body, .site-header, .hero, .section-dark, .section-mid, .cta-banner, .marquee-wrap, .site-footer, .num-card, .feature-card, .video-item, .brochure, .impl-strip, .func-media .img-frame, .app-shot .img-frame, .kontakt-form input, .kontakt-form textarea, .carousel-arrow, .func-media .tag-dot{ transition:background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .theme-toggle{ flex-shrink:0; width:36px; height:36px; padding:0; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border); color:var(--text-light-grey); cursor:pointer; transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, background-color 0.3s ease; } .theme-toggle:hover{ border-color:var(--red); color:var(--red); transform:translateY(-1px); } .theme-toggle:focus-visible{ outline:2px solid var(--red); outline-offset:2px; } .theme-toggle svg{ width:18px; height:18px; display:block; } /* Der Button zeigt das Ziel, nicht den Ist-Zustand: Dark aktiv -> Sonne (Klick fuehrt ins Helle), Light aktiv -> Mond (Klick fuehrt ins Dunkle). Muss zum aria-label in den Seiten passen. */ .theme-toggle .icon-sun{ display:block; } .theme-toggle .icon-moon{ display:none; } :root[data-theme="light"] .theme-toggle .icon-sun{ display:none; } :root[data-theme="light"] .theme-toggle .icon-moon{ display:block; } /* Logo: weiss/rot im Dark, grau/rot im Light */ .site-logo .logo-light{ display:none; } :root[data-theme="light"] .site-logo .logo-dark{ display:none; } :root[data-theme="light"] .site-logo .logo-light{ display:block; } @media (max-width:780px){ .theme-toggle{ width:32px; height:32px; } .theme-toggle svg{ width:16px; height:16px; } } /* ---------- Rücksicht auf "Bewegung reduzieren" ---------- Wer im Betriebssystem Animationen abbestellt hat, bekommt die Seite ohne Dauerbewegung: Hintergrund-Deko verschwindet, Einblendungen stehen sofort sichtbar da, Hover-Zustaende bleiben. */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } .sweep-wrap, .diamond-field, .scroll-progress{ display:none !important; } .marquee-track{ animation:none !important; } .reveal{ opacity:1 !important; transform:none !important; } .hero-underline{ transform:scaleX(1) !important; } .stat .underline{ transform:scaleX(1) !important; } }