/* * Kastensystem – Layout (CSS-Grid) + animierte Aufklapp-Kacheln. * * Eine Titel-Kachel wächst beim Überfahren als Overlay (Breite + Höhe) über * ihre Nachbarn; die eigentliche Animation läuft in kastensystem.js über die * Web Animations API (cubic-bezier, slow-fast-slow). Das CSS liefert nur das * Raster und die Ruhe-/Aufklapp-Optik. * * Regeln sind unter #xeniaGrid_parent gescoped (Containment/Spezifität). */ #xeniaGrid_parent { display: grid; grid-template-columns: 315px 315px; gap: 73px; position: relative; /* Bezugspunkt für die absolut positionierte Overlay-Kachel */ width: 100%; overflow: visible; /* Overlay darf über die Rasterhöhe hinauswachsen */ } @media only screen and (max-width: 1200px) { #xeniaGrid_parent { grid-template-columns: 1fr; } } #xeniaGrid_parent .xeniaGrid_all { height: 315px; width: auto; /* Breite kommt vom Grid-Track */ box-sizing: border-box; /* Rahmen zählt zur 315px-Zelle */ margin: 0; } #xeniaGrid_parent .xeniaGrid_image { background-size: cover; background-position: center; } #xeniaGrid_parent .xeniaGrid_texts { background-color: #ffffff; border-width: 20px; border-style: solid; display: flex; align-items: center; /* Kurztitel vertikal zentriert */ justify-content: center; overflow: hidden; padding: 0; /* Padding liegt auf dem inneren Container, nicht der Kachel */ } #xeniaGrid_parent .xenia_tile_text_container { width: 100%; padding: 30px; } #xeniaGrid_parent .xeniaGrid_title { cursor: pointer; text-align: center; position: relative; /* Anker für die absolute Kurztitel-Ebene */ } /* Crossfade: Kurztitel und Langtext liegen übereinander; .xeniaGrid_text_wide blendet sie per Opacity-Transition (0.5s) gegeneinander um. */ #xeniaGrid_parent .xenia_tile_long { width: 100%; padding: 30px; font-size: 16px; text-align: justify; opacity: 0; transition: opacity 0.5s ease; } #xeniaGrid_parent .xenia_tile_short { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 30px; font-size: 30px; opacity: 1; transition: opacity 0.5s ease; white-space: pre; /* nur manuelle Zeilenumbrüche aus dem Textfeld; kein automatischer Umbruch */ } #xeniaGrid_parent .xeniaGrid_text_wide .xenia_tile_long { opacity: 1; } #xeniaGrid_parent .xeniaGrid_text_wide .xenia_tile_short { opacity: 0; } #xeniaGrid_parent .xeniaGrid_text { font-size: 16px; text-align: justify; } /* Aufgeklappter Zustand: Text oben statt zentriert, kleiner, im Blocksatz. */ #xeniaGrid_parent .xeniaGrid_text_wide { align-items: flex-start; font-size: 16px; text-align: justify; } /* Platzhalter hält die Rasterzelle, während die Kachel als Overlay wächst. */ #xeniaGrid_parent .xeniaGrid_placeholder { visibility: hidden; } /* Admin-Edit-Links: hängen an und sitzen im äußeren linken Seitenrand (links neben dem Inhalts-Container), pro Reihe gestapelt. Position setzt das JS. */ .xenia-kasten-edit { position: absolute; white-space: nowrap; background: #2271b1; color: #fff; font-size: 12px; line-height: 1.3; padding: 3px 9px; border-radius: 11px; text-decoration: none; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 ); opacity: 0.9; z-index: 9999; } .xenia-kasten-edit:hover { opacity: 1; background: #135e96; color: #fff; }