/* ========================================================================== TEMPLATE.CSS – Joomla 6 · Anette Gerard – Büro für Bauplanung Übertragung der J3-Gestaltung (Foundation-basiert) in eigenständiges CSS. ========================================================================== */ /* -------------------------------------------------------------------------- 1. GRUNDLEGENDES / RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Assistant', Arial, sans-serif; color: #222222; line-height: 24px; font-size: 18px; background-color: #ffffff; margin: 0; padding: 0; overflow-x: hidden; /* nötig für full-bleed-Sektionen */ } img { max-width: 100%; height: auto; display: block; } a { color: #3B89D6; text-decoration: none; } a:hover { text-decoration: underline; } ul { padding-left: 1.5em; } ul li { margin-bottom: 4px; } p { margin-bottom: 1em; } hr { border: none; border-top: 1px solid #cccccc; margin: 0.5em 0 1.5em; } /* -------------------------------------------------------------------------- 2. JOOMLA ARTIKEL-METADATEN AUSBLENDEN Joomla rendert automatisch Titel, Kategorie, Autor, Datum und Zugriffszähler um den Beitragsinhalt. Diese werden komplett ausgeblendet. -------------------------------------------------------------------------- */ /* Artikel-Titel (H2 "Startseite" / "Home") */ .page-header, .item-page > .page-header, .com-content-article .page-header, article > header, .contentpaneopen > h2, .blog-item h2.page-header, h2.contentheading, h2.contentHeading { display: none !important; } /* Artikel-Metadaten (Details, Autor, Kategorie, Datum, Zugriffe) */ dl.article-info, .article-info, .article-info-term, dd.createdby, dd.category-name, dd.create, dd.hits, .contentpane .article-info, .item-page .article-info { display: none !important; } /* Kategorie-Überschrift (H2 "Home" von Joomla) */ .categories-list h2, .blog h2.page-header, .leading-0 h2, .item-page h2:first-child:not(.qx-title):not(.section-title h2) { display: none !important; } /* Joomla Icons / Edit-Links im Frontend */ .icons, .icon-pencil-2 { display: none !important; } /* -------------------------------------------------------------------------- 3. TYPOGRAFIE – Überschriften -------------------------------------------------------------------------- */ /* * Silbentrennung: Damit lange deutsche Komposita auf schmalen Screens * nicht über den Rand hinausragen. Voraussetzung: lang="de" am -Tag * (wird von Joomla automatisch gesetzt). hyphens:auto nutzt die * eingebauten Trennwörterbücher des Browsers. * overflow-wrap / word-break greifen als Fallback, falls der Browser * kein Wörterbuch für Deutsch hat. */ h1, h2, h3, h4, h5, h6 { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; word-break: break-word; /* Fallback für ältere WebKit-Versionen */ } /* Fließtext und Listenelemente ebenfalls absichern */ p, li, td, th { overflow-wrap: break-word; } h1 { font-family: 'Exo', serif, Georgia; font-size: 45px; font-weight: 500; color: #3B89D6; line-height: 1.4; margin-top: 0; margin-bottom: 45px; padding-bottom: 0; text-transform: none; } h2 { font-family: 'Exo', Arial, sans-serif; font-size: 35px; font-weight: 500; color: #777777; line-height: 1.4; margin-top: 0; margin-bottom: 45px; padding-top: 0; padding-bottom: 0; } h3 { font-family: 'Exo', Arial, sans-serif; font-size: 26px; font-weight: 300; color: #939393; line-height: 1.3; margin-top: 0; margin-bottom: 30px; padding-top: 0; padding-bottom: 0; } /* -------------------------------------------------------------------------- 4. LAYOUT-GRID (Foundation-Ersatz, flexbox-basiert) -------------------------------------------------------------------------- */ .row { max-width: 75em; /* ≈ 1200px wie Foundation */ margin-left: auto; margin-right: auto; padding-left: 0.9375rem; padding-right: 0.9375rem; } .row::after { content: ''; display: table; clear: both; } .columns { width: 100%; } /* -------------------------------------------------------------------------- 5. QX-SPALTEN-GRID (Quix-Builder-Klassen, 12 Spalten, flexbox) -------------------------------------------------------------------------- */ .qx-row { display: flex; flex-wrap: wrap; margin-left: -0.9375rem; margin-right: -0.9375rem; } .qx-column { padding-left: 0.9375rem; padding-right: 0.9375rem; width: 100%; min-height: 1px; } /* xs (default: alle Spalten 100%) */ .qx-col-xs-12 { width: 100%; } .qx-col-xs-6 { width: 50%; } .qx-col-xs-4 { width: 33.3333%; } .qx-col-xs-3 { width: 25%; } /* sm ≥ 640px */ @media (min-width: 40em) { .qx-col-sm-12 { width: 100%; } .qx-col-sm-6 { width: 50%; } .qx-col-sm-4 { width: 33.3333%; } .qx-col-sm-3 { width: 25%; } } /* md ≥ 1024px */ @media (min-width: 64em) { .qx-col-md-12 { width: 100%; } .qx-col-md-9 { width: 75%; } .qx-col-md-8 { width: 66.6667%; } .qx-col-md-7 { width: 58.3333%; } .qx-col-md-6 { width: 50%; } .qx-col-md-5 { width: 41.6667%; } .qx-col-md-4 { width: 33.3333%; } .qx-col-md-3 { width: 25%; } } /* lg ≥ 1024px (selbe Breakpoints wie md für Foundation-Kompatibilität) */ @media (min-width: 64em) { .qx-col-lg-12 { width: 100%; } .qx-col-lg-9 { width: 75%; } .qx-col-lg-8 { width: 66.6667%; } .qx-col-lg-7 { width: 58.3333%; } .qx-col-lg-6 { width: 50%; } .qx-col-lg-5 { width: 41.6667%; } .qx-col-lg-4 { width: 33.3333%; } .qx-col-lg-3 { width: 25%; } } /* -------------------------------------------------------------------------- 6. HELPER-KLASSEN -------------------------------------------------------------------------- */ .border { border: 1px solid #cccccc; } .info-box { padding: 1em; } /* -------------------------------------------------------------------------- 7. HEADER – nur Logo, zentriert (keine Navigation) -------------------------------------------------------------------------- */ .headerbg { border-bottom: 4px solid #c1c1c1; border-top: 1px solid #de002b; background-color: #ffffff; } /* Zentrierter Logo-Wrapper – funktioniert auf allen Bildschirmbreiten */ .header-logo-wrap { display: flex; justify-content: center; align-items: center; padding: 12px 0.9375rem; } .header-logo-wrap p { margin-bottom: 0; } .header-logo-wrap img, .header-logo-wrap .logo-img { max-width: 260px; /* gleiche Größe wie bisher */ max-height: 80px; width: auto; height: auto; display: block; } /* -------------------------------------------------------------------------- 10. HAUPTINHALT -------------------------------------------------------------------------- */ .inhalt { padding-top: 45px; padding-bottom: 20px; } /* Joomla umschließt Beitragsinhalt in .item-page / article */ .item-page, .com-content-article { display: contents; /* transparent – kein visuelles Wrapping */ } /* -------------------------------------------------------------------------- 11. SEKTIONEN (One-Pager) -------------------------------------------------------------------------- */ .page-section { padding-top: 95px; padding-bottom: 80px; border-top: 3px solid #d8d8d8; /* sichtbarer Trenner zwischen Sektionen */ scroll-margin-top: 10px; } .page-section:first-child { border-top: none; padding-top: 0; } /* Section-Titel-Wrapper */ .section-title { /* kein eigenes Styling – nur struktureller Wrapper */ } /* Roter kurzer Strich unter Überschriften – immer 78px */ .section-divider { display: block; border: none; border-top: 4px solid #e8231d; width: 78px; margin: -25px 0 2.5em 0; padding: 0; } /* Abstand: nach einem Inhaltsblock vor dem nächsten H2-Abschnitt */ .qx-row + .section-title { margin-top: 55px; } /* -------------------------------------------------------------------------- 12. INHALTS-ELEMENTE -------------------------------------------------------------------------- */ /* Bilder */ .qx-element-image { margin-bottom: 1.5em; } .qx-img-responsive { width: 100%; height: auto; } /* Blurb / Telefon-Block */ .qx-media { display: flex; align-items: center; gap: 14px; margin: 1.5em 0 2em; } .qx-media-left { flex: 0 0 auto; } /* Font-Awesome-Icon */ .qx-icon.fa { font-size: 26px; color: #3B89D6; line-height: 1; } .qx-blurb-title { font-family: 'Exo', Arial, sans-serif; font-size: 28px; font-weight: 300; color: #939393; margin: 0; line-height: 1.2; } /* Telefonnummer – Link blau, kein Hover-Underline */ .qx-blurb-title a { color: #3B89D6; text-decoration: none; cursor: default; } .qx-blurb-title a:hover { text-decoration: none; } /* Info-Box (Mitgliedschaft o.ä.) – Wie im Original: mit leicht grauem Hintergrund und Abstand */ .info-box { padding: 1.2em 1.5em; margin: 0.5em 0 1.5em; background-color: #f2f2f2; } /* Lightbox-Link (öffnet Bild in neuem Tab / Vollbild) */ .qx-image--lightbox { display: block; cursor: zoom-in; } /* Karten-Platzhalter */ .karte-placeholder { background: #f5f5f5; border: 1px solid #cccccc; padding: 2em; min-height: 200px; display: flex; flex-direction: column; justify-content: center; color: #555555; } /* -------------------------------------------------------------------------- 13. „VOM ENTWURF…" SEKTION (full-bleed mit Bauplan-Hintergrundbild) -------------------------------------------------------------------------- */ /* * Vollbreit-Technik: Die .start-blurb bricht aus dem Container aus. * Hintergrundbild: /images/bauplan-Gerard-bauplanung.jpg.jpg (Original-Pfad!) * Linke Seite: weißer Semi-Overlay (rgba 55%) wie im Original → aufgehellter Plan * Rechte Textbox: dunkles semi-transparentes Overlay */ .start-blurb { /* full-bleed: aus Container herausbrechen */ width: 100vw; position: relative; left: 50%; transform: translateX(-50%); margin-left: 0 !important; margin-right: 0 !important; margin-top: 2.5em; /* Korrektes Hintergrundbild (1:1 aus Original-Quix-CSS) */ background-image: url('../../../images/bauplan-Gerard-bauplanung.jpg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; /* Mindesthöhe für Bildwirkung */ min-height: 360px; align-items: stretch; flex-wrap: nowrap; } /* Semi-transparenter weißer Overlay über das gesamte Hintergrundbild (wie im Original: background-color: rgba(255,255,255,.55)) */ .start-blurb::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.55); z-index: 0; pointer-events: none; } /* Spalten über dem Overlay */ .start-blurb > .qx-column { position: relative; z-index: 1; } /* linke Spalte: nur Hintergrundbild sichtbar (aufgehellt durch ::before) */ .start-blurb > .qx-column:first-child { padding: 0; min-height: 360px; } /* rechte Spalte: dunkle Box mit weißem Text (Farbe 1:1 aus Quix-Original) */ .start-blurb > .qx-column:last-child { background-color: rgba(114, 114, 114, 0.83); padding: 40px; display: flex; align-items: center; margin: 120px; } .start-blurb > .qx-column:last-child p { color: #ffffff !important; font-family: 'Exo', sans-serif; font-size: 32px; font-weight: 300; line-height: 1.45; margin: 0; } /* -------------------------------------------------------------------------- 14. UNTERSEITEN (Impressum, Datenschutz) -------------------------------------------------------------------------- */ /* * .inhalt-seite umschließt den Beitragsinhalt der Einzelseiten. * H2-Überschriften (Rechtliche Abschnitte, DSGVO-Kapitel) sollen * deutlich kleiner sein als die One-Pager-Abschnittsüberschriften. */ .inhalt-seite { max-width: 860px; /* Lesefreundliche Zeilenbreite */ } .inhalt-seite h2 { font-size: 22px; font-weight: 600; color: #444444; margin-top: 2em; margin-bottom: 0.6em; padding-top: 0; padding-bottom: 0; border-bottom: 1px solid #dddddd; padding-bottom: 4px; } .inhalt-seite h2:first-of-type { margin-top: 1.5em; } .inhalt-seite p, .inhalt-seite li { font-size: 16px; line-height: 1.7; } .inhalt-seite ul { margin-bottom: 1em; } /* Zurück-Link */ .inhalt-seite a[href="/"] { color: #3B89D6; font-size: 15px; text-decoration: none; } .inhalt-seite a[href="/"]:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 15. SEPARATOR -------------------------------------------------------------------------- */ span.separator { visibility: hidden; } /* -------------------------------------------------------------------------- 15. FOOTER -------------------------------------------------------------------------- */ .footer_bg { border-top: 1px solid #666666; margin-top: 75px; background-color: rgba(0, 0, 0, 0.13); } /* Footer-Inhalt: Spalten-Wrapper */ .footer-columns { padding-top: 35px; padding-bottom: 55px; } /* Hintergrund-Logo (grauer Wasserzeichen-Schriftzug rechts) */ .bgbild-logo { background-image: url('../../../images/anette-gerard-logo-grau.png'); background-repeat: no-repeat; background-position: center right 20%; background-size: 30%; } /* Footer-H3-Überschriften */ .footer_bg h3, .footer-columns h3 { font-family: 'Arimo', sans-serif, Arial; font-size: 14px !important; font-weight: 700; color: #333333; line-height: 19px !important; margin-top: 0; margin-bottom: 10px !important; padding-bottom: 3px !important; border-bottom: 1px solid #656565; text-transform: none; } /* Footer-Fließtext */ .footer_bg p, .footer-columns p { color: #333333; font-size: 14px; line-height: 22px; margin-bottom: 25px; } /* Footer-Links */ .footer_bg a, .footer_bg a:link, .footer_bg a:visited, .footer_bg a:hover, .footer-columns a, .footer-columns a:link, .footer-columns a:visited, .footer-columns a:hover { color: #333333 !important; text-decoration: none; font-size: 14px; } /* Copyright-Leiste */ .footerlinksbg { background-color: #a8a8a8; } .made { display: block; text-align: center; padding: 12px 1em; margin: 0; font-size: 12px; line-height: 1.6; } .made, .made a, .made a:link, .made a:visited, .made a:hover { color: #333333 !important; text-decoration: none !important; } /* -------------------------------------------------------------------------- 16. GALERIE / img-list -------------------------------------------------------------------------- */ ul.img-list { list-style-type: none; margin: 0; padding: 0; text-align: center; } ul.img-list li { display: inline-block; margin: 0 1em 1em 0; position: relative; width: 100%; } /* -------------------------------------------------------------------------- 17. MOBILE RESPONSIVE -------------------------------------------------------------------------- */ @media only screen and (max-width: 63.9375em) { /* Auf Tablet/Mobile: full-bleed aufheben, Spalten stapeln */ .start-blurb { width: 100%; left: 0; transform: none; flex-direction: column; min-height: auto; } .start-blurb::before { display: none; /* Overlay auf Mobile nicht nötig */ } .start-blurb > .qx-column:first-child { display: none; /* leere Spalte auf Mobile weglassen */ } .start-blurb > .qx-column:last-child { width: 100%; padding: 2em 1em; margin: 15px; /* 120px aus Basisregel auf Mobile aufheben */ min-height: auto; } .start-blurb > .qx-column:last-child p { font-size: 20px; } } /* -------------------------------------------------------------------------- LIGHTBOX -------------------------------------------------------------------------- */ /* Overlay */ .qx-lightbox-overlay { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.88); align-items: center; justify-content: center; cursor: zoom-out; } .qx-lightbox-overlay.is-open { display: flex; } /* Bild im Overlay */ .qx-lightbox-overlay img { max-width: 92vw; max-height: 90vh; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,0.6); cursor: default; border-radius: 2px; } /* Schließen-Button */ .qx-lightbox-close { position: fixed; top: 18px; right: 22px; font-size: 38px; line-height: 1; color: #ffffff; cursor: pointer; background: none; border: none; padding: 0; z-index: 10000; opacity: 0.85; transition: opacity 0.2s; } .qx-lightbox-close:hover { opacity: 1; } @media only screen and (max-width: 500px) { h1 { font-size: 35px; line-height: 45px; padding-bottom: 10px; margin-bottom: 30px; } h2 { font-size: 30px; line-height: 40px; padding-bottom: 10px; margin-bottom: 30px; } h3 { font-size: 22px !important; line-height: 30px; padding-bottom: 8px; } .header-logo-wrap img, .header-logo-wrap .logo-img { max-width: 200px; } /* Hintergrund-Logo auf Mobilgeräten: kleiner und mittig */ .bgbild-logo { background-size: 55%; background-position: center right 5%; } .section-divider { width: 60px; } } @media only screen and (max-width: 639px) { /* qx-Spalten auf mobile stapeln */ .qx-row:not(.start-blurb) { flex-direction: column; } .qx-row:not(.start-blurb) .qx-column { width: 100% !important; max-width: 100% !important; } .page-section { padding-top: 45px; padding-bottom: 30px; } .inhalt { padding-top: 35px; } /* "Vom Entwurf…"-Kasten: kein seitlicher Rand auf schmalen Screens */ .start-blurb > .qx-column:last-child { margin: 20px; } } /* -------------------------------------------------------------------------- 18. PRINT -------------------------------------------------------------------------- */ @media print { .cd-top { display: none !important; } }