/*===================================================================== 1. Basis‑ und Typografie‑Einstellungen =====================================================================*/ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* Grundlegendes Layout des */ body { margin: 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; color: #574333; background-color: #fff; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /* Überschriften – einheitliche Farben & Schriftarten */ h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5rem 0; font-weight: 700; line-height: 1.2; word-wrap: break-word; } /* Roboto Slab für alle Headlines */ h1, h2, h3, h4, h5, h6 { font-family: "Roboto Slab", Helvetica, Arial, sans-serif; } /* Farben für unterschiedliche Ebenen */ h1, h3, h5 { color: #574333; } h2, h4, h6 { color: #ffffff; } /* Größen‑ und Ausrichtungs‑Defaults */ h1, h2 { font-size: 3.2rem; line-height: 1.05; text-align: left; } h3, h4 { font-size: 1.6rem; line-height: 1.25; text-align: left; } /* Absätze & Listen */ p { margin: 0 0 1em 0; } ul, ol { margin: 0 0 1em 0; padding-left: 1.5rem; } li { margin-bottom: 0.5rem; } /*===================================================================== 2. Layout‑Container =====================================================================*/ .jtpl-content, .jtpl-footer { margin: 10px auto; max-width: 990px; text-align: justify; } /* Links im Content‑Bereich */ .jtpl-content a { color: #dc593d; text-decoration: none; } .jtpl-content a:hover, .jtpl-content a:focus { text-decoration: underline; } /*===================================================================== 3. Bilder & Medien =====================================================================*/ .jtpl-logo { padding: 10px 20px; margin-right: 4rem; box-sizing: border-box; width: auto; max-width: 300px; min-width: 150px; } .jtpl-pic { padding: 10px 20px; box-sizing: border-box; width: auto; max-width: 300px; min-width: 150px; } /* Bild‑Link (Logo) */ .jtpl-logo-link { display: inline-block; } /* Text‑mit‑Bild‑Komponente */ .text-with-image { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; } .text-with-image img { flex: 0 0 150px; /* feste Breite, bleibt responsiv */ max-width: 100%; height: auto; } .text-with-image__content { flex: 1 1 300px; } /* ------------------------------------------------- 2.1 Bild‑/Karten‑Container (responsive) ------------------------------------------------- */ .map-figure { margin: 0 0 1rem 0; /* Abstand nach unten zum Text */ max-width: 100%; /* nie breiter als der umgebende Flex‑Container */ } .map-figure img { width: 100%; /* Bild füllt die Breite des Figure‑Elements */ height: auto; border: 1px solid #ddd; /* leichte Umrandung – optional */ border-radius: 4px; } /* Lizenz‑Hinweis unter dem Bild */ .map-caption { font-size: 0.85rem; color: #999; margin-top: 0.3rem; } /*===================================================================== 4. Navigation (Desktop) =====================================================================*/ .jtpl-navigation-wrapper { background: #fdf2e4; position: sticky; top: 0; z-index: 1000; padding: 0.5rem 0; } /* Grundstruktur */ .jtpl-navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; list-style: none; margin: 0; padding: 0; } /* Einzelne Links */ .jtpl-navigation a { display: inline-block; padding: 0rem 0.8rem; color: #574333; background-color: #fdf2e4; font-size: 1rem; line-height: 1.5; text-decoration: none; transition: color 250ms ease-in-out, background-color 250ms ease-in-out; } /* Aktiver / aktueller Menüpunkt */ .j-nav-current, .jtpl-navigation a:hover, .jtpl-navigation a:focus, .jtpl-navigation a:active { color: #dc593d; } /* ------------------------------------------------- 5. Mobile navigation – hide the native checkbox ------------------------------------------------- */ #jtpl-mobile-navigation__checkbox { display: none; /* we never want to see the checkbox itself */ } /* ------------------------------------------------- 5.1 Hamburger button (the burger) ------------------------------------------------- */ .jmd-nav__toggle-button { display: none; /* hidden on desktop, shown in the media query */ width: 40px; height: 40px; position: absolute; top: 3.4rem; /* distance from top of the header */ right: 1rem; /* distance from right edge */ background: rgba(255,255,255,0.85); cursor: pointer; z-index: 210; /* must be above the mobile menu */ } /* three horizontal bars */ .jmd-nav__toggle-button .burger-line { display: block; width: 24px; /* length of each bar */ height: 2px; /* thickness */ margin: 5px auto; /* vertical spacing, centered horizontally */ background: #574333; /* colour of the bars – matches your theme */ transition: all .3s ease-in-out; } /* ------------------------------------------------- 5.2 Mobile menu – hidden by default ------------------------------------------------- */ .jtpl-mobile-navigation { position: absolute; top: 100%; /* directly under the header */ left: 0; width: 100%; background: #fdf2e4; /* same colour as the header */ visibility: hidden; opacity: 0; max-height: 0; overflow: hidden; transition: all .25s ease-in-out; z-index: 200; } /* list styling */ .jtpl-mobile-navigation ul { list-style: none; margin: 0; padding: 0; } .jtpl-mobile-navigation a { display: block; padding: 0.75rem 1.5rem; color: #574333; background: #fff; border-bottom: 1px rgba(0,0,0,.15) solid; text-decoration: none; font-size: 1rem; transition: background .25s, color .25s; } .jtpl-mobile-navigation a:hover, .jtpl-mobile-navigation a:focus { background: #f0e9e0; color: #dc593d; } /* ------------------------------------------------- 5.3 When the checkbox is checked → show menu ------------------------------------------------- */ #jtpl-mobile-navigation__checkbox:checked ~ .jtpl-mobile-navigation { visibility: visible; opacity: 0.95; max-height: 100vh; /* enough space for all links */ padding: 1rem 0; } /* ------------------------------------------------- 5.4 Animate the burger → X when the menu is open ------------------------------------------------- */ #jtpl-mobile-navigation__checkbox:checked + .jmd-nav__toggle-button .burger-line:nth-child(1) { transform: rotate(45deg) translate(4px, 6px); } #jtpl-mobile-navigation__checkbox:checked + .jmd-nav__toggle-button .burger-line:nth-child(2) { opacity: 0; /* hide the middle line */ } #jtpl-mobile-navigation__checkbox:checked + .jmd-nav__toggle-button .burger-line:nth-child(3) { transform: rotate(-45deg) translate(4px, -6px); } /* ------------------------------------------------- 6. Media query – when the screen is ≤ 720 px ------------------------------------------------- */ @media screen and (max-width: 720px) { /* hide the desktop navigation */ .jtpl-navigation { display: none; } /* show the burger button */ .jmd-nav__toggle-button { display: block; } } /* ------------------------------------------------- 7. OPTIONAL – prevent background scrolling when menu is open ------------------------------------------------- */ body:has(#jtpl-mobile-navigation__checkbox:checked) { overflow: hidden; } /* ------------------------------------------------- 5a. Aktiver Menüpunkt (Desktop + Mobile) ------------------------------------------------- */ .j-nav-current, .jtpl-navigation a:hover, .jtpl-navigation a:focus, .jtpl-mobile-navigation a:hover, .jtpl-mobile-navigation a:focus { color: #dc593d; } /*===================================================================== 6. Banner (Hinweis‑Bereich) =====================================================================*/ .banner { background: #dc593d; color: #fff; padding: 1rem 0; } .banner__text { max-width: 990px; margin: 0 auto; text-align: center; font-size: 1.2rem; } /*===================================================================== 7. Hero‑Titel & Section‑Titel =====================================================================*/ .hero-title { margin-top: 2rem; font-size: 2.4rem; color: #574333; } /* Einheitliche Section‑Überschriften */ .section-title { margin-top: 2rem; font-size: 1.8rem; color: #574333; } /*===================================================================== 8. Links – einheitliche Farbdefinitionen =====================================================================*/ .link-primary, .footer-link { color: #dc593d; text-decoration: none; } .link-primary:hover, .link-primary:focus, .footer-link:hover, .footer-link:focus { text-decoration: underline; } /*===================================================================== 9. Signatur‑Block =====================================================================*/ .signature { margin-top: 2rem; font-style: italic; } /*===================================================================== 10. Footer =====================================================================*/ /* ------------------------------------------------- 1. Footer‑Hintergrund über die volle Breite ------------------------------------------------- */ .footer-bg { /*width: 100%; /* immer 100 % des Viewports */ background-color: #dc593d; /* gewünschte Footer‑Farbe */ } /* ------------------------------------------------- 2. Inhalt des Footers – max‑width wie bei .jtpl-content ------------------------------------------------- */ .footer-bg .jtpl-footer { max-width: 990px; /* gleiche Breite wie .jtpl-content */ margin: 0 auto; /* zentrieren */ display: flex; /* Flex‑Layout bleibt erhalten */ flex-wrap: wrap; gap: 4rem; padding: 2rem 0; /* vertikaler Abstand zum Rand */ background: none; color: #ffffff; } /* ------------------------------------------------- 3. Kleinere Anpassungen für mobile Ansicht ------------------------------------------------- */ @media screen and (max-width: 720px) { .footer-bg .jtpl-footer { flex-direction: column; text-align: center; } } .jtpl-footer { display: flex; flex-wrap: wrap; background: none; color: #ffffff; padding: 2rem 0; gap: 2rem; } /* Flex‑Item */ .jtpl-footer__inner { flex: 1 1 300px; /* mindestens 300 px, sonst 100 % */ text-align: left; } /* Footer‑Überschrift */ .jtpl-footer__inner h4 { margin-bottom: 0.5rem; color: #ffffff; } /* Footer‑Links */ .jtpl-footer a { color: #fdf2e4; text-decoration: none; } .jtpl-footer a:hover, .jtpl-footer a:focus { text-decoration: underline; } /* Footer‑Navigation (kleine Zeile) */ .footer-nav { margin-top: 1rem; } .footer-nav a { margin: 0 0.3rem; } /*===================================================================== 11. Formulare (falls später benötigt) =====================================================================*/ input[type="text"], input[type="email"], input[type="date"], textarea, select, .j-checkout__input-field { box-sizing: border-box; border: 1px solid #574333; padding: 5px !important; background: #fff; color: #574333; font-size: 1.6rem; line-height: 1.5; font-family: inherit; transition: border-color .25s ease-in-out; display: block; width: 100%; } input[type="text"]:focus, input[type="email"]:focus, input[type="date"]:focus, textarea:focus, select:focus, .j-checkout__input-field:focus { border-color: #f3f3f3; outline: 0; } /*===================================================================== 12. Responsives Layout =====================================================================*/ /* Mobile‑Breakpoints */ @media screen and (max-width: 720px) { /* Footer wird untereinander gestapelt */ .jtpl-footer { flex-direction: column; text-align: center; } .jtpl-footer__inner { flex: 100%; } /* Tablet‑/kleiner Desktop */ @media screen and (max-width: 900px) { .jtpl-logo { display: block; margin: 0 auto 1rem auto; } } /*===================================================================== 13. Sonstige Hilfsklassen (optional) =====================================================================*/ /* Utility – zentrierter Block */ .center { text-align: center; } /* Utility – Abstand nach unten */ .mb-2 { margin-bottom: 2rem; }