/* ========================================================================== Objekt-Einzelseite (single-sarasin_objekt.php) V1 (Sammlung/Voting): fixes Layout — Medium, Titel, Beschreibung, Credits. .objekt-title doppelt bewusst die Regel des objekt-hero-Blocks (blocks/objekt-hero/style.css), damit das V1-Template unabhaengig vom Block-CSS funktioniert. Ab «Abgeschlossen» stylen die Block-CSS den Aufbau (Hero vollbreit); hier bleiben dann nur Schliessen-× und «Weitere Objekte» wirksam. ========================================================================== */ /* V1 ohne Hero: das Originalmedium steht in seinen Proportionen (kein Zuschnitt) oben, max. 1080px breit, mit Abstand zum Viewport-Rand — unter den fixen Bedienelementen (Wappen 24+76px). theme.js objektControls findet kein .objekt-hero und laesst Burger/× schwarz. */ .objekt-v1-medium { max-width:calc(1080px + 2 * var(--pad-x)); margin:0 auto; padding:150px var(--pad-x) 0; } .objekt-v1-medium img, .objekt-v1-medium video { display:block; width:100%; /* --objekt-w = Originalbreite (Template): kleinere Uploads werden nicht hochskaliert, sondern in Originalgroesse zentriert */ max-width:var(--objekt-w, 100%); height:auto; margin:0 auto; } .objekt-title { font-size:var(--fs-image-title); line-height:var(--lh-serif); text-align:center; max-width:1000px; margin:0 auto; padding:85px var(--pad-x) 0; } .objekt-section { margin-top:var(--section-gap); } .objekt-v1-text { max-width:950px; font-size:var(--fs-body-l); line-height:var(--lh-body); } .objekt-v1-text p { margin-bottom:1.2em; } .objekt-v1-text p:last-child { margin-bottom:0; } .objekt-v1-credits { max-width:950px; margin-top:24px; font-size:var(--fs-small); opacity:.6; } /* Auf Objektseiten gibt es keinen Burger — das × steht an seinem Platz */ .single-sarasin_objekt #burger { display:none; } .objekt-close { position:fixed; top:33px; right:var(--pad-x); width:44px; height:44px; display:block; color:var(--c-black); z-index:150; transition:var(--trans); } .objekt-close svg { width:100%; height:100%; } .objekt-close:hover { transform:rotate(90deg); } .objekt-more { margin-top:var(--section-gap); margin-bottom:calc(var(--section-gap) * 2); text-align:center; } @media only screen and (max-width:767px) { /* Mobil: Medium beginnt buendig am oberen Rand, randlos */ .objekt-v1-medium { padding:0; } .objekt-title { padding-top:40px; } .objekt-close { top:26px; right:var(--pad-x); width:34px; height:34px; } } /* Reveal beim Seitenaufbau: Medium, Titel und Textsektion faden gestaffelt ein, sobald der Wipe freigibt (wipe-done wie beim Kopfbereich-Titel). Ohne JS (kein has-fluid) alles sofort sichtbar. */ .has-fluid .objekt-hero, .has-fluid .objekt-v1-medium, .has-fluid .objekt-section { opacity:0; transform:translateY(28px); } .has-fluid.wipe-done .objekt-hero, .has-fluid.wipe-done .objekt-v1-medium, .has-fluid.wipe-done .objekt-section { opacity:1; transform:none; transition:opacity .9s ease, transform .9s ease; } .has-fluid.wipe-done .objekt-section { transition-delay:.3s; } /* Der Titel laeuft ueber den Buchstaben-Reveal (theme.js headingReveal) */ /* ========================================================================== Bedienelemente ueber dem Medium: theme.js misst die Helligkeit des Mediums hinter Wappen, Burger und × und setzt Klassen auf . - objekt-ctl-light-right : Burger + × weiss (dunkles Medium rechts oben) - objekt-ctl-circle : Burger + × auf Glas-Kreis mit weisser Umrandung (Videos immer, Mischmotive) Das Wappen bleibt IMMER schwarz (kein Kreis, kein Farbwechsel). Sobald das Medium unter den Elementen weggescrollt ist, fallen alle Klassen (schwarz auf weiss). ========================================================================== */ #burger span, .objekt-close svg { transition:background .3s ease, color .3s ease; } html.objekt-ctl-light-right:not(.menu-open) #burger span { background:var(--c-white); } html.objekt-ctl-light-right .objekt-close { color:var(--c-white); } html.objekt-ctl-circle:not(.menu-open) #burger, html.objekt-ctl-circle .objekt-close { color:var(--c-white); } html.objekt-ctl-circle:not(.menu-open) #burger span { background:var(--c-white); } html.objekt-ctl-circle:not(.menu-open) #burger::before, html.objekt-ctl-circle .objekt-close::before { content:''; position:absolute; z-index:-1; border-radius:50%; border:1px solid var(--c-white); background:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); pointer-events:none; } html.objekt-ctl-circle:not(.menu-open) #burger::before { inset:-19px -7px; /* 58×34 Burger → 72px-Kreis */ } html.objekt-ctl-circle .objekt-close::before { inset:-14px; /* 44px × → 72px-Kreis */ } @media only screen and (max-width:767px) { html.objekt-ctl-circle:not(.menu-open) #burger::before { inset:-19px -10px; /* 44×26 → 64px */ } html.objekt-ctl-circle .objekt-close::before { inset:-15px; /* 34px → 64px */ } }