/* Css file mit globalen Style fuer die Website TV Bad Bergzabern */ /* der pfad bei Ionos ist: /TV-BZA-1882/WP-TV-BZA/CSS */ /* also href="http://tv-badbergzabern.de/TV-BZA-1882/WP-TV-BZA/CSS/filename.css" */ /* der filename lautet: Css4WS */ /* Eingebunden wird dieses file im Head des html files */ /* oder falls die absolute adresse per https angesprochen wird */ /* */ /* Style Leichtathletik - Level I */ /* Style der Headline im Textblock - Level I */ .flexbox { padding: 0px 0px 0px 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; width: 100vw; /* weil die Box über die ganze Breite geht und ein Hintergrund besitzen soll */ max-height: 350px; height: 350px; flex-direction: row; display: flex; justify-content: flex-end; /*horizontale Ausrichtung in der Box = rechts in der box */ /* wegen summe der width uunten < 100% und justify rechts sind die boxen rechtss aligned */ align-items: base-line; /* ####### hintergrund ########## */ /* background-image: url("AT_BKB_DT_1600x360.jpeg"); */ /* wird ausgelagert um den Style in ein Css auszulagern */ /* BSBDesktopAbteilungBEZA.png hat 350px Höhe */ background-position-x: center; background-position-y: bottom; /* top 2em ist in Abhängigkeit mit der Bildgröße und der Boxhöhe zu betrachten! */ background-repeat: no-repeat; background-size: cover; /* anstelle 100% */ } /* das einrücken der items wird durch kleinere Width zu flexbox gemacht einschließlich justify-content: flex-end; der Eltern flex box */ .GD_item1 { width: 10%; padding: 0px 0px 8px 0px; text-align: right; align-self: flex-end; } .GD_item1 img { /* Definiiere was transformiert werden soll und wie der Ausgangszustand sein muß */ /* Transition applies to all transform changes (rotate, scale, etc.) */ transition-property: transform; transition-duration: 1.5s; transition-timing-function: ease-in-out; /* Initial state */ transform: rotate(0deg); } .GD_item1 img:hover { /* Definiiere was beim hovern passieren soll */ /* Final state with rotated angle */ transform: rotate(1080deg); } .GD_item3 { padding: 0px 0px 8px 0px; marging-right: 16px; width: 10%; text-align: right; align-self: flex-end; /* background-color: #ddd; border: 1px solid #333; */ } .GD_item3 img:hover { /* Definiiere was beim hovern passieren soll */ /* Final state with rotated angle */ transform: rotate(1080deg); } .GD_item4 { padding: 0px 0px 8px 0px; width: 4%; /* getestet 11.03.2026 */ text-align: right; align-self: flex-end; /* Platzhalter als Alternative zu paddimng welches die Skalierung des Bildes verändert background-color: #ddd; border: 1px solid #333; */ } .ImgControl { max-width: 70%; /* Bild wird nicht breiter als sein Container */ height: auto; } .GD_item2 { padding: 0.8em 0px 0.8em 0px; height: auto; text-align: center; font-size: 3em; font-size: calc(10px + 2vw); font-weight: bold; text-transform: uppercase; color: white; align-self: flex-end; } @media screen and (orientation: landscape) { .GD_item2 { width: 60%; } } @media screen and (orientation: portrait) { .GD_item2 { width: 74%; } }