/* ============================================================= HOTEI JAPAN REISEN — application.css ============================================================= Eigenes Stylesheet, das auf Bootstrap 5 AUFSETZT. Ladereihenfolge im jeder Seite (wichtig!): 1. bootstrap.min.css → Grid, Komponenten, Utilities 2. application.css → dieses File: Marke, Farben, Feinschliff application.css muss IMMER NACH Bootstrap eingebunden werden, sonst überschreiben Bootstraps Defaults unsere Anpassungen. Inhaltsverzeichnis: 1. Fonts (selbst gehostet, siehe /assets/fonts/) 2. Design-Tokens (Farben, Radius, Schrift) + Bootstrap-Remap 3. Basis / Typografie 4. Navigation (Header) 5. Buttons 6. "Blueprint"-Rahmen (dekorative Eckmarken) 7. Hero / Aufmacher 8. Dunkle Sektions-Intros (Warum / Planung) 9. Karten (Regionen, Reiseinfos, Gruppenreisen) 10. Tags / Badges 11. Kennzahlen-Kacheln (30+ Jahre etc.) 12. Prozess-Schritte (Reiseplanung) 13. Zitate (Reisestimmen) 14. Formular (Kontakt) 15. Modals (Reiseinfos-Details) 16. Footer 17. Responsive Feinheiten ============================================================= */ /* ------------------------------------------------------------- 1. FONTS — lokal unter /assets/fonts/ abgelegt (kein Google-CDN) ------------------------------------------------------------- */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow/barlow-400.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow/barlow-500.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow/barlow-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-condensed/barlow-condensed-400.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-condensed/barlow-condensed-500.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed/barlow-condensed-600.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed/barlow-condensed-700.woff2") format("woff2"); } /* ------------------------------------------------------------- 2. DESIGN-TOKENS Eigene Marken-Variablen + Umleitung der Bootstrap-Variablen auf unsere Farben (Bootstrap-5.3-CSS-Variablen-API). ------------------------------------------------------------- */ :root { /* Marke: Grundfarben */ --color-bg: #faf5ea; --color-surface: #f2e9d6; --color-text: #2b2317; --color-accent: #d9912f; --color-accent-2: #b9752a; --color-divider: color-mix(in srgb, #6b5636 26%, transparent); /* Marke: Akzent-Skala (Orange) */ --color-accent-100: #fdf6e9; --color-accent-200: #f8e7c8; --color-accent-300: #f0d29d; --color-accent-400: #e5b569; --color-accent-500: #d9912f; --color-accent-600: #bd7924; --color-accent-700: #99601c; --color-accent-800: #714615; --color-accent-900: #40280d; /* Marke: Akzent-2-Skala (Terracotta) */ --color-accent-2-500: #b9752a; --color-accent-2-700: #825018; /* Marke: Neutral-Skala (Beige/Braun) */ --color-neutral-100: #fbf7ee; --color-neutral-600: #8a7a5e; --color-neutral-700: #6a5c44; --color-neutral-800: #4a3f2e; /* Marke: Schriften */ --font-body: "Barlow", -apple-system, BlinkMacSystemFont, sans-serif; --font-heading: "Barlow Condensed", -apple-system, BlinkMacSystemFont, sans-serif; /* Bootstrap-Remap: Farben */ --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-body-font-family: var(--font-body); --bs-link-color: var(--color-accent-700); /* #99601c */ --bs-link-color-rgb: 153, 96, 28; /* #99601c — Bootstrap färbt Links über DIESE rgb-Variable ein, siehe reboot: a { color: rgba(var(--bs-link-color-rgb), ...) } */ --bs-link-hover-color: var(--color-accent-800); --bs-link-hover-color-rgb: 113, 70, 21; /* #714615 — analog für a:hover */ --bs-link-decoration: underline; --bs-primary: var(--color-accent-500); --bs-primary-rgb: 217, 145, 47; --bs-secondary: var(--color-accent-2-500); /* Bootstrap-Remap: eckige Rahmen statt runde Ecken (passt zum "Blueprint"-Look, siehe Abschnitt 6) */ --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-color: var(--color-divider); } html { scroll-behavior: smooth; } /* Sprungmarken (Anker-Navigation) dürfen nicht unter dem sticky Header verschwinden — daher etwas Luft nach oben. */ .anchor-offset { scroll-margin-top: 5.5rem; } /* ------------------------------------------------------------- 3. BASIS / TYPOGRAFIE ------------------------------------------------------------- */ h1, h2, h3, h4, .font-heading { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.01em; text-wrap: pretty; } p { text-wrap: pretty; } /* Fluid Headline-Größen (skalieren mit der Fensterbreite) */ .display-hero { font-size: clamp(2.5rem, 5.4vw, 4.25rem); line-height: 1.02; } .section-title { font-size: clamp(2rem, 4vw, 3.125rem); line-height: 1.08; } .section-title-lg { font-size: clamp(2.125rem, 4.4vw, 3.5rem); line-height: 1.05; } /* Bootstrap setzt .fs-5 per Default auf 1.25rem (mit !important) — für unsere Fließtexte reicht 1rem, deshalb hier bewusst überschrieben. */ .fs-5 { font-size: 1rem !important; } .eyebrow { font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-700); } .eyebrow--on-dark { color: var(--color-accent-300); } .text-neutral-700 { color: var(--color-neutral-700); } .text-neutral-800 { color: var(--color-neutral-800); } .bg-surface { background-color: var(--color-surface); } /* ------------------------------------------------------------- 4. NAVIGATION (Header) ------------------------------------------------------------- */ .site-header { background-color: color-mix(in srgb, var(--color-bg) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--color-divider); } .site-header .navbar-brand { display: flex; align-items: center; gap: 0.875rem; } .site-header .navbar-brand img { height: 48px; width: auto; } .site-header .brand-name { font-family: var(--font-heading); font-size: 1.5rem; letter-spacing: 0.06em; line-height: 1; color: var(--color-text); } .site-header .brand-tag { font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-700); } .site-header .nav-link { font-family: var(--font-heading); letter-spacing: 0.04em; font-size: 1.0625rem; color: var(--color-text); position: relative; } .site-header .nav-link:hover { color: var(--color-accent-800); } /* aktiver Menüpunkt: wird per Bootstrap-Scrollspy automatisch gesetzt */ .site-header .nav-link.active { color: var(--color-accent-800); } .site-header .nav-link.active::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.125rem; height: 2px; background: var(--color-accent); } /* ------------------------------------------------------------- 5. BUTTONS Bootstraps Button-Farben laufen intern über --bs-btn-* auf dem jeweiligen .btn-*-Selektor (Bootstrap-5.3-Variablen-API) — deshalb hier gezielt überschreiben statt --bs-primary allein. ------------------------------------------------------------- */ .btn { font-family: var(--font-heading); letter-spacing: 0.06em; font-size: 1.0625rem; } .btn-primary { /* Grundfarbe = Marken-Akzent #d9912f (--color-accent-500); Hover/Active eine bzw. zwei Stufen dunkler für Kontrast beim Klicken. */ --bs-btn-color: #fdf6e9; --bs-btn-bg: var(--color-accent-500); --bs-btn-border-color: var(--color-accent-500); --bs-btn-hover-color: #fdf6e9; --bs-btn-hover-bg: var(--color-accent-600); --bs-btn-hover-border-color: var(--color-accent-600); --bs-btn-active-bg: var(--color-accent-700); --bs-btn-active-border-color: var(--color-accent-700); --bs-btn-disabled-bg: var(--color-accent-300); --bs-btn-disabled-border-color: var(--color-accent-300); } .btn-outline-secondary { --bs-btn-color: var(--color-text); --bs-btn-border-color: var(--color-accent-400); --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--color-accent-100); --bs-btn-hover-border-color: var(--color-accent-500); --bs-btn-active-bg: var(--color-accent-200); } /* Variante für Sekundär-Buttons auf dunklem Grund (Hero) */ .btn-outline-light { --bs-btn-color: #fdf6e9; --bs-btn-border-color: var(--color-accent-400); --bs-btn-hover-bg: color-mix(in srgb, #fdf6e9 12%, transparent); --bs-btn-hover-border-color: var(--color-accent-400); --bs-btn-hover-color: #fdf6e9; } .btn-link.nav-cta { font-family: var(--font-heading); text-decoration: none; } /* ------------------------------------------------------------- 6. "BLUEPRINT"-RAHMEN Dekorative Eckmarken (Werkzeichnungs-Look), die Bilder, Karten und Primär-Buttons einrahmen. Ein .blueprint-Element bekommt vier als Kinder. ------------------------------------------------------------- */ .blueprint { position: relative; } /* Jede .corner ist ein kleines Plus, das mittig auf dem Eckpunkt sitzt (Passermarken-Optik) — gezeichnet aus zwei dünnen Balken (::before/::after) statt mit einem Zeichen, damit es auf jeder Bildschirmauflösung scharf bleibt. */ .blueprint .corner { position: absolute; width: 9px; height: 9px; pointer-events: none; } .blueprint .corner::before, .blueprint .corner::after { content: ""; position: absolute; background: rgba(0, 0, 0, 0.55); } .blueprint .corner::before { /* waagrechter Balken */ top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); } .blueprint .corner::after { /* senkrechter Balken */ left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); } .blueprint .corner.tl { top: -4.5px; left: -4.5px; } .blueprint .corner.tr { top: -4.5px; right: -4.5px; } .blueprint .corner.bl { bottom: -4.5px; left: -4.5px; } .blueprint .corner.br { bottom: -4.5px; right: -4.5px; } /* ------------------------------------------------------------- 7. HERO / AUFMACHER ------------------------------------------------------------- */ .hero { position: relative; background-color: var(--color-accent-900); color: #fdf6e9; } .hero img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; } .hero .hero-content { position: relative; min-height: 27rem; } /* ------------------------------------------------------------- 8. DUNKLE SEKTIONS-INTROS (Warum mit mir? / Reiseplanung) Karierte Struktur + zwei große Ringe als Hintergrund-Deko. ------------------------------------------------------------- */ .section-intro { position: relative; background-color: var(--color-accent-900); color: #fdf6e9; overflow: hidden; } .section-intro::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, color-mix(in srgb, #f0d29d 16%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, #f0d29d 16%, transparent) 1px, transparent 1px); background-size: 64px 64px; } .section-intro::after { content: ""; position: absolute; top: -90px; right: 8%; width: 300px; height: 300px; border: 2px solid color-mix(in srgb, #e5b569 70%, transparent); border-radius: 50%; box-shadow: 90px 220px 0 -60px color-mix(in srgb, #e5b569 55%, transparent); } .section-intro > .container { position: relative; } /* ------------------------------------------------------------- 9. KARTEN (Regionen, Reiseinfos, Gruppenreisen) ------------------------------------------------------------- */ .card { --bs-card-bg: var(--color-neutral-100); --bs-card-border-color: var(--color-divider); --bs-card-cap-bg: transparent; height: 100%; } .card-region img, .card-info img { height: 200px; object-fit: cover; } .card-info { cursor: pointer; transition: border-color 0.15s ease; } .card-info:hover, .card-info:focus-within { border-color: var(--color-accent-500); } .card-info svg { color: var(--color-accent-600); } .card-info .card-cta { font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-700); } .card-kicker { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-700); } .list-plus { list-style: none; padding-left: 0; } .list-plus li { display: grid; grid-template-columns: 14px 1fr; gap: 0.625rem; font-size: 1rem; line-height: 1.5; margin-bottom: 0.5rem; } .list-plus li::marker { content: none; } .list-plus .list-plus__mark { color: var(--color-accent); } /* ------------------------------------------------------------- 10. TAGS / BADGES ------------------------------------------------------------- */ .tag { display: inline-block; font-size: 0.8125rem; letter-spacing: 0.04em; padding: 0.3rem 0.75rem; border: 1px solid var(--color-divider); } .tag-accent { background: var(--color-accent-600); color: #fdf6e9; border-color: var(--color-accent-600); } .tag-outline { background: transparent; color: var(--color-neutral-800); } /* ------------------------------------------------------------- 11. KENNZAHLEN-KACHELN (30+ Jahre / 10 Jahre in Japan) ------------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); } .stat-tile { background: var(--color-neutral-100); padding: 1.125rem 1rem; } .stat-tile .stat-number { font-family: var(--font-heading); font-size: 2.5rem; line-height: 1; color: var(--color-accent-700); } .stat-tile .stat-label { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-700); margin-top: 0.375rem; } /* ------------------------------------------------------------- 12. PROZESS-SCHRITTE (Individuelle Reiseplanung) ------------------------------------------------------------- */ .step { border-top: 1px solid var(--color-divider); padding: 1.375rem 0; } .step:last-child { border-bottom: 1px solid var(--color-divider); } .step .step-kicker { font-family: var(--font-heading); font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 0.375rem; } /* ------------------------------------------------------------- 13. ZITATE (Reisestimmen) ------------------------------------------------------------- */ .quote { border-left: 2px solid var(--color-accent-400); padding-left: 1.375rem; } .quote footer { margin-top: 0.875rem; font-family: var(--font-heading); letter-spacing: 0.1em; font-size: 0.9375rem; color: var(--color-accent-800); } /* ------------------------------------------------------------- 14. FORMULAR (Kontakt) ------------------------------------------------------------- */ .form-label { font-size: 0.9375rem; color: var(--color-neutral-800); } .form-control, .form-select { --bs-body-bg: var(--color-neutral-100); border-color: var(--color-divider); border-radius: 0; padding: 0.65rem 0.85rem; } .form-control:focus, .form-select:focus { border-color: var(--color-accent-500); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-accent-500) 25%, transparent); } .form-check-input { border-color: var(--color-neutral-600); } .form-check-input:checked { background-color: var(--color-accent-600); border-color: var(--color-accent-600); } .form-check-input:focus { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-accent-500) 25%, transparent); } /* ------------------------------------------------------------- 15. MODALS (Reiseinfos-Details) ------------------------------------------------------------- */ .modal-content { --bs-modal-bg: var(--color-bg); border: 1px solid var(--color-accent-500); } .modal-header { border-bottom: 1px solid var(--color-divider); } .modal-body h3 { font-size: 1.375rem; border-bottom: 1px solid var(--color-divider); padding-bottom: 0.5rem; } /* ------------------------------------------------------------- 16. FOOTER ------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--color-divider); background-color: var(--color-surface); } .site-footer .footer-heading { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-neutral-600); } .site-footer a { color: var(--color-text); text-decoration: none; } .site-footer a:hover { color: var(--color-accent-700); } .site-footer img.footer-logo { height: 56px; width: auto; } /* ------------------------------------------------------------- 17. RESPONSIVE FEINHEITEN ------------------------------------------------------------- */ @media (max-width: 767.98px) { .list-plus { grid-template-columns: 1fr; } .section-intro::after { display: none; } }