@charset "UTF-8";
/* ==========================================================================
Taxi Wadowice — Stylesheet
Wiederverwendbares Design-System für Start- und alle Unterseiten.
Einbinden im jeder Seite:
Schriften werden unten per @import geladen. Schneller ist ein im
HTML statt @import (siehe Kommentar bei den Fonts).
Farben zentral: alle im :root unter "Design-Tokens". Einmal ändern =
überall geändert.
========================================================================== */
/* Fonts — Alternative (schneller) ist dieser Block als im HTML:
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Slab:wght@400;600&display=swap');
/* ==========================================================================
1. Design-Tokens
========================================================================== */
:root {
/* Marken- & UI-Farben */
--primary: #FFC107; /* Taxi-Amber — Marke, CTA, Hero, Footer */
--secondary: #54595F; /* Grau — sekundärer Text */
--text: #212121; /* Fließtext / Standard */
--accent: #0B57C2; /* Cobalt — interaktive Akzente, Links */
--cream: #FFF2CB; /* helle Amber-Fläche (Kontakt, Callout) */
--navy: #1C244B; /* Überschriften / Tiefe */
--dark-btn: #222222; /* dunkler Button auf hellem Grund */
--success: #1E7A46; /* Waldgrün — Zweitakzent (Anrufleiste) */
/* abgeleitete Hilfstöne */
--amber-tint: #FAF6E7; /* dezenter Hover auf hell */
--accent-tint: #EEF4FC; /* aktiver TOC-Link-Hintergrund */
--hairline: #EEE5C9; /* zarte Rahmen */
--surface-alt: #FAFAFA; /* leicht abgesetzte Sektion */
/* Typografie */
--font-head: 'Poppins', sans-serif; /* Überschriften */
--font-body: 'Roboto', sans-serif; /* Fließtext */
--font-quote: 'Roboto Slab', serif; /* Zitate */
/* Layout */
--measure: 720px; /* angenehme Lesebreite */
--wide: 1140px; /* Standard-Container */
/* Radien */
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 12px;
/* Schatten */
--shadow-card: 0 6px 24px rgba(0, 0, 0, .08);
--shadow-hover: 0 14px 34px rgba(0, 0, 0, .14);
--shadow-btn: 0 8px 20px rgba(0, 0, 0, .18);
}
/* ==========================================================================
2. Reset & Basis
========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
color: var(--text);
line-height: 1.7;
background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* ==========================================================================
3. Layout-Container
========================================================================== */
.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 20px; align-items: center;}
.measure { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 20px; }
/* Sektion mit leicht abgesetztem Hintergrund */
.section-alt { background: var(--surface-alt); }
/* ==========================================================================
4. Buttons
========================================================================== */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
padding: 14px 30px; border-radius: var(--radius-sm); cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn--dark { background: var(--dark-btn); color: var(--primary); }
.btn--amber { background: var(--primary); color: var(--text); }
/* ==========================================================================
5. Kopfzeile
========================================================================== */
.topbar { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid #f0e6c8; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.topbar .btn { padding: 9px 20px; font-size: .95rem; }
.brand { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: .5px; }
.brand span { color: var(--primary); }
/* ==========================================================================
6. Hero (Startseite)
========================================================================== */
.hero { background: var(--primary); padding: 60px 0;
box-shadow: 0 6px 24px rgba(0,0,0,.35);}
.hero .wrap { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
.hero__img { flex: 1 1 420px; }
.hero__img img { border-radius: 6px; }
.hero__content {
flex: 1 1 360px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.hero__content h1 {
font-family: var(--font-head); font-weight: 700;
font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.15;
color: var(--text); white-space: pre-line;
}
.hero__content p { font-size: 1.1rem; }
.hero__text { display: flex; flex-direction: column; gap: 4px; }
/* ==========================================================================
7. Sektion "Darum wir" + Karten (auch verwandte Beiträge)
========================================================================== */
.why { padding: 80px 0; text-align: center; }
.why h2 {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}
.why__sub {
color: var(--secondary);
font-size: 1.1rem;
margin: 12px auto 50px;
max-width: 620px;
}
.section { padding: 80px 0; text-align: center; }
.section__title {
font-family: var(--font-head); font-weight: 600;
font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--text);
}
.section__sub {
color: var(--secondary); font-size: 1.1rem;
margin: 12px auto 50px; max-width: 620px;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.cards2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.card {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 6px 24px rgba(0,0,0,.08);
display: flex;
flex-direction: column;
text-align: center;
transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.card__img { aspect-ratio: 4 / 3; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 24px 20px 30px; display: flex; flex-direction: column; gap: 12px; }
.card__body h3 {
font-family: var(--font-head);
font-weight: 600;
font-size: 1.2rem;
color: var(--text);
}
/* ==========================================================================
8. CTA-Band
========================================================================== */
.cta { padding: 70px 0; text-align: center; }
.cta .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cta h2 {
font-family: var(--font-head);
font-weight: 600;
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
color: var(--navy);
line-height: 1.2;
}
.cta p { max-width: 620px; color: var(--secondary); font-size: 1.1rem; }
/* ==========================================================================
9. Kontakt (Icon-Liste + Karte)
========================================================================== */
.contact .wrap {
display: flex; align-items: stretch; flex-wrap: wrap;
border-radius: var(--radius-lg); overflow: hidden;
box-shadow: var(--shadow-card); margin-bottom: 60px;
}
.contact__info {
flex: 1 1 320px; background: var(--cream); padding: 50px 40px;
display: flex; flex-direction: column; justify-content: center; gap: 26px;
}
.contact__item {
display: flex; align-items: center; gap: 18px;
font-family: var(--font-head); font-weight: 500; font-size: 1.15rem;
}
.contact__item2 {
display: flex; align-items: center; gap: 18px; padding-left: 14%;
font-family: var(--font-head); font-weight: 600; font-size: 1.35rem;
}
.contact__item .ico {
flex: 0 0 auto; width: 46px; height: 46px;
background: var(--primary); border-radius: 50%;
display: grid; place-items: center;
}
.contact__item .ico svg { width: 22px; height: 22px; fill: var(--text); }
.contact__map { flex: 1 1 380px; min-height: 340px; }
.contact__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
/* ==========================================================================
10. Footer
========================================================================== */
.footer {
background: var(--dark-btn); padding: 28px 0;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.footer__logo img { max-height: 90px; width: auto; }
.footer p { color: #fff; font-family: var(--font-head); font-weight: 500; }
/* ==========================================================================
11. Blog — Kopf, Kategorie-Badge, Beitragsbild
========================================================================== */
.post-head { padding: 56px 0 34px; text-align: center; }
/* Amber-"Taxameter"-Badge für die Kategorie */
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-head); font-weight: 600; font-size: .78rem;
letter-spacing: 1.5px; text-transform: uppercase;
background: var(--primary); color: var(--text);
padding: 6px 14px; border-radius: 3px;
}
.eyebrow::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--text); box-shadow: 12px 0 0 -1px var(--text); margin-right: 4px;
}
.post-head h1 {
font-family: var(--font-head); font-weight: 700;
font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.18;
color: var(--navy); margin: 22px auto 18px; max-width: 15ch;
}
.post-meta {
display: flex; align-items: center; justify-content: center;
gap: 10px 18px; flex-wrap: wrap; color: var(--secondary); font-size: .95rem;
}
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: #cfcfcf; }
.featured { margin: 10px auto 46px; max-width: 940px; padding: 0 20px; }
.featured img {
width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
}
.related { padding: 70px 0; }
.related > .wrap > h2 { text-align: center; font-family: var(--font-head);
font-weight: 600; font-size: 1.9rem; margin-bottom: 40px; color: var(--text); }
/* ==========================================================================
12. Blog — zweispaltiges Layout (Sidebar + Artikel)
========================================================================== */
.post-layout {
display: flex; align-items: flex-start; gap: 40px;
max-width: 1060px; margin: 0 auto; padding: 0 20px;
}
.post-main { flex: 1 1 auto; min-width: 0; }
.post-main .measure { max-width: var(--measure); margin: 0; padding: 0; }
/* ==========================================================================
13. Blog — Artikeltext
========================================================================== */
.article { padding-bottom: 20px; }
.article .lead { font-size: 1.22rem; font-weight: 500; margin-bottom: 30px; }
.article p { margin: 0 0 22px; font-size: 1.08rem; }
.article h2 {
font-family: var(--font-head); font-weight: 600; font-size: 1.55rem; color: var(--navy);
margin: 44px 0 16px; position: relative; padding-top: 10px; scroll-margin-top: 92px;
}
.article ul { margin: 0 0 24px; padding-left: 0; list-style: none; }
.article ul li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 1.08rem; }
.article ul li::before {
content: ""; position: absolute; left: 0; top: .55em;
width: 12px; height: 12px; border-radius: 3px; background: var(--primary); transform: rotate(45deg);
}
.article a.inline { color: var(--accent); font-weight: 500; border-bottom: 2px solid var(--accent); }
.article blockquote {
font-family: var(--font-quote); font-size: 1.4rem; line-height: 1.5;
color: var(--navy); font-weight: 600;
border-left: 5px solid var(--primary); padding: 6px 0 6px 26px; margin: 34px 0;
}
.article figure { margin: 34px 0; }
.article figure img { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.article figcaption { text-align: center; font-size: .88rem; color: var(--secondary); margin-top: 10px; }
/* Hervorhebungs-Box */
.callout { background: var(--cream); border-radius: var(--radius-lg); padding: 28px 30px; margin: 40px 0; }
.callout h3 {
font-family: var(--font-head); font-weight: 600; font-size: 1.05rem;
text-transform: uppercase; letter-spacing: 1px; color: var(--navy); margin-bottom: 14px;
}
.callout ul { margin: 0; }
.callout ul li::before { background: var(--text); }
/* ==========================================================================
14. Blog — ausklappbares Inhaltsverzeichnis (TOC)
========================================================================== */
.toc {
flex: 0 0 258px; position: sticky; top: 86px; overflow: hidden;
background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-lg);
box-shadow: 0 6px 22px rgba(0, 0, 0, .05);
}
.toc__head {
display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
padding: 16px 18px; background: none; border: 0; text-align: left;
font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--navy);
}
.toc__head .list-ico { width: 18px; height: 18px; fill: var(--primary); flex: 0 0 auto; }
.toc__head .label { flex: 1 1 auto; }
.toc__chev { width: 18px; height: 18px; fill: var(--secondary); flex: 0 0 auto; transition: transform .25s ease; }
.toc[data-open="false"] .toc__chev { transform: rotate(-90deg); }
.toc__body {
max-height: 60vh; overflow: auto; padding: 4px 12px 14px; border-top: 1px solid #f3eed6;
transition: max-height .25s ease, opacity .2s ease, padding .2s ease;
}
.toc[data-open="false"] .toc__body {
max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent;
}
.toc__link {
display: block; position: relative; line-height: 1.4;
font-family: var(--font-body); font-size: .93rem; color: var(--secondary);
padding: 9px 10px 9px 16px; border-radius: 6px;
transition: color .15s ease, background .15s ease;
}
.toc__link::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 0; border-radius: 2px; background: var(--accent); transition: height .18s ease;
}
.toc__link:hover { color: var(--text); background: var(--amber-tint); }
.toc__link.active { color: var(--accent); font-weight: 500; background: var(--accent-tint); }
.toc__link.active::before { height: 60%; }
.toc__cta {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 10px 4px 2px; padding: 10px;
background: var(--primary); color: var(--text); border-radius: 6px;
font-family: var(--font-head); font-weight: 600; font-size: .9rem;
}
.toc__cta svg { width: 16px; height: 16px; fill: currentColor; }
/* ==========================================================================
15. Responsive
========================================================================== */
@media (max-width: 900px) {
.post-layout { flex-direction: column; gap: 0; }
.toc {
position: sticky; top: 66px; z-index: 20;
flex-basis: auto; width: 100%; margin-bottom: 30px;
}
.toc__body { max-height: 50vh; }
}
@media (max-width: 760px) {
.hero { padding: 40px 0; }
.hero .wrap { flex-direction: column; }
.contact__map { min-height: 300px; }
}
@media (max-width: 600px) {
.section { padding: 56px 0; }
.post-head { padding: 40px 0 26px; }
.article blockquote { font-size: 1.2rem; }
}
/* ==========================================================================
16. Smartphone-Optimierung
Angehängt: überschreibt bei Bedarf frühere Regeln (spätere gewinnen).
========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, iframe, svg { max-width: 100%; }
a, button { -webkit-tap-highlight-color: rgba(0, 0, 0, .08); }
@media (max-width: 760px) {
/* Hero-Kinder nicht an flex-basis-Höhen kleben lassen -> keine Leerräume */
.hero__img, .hero__content { flex: 0 0 auto; width: 100%; }
.hero .wrap { gap: 26px; }
/* Blog-/Image-Boxen mobil untereinander statt nebeneinander */
.cards, .cards2 { grid-template-columns: 1fr; }
.cta { padding: 52px 0; }
.contact__info { padding: 34px 24px; }
.contact .wrap { margin-bottom: 40px; }
}
@media (max-width: 600px) {
.hero { padding: 30px 0; }
.hero .wrap { gap: 20px; }
.hero__img img { max-height: 300px; width: 100%; object-fit: cover; }
.hero__content { gap: 18px; }
.hero__content h1 { font-size: 2rem; }
.hero__content p { font-size: 1.02rem; }
.section, .why, .related { padding: 48px 0; }
.cards, .cards2 { gap: 18px; }
.card__body { padding: 20px 18px 26px; }
.cta { padding: 44px 0; }
.cta h2 { font-size: 1.7rem; }
.cta p { font-size: 1rem; }
.contact__info { padding: 28px 20px; gap: 20px; }
.contact__item { font-size: 1.05rem; gap: 14px; }
.contact__item2 { font-size: 1.2rem; }
.contact__item .ico { width: 42px; height: 42px; }
.contact__map, .contact__map iframe { min-height: 260px; }
.footer__logo img { max-height: 64px; }
.hero .btn, .cta .btn { width: 100%; max-width: 340px; justify-content: center; }
}
@media (max-width: 380px) {
.hero__content h1 { font-size: 1.7rem; }
.wrap { padding: 0 16px; }
}
/* Fixierte „Zadzwoń"-Leiste (nur mobil, nur wenn im HTML steht) */
.call-fab { display: none; }
@media (max-width: 760px) {
.call-fab {
display: flex; align-items: center; justify-content: center; gap: 10px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
padding: 14px 20px;
background: var(--success); color: #fff;
font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
}
.call-fab svg { width: 20px; height: 20px; fill: currentColor; }
body:has(.call-fab) { padding-bottom: 64px; }
}
/* ==========================================================================
17. Footer — Seitenübersicht, Logo (Mitte), Kontakt, Rechtliches
Ersetzt/erweitert Abschnitt 10.
========================================================================== */
.footer {
/* Grundlayout aus Abschnitt 10 überschreiben: jetzt mehrspaltig */
display: block;
padding: 0;
background: var(--dark-btn);
color: #fff;
}
.footer__grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 40px;
padding: 46px 20px 40px;
}
/* Spalten */
.footer__col { min-width: 0; }
.footer__col--contact { justify-self: end; text-align: right; }
.footer__title {
font-family: var(--font-head);
font-weight: 600;
font-size: .82rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--primary);
margin: 0 0 16px;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 10px; font-size: .95rem; line-height: 1.5; }
.footer__list a {
color: rgba(255, 255, 255, .82);
transition: color .15s ease;
}
.footer__list a:hover { color: var(--primary); }
.footer__list--contact li { color: rgba(255, 255, 255, .82); }
/* Logo mittig */
.footer__brand { display: flex; justify-content: center; }
.footer__logo img { max-height: 90px; width: auto; }
/* Rechtliches */
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.footer__bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding-top: 18px;
padding-bottom: 18px;
}
.footer__copy {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: .85rem;
color: rgba(255, 255, 255, .55);
}
.footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal a {
font-size: .85rem;
color: rgba(255, 255, 255, .7);
transition: color .15s ease;
}
.footer__legal a:hover { color: var(--primary); text-decoration: underline; }
/* --- Responsive --- */
@media (max-width: 860px) {
.footer__grid {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 32px;
padding: 38px 20px 32px;
}
/* Logo zuerst, dann Seiten, dann Kontakt */
.footer__brand { order: -1; }
.footer__col--contact { justify-self: center; text-align: center; }
.footer__bottom-inner { justify-content: center; text-align: center; }
.footer__legal { justify-content: center; }
}
@media (max-width: 600px) {
.footer__logo img { max-height: 70px; }
.footer__legal { gap: 14px; }
/* Platz für die fixierte Anrufleiste */
.footer__bottom-inner { padding-bottom: 22px; }
}
/* ==========================================================================
18. Linkfarben gegen Theme-Vorgaben absichern
--------------------------------------------------------------------------
Die Seiten nutzen keinen Theme-Header, das Theme-Stylesheet wird über
wp_head() aber trotzdem geladen. Themes setzen gern `a { color: ... }`
(z. B. rot) und `a:hover { ... }`.
Wichtig: KEINE Pseudoklassen in der Basisregel (kein `body a:link` o. ä.).
Die hätten die Spezifität (0,1,2) und würden unsere eigenen Komponenten
wie .btn--dark (0,1,0) überschreiben — genau das macht Buttons unlesbar.
Basis (0,0,2) schlägt `a` (0,0,1) des Themes; zusätzlich wird die CSS
mit Priorität 99 NACH dem Theme geladen.
========================================================================== */
body a { color: inherit; text-decoration: none; }
/* Komponenten mit eigener Farbe: doppelte Klasse -> (0,2,0).
Schlägt sicher ein `a:hover` des Themes (0,1,1). */
.btn.btn--dark,
.btn.btn--dark:hover,
.btn.btn--dark:focus { color: var(--primary); }
.btn.btn--amber,
.btn.btn--amber:hover,
.btn.btn--amber:focus { color: var(--text); }
.call-fab.call-fab,
.call-fab.call-fab:hover { color: #fff; }
.toc__body .toc__link { color: var(--secondary); }
.toc__body .toc__cta { color: var(--text); }
/* Karten: Titel/Text bleiben dunkel, auch wenn die Karte selbst ein Link ist */
.card .card__body h3 { color: var(--text); }
.card .card__body p { color: var(--secondary); }
/* Kontaktzeile (Telefon ist ein Link) */
.contact .contact__item,
.contact .contact__item:hover { color: var(--text); }
/* Marke in der Kopfzeile */
.topbar .brand { color: var(--text); }
.topbar .brand span { color: var(--primary); }
/* ==========================================================================
19. Kartenraster an die Anzahl der Karten anpassen
--------------------------------------------------------------------------
Vorher fest: .cards = 3 Spalten, .cards2 = 2 Spalten. Fällt eine Karte weg,
bleibt sonst eine Spalte leer bzw. die Karte klebt halbbreit links.
========================================================================== */
/* Landingpage: füllt sich mit 2 oder 3 Karten gleichermaßen */
.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Einzelne Karte: mittig statt halbbreit am Rand */
.cards > .card:only-child,
.cards2 > .card:only-child {
grid-column: 1 / -1;
max-width: 380px;
margin: 0 auto;
}
/* Mobil bleibt es einspaltig — muss NACH der auto-fit-Regel oben stehen,
weil Media Queries die Spezifität nicht erhöhen (sonst 2 Spalten auf Tablets). */
@media (max-width: 760px) {
.cards, .cards2 { grid-template-columns: 1fr; }
.cards > .card:only-child,
.cards2 > .card:only-child { max-width: none; }
}