/* 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 */ /* geaendert 06.09.2026 */ .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; /* die Bildbox ur Aufnahme des Bildes mit dem blauen Streifen unten */ justify-content: flex-end; /* Centers items horizontally - ob die Boxen links oder rechts innhalb der übergeordneten Box angeordnet sind horizontale Ausrichtung in der Box = rechts in der box */ align-items: flex-end; /* 05.09.2026 war base-line; Centers items vertically - heißt zur x achse in y richtung center legt die elemente in die Mitte der umgebenden Flexbox und damit ausserhalb des bauen Streifens baseline - also die Achse auf welchen die Buchstaben in den Boxen sitzen center vermittelt die Inhalte in den Boxen - centers child elements along the cross-axis of a flexbox */ /* ####### 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: 8px 8px 8px 8px; /* war 0px 0px 8px 0px; */ text-align: center; /* war right */ /* align-self: flex-end; 05.09.2026 auskommentiert */ } .GD_item2 { /* Kasten für den Text */ padding: 0.8em 0px 0.8em 0px; width: 60%; 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; 05.09.2026 auskommentiert */ } .GD_item3 { /* padding: 0px 0px 8px 0px; 05.09.2026 auskommentiert */ padding: 0px 0.8em 8px 0px; /* marging-right: 16px; Schreibfehler soll margin-right: 16px; falls überhaupt benötigt!*/ width: 10%; /* text-align: right; 05.09.2026 auskommentiert */ text-align: center; /* war right */ /* align-self: flex-end; 05.09.2026 auskommentiert */ } .GD_item4 { padding: 0px 0px 8px 0px; width: 4%; /* getestet 11.03.2026 */ text-align: right; /* align-self: flex-end; 05.09.2026 auskommentiert */ /* 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; } @media screen and (orientation: landscape) { .GD_item2 { width: 60%; } } @media screen and (orientation: portrait) { .GD_item2 { width: 74%; } } @keyframes ImDrehenRechts { 0% { transform: rotate(0deg); } 100% { transform: rotate(1080deg); } } .RT-IM { animation-name: ImDrehenRechts; animation-duration: 2000ms; animation-timing-function: linear; animation-delay: 500ms; /* verzögerter Start */ animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; /* animation: DrehenRechts 1000ms linear 1; */ /* durch die Zuweisung der class zum image dreht sich nur das Image um xy grad */ /* durch die Zuweisung der class zur box dreht sich die box! */ /* erfolgreich getestet (Firefox) mit dem entsprechenden html file: Flex_Box_basketballLogo_rotationPermanent _final; 05.09.2026 */ } @keyframes ImDrehenLinks { 0% { transform: rotate(0deg); } 100% { transform: rotate(-1080deg); } } .RT-IM:hover { animation-name: ImDrehenLinks; animation-duration: 500ms; animation-timing-function: linear; animation-delay: 200ms; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; /* hier dreht sich die Box und nicht nur das Image um xy grad */ }