/* ============================================================ Ersetzt die -Runtime (Layout + Bilder + Mobil-Nav), damit die Seite ohne die -Skripte funktioniert. ============================================================ */ /* ---------- Summary-Bilder: sichtbar + als Cover-Aspect-Box ---------- */ .sqs-block-summary-v2 .summary-thumbnail{ position:relative !important; height:auto !important; overflow:hidden; } .sqs-block-summary-v2 .summary-thumbnail-image{ opacity:1 !important; position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; object-fit:cover; object-position:center; } /* generische Bilder, die der Loader sonst erst sichtbar macht */ .sqs-gallery img{ opacity:1 !important; } /* ---------- LIST-Layout (Projekte, Blog): Thumb links 35 %, Text rechts ---------- */ .sqs-gallery-design-list .sqs-gallery-design-list-slide{ overflow:hidden; margin-bottom:2.2em !important; padding-bottom:0 !important; } .summary-block-setting-design-list .summary-item{ display:block; } .summary-block-setting-design-list .summary-thumbnail-outer-container{ float:left; width:35%; } .summary-block-setting-design-list .summary-content{ float:left; width:62%; padding-left:3%; box-sizing:border-box; } .summary-block-setting-design-list .summary-thumbnail{ padding-bottom:66.6667%; } .sqs-gallery-design-list .sqs-gallery-design-list-slide::after{ content:""; display:block; clear:both; } /* ---------- AUTOGRID-Layout (Startseite: Projekte) : 3 Spalten ---------- */ .sqs-gallery-design-autogrid .summary-item-list, .summary-block-setting-design-autogrid .summary-item-list{ display:flex !important; flex-wrap:wrap; margin-left:-1.5%; margin-right:-1.5%; } .sqs-gallery-design-autogrid .sqs-gallery-design-autogrid-slide, .summary-block-setting-design-autogrid .summary-item{ position:relative !important; float:none !important; width:33.3333% !important; padding:0 1.5% 1.5em !important; box-sizing:border-box !important; left:auto !important; top:auto !important; } .sqs-gallery-design-autogrid .summary-thumbnail{ padding-bottom:56.25%; } /* ---------- Mobil-Navigation (eigenes Overlay, ohne -JS) ---------- */ /* Overlay-Container wird per site.js an gehängt; hier nur Styling. */ #custom-mobile-nav{ position:fixed; inset:0; background:#1c1c1c; z-index:2000; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0.4em; padding:5em 1.5em 2em; margin:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; } body.mobile-nav-open #custom-mobile-nav{ opacity:1; visibility:visible; pointer-events:auto; } #custom-mobile-nav nav{ width:100%; } #custom-mobile-nav a{ color:#fff !important; text-decoration:none; display:block; text-align:center; padding:.35em; font-family:futura-pt,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:1.5em; letter-spacing:.02em; } #custom-mobile-nav .folder-toggle-link{ font-weight:600; } #custom-mobile-nav .subnav{ display:block; margin-bottom:.5em; } #custom-mobile-nav .subnav a{ font-size:1.05em; opacity:.75; } /* Desktop: Overlay + Burger nie sichtbar */ @media (min-width: 768px){ #custom-mobile-nav{ display:none !important; } .mobile-nav-toggle{ display:none !important; } } @media (max-width: 767px){ #headerNav{ display:none !important; } .mobile-nav-toggle:not(.fixed-nav-toggle){ display:block !important; } body.mobile-nav-open{ overflow:hidden; } body.mobile-nav-open .mobile-nav-toggle:not(.fixed-nav-toggle){ z-index:2001 !important; } } /* ---------- Collection-Link-Thumbnails (z. B. Methoden auf der Startseite) ---------- */ /* Ohne Squarespace-JS liegen die Bilder in Naturgröße in einer 150px-Box und werden nur angeschnitten. Hier ins Cover-Format skalieren, wie es der Loader täte. */ .collectionlink-thumbnail{ position:relative; } .collectionlink-thumbnail .content-fill{ position:absolute; inset:0; display:block; width:100%; height:100%; } .collectionlink-thumbnail img{ position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; } /* ============================================================ Design-Verfeinerungen (2026) ============================================================ */ :root{ --accent:#12646D; --accent-dark:#0C4A52; } /* Petrol */ /* --- Akzentfarbe: Petrol statt Squarespace-Blau --- */ .sqs-html-content a, .sqs-html-content a:visited, .summary-read-more-link, .summary-read-more-link a, a.summary-read-more-link, .blog-more-link, .item-pagination a, .mailto-contact-block a{ color:var(--accent) !important; } .sqs-html-content a:hover, .summary-read-more-link:hover, .blog-more-link:hover, .mailto-contact-block a:hover{ color:var(--accent-dark) !important; } /* Zitat-Block (Testimonial) */ .sqs-block-quote blockquote, .sqs-block-quote blockquote span{ color:var(--accent) !important; } /* Blog-Datum / Meta */ .entry-dateline, .entry-date, time.entry-date, .blog-meta-item, .summary-metadata-item--date{ color:var(--accent) !important; } /* --- Lesbare Textbreite auf Inhaltsseiten --- */ /* Grids nutzen .summary-* / .collectionlink-* – bleiben unberührt. */ .sqs-html-content{ max-width:760px; margin-left:auto; margin-right:auto; } /* --- Einheitliches Thumbnail-Format (Methoden wie Projekte, 16:9) --- */ .collectionlink-thumbnail{ height:auto !important; padding-bottom:56.25%; position:relative; overflow:hidden; } /* --- Dezente Interaktions-Details --- */ a{ transition:color .15s ease; } a:focus-visible, button:focus-visible, .mobile-nav-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } .summary-thumbnail-image, .collectionlink-thumbnail img{ transition:opacity .25s ease; } .summary-item a:hover .summary-thumbnail-image, .collectionlink-block a:hover img{ opacity:.86; } /* Squarespace-Buttons (z. B. Buch-/eBook-Seite) auf Petrol */ .sqs-block-button-element{ color:var(--accent) !important; border-color:var(--accent) !important; transition:background-color .15s ease, color .15s ease; } .sqs-block-button-element:hover{ color:#fff !important; background-color:var(--accent) !important; border-color:var(--accent) !important; }