/* ============================================================================= veloway.css – Cork-Board Design-Overrides für Bootstrap 5.2.1 veloway.de – Fahrrad-Weltreise Stuttgart → Stuttgart ============================================================================= LADEREIHENFOLGE im Template: 1. bootstrap.min.css 2. Google Fonts (Playfair Display, Lato) 3. veloway.css ← diese Datei ============================================================================= */ /* ============================================================================= 1. CSS CUSTOM PROPERTIES – Bootstrap-Variablen überschreiben ============================================================================= */ :root { /* Farben aus der Korkwand-Textur (back.jpg) */ --vw-cork-warm: #C4804A; /* Kork-Orange, mittlerer Ton */ --vw-cork-light: #F0D8B8; /* Heller Kork für Innenfelder */ --vw-cork-dark: #8B5C2A; /* Dunkler Kork für Schatten/Ränder */ --vw-cork-cream: #FDF6EC; /* Fast-Weiß, warmer Creme-Ton */ --vw-cork-paper: #FFFDF8; /* Papier-Weiß für Karten ("Zettel") */ /* Akzentfarben */ --vw-accent: #B85C00; /* Terrakotta – Buttons, Links, Badges */ --vw-accent-hover: #9A4E00; /* Dunkleres Terrakotta für Hover */ --vw-accent-light: #F5ECD8; /* Sehr helles Akzent für Hover-BGs */ --vw-pin-red: #C0392B; /* Reißzwecke-Rot für Karten-Pins */ --vw-text: #2C2C2C; /* Fließtext */ --vw-text-muted: #7A6552; /* Gedämpfter Text (Metainfos, Daten) */ /* Bootstrap-Primärfarbe auf Terrakotta umbiegen */ --bs-primary: #B85C00; --bs-primary-rgb: 184, 92, 0; --bs-link-color: #B85C00; --bs-link-hover-color:#9A4E00; /* Body — KEIN --bs-body-bg hier! Bootstrap würde sonst background-color: #FDF6EC auf setzen und damit die Kork-Textur komplett überdecken. Die Körperfarbe wird direkt unten an body vergeben. */ --bs-body-color: #2C2C2C; --bs-body-font-family:'Lato', system-ui, -apple-system, sans-serif; --bs-body-font-size: 1.0625rem; /* 17px – gut lesbar */ --bs-body-line-height:1.75; /* Rahmen & Radien */ --bs-border-color: #DDCCBB; --bs-border-radius: 4px; --bs-border-radius-lg:6px; /* Karten-Schatten */ --vw-shadow-sm: 0 1px 4px rgba(80, 40, 0, 0.10), 0 1px 2px rgba(80, 40, 0, 0.06); --vw-shadow: 0 2px 12px rgba(80, 40, 0, 0.16), 0 1px 3px rgba(80, 40, 0, 0.08); --vw-shadow-lg: 0 6px 24px rgba(80, 40, 0, 0.22), 0 2px 6px rgba(80, 40, 0, 0.10); /* Übergänge */ --vw-transition: 0.22s ease; } /* ============================================================================= 2. TYPOGRAFIE ============================================================================= */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Playfair Display', Georgia, serif; color: var(--vw-text); line-height: 1.25; } /* Display-Größen (Bootstrap utility) auf Playfair umbiegen */ .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: 'Playfair Display', Georgia, serif; } /* Fließtext */ p { margin-bottom: 1.25rem; } /* Links */ a { color: var(--vw-accent); text-decoration: none; transition: color var(--vw-transition); } a:hover { color: var(--vw-accent-hover); text-decoration: underline; } /* Code-Blöcke (für Reisenotizen o.ä.) */ code, pre { font-family: 'Source Code Pro', 'Courier New', monospace; font-size: 0.875em; color: var(--vw-accent); } /* ============================================================================= 3. BODY / CORK-BOARD-HINTERGRUND ============================================================================= WICHTIG – 3 Dinge müssen stimmen: a) back.jpg muss auf dem Server vorhanden sein b) Der Pfad unten muss zur tatsächlichen Position der Datei passen c) Bootstrap darf keinen deckenden background-color setzen → deshalb kein --bs-body-bg in :root (siehe oben) ============================================================================= */ /* Pfad-Optionen – die passende Zeile einkommentieren: Option A: back.jpg liegt im MODX-Root → /back.jpg Option B: back.jpg in assets/img/ → /assets/img/back.jpg Option C: relativ zur CSS-Datei → ../img/back.jpg Standard MODX: CSS liegt in assets/css/ → Option B ist korrekt */ body { /* Bootstrap-body-background explizit überschreiben */ background-color: #C8844A !important; /* Kork-Fallback wenn Bild fehlt */ background-image: url('/assets/img/back.jpg'); /* ← Pfad ggf. anpassen */ background-attachment: fixed; background-size: cover; background-position: center; background-repeat: repeat; /* Kork-Textur kacheln falls nötig */ min-height: 100vh; } /* Zusätzliche Klasse – falls du body.vw-cork-bg im Template nutzt */ body.vw-cork-bg { /* Identisch mit body oben – Klasse ist optional aber unterstützt */ background-color: #C8844A !important; background-image: url('/assets/img/back.jpg'); background-attachment: fixed; background-size: cover; background-position: center; } /* Seiten OHNE Kork-Hintergrund (z.B. Fehlerseiten) */ body.vw-no-cork { background-image: none !important; background-color: #FDF6EC !important; } /* Schwächere Textur-Variante – halbtransparenter Schleier drüber */ body.vw-cork-subtle::before { content: ''; position: fixed; inset: 0; background: rgba(253, 246, 236, 0.40); pointer-events: none; z-index: 0; } body.vw-cork-subtle > * { position: relative; z-index: 1; } /* ============================================================================= 4. NAVBAR ============================================================================= */ .vw-navbar { background-color: rgba(44, 28, 10, 0.30); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 2px solid var(--vw-accent); padding-top: 0.6rem; padding-bottom: 0.6rem; } /* Logo-Schriftzug */ .vw-navbar .navbar-brand, .vw-brand { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #F0E0C8 !important; letter-spacing: 0.02em; transition: color var(--vw-transition); } .vw-navbar .navbar-brand:hover { color: var(--vw-cork-light) !important; } /* Nav-Links */ .vw-navbar .nav-link { color: #E8D5B8 !important; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.03em; padding: 0.5rem 0.85rem !important; border-radius: 3px; transition: color var(--vw-transition), background var(--vw-transition); } .vw-navbar .nav-link:hover, .vw-navbar .nav-link:focus { color: #F0D08A !important; background: rgba(184, 92, 0, 0.18); } .vw-navbar .nav-link.active { color: #F0D08A !important; font-weight: 700; } /* Dropdown-Menü */ .vw-dropdown, .vw-navbar .dropdown-menu { background: #FFFDF8; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: var(--vw-shadow); margin-top: 2px; } .vw-navbar .dropdown-item { color: var(--vw-text); font-size: 0.9375rem; padding: 0.45rem 1rem; transition: background var(--vw-transition), color var(--vw-transition); } .vw-navbar .dropdown-item:hover, .vw-navbar .dropdown-item:focus { background: var(--vw-accent-light); color: var(--vw-accent); } .vw-navbar .dropdown-item.active { background: var(--vw-accent); color: #fff; } /* Hamburger-Icon (angepasste Farbe) */ .vw-navbar .navbar-toggler { border-color: rgba(240, 224, 200, 0.4); } .vw-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(240,224,200,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ============================================================================= 5. HERO-SECTION (Etappen-Header-Bild) ============================================================================= */ .vw-hero { position: relative; height: 62vh; min-height: 320px; max-height: 680px; overflow: hidden; background: #2C1C0A; /* Fallback wenn Bild fehlt */ } .vw-hero img, .vw-hero .vw-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; transition: transform 6s ease; } .vw-hero:hover img { transform: scale(1.03); } /* Overlay: Gradient von unten */ .vw-hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient( to bottom, transparent 0%, rgba(44, 28, 10, 0.45) 50%, rgba(44, 28, 10, 0.88) 100% ); padding: 3rem 0 2rem; color: #fff; } .vw-hero-overlay h1, .vw-hero-overlay .h1 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } .vw-hero-overlay .lead { color: rgba(255,255,255,0.88); } /* Kleiner Hero für Unterseiten (z.B. wer'sn das?) */ .vw-hero-sm { height: 38vh; min-height: 200px; max-height: 360px; } /* ============================================================================= 6. CONTENT SHEET ("Zettel auf dem Korkbrett") ============================================================================= */ .vw-content-sheet { background: rgba(255, 253, 248, 0.97); border-radius: var(--bs-border-radius); box-shadow: var(--vw-shadow); padding: 2.5rem; } /* Schmalerer Inhalt auf Desktop */ .vw-content-sheet.vw-narrow { max-width: 820px; margin-left: auto; margin-right: auto; } /* Pinnadel-Deko oben mittig (rein dekorativ, optional) */ .vw-content-sheet.vw-pinned::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #E74C3C, var(--vw-pin-red)); box-shadow: 0 2px 4px rgba(0,0,0,0.4); margin: -1.5rem auto 1.25rem; } /* ============================================================================= 7. CARDS (Etappen-Karten auf Übersichtsseiten) ============================================================================= */ .vw-card { background: var(--vw-cork-paper); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: var(--vw-shadow); transition: transform var(--vw-transition), box-shadow var(--vw-transition); overflow: hidden; } .vw-card:hover { transform: translateY(-4px); box-shadow: var(--vw-shadow-lg); } /* Card-Bild: immer gleiche Höhe */ .vw-card-img, .vw-card .card-img-top { height: 210px; object-fit: cover; object-position: center; border-bottom: 1px solid var(--bs-border-color); } /* Card-Body */ .vw-card .card-body { background: var(--vw-cork-paper); padding: 1.25rem; } .vw-card .card-title { font-family: 'Playfair Display', serif; font-size: 1.125rem; color: var(--vw-text); margin-bottom: 0.6rem; } .vw-card .card-text { font-size: 0.9375rem; color: var(--vw-text-muted); line-height: 1.6; } /* Card-Footer */ .vw-card-footer, .vw-card .card-footer { background: var(--vw-accent-light); border-top: 1px solid var(--bs-border-color); padding: 0.6rem 1.25rem; font-size: 0.875rem; color: var(--vw-text-muted); } /* Kontinent-Karte (größer) */ .vw-card-continent .card-img-top { height: 260px; } .vw-card-continent .card-title { font-size: 1.35rem; } /* ============================================================================= 8. BADGES & PILLS ============================================================================= */ .vw-badge { background-color: var(--vw-accent) !important; color: #fff !important; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.02em; padding: 0.3em 0.65em; } /* Kilometer-Pill */ .vw-badge-km { background: var(--vw-cork-dark) !important; color: #F0E0C8 !important; font-family: 'Source Code Pro', monospace; font-size: 0.8rem; } /* Land-Tag */ .vw-badge-land { background: rgba(44, 28, 10, 0.75) !important; color: #F0E0C8 !important; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; } /* ============================================================================= 9. BUTTONS ============================================================================= */ .btn-vw-primary, .vw-btn-primary { background-color: var(--vw-accent); border-color: var(--vw-accent-hover); color: #fff; font-weight: 600; letter-spacing: 0.02em; transition: background-color var(--vw-transition), border-color var(--vw-transition), box-shadow var(--vw-transition); } .btn-vw-primary:hover, .vw-btn-primary:hover { background-color: var(--vw-accent-hover); border-color: #7A3E00; color: #fff; box-shadow: 0 3px 10px rgba(184, 92, 0, 0.35); } .btn-vw-primary:focus, .vw-btn-primary:focus { box-shadow: 0 0 0 3px rgba(184, 92, 0, 0.3); } /* Outline-Variante */ .btn-vw-outline { border: 2px solid var(--vw-accent); color: var(--vw-accent); background: transparent; font-weight: 600; transition: all var(--vw-transition); } .btn-vw-outline:hover { background: var(--vw-accent); color: #fff; } /* ============================================================================= 10. BREADCRUMB ============================================================================= */ .vw-breadcrumb { background: rgba(255, 253, 248, 0.7); padding: 0.5rem 1rem; border-radius: var(--bs-border-radius); font-size: 0.875rem; margin-bottom: 1.5rem; } .vw-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--vw-cork-warm); } .vw-breadcrumb .breadcrumb-item a { color: var(--vw-accent); } .vw-breadcrumb .breadcrumb-item.active { color: var(--vw-text-muted); } /* ============================================================================= 11. KARTE / MAP-EMBED ============================================================================= */ /* Bootstrap ratio-Box: responsives 16:9 iFrame */ .vw-map-container { border-radius: var(--bs-border-radius); overflow: hidden; border: 2px solid var(--bs-border-color); box-shadow: var(--vw-shadow-sm); } .vw-map-container iframe { display: block; border: 0; width: 100%; height: 100%; } /* Leaflet-Karte */ .vw-leaflet-map { height: 420px; width: 100%; border-radius: var(--bs-border-radius); border: 2px solid var(--bs-border-color); box-shadow: var(--vw-shadow); z-index: 1; } /* ============================================================================= 12. GALERIE / CAROUSEL ============================================================================= */ .vw-carousel .carousel-inner { border-radius: var(--bs-border-radius); overflow: hidden; box-shadow: var(--vw-shadow); } .vw-carousel .carousel-item img { max-height: 520px; object-fit: cover; width: 100%; } .vw-carousel .carousel-caption { background: linear-gradient(transparent, rgba(44,28,10,0.75)); border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); bottom: 0; left: 0; right: 0; padding: 1.5rem 1rem 0.75rem; } .vw-carousel .carousel-control-prev-icon, .vw-carousel .carousel-control-next-icon { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); } /* Foto-Grid auf Galerie-Seite */ .vw-gallery-grid { columns: 3; column-gap: 0.75rem; } .vw-gallery-grid .vw-gallery-item { break-inside: avoid; margin-bottom: 0.75rem; overflow: hidden; border-radius: var(--bs-border-radius); cursor: pointer; transition: opacity var(--vw-transition), transform var(--vw-transition); } .vw-gallery-grid .vw-gallery-item img { width: 100%; display: block; transition: transform 0.4s ease; } .vw-gallery-grid .vw-gallery-item:hover img { transform: scale(1.04); } @media (max-width: 767.98px) { .vw-gallery-grid { columns: 2; } } @media (max-width: 575.98px) { .vw-gallery-grid { columns: 1; } } /* ============================================================================= 13. ROUTE / ETAPPEN-TIMELINE ============================================================================= */ /* Vertikale Timeline für Reiseverlauf */ .vw-timeline { position: relative; padding-left: 2rem; } .vw-timeline::before { content: ''; position: absolute; left: 0.6rem; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--vw-accent), var(--vw-cork-dark)); border-radius: 1px; } .vw-timeline-item { position: relative; margin-bottom: 2rem; padding-left: 1.25rem; } .vw-timeline-item::before { content: ''; position: absolute; left: -1.45rem; top: 0.35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--vw-accent); border: 2px solid var(--vw-cork-paper); box-shadow: 0 0 0 2px var(--vw-accent); } .vw-timeline-item .vw-timeline-date { font-family: 'Source Code Pro', monospace; font-size: 0.8125rem; color: var(--vw-text-muted); margin-bottom: 0.25rem; } .vw-timeline-item h4 { font-size: 1.05rem; margin-bottom: 0.4rem; } /* ============================================================================= 14. ETAPPEN-METAINFOS (Datum, km, Land) ============================================================================= */ .vw-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--vw-text-muted); } .vw-meta-item { display: flex; align-items: center; gap: 0.35rem; } .vw-meta-item svg, .vw-meta-item .bi { color: var(--vw-accent); flex-shrink: 0; } /* ============================================================================= 15. OFFCANVAS (Mobile Etappen-Navigation) ============================================================================= */ .vw-offcanvas.offcanvas { background-image: url('../img/back.jpg'); background-size: cover; background-attachment: scroll; border-right: 2px solid var(--vw-accent); } .vw-offcanvas .offcanvas-header { background: rgba(44, 28, 10, 0.92); color: #F0E0C8; border-bottom: 1px solid var(--vw-accent); } .vw-offcanvas .offcanvas-title { font-family: 'Playfair Display', serif; color: #F0E0C8; } .vw-offcanvas .offcanvas-body { background: rgba(253, 246, 236, 0.92); padding: 1.5rem; } /* ============================================================================= 16. FOOTER ============================================================================= */ .vw-footer { background: rgba(44, 28, 10, 0.93); color: #C8B89A; border-top: 2px solid var(--vw-accent); padding: 2.5rem 0 1.5rem; margin-top: 4rem; font-size: 0.9rem; } .vw-footer h5, .vw-footer .h5 { color: #F0E0C8; font-family: 'Playfair Display', serif; font-size: 1.05rem; margin-bottom: 0.85rem; } .vw-footer a { color: #C8B89A; transition: color var(--vw-transition); } .vw-footer a:hover { color: var(--vw-cork-light); text-decoration: none; } .vw-footer hr { border-color: rgba(200, 184, 154, 0.25); margin: 1.5rem 0 1rem; } .vw-footer-copy { color: rgba(200, 184, 154, 0.6); font-size: 0.8125rem; } /* ============================================================================= 17. FORMS (Kontakt, Kommentare) ============================================================================= */ .vw-form .form-control, .vw-form .form-select { background: var(--vw-cork-paper); border-color: var(--bs-border-color); color: var(--vw-text); transition: border-color var(--vw-transition), box-shadow var(--vw-transition); } .vw-form .form-control:focus, .vw-form .form-select:focus { border-color: var(--vw-accent); box-shadow: 0 0 0 3px rgba(184, 92, 0, 0.2); background: #fff; } .vw-form .form-label { font-weight: 600; color: var(--vw-text); font-size: 0.9375rem; } /* ============================================================================= 18. UTILITIES & HILFKLASSEN ============================================================================= */ /* Trennlinie im Cork-Stil */ .vw-divider { border: none; border-top: 2px solid var(--bs-border-color); margin: 2.5rem 0; opacity: 1; } /* Zitat / Reisenotiz */ .vw-quote { border-left: 4px solid var(--vw-accent); padding: 1rem 1.25rem; background: var(--vw-accent-light); border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; font-style: italic; color: var(--vw-text-muted); margin: 1.5rem 0; } /* Highlight-Box (Tipp, Info) */ .vw-info-box { background: var(--vw-cork-cream); border: 1px solid var(--bs-border-color); border-left: 4px solid var(--vw-accent); border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; padding: 1rem 1.25rem; margin: 1.5rem 0; } /* Textfarben */ .text-vw-accent { color: var(--vw-accent) !important; } .text-vw-muted { color: var(--vw-text-muted) !important; } .text-vw-cork { color: var(--vw-cork-warm) !important; } /* Hintergrundfarben */ .bg-vw-cream { background-color: var(--vw-cork-cream) !important; } .bg-vw-paper { background-color: var(--vw-cork-paper) !important; } .bg-vw-accent { background-color: var(--vw-accent) !important; } .bg-vw-dark { background-color: rgba(44,28,10,0.92) !important; } /* Schatten-Utilities */ .shadow-vw-sm { box-shadow: var(--vw-shadow-sm) !important; } .shadow-vw { box-shadow: var(--vw-shadow) !important; } .shadow-vw-lg { box-shadow: var(--vw-shadow-lg) !important; } /* ============================================================================= 19. RESPONSIVE ANPASSUNGEN ============================================================================= */ /* Tablet */ @media (max-width: 991.98px) { .vw-hero { height: 52vh; } .vw-content-sheet { padding: 1.75rem; } .vw-card-img, .vw-card .card-img-top { height: 185px; } } /* Mobile */ @media (max-width: 767.98px) { .vw-hero { height: 45vh; min-height: 260px; } .vw-hero-sm { height: 30vh; min-height: 160px; } .vw-content-sheet { padding: 1.25rem; } .vw-card-img, .vw-card .card-img-top { height: 165px; } .vw-timeline { padding-left: 1.5rem; } .vw-leaflet-map { height: 300px; } .vw-footer { margin-top: 2.5rem; } } /* Extra-Klein */ @media (max-width: 575.98px) { .vw-hero { height: 38vh; min-height: 220px; } .vw-hero-overlay h1 { font-size: 1.6rem; } body.vw-cork-bg { background-attachment: scroll; } /* Performance */ } /* ============================================================================= 20. DRUCK-STILE ============================================================================= */ @media print { body.vw-cork-bg { background: #fff !important; } .vw-navbar, .vw-footer, .vw-offcanvas { display: none !important; } .vw-content-sheet { box-shadow: none; padding: 0; } .vw-hero { height: auto; max-height: 200px; } a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; } }