/* ========================================================= TAXIBUND — Shared Stylesheet Design tokens live at the top. Company subpages override --accent via a [data-theme] attribute on . ========================================================= */ /* Self-hosted / system fonts only — no external requests to Google or any other third party, avoiding the IP-transfer issue that made externally-loaded Google Fonts a GDPR/abmahnung risk in Germany. */ :root{ --bg: #0a0a0b; --bg-elevated: #131316; --bg-card: #17171b; --line: #2a2a2f; --text: #f4f2ee; --text-dim: #a7a5a1; --text-faint: #6f6d6a; /* group-level accent (taxi-meter amber) */ --accent: #ffb020; --accent-ink: #241a04; --radius: 14px; --radius-sm: 8px; --maxw: 1180px; --font-display: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Segoe UI Mono', Consolas, 'Liberation Mono', Menlo, monospace; } /* company theme overrides */ body[data-theme="hercher"]{ --accent:#d9a441; --accent-ink:#241b04; } body[data-theme="stern"]{ --accent:#2f9e97; --accent-ink:#04211f; } body[data-theme="airport"]{ --accent:#4c7fe8; --accent-ink:#04102b; } body[data-theme="schueler"]{ --accent:#5fb37a; --accent-ink:#08210f; } body[data-theme="frauentaxi"]{ --accent:#e2588a; --accent-ink:#2a0714; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; } h1,h2,h3,.display{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:0.01em; line-height:1.02; margin:0 0 0.4em; } h1{ font-size:clamp(2.2rem, 5vw, 4rem); } h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); } h3{ font-size:1.3rem; letter-spacing:0.02em; } p{ margin:0 0 1em; color:var(--text-dim); } .lede{ font-size:1.15rem; color:var(--text); max-width:60ch; } /* eyebrow / meter-label — the signature element */ .meter-label{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding:5px 10px 5px 8px; border-radius:5px; margin-bottom:14px; } .meter-label::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); animation:pulse 1.8s ease-in-out infinite; } @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} } /* ---------- header ---------- */ header.site{ position:sticky; top:0; z-index:50; background:rgba(10,10,11,0.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } header.site .bar{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; } .logo-lockup{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:0.02em; color:var(--text); } .logo-mark{ height:36px; width:auto; flex:none; } nav.main{ display:flex; gap:26px; align-items:center; } nav.main a{ font-size:0.92rem; color:var(--text-dim); font-weight:500; transition:color .15s; } nav.main a:hover, nav.main a.active{ color:var(--text); } .nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--text); width:40px; height:40px; border-radius:8px; font-size:1.1rem; } @media (max-width:880px){ nav.main{ position:absolute; top:100%; left:0; right:0; background:var(--bg-elevated); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; padding:16px 24px; gap:16px; display:none; } nav.main.open{ display:flex; } .nav-toggle{ display:block; } } /* ---------- Disponline-Einbettung: iframe nur auf größeren Bildschirmen, auf Smartphones ersetzt durch Direktlink (Drittanbieter-Cookies werden in iframes von mobilen Browsern oft blockiert, siehe disponline.html) */ .disponline-mobile-fallback{ display:none; padding:56px 0; } @media (max-width:880px){ .disponline-embed{ display:none; } .disponline-mobile-fallback{ display:block; } } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600; font-size:0.95rem; padding:13px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s, background .15s, border-color .15s; } .btn:hover{ transform:translateY(-1px); } .btn-primary{ background:var(--accent); color:var(--accent-ink); } .btn-primary:hover{ background:color-mix(in srgb, var(--accent) 88%, white); } .btn-outline{ border-color:var(--line); color:var(--text); } .btn-outline:hover{ border-color:var(--accent); color:var(--accent); } .btn-ghost{ color:var(--text-dim); padding:13px 4px; } .btn-ghost:hover{ color:var(--accent); } .btn-wa{ background:#25D366; color:#06210f; } .btn-wa:hover{ background:#3fe07b; } .btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; } /* ---------- hero ---------- */ .hero{ padding:88px 0 64px; border-bottom:1px solid var(--line); background: radial-gradient(ellipse 900px 480px at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%); } .hero .lede{ margin-top:18px; } /* ---------- section ---------- */ section{ padding:72px 0; border-bottom:1px solid var(--line); } section.tight{ padding:48px 0; } .section-head{ max-width:640px; margin-bottom:40px; } /* ---------- company cards (home) ---------- */ .company-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width:900px){ .company-grid{ grid-template-columns:1fr; } } .company-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:14px; text-align:center; transition:border-color .15s, transform .15s; } .company-card:hover{ transform:translateY(-3px); } .company-card[data-c="hercher"]:hover{ border-color:#d9a441; } .company-card[data-c="stern"]:hover{ border-color:#2f9e97; } .company-card[data-c="airport"]:hover{ border-color:#4c7fe8; } .company-badge{ width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; font-size:1.4rem; } .company-card[data-c="hercher"] .company-badge{ background:color-mix(in srgb,#d9a441 22%, transparent); color:#d9a441; } .company-card[data-c="stern"] .company-badge{ background:color-mix(in srgb,#2f9e97 22%, transparent); color:#2f9e97; } .company-card[data-c="airport"] .company-badge{ background:color-mix(in srgb,#4c7fe8 22%, transparent); color:#4c7fe8; } .company-card h3 a{ color:var(--text); } .company-card h3 a:hover{ text-decoration:underline; text-underline-offset:4px; } .company-card .area{ color:var(--text-faint); font-size:0.88rem; margin-top:-8px; } .tel-row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; border-top:1px solid var(--line); } .tel-num{ font-family:var(--font-mono); font-size:1.05rem; letter-spacing:0.02em; } /* ---------- services grid ---------- */ .services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } @media (max-width:1000px){ .services-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .services-grid{ grid-template-columns:1fr; } } .service-card{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px; display:block; transition:border-color .15s, transform .15s; } .service-card:hover{ border-color:var(--accent); transform:translateY(-2px); } .service-num{ font-family:var(--font-mono); color:var(--accent); font-size:0.8rem; letter-spacing:0.1em; } .service-card h3{ margin:10px 0 6px; font-size:1.08rem; text-transform:none; letter-spacing:0; font-family:var(--font-body); font-weight:700; } .service-card p{ font-size:0.92rem; margin:0; } /* ---------- image placeholder blocks (no stock imagery bundled) ---------- */ .photo{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; position:relative; background: linear-gradient(160deg, var(--bg-card), var(--bg)); display:flex; align-items:flex-end; padding:18px; } .photo::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent) 0 2px, transparent 2px 26px); } .photo span{ position:relative; font-family:var(--font-mono); font-size:0.75rem; color:var(--text-faint); letter-spacing:0.06em; } /* ---------- taximeter panel (calculators, pricing) ---------- */ .meter-panel{ background:#0d0d0e; border:1px solid var(--line); border-radius:var(--radius); padding:26px; font-family:var(--font-mono); } .meter-display{ background:#000; border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius:8px; padding:22px; text-align:right; margin-top:18px; } .meter-display .amount{ font-size:2.6rem; font-weight:600; color:var(--accent); text-shadow:0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); } .meter-display .unit{ font-size:0.95rem; color:var(--text-faint); } .meter-note{ font-size:0.78rem; color:var(--text-faint); margin-top:10px; } .blink-glow{ color:var(--accent); font-weight:600; animation:blinkGlow 1.4s ease-in-out infinite; } @keyframes blinkGlow{ 0%, 100%{ opacity:1; text-shadow:0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); } 50%{ opacity:0.35; text-shadow:0 0 2px transparent; } } /* ---------- forms ---------- */ form.card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:30px; } .field{ margin-bottom:18px; position:relative; } .field label{ display:block; font-size:0.85rem; color:var(--text-dim); margin-bottom:6px; } .autocomplete-list{ display:none; position:absolute; left:0; right:0; top:100%; z-index:20; margin:2px 0 0; padding:6px; list-style:none; background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:0 8px 24px rgba(0,0,0,0.35); max-height:220px; overflow-y:auto; } .autocomplete-list.visible{ display:block; } .autocomplete-list li{ padding:9px 10px; border-radius:6px; font-size:0.88rem; color:var(--text-dim); cursor:pointer; } .autocomplete-list li:hover{ background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--text); } .consent-check{ display:flex; align-items:flex-start; gap:10px; font-size:0.85rem; color:var(--text-dim); line-height:1.4; margin-bottom:18px; cursor:pointer; } .consent-check input{ width:auto; margin-top:3px; flex-shrink:0; } .consent-check a{ color:var(--accent); } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; } .field-row .field{ display:flex; flex-direction:column; } .field-row .field select, .field-row .field input{ margin-top:auto; } @media (max-width:600px){ .field-row{ grid-template-columns:1fr; } } input, select, textarea{ width:100%; background:var(--bg-elevated); border:1px solid var(--line); color:var(--text); padding:12px 14px; border-radius:8px; font-family:var(--font-body); font-size:0.95rem; } input:focus, select:focus, textarea:focus{ border-color:var(--accent); } input:disabled, select:disabled, textarea:disabled{ opacity:0.45; cursor:not-allowed; } .form-cookie-lock button:disabled{ display:none; } textarea{ resize:vertical; min-height:110px; } input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1) brightness(2); cursor:pointer; opacity:0.9; } input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:1; } .form-msg{ margin-top:14px; font-size:0.9rem; } .form-msg.ok{ color:#5fb37a; } .form-msg.err{ color:#e2588a; } /* ---------- info / tarif blocks ---------- */ .tarif-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:800px){ .tarif-grid{ grid-template-columns:1fr; } } .tarif-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; } .tarif-card ul{ margin:0; padding-left:18px; color:var(--text-dim); } .tarif-card li{ margin-bottom:8px; } .notice{ border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--accent) 8%, transparent); border-radius:var(--radius-sm); padding:16px 18px; font-size:0.92rem; color:var(--text); } /* ---------- language switcher ---------- */ .lang-switch{ display:flex; gap:4px; } .lang-btn{ background:none; border:1px solid var(--line); color:var(--text-faint); font-family:var(--font-mono); font-size:0.72rem; font-weight:700; letter-spacing:0.04em; padding:5px 9px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; } .lang-btn:hover{ color:var(--text); border-color:var(--accent); } .lang-btn.active{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } /* ---------- cookie consent banner ---------- */ .cookie-banner{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:999; background:var(--bg-card); border-top:1px solid var(--line); padding:18px 24px; gap:18px; flex-wrap:wrap; align-items:center; justify-content:center; box-shadow:0 -4px 24px rgba(0,0,0,0.25); } .cookie-banner.visible{ display:flex; } .cookie-banner p{ margin:0; flex:1 1 380px; max-width:720px; font-size:0.85rem; color:var(--text-dim); } .cookie-banner-actions{ display:flex; gap:10px; flex-shrink:0; } @media (max-width:600px){ .cookie-banner{ justify-content:flex-start; } .cookie-banner-actions{ width:100%; } .cookie-banner-actions .btn{ flex:1; justify-content:center; } } /* ---------- modal overlay (Buchungsname) ---------- */ .modal-overlay{ display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.6); align-items:center; justify-content:center; padding:20px; } .modal-overlay.visible{ display:flex; } .modal-box{ background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:28px; max-width:400px; width:100%; box-shadow:0 12px 48px rgba(0,0,0,0.4); } /* ---------- footer ---------- */ footer.site{ padding:48px 0 60px; } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; } @media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } } .footer-grid h4{ font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); margin:0 0 12px; } .footer-grid a, .footer-grid p{ display:block; color:var(--text-dim); font-size:0.9rem; margin-bottom:8px; } .footer-grid a:hover{ color:var(--accent); } .footer-bottom{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.82rem; color:var(--text-faint); } /* ---------- utility ---------- */ .top-banner{ position:relative; width:100%; height:150px; overflow:hidden; } .top-banner img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; filter:grayscale(1) brightness(1.2) contrast(1.05); } .top-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, var(--bg) 96%); } @media (max-width:700px){ .top-banner{ height:100px; } } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } @media (max-width:860px){ .grid-2{ grid-template-columns:1fr; } } .badge-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } .badge{ font-family:var(--font-mono); font-size:0.78rem; border:1px solid var(--line); border-radius:999px; padding:6px 12px; color:var(--text-dim); }