/* ============================================================ * Pagetal CMS – Frontend-Stylesheet (öffentliche Website) * ------------------------------------------------------------ * Enthält die Design-Regeln für die öffentlich sichtbaren Seiten * (Startseite, einfache Seiten) – 1:1 aus dem abgenommenen * HTML/CSS-Mockup übernommen (Farbpalette, Schriftart, Header/ * Footer-Aufbau, Buttons). Bewusst getrennt vom Backend-Stylesheet * (assets/css/style.css), da beide Bereiche unterschiedliche * Zielgruppen und ein unterschiedliches Erscheinungsbild haben. * Der vollständige Block-Page-Builder folgt in einer späteren * Ausbaustufe; dies ist das schlanke Fundament für "einfache Seiten". * ============================================================ */ /* ---------- Farbpalette: 1:1 aus bestehender smart-farm.ch Website ---------- */ :root{ --gruen: #1EAA67; --gruen-dunkel: #219300; --navy: #061529; --weiss: #FFFFFF; --hellgrau-1: #F3F3F3; --hellgrau-2: #F1F1F1; --grau-text: #494949; --rot-akzent: #CC092A; --schatten: 0 10px 30px rgba(6,21,41,.08); --radius: 14px; /* Werden von Design → Farben & Fonts bzw. Design → Layout live überschrieben (siehe includes/design.php); Werte hier sind exakt die ursprünglichen, bereits abgenommenen Standardwerte. */ --schrift-familie: 'Poppins', sans-serif; --container-breite: 1180px; --container-innenabstand: 24px; } /* ---------- Grundgerüst ---------- */ *{margin:0;padding:0;box-sizing:border-box;} /* Ab v1.19.81 ERGÄNZT (Stephans Bug-Report: "wenn ich slider auf volle breite stelle erhalte ich einen balken unten zum scrollen"): Ursache ist ein bekannter CSS-Effekt der "volle Breite ausbrechen"-Technik, die alle Bausteine mit Hintergrund-Breite/Inhalt-Breite verwenden (Slider, CTA, Texteditor, Überschrift, Container - siehe z.B. pagetal_pb_slider_block_css() in includes/page-builder.php): dort wird "width:100vw" zusammen mit einem negativen Rand ("margin-left:-50vw") eingesetzt, um den Hintergrund exakt bis an den Browserrand zu ziehen. "100vw" zählt dabei technisch bedingt IMMER die volle Fensterbreite MITSAMT einer eventuell vorhandenen senkrechten Bildlaufleiste (Scrollbar) mit, während die tatsächlich sichtbare Seitenbreite (ohne Scrollbar) meist ein paar Pixel schmäler ist - der ausgebrochene Hintergrund wird dadurch um genau diese Differenz zu breit und erzeugt seinerseits eine zusätzliche, unerwünschte waagrechte Bildlaufleiste am unteren Rand. "overflow-x:hidden" auf kappt nur genau diesen technischen, unsichtbaren Überstand (wenige Pixel ausserhalb des Bildschirms) - am sichtbaren Layout/Design ändert sich dadurch nichts, betroffen ist ausschliesslich diese eine Fehlerquelle. */ html{scroll-behavior:smooth;overflow-x:hidden;} body{ font-family:var(--schrift-familie); color:var(--navy); background:var(--weiss); line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{text-decoration:none;color:inherit;} ul{list-style:none;} .container{max-width:var(--container-breite);margin:0 auto;padding:0 var(--container-innenabstand);} section{padding:90px 0;} h1,h2,h3,h4{font-weight:700;line-height:1.2;color:var(--navy);} h2.section-title{font-size:2.1rem;margin-bottom:14px;} p.section-lead{color:var(--grau-text);max-width:620px;margin-bottom:44px;font-size:1.02rem;} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--gruen-dunkel);background:rgba(30,170,103,.1); padding:6px 14px;border-radius:30px;margin-bottom:18px; } .btn{ display:inline-flex;align-items:center;gap:8px; padding:14px 28px;border-radius:30px;font-weight:600;font-size:.98rem; border:2px solid transparent;cursor:pointer;transition:.2s ease;white-space:nowrap; } .btn-primary{background:var(--gruen);color:var(--weiss);border-color:var(--gruen);} .btn-primary:hover{background:var(--weiss);color:var(--gruen-dunkel);border-color:var(--gruen);} .btn-outline{background:transparent;color:var(--navy);border-color:var(--navy);} .btn-outline:hover{background:var(--navy);color:var(--weiss);} /* ---------- Hauptnavigation ---------- */ header.main-nav{ position:sticky;top:0;z-index:500;background:var(--weiss); box-shadow:0 2px 18px rgba(6,21,41,.06); } /* Nur vertikales Padding setzen (nicht die Kurzform "padding:14px 0"), da .nav-inner zusammen mit .container auf demselben Element sitzt (
) – die Kurzform würde sonst das horizontale Padding von .container (--container-innenabstand, aus Design → Layout) auf 0 zurücksetzen und die Kopfzeile liesse sich dadurch nicht mehr dynamisch mit der Seitenbreite ausrichten. */ .nav-inner{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;gap:24px;} .logo{display:flex;align-items:center;gap:10px;flex:none;} .logo img{height:32px;width:auto;} nav.primary{display:flex;align-items:center;gap:30px;flex-wrap:wrap;} nav.primary a{font-weight:600;font-size:.92rem;color:var(--navy);} nav.primary a:hover{color:var(--gruen-dunkel);} .nav-cta{display:flex;align-items:center;gap:14px;flex:none;} /* Der @media-Umbruch für .nav-inner/nav.primary wird nicht mehr hier fest codiert, sondern dynamisch aus dem konfigurierten Tablet-Breakpoint erzeugt (siehe includes/design.php, pagetal_design_responsive_css() – eingebunden über pagetal_design_kopf_ausgeben()). */ /* ---------- Seitenkopf (Titel-Band für einfache Seiten) ---------- */ .seiten-hero{background:var(--hellgrau-1);padding:60px 0;} .seiten-hero h1{font-size:2.3rem;} .breadcrumb{font-size:.82rem;color:var(--grau-text);margin-bottom:14px;} .breadcrumb a{color:var(--gruen-dunkel);font-weight:600;} /* Ab v1.17.45 (Stephans Bug-Report: der Abstand oben zum Text war ungleich dem Abstand unten zum Text, sobald "Reihenfolge" im Kopf-Bereich auf "Titel zuerst" stand): ".pb-kopf-bereich-innen" (der gemeinsame Container von Titel- und Permalink-Bereich, siehe pagetal_pb_hero_html()) wird eine echte Flex-Spalte mit festem Zwischenraum ("gap") - dieser Zwischenraum wirkt IMMER nur ZWISCHEN den beiden Bereichen, nie an den äusseren Rändern, unabhängig von der Reihenfolge. Das alte ".breadcrumb{margin-bottom:14px}" (oben) wirkte dagegen als Rand DES Elements selbst und erzeugte dadurch einen zusätzlichen äusseren Abstand, sobald die Breadcrumb-Zeile (statt wie bisher immer oben) durch die neue Reihenfolge-Einstellung ans untere Ende rutschte - deshalb hier gezielt auf 0 zurückgesetzt (der optische Zwischenraum kommt jetzt ausschliesslich vom "gap" oben). */ .pb-kopf-bereich-innen{display:flex;flex-direction:column;gap:14px;} .pb-kopf-bereich-innen .breadcrumb{margin-bottom:0;} /* Ab v1.17.56 (Stephans Bug-Report: bei manueller Höhe ist der Breadcrumb-Baustein nicht vertikal zentriert - Abstand oben ≠ Abstand unten, besonders auffällig bei einer kleinen Höhe wie 1px): exakt derselbe Fehlertyp wie oben bei v1.17.45 bereits einmal behoben - nur für die INNERE Klasse des seit v1.17.46 eigenständigen Breadcrumb- BAUSTEINS (".pb-hero-permalink-bereich-innen", siehe pagetal_pb_breadcrumb_rendern() in includes/page-builder.php) war diese Korrektur nie nachgezogen worden - dort galt weiterhin das ungeschützte ".breadcrumb{margin-bottom:14px}" von oben. Bei manueller Höhe wird der äussere Baustein-Wrapper zu "display:flex;flex-direction:column" (siehe pagetal_pb_hero_baustein_css()) - das innere Div (".pb-hero-permalink- bereich-innen") wird dadurch zum Flex-Item und bildet einen neuen Formatierungskontext für seinen Inhalt: der 14px-Rand des

darin "kollabiert" seitdem NICHT mehr nach aussen (wie er es im normalen Blockfluss tun würde), sondern bleibt als zusätzlicher, sichtbarer Leerraum UNTER dem Text stehen - 0px Abstand oben, aber 14px+ Abstand unten. Der Seitentitel-Baustein war davon nie betroffen (sein

hat keine vergleichbare eigene margin-bottom- Regel) - das erklärt, warum dort alles korrekt aussah. */ .pb-hero-permalink-bereich-innen .breadcrumb{margin-bottom:0;} /* ---------- Seiteninhalt (einfache Seiten – Platzhaltertext) ---------- Nutzt bewusst dieselbe Breite (--container-breite) wie Header und Footer, statt eines eigenen fixen Werts – die Design → Layout Einstellung "Seitenbreite" wirkt damit einheitlich auf die gesamte öffentliche Website. */ .seiten-inhalt{padding:70px 0;} .seiten-inhalt p{color:var(--grau-text);font-size:1.02rem;margin-bottom:20px;white-space:pre-line;} /* ---------- Sammlungstypen-Archiv: Layout-Einstellungen (ab v1.17.27) ---------- Spalten/Abstand werden direkt als Inline-Grid-Stil auf ".sammlung-archiv-liste" gesetzt (siehe partials/sammlung-archiv.php, Werte kommen aus dem Seiteneinstellungen-Panel des zugewiesenen Archiv-Templates) - der Kartenschatten ab v1.17.28 ebenfalls inline (volles Box-Schatten-Control statt der früheren 3 Presets, siehe $archivKartenStil in partials/sammlung-archiv.php) - hier nur noch der Erschein-Effekt beim Scrollen, der eine Start-/Ziel-Transition braucht (siehe assets/js/sammlung-archiv-effekte.js für das Umschalten der ".ist-sichtbar"-Klasse per IntersectionObserver). */ .sammlung-archiv-eintrag-vorlage-effekt-einblenden, .sammlung-archiv-eintrag-vorlage-effekt-von-oben, .sammlung-archiv-eintrag-vorlage-effekt-von-unten, .sammlung-archiv-eintrag-vorlage-effekt-von-links, .sammlung-archiv-eintrag-vorlage-effekt-von-rechts, .sammlung-archiv-eintrag-vorlage-effekt-zoom-ein, .sammlung-archiv-eintrag-vorlage-effekt-zoom-aus, .sammlung-archiv-eintrag-vorlage-effekt-drehen{ opacity:0;transition:opacity .6s ease, transform .6s ease; } .sammlung-archiv-eintrag-vorlage-effekt-von-oben{transform:translateY(-28px);} .sammlung-archiv-eintrag-vorlage-effekt-von-unten{transform:translateY(28px);} .sammlung-archiv-eintrag-vorlage-effekt-von-links{transform:translateX(-32px);} .sammlung-archiv-eintrag-vorlage-effekt-von-rechts{transform:translateX(32px);} /* Ab v1.17.28: zusätzliche Erschein-Effekte (Stephan: "mehr Auswahl bitte, lass dir hier noch was einfallen") - Zoom (rein/raus) und ein leichtes Eindrehen, dieselbe Opacity-/Transform-Transition wie oben. */ .sammlung-archiv-eintrag-vorlage-effekt-zoom-ein{transform:scale(.85);} .sammlung-archiv-eintrag-vorlage-effekt-zoom-aus{transform:scale(1.15);} .sammlung-archiv-eintrag-vorlage-effekt-drehen{transform:rotate(-6deg) scale(.95);} .sammlung-archiv-eintrag-vorlage-effekt-einblenden.ist-sichtbar, .sammlung-archiv-eintrag-vorlage-effekt-von-oben.ist-sichtbar, .sammlung-archiv-eintrag-vorlage-effekt-von-unten.ist-sichtbar, .sammlung-archiv-eintrag-vorlage-effekt-von-links.ist-sichtbar, .sammlung-archiv-eintrag-vorlage-effekt-von-rechts.ist-sichtbar, .sammlung-archiv-eintrag-vorlage-effekt-zoom-ein.ist-sichtbar, .sammlung-archiv-eintrag-vorlage-effekt-zoom-aus.ist-sichtbar, .sammlung-archiv-eintrag-vorlage-effekt-drehen.ist-sichtbar{ opacity:1;transform:none; } /* ---------- Fehlerseite (404 / Wartung) ---------- */ .fehler-seite{padding:110px 0;text-align:center;} .fehler-seite h1{font-size:2.6rem;margin-bottom:14px;} .fehler-seite p{color:var(--grau-text);max-width:480px;margin:0 auto 30px;} /* ---------- Footer ---------- */ /* Ab v1.19.23 (Stephans Bug-Report: "der footer hat abstände bereits voreingestellt ... oben 70px und unten 24px voreingestellt") - dieser Selektor war ursprünglich ausschliesslich für den alten, fest codierten Fallback-Footer gedacht (siehe partials/fuss.php, Modus "fallback": ein einfaches