/* ========================================================================== 0. Prinzipielle Hinweise ========================================================================== 1. LOGO links neben Titel ein/aus im Template via body data-logo 2. Slider anstelle HERO-Bild am Seitenanfang Benutzerelement [hero_mode|none] am Anfang der Inhaltsseite ========================================================================== */ /* ========================================================================== 1. Reset & Grundlegende Einstellungen (Mobile First) ========================================================================== */ *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; overflow-y: scroll; /* wenn gewünscht */ scroll-behavior: smooth; /* optional, kosmetisch */ } @font-face{ font-family: "UnifrakturMaguntia"; src: url("fonts/UnifrakturMaguntia.woff2") format("woff2"), url("fonts/UnifrakturMaguntia.woff") format("woff"), url("fonts/UnifrakturMaguntia.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: "UnifrakturMaguntia"; src: url("fonts/UnifrakturMaguntia.woff2") format("woff2"), url("fonts/UnifrakturMaguntia.woff") format("woff"), url("fonts/UnifrakturMaguntia.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } .head-maler { font-size: 1.2rem; } .head-richter { font-family: Georgia, "Times New Roman", Times, "Noto Serif", "Droid Serif", serif; font-style: italic; font-size: 2.4rem; } .slogan-modern { font-size: 1.65rem; font-weight: 400; /* wichtig: explizit, kein Fake-Bold */ font-style: normal; line-height: 1.15; } .slogan-historisch{ font-family: "UnifrakturMaguntia", "UnifrakturCook", "Old English Text MT", serif !important; font-size: 1.95rem; /* passt zu deinem bisherigen Setup */ font-weight: 400; /* wichtig: explizit, kein Fake-Bold */ font-style: normal; line-height: 1.15; letter-spacing: .03em; /* dezente Wirkung, optional */ } /* ========================================================================== 2. Design Tokens (CSS Custom Properties) ========================================================================== */ :root{ --clr-primary-h: 174; --clr-primary-s: 80%; --clr-primary-l: 35%; --clr-primary: hsl(var(--clr-primary-h) var(--clr-primary-s) var(--clr-primary-l)); --clr-accent: hsl(var(--clr-primary-h) calc(var(--clr-primary-s) - 25%) calc(var(--clr-primary-l) + 25%)); --clr-bg:#fff; --clr-text:#222; --clr-muted:#6b7280; /* Typographie */ --ff-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ff-heading: "Segoe UI Semibold", "Helvetica Neue", Arial, sans-serif; --fs-base: 16px; --lh-base: 1.25; --radius: .5rem; --shadow: 0 4px 10px rgba(0,0,0,.12); --container-w: min(90rem, 92%); /* ===== Einfache Steuerung für Hero & Parallax ===== */ /* Mobile first */ --hero-ref-width: 1500px; /* 100% Breite für Hero-Bild */ --hero-min: 250px; /* Default (Desktop) */ --hero-zoom-min: 100%; /* Zoom-Limits */ --hero-zoom-max: 112%; --parallax-min: 100px; /* Höhe für .parallax auf kleinen Screens */ /* Header und LOGO */ --sitename-lh: 1.4; /* line-height der Überschrift */ --sitename-lines-max: 3; /* max. 2 Textzeilen */ --header-bg: #a78557; /* Standard */ --header-fg: var(--clr-text); --nav-bg: var(--clr-primary); --branding-h: clamp(86px, 14vw, 140px); --branding-pad-y: 6px; /* „ein paar Pixel“ Luft */ /* Logo darf etwas kleiner sein als Branding (Padding + optische Luft) */ --logo-max-h: calc(var(--branding-h) - (2 * var(--branding-pad-y))); } /* ========================================================================== 3. Kategorie-abhängige Farbwelten (Root-Overrides) ========================================================================== */ /* Home (optional, entspricht Default) */ /* rot dunkel 354 76% 25% */ /* rot grell 0 100% 50% glae */ /* blau 201 55% 44% */ :root:has(body[data-category="Home"]) { --clr-primary-h: 353; --clr-primary-s: 100%; --clr-primary-l: 48%; } /* Angebote (Violett, gedeckt) */ :root:has(body[data-category="Galerien"]) { --clr-primary-h: 230; --clr-primary-s: 82%; --clr-primary-l: 51%; } /* Referenzen (Blau) */ :root:has(body[data-category="Kontakt"]) { --clr-primary-h: 42; --clr-primary-s: 100%; --clr-primary-l: 50%; } /* ========================================================================== 4. Grundlayout & Typografie ========================================================================== */ body{ background: var(--clr-bg); color: var(--clr-text); min-height: 100vh; font-family: var(--ff-base); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; } /* Links */ a{ color: var(--clr-primary); transition: color .2s ease, background-color .2s ease, opacity .2s ease; margin: 5px; } a:hover{ color: var(--clr-accent); text-decoration: underline; } a:focus-visible{ outline: 2px solid var(--clr-accent); outline-offset: 2px; } /* Fließtext */ p { line-height: 1.61em; font-weight: 300; font-size: 1em; color: var(--clr-text); margin-bottom: 1.2em; text-wrap: pretty; /* moderne, schönere Umbrüche */ hyphens: auto; } iframe { border: 0; } article, aside, figure, footer, header, hgroup, section { display: block; } span { font-style: inherit; font-weight: inherit; } fieldset { border: none; } .noborder { border: none; } /* Überschriften */ h1, h2, h3 { font-family: var(--ff-heading); font-weight: 600; /* kräftiger, aber nicht fett */ line-height: 1.3; margin: 1.2em 0 .6em; /* oberer Abstand > unterer Abstand */ } h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); line-height: 1.15; margin-bottom: 1.25em; } h2 { font-size: clamp(1.5rem, 2.5vw + .75rem, 2.25rem); margin-bottom: 1em; color: var(--clr-primary); } h3 { font-size: clamp(1.2rem, 2vw + .5rem, 1.5rem); margin-bottom: .75em; line-height: 1.4em; color: #333; } /* ========================================================================== 5. Header, Branding & Logo ========================================================================== */ .header{ padding: .5rem 0; background: var(--header-bg); color: var(--header-fg); } /* Logo-Grundzustand (aus, wenn data-logo="off") */ .site-logo{ display: none; width: auto; height: auto; } body[data-logo="on"] img.site-logo{ display: block; height: auto !important; width: auto; max-height: calc(var(--branding-h) - (2 * var(--branding-pad-y))); object-fit: contain; } /* Link um das Logo: füllt die Branding-Höhe */ .logo-link{ display: flex; align-items: center; flex: 0 0 auto; } .logo-link:hover { opacity: 0.75; } /* Branding-Container (Logo + Sitename) */ .header .branding{ display: flex; align-items: center; justify-content: center; gap: clamp(.75rem, 2vw, 1.5rem); min-height: var(--branding-h); height: auto; /* wichtig: nicht fix */ padding-block: var(--branding-pad-y); } /* Sitename – volle Breite zwischen Logo und max. zweizeilig */ #sitename { flex: 0 1 auto; font-weight: 600; letter-spacing: .02em; text-wrap: balance; hyphens: none; word-break: normal; overflow-wrap: normal; margin: 0; /* Breite: bewusst begrenzt, aber nicht zu eng */ width: 100%; max-width: 32ch; text-align: left; /* max. 2 Zeilen, Rest wird abgeschnitten */ display: -webkit-box; -webkit-line-clamp: var(--sitename-lines-max); /* = 2 */ -webkit-box-orient: vertical; overflow: hidden; } /* ========================================================================== 6. Layout Utilities ========================================================================== */ .wrapper{ width: var(--container-w); margin-inline: auto; } .section{ padding: var(--section-pad) 0; } .tagline{ color: var(--clr-muted); } /* ========================================================================== 7. Hero & Parallax ========================================================================== */ /* HERO: Bildmodus (Standard) */ .hero { display: grid; place-items: center; text-align: center; position: relative; color: #fff; background-image: var(--bg); background-size: clamp( var(--hero-zoom-min), calc(100% + (100vw - var(--hero-ref-width))/12), var(--hero-zoom-max) ); background-repeat: no-repeat; background-position: center center; min-height: var(--hero-min) !important; } /* dunkelt hero ab; Schrift im Bild grau .hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: -1; } */ /* Abschnitt 1 - Hero-Bereich */ .hero .wrapper { min-height: inherit; /* übernimmt min-height von .hero */ width: var(--container-w); margin-inline: auto; } /* Wenn Hero AUS → ganz ausblenden */ body[data-hero="none"] .hero{ display: none; } /* Parallax Grundverhalten */ .parallax{ min-height: var(--parallax-min); position: relative; color: #fff; background-image: var(--bg); background-size: cover; background-position: center; background-attachment: fixed; isolation: isolate; } /* Variante A: HERO ohne Parallax (Scroll statt Fixed) */ .hero, .hero.parallax { background-attachment: scroll !important; } .parallax::before{ content:""; position: absolute; inset: 0; background: rgba(0,0,0,.45); /* Abdunkeln */ backdrop-filter: blur(3px); /* leichte Unschärfe */ z-index: -1; } /* AUSNAHME: Hero-Bild nicht abdunkeln/unscharf machen */ .hero.parallax::before{ background: transparent; /* oder rgba(0,0,0,0) */ backdrop-filter: none; -webkit-backdrop-filter: none; /* Safari */ } /* Hero (trägt zusätzlich .parallax) */ .hero{ display: grid; place-items: center; text-align: center; } /* Guard: Wenn .hero auch .parallax hat, nimm IMMER die Hero-Höhe */ /* .hero.parallax{ min-height: var(--hero-min); } */ .hero.parallax{ min-height: var(--hero-min) !important; backdrop-filter: none; } /* Typo im Hero */ .hero .heading1{ letter-spacing: .05em; } /* ========================================================================== 8. Navigation (sticky, ohne Untermenüs) ========================================================================== */ .nav.sticky { position: sticky; top: 0; z-index: 1000; background: var(--nav-bg); box-shadow: var(--shadow); } /* ========================================================================== 9. Inhaltsstil, Typografie-Extras & Tabellen ========================================================================== */ /* mozilo Syntax; diese Elemente erzeugt der Editor */ small{ font-size: .875rem; color: var(--clr-muted); } /* hr bleibt hier, .horizontalrule ist in moz-style.css */ hr{ border: none; border-top: .111em #444 solid; max-width: 100%; margin: .75rem 0; } /* Zitate */ blockquote{ margin: 1.2em 0; padding: .75em 1em; border-left: 4px solid var(--clr-primary); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); color: #555; font-style: italic; } /* ========================================================================== 10. Content-Bereich & Footer ========================================================================== */ .main { background: #f8f9fa; /* leichtes Grau statt reines Weiß */ color: #222; /* satte Textfarbe */ } /* Headings im Content */ .main h2 { color: var(--clr-primary); /* Primärfarbe → Bezug zum Header */ } .main h3 { color: #333; /* neutral dunkler, kein Bunt-Overload */ } /* Ausnahme: Überschriften in .parallax-Abschnitten → immer weiß */ .section.parallax h2, .section.parallax h3 { color: #fff; } /* Abschnitt normal ohne Parallax-Hintergrund */ .section:not(.parallax) .wrapper{ background: #fff; /* weiße Fläche für Content */ box-shadow: 0 2px 6px rgba(0,0,0,.06); /* dezenter Schatten */ padding: 2rem; } /* Footer */ .footer p { background-color: #555; color: #fff; text-align: center; padding: 1.5rem 1rem; } .footer a, .footer a:hover { color: #fff; font-weight: 500; text-decoration: underline; padding: .3rem; } .footer a:hover { font-weight: 700; } /* ========================================================================== 11. Status / Fehler / Includes ========================================================================== */ /* Wenn ein Include fehlschlägt, ist im Slot eine .deadlink vorhanden. -> komplette Section ausblenden (nur innerhalb der extra-sections). */ .extra-sections > section:has(.include-slot .deadlink) { display: none; } /* Falls du auch außerhalb von .extra-sections Include-Slots nutzt: */ .section:has(.include-slot .deadlink) { display: none; } /* Optional: wenn ein Include GAR NICHTS liefert (Slot wirklich leer) */ .include-slot:empty { display: none; } .section:has(.include-slot:empty) { display: none; } /* Prod: Fehltexte ausblenden, aber NUR die Meldung – nicht die Section */ body[data-dev="off"] .deadlink{ display:none !important; } /* Steuerung Elemente mit spezifischen Klassen */ .content-grid.dunkel { background-color: #bbb; } /* Headings im Inhaltsbereich starten immer unter Floats */ :where(.content, .contenttext, main, article) :is(h1,h2,h3,h4,h5,h6), :where(.heading1, .heading2, .heading3, .heading4, .heading5, .heading6) { clear: both; } /* Ausnahmen: Komponenten-Header sollen NICHT clearn */ .content-box > h3, .card-header, .card-footer { clear: none; } /* Bild img mit Overlay-Text versehen; Hinweis auf klickbarkeit -abesonders mobil */ .image-link { position: relative; display: inline-block; } .image-link img { display: block; } /* Dezenter Bild-Hinweis */ .image-link__overlay { position: absolute; bottom: 8px; left: 8px; padding: 4px 8px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); color: #ffffff; font-size: 0.75rem; line-height: 1.1; font-weight: 400; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); pointer-events: none; white-space: nowrap; } .image-link:hover .image-link__overlay { background: rgba(0, 0, 0, 0.7); } /* ========================================================================== 12. Media Queries (Mobile First) -------------------------------------------------------------------------- Breakpoints: - max-width: 350px, 420px, 675px, 48rem (~768px) - min-width: 600px, 768px, 1024px, 1200px, 1400px ========================================================================== */ /* 12.1 Bewegungs-Reduktion beachten */ @media (prefers-reduced-motion: reduce){ * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* 12.2 Kleinste Bildschirme (<350px) – Menü etwas schrumpfen */ @media (max-width: 350px) { .mainmenu-item a, a.menu, a.menuactive { font-size: .8rem; padding: .35rem .6rem; } } /* 12.4 Logo & Sitename stapeln (mobile) */ @media (max-width: 677px){ /* .header .branding { flex-direction: column; align-items: center; justify-content: center; } */ .logo-link { order: -1; /* Logo über dem Titel */ height: auto; /* hier kein Zwang auf 100% */ } } /* 12.5 Mobile Hero- & Parallax-Verhalten (≤ ~768px) */ @media (max-width: 48rem){ /* Parallax: Effekt auf kleinen Screens ein */ .parallax{ min-height: clamp(220px, 40vw, 360px); } /* Mobile/Tablet zeigen Bild, ggf. anderes Asset */ .parallax[data-mobile="image"]{ background-image: var(--bg-mobile, var(--bg)) !important; background-size: cover; background-position: center; background-repeat: no-repeat; } /* Mobile: Abschnitte können auf einfarbig wechseln .parallax[data-mobile="solid"]{ background-image: none !important; background-color: var(--bg-solid, #1f2937); } */ /* Mobile: Hero kann optional ein eigenes Bild/Focus nutzen */ .hero.parallax:not([data-mobile="solid"]){ background-image: var(--hero-bg-mobile, var(--bg)) !important; background-position: var(--hero-pos-mobile, var(--bg-pos, center)); } .hero, .hero.parallax{ min-height: var(--hero-min) !important; /* z.B. 360px, wenn du magst */ } } /* 12.6 Ab 600px (Tablets hochkant) */ @media (min-width: 600px) { .mainmenu-item a, a.menu, a.menuactive { font-size: 1.2rem; padding: .7rem .9rem; } .mainmenu { padding: .7rem 0; } :root{ --hero-min: 320px; } .head-maler { font-size: 1.25rem; } .head-richter { font-size: 2.5rem; } .slogan-modern { font-size: 2.1rem; } .slogan-historisch { font-size: 2.4rem; } } /* 12.7 Ab 768px (Tablets quer, kleine Laptops hochkant) */ @media (min-width: 768px){ .mainmenu-item a, a.menu, a.menuactive { padding: .9rem .9rem; } .mainmenu { padding: 1rem 0; } .header .branding{ width: 100%; max-width: none; margin-inline: 0; } :root { --parallax-min: 25vh; } :root{ --hero-min: 380px; } .head-maler { font-size: 1.4rem; } .head-richter { font-size: 2.8rem; } .slogan-modern { font-size: 2.7rem; } .slogan-historisch { font-size: 3.1rem; } } /* 12.8 Ab 1024px (große Tablets / kleine Laptops quer) */ @media (min-width: 1024px){ body { font-size: 17px; /* leicht größere Grundschrift */ } .branding{ min-height: clamp(84px, 6vw, 120px); } /* Volle Breite, wenn nur 1 Box */ .content-grid > :only-child { grid-column: 1 / -1; } :root{ --hero-min: 440px; } .head-maler { font-size: 1.6rem; } .head-richter { font-size: 3.2rem; } .slogan-modern { font-size: 3.2rem; } .slogan-historisch { font-size: 3.6rem; } } /* 12.9 Ab 1200px (klassische Desktop-Breite) */ @media (min-width: 1200px){ body { font-size: 18px; } .section { padding: calc(var(--section-pad) * 1.2) 0; } :root{ --hero-min: 500px; } .head-maler { font-size: 1.7rem; } .head-richter { font-size: 3.4rem; } .slogan-modern { font-size: 3.9rem; } .slogan-historisch { font-size: 4.5rem; } :root {--parallax-min: 40vh;} } /* 12.10 Ab 1400px (große Monitore) */ @media (min-width: 1400px){ body { font-size: 19px; } :root{ --hero-min: 560px; } .head-maler {font-size: 1.8rem;} .head-richter {font-size: 3.6rem;} .slogan-modern { font-size: 5rem; } .slogan-historisch { font-size: 5.5rem; } }