/* ===================================================================== Streif Template – Layout für Schreinerei Streif und Gästehaus Streif Nachbau des bisherigen Layouts (haupt.css der Altseiten), responsiv. Umrechnung aus dem Original (Basis body 75 % = 12 px): Rahmen 64em = 768 px · Menü/Footer 120 % = 14.4 px Titel/Inhalt 110 % = 13.2 px · h1 160 % von 13.2 = 21.12 px h2 120 % = 15.84 px · h3 100 % = 13.2 px Theme über (Site Setting "streif.theme"). ===================================================================== */ :root { --streif-braun: #572c20; --streif-beige: #dfd2c4; --streif-dropdown: #dbbf96; --streif-text: #222222; --streif-weiss: #ffffff; --streif-rahmen: 768px; --streif-font: Arial, Verdana, sans-serif; } /* --------------------------------------------------------------------- Grundlagen --------------------------------------------------------------------- */ body { margin: 0; padding: 0 0 30px; background-color: #e8dcc0; background-repeat: repeat; color: var(--streif-text); font-family: var(--streif-font); font-size: 12px; line-height: 1.15; } body.theme-schreinerei { background-color: #d9c79f; background-image: url('../Images/holztextur.jpg'); } body.theme-gaestehaus { background-color: #7c8c63; background-image: url('../Images/blumentextur.jpg'); } a, a:visited { color: var(--streif-braun); font-weight: bold; text-decoration: none; } a:hover, a:focus { color: var(--streif-braun); text-decoration: underline; } a:focus-visible, button:focus-visible { outline: 2px solid var(--streif-braun); outline-offset: 2px; } img { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { color: var(--streif-text); font-family: var(--streif-font); font-weight: bold; line-height: 1.15; } .skiplinks a { display: inline-block; margin: 4px; padding: 8px 12px; background: var(--streif-weiss); } /* --------------------------------------------------------------------- Rahmen --------------------------------------------------------------------- */ #mainwrap { box-sizing: content-box; width: auto; max-width: var(--streif-rahmen); margin: 30px auto 0; background: var(--streif-weiss); border: 4px solid var(--streif-braun); border-bottom-width: 2px; } /* Kopfgrafik (enthält Logo bzw. Schriftzug) – Klick führt zur Startseite */ .kopfgrafik { display: block; } .kopfgrafik picture, .kopfgrafik img { display: block; width: 100%; max-width: var(--streif-rahmen); height: auto; aspect-ratio: 768 / 195; } /* --------------------------------------------------------------------- Hauptnavigation --------------------------------------------------------------------- */ .navi { position: relative; background: var(--streif-beige); color: var(--streif-braun); border-top: 2px solid var(--streif-braun); border-bottom: 2px solid var(--streif-braun); } .navi ul { margin: 0; padding: 0; list-style: none; } .navi a, .navi a:visited { display: block; color: var(--streif-braun); font-size: 14.4px; font-weight: normal; text-decoration: none; } .navi a:hover, .navi a:focus, .navi a.active { color: var(--streif-braun); text-decoration: underline; } /* Button "Menü" (nur mobil) */ .navi-toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 15px; border: 0; background: transparent; color: var(--streif-braun); font-family: var(--streif-font); font-size: 14.4px; text-align: left; cursor: pointer; } .navi-toggle-icon, .navi-toggle-icon::before, .navi-toggle-icon::after { display: block; width: 20px; height: 2px; background: var(--streif-braun); transition: transform 0.2s ease; } .navi-toggle-icon { position: relative; margin-left: auto; } .navi-toggle-icon::before, .navi-toggle-icon::after { content: ''; position: absolute; left: 0; } .navi-toggle-icon::before { top: -6px; } .navi-toggle-icon::after { top: 6px; } .navi.is-open .navi-toggle-icon { background: transparent; } .navi.is-open .navi-toggle-icon::before { transform: translateY(6px) rotate(45deg); } .navi.is-open .navi-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); } /* Pfeil-Button für Untermenüs (Touch/mobil) */ .submenu-toggle { flex: 0 0 auto; position: relative; width: 44px; height: 40px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; } .submenu-toggle::before { content: ''; position: absolute; top: 14px; left: 17px; width: 9px; height: 9px; border-right: 2px solid var(--streif-braun); border-bottom: 2px solid var(--streif-braun); transform: rotate(45deg); transition: transform 0.2s ease; } .menu-item.is-open > .submenu-toggle::before { top: 18px; transform: rotate(-135deg); } /* --- mobil: senkrechte Liste --- */ @media (max-width: 775.98px) { #mainwrap { margin-top: 0; border-left-width: 0; border-right-width: 0; border-top-width: 0; } .navi .menu { display: none; border-top: 2px solid var(--streif-braun); } .navi.is-open .menu { display: block; } .navi .menu-item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--streif-dropdown); } .navi .menu-item:last-child { border-bottom: 0; } .navi .menu-item > a { flex: 1 1 auto; padding: 10px 15px; } .navi .submenu { display: none; flex: 0 0 100%; padding: 0 0 5px; background: var(--streif-dropdown); } .navi .menu-item.is-open > .submenu { display: block; } .navi .submenu a { padding: 8px 15px 8px 30px; } } /* --- ab 776 px: waagerechte Leiste wie im Original --- */ @media (min-width: 776px) { .navi-toggle { display: none; } .navi .menu { display: flex; flex-wrap: wrap; padding: 1px; } .navi .menu-item { position: relative; display: flex; align-items: center; margin-left: 18px; } /* Menüabstand Gästehaus (Original: 2.2em statt 1.5em) */ .theme-gaestehaus .navi .menu-item { margin-left: 26.4px; } .navi .menu-item > a { margin: 7px 10px; } .navi .submenu { display: none; position: absolute; top: 100%; left: 0; z-index: 100; width: 180px; margin-left: 5px; padding: 1px; background: var(--streif-dropdown); } .navi .submenu a { margin: 7px 10px; padding: 5px 0; } .navi .menu-item.has-sub:hover > .submenu, .navi .menu-item.has-sub:focus-within > .submenu, .navi .menu-item.has-sub.is-open > .submenu { display: block; } /* Pfeil-Button (Touch): liegt im vorhandenen Zwischenraum, Leiste bleibt gleich breit */ .navi .submenu-toggle { position: absolute; top: 50%; right: -14px; width: 22px; height: 30px; transform: translateY(-50%); } .navi .submenu-toggle::before { top: 8px; left: 6px; width: 8px; height: 8px; } .navi .menu-item.is-open > .submenu-toggle::before { top: 12px; } } /* Mit Maus: Untermenü per Hover, Pfeil-Button nur bei Tastaturfokus sichtbar */ @media (min-width: 776px) and (hover: hover) { .navi .submenu-toggle:not(:focus-visible) { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } } /* --------------------------------------------------------------------- Seitentitel und Inhalt --------------------------------------------------------------------- */ #titel { min-height: 55px; margin-top: 10px; padding: 5px 30px 0; font-size: 13.2px; text-align: center; } #titel h1 { margin: 15px 0 14px; font-size: 21.12px; } #inhaltsbereich { margin: 10px 0 30px; padding: 10px 30px 0; font-size: 13.2px; } #inhaltsbereich::after { content: ''; display: block; clear: both; } #inhaltsbereich p, #inhaltsbereich ul, #inhaltsbereich ol, #inhaltsbereich table, #inhaltsbereich blockquote { margin-top: 0; margin-bottom: 13.2px; } #inhaltsbereich h1 { margin: 10px 0 14px; font-size: 21.12px; } #inhaltsbereich h2 { margin: 13px 0 13px; font-size: 15.84px; } #inhaltsbereich h3 { margin: 13px 0 13px; font-size: 13.2px; } #inhaltsbereich h4, #inhaltsbereich h5, #inhaltsbereich h6 { margin: 13px 0 13px; font-size: 13.2px; } #inhaltsbereich .frame { margin-bottom: 20px; } #inhaltsbereich .frame:last-child { margin-bottom: 0; } #inhaltsbereich .ce-gallery figure { margin-bottom: 0; } #inhaltsbereich figcaption { padding-top: 4px; font-size: 12px; } #inhaltsbereich table { width: 100%; border-collapse: collapse; } #inhaltsbereich th, #inhaltsbereich td { padding: 5px 8px; border: 1px solid var(--streif-beige); vertical-align: top; } #inhaltsbereich th { background: var(--streif-beige); color: var(--streif-braun); } /* Spalten-Container: Abstand wie im Original (20 px) */ .streif-spalten { --bs-gutter-x: 20px; --bs-gutter-y: 20px; } /* RTE-Stile (CKEditor-Preset streif_template) */ .text-justify { text-align: justify; } .lead { font-size: 15.84px; font-weight: normal; } .text-streif { color: var(--streif-braun); } #inhaltsbereich .small { font-size: 11px; } .marker-yellow { background-color: #fdfd77; } .marker-green { background-color: #62f962; } .pen-red { background-color: transparent; color: #e71313; } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ #footer { padding: 7px 0; background: var(--streif-beige); color: var(--streif-braun); border-top: 2px solid var(--streif-braun); text-align: right; } #footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 6px; } #footer a, #footer a:visited { margin: 0; padding: 0 10px; color: var(--streif-braun); font-size: 14.4px; font-weight: normal; } /* --------------------------------------------------------------------- Kleine Bildschirme --------------------------------------------------------------------- */ @media (max-width: 575.98px) { #titel, #inhaltsbereich { padding-left: 15px; padding-right: 15px; } /* Text-Bild-Elemente: Bild über dem Text statt daneben */ #inhaltsbereich .ce-intext.ce-left .ce-gallery, #inhaltsbereich .ce-intext.ce-right .ce-gallery { float: none; margin-left: 0; margin-right: 0; } #inhaltsbereich .ce-gallery, #inhaltsbereich .ce-gallery .ce-outer, #inhaltsbereich .ce-gallery .ce-inner, #inhaltsbereich .ce-gallery .ce-column { float: none; max-width: 100%; width: auto; left: auto; right: auto; } #footer nav { justify-content: center; } } /* --------------------------------------------------------------------- Druck --------------------------------------------------------------------- */ @media print { body { background: none; padding: 0; } #mainwrap { margin: 0; border: 0; max-width: none; } .navi, #footer, .skiplinks { display: none; } }