adventskalender/shared/style.css aktualisiert

adventskalender/shared/style.css

@@ -7,7 +7,7 @@
   --ci-creamwhite:  #f7f3e8;
 }
 
-/* === Global Reset === */
+/* === Reset & Grundlayout === */
 *,
 *::before,
 *::after {
@@ -18,6 +18,7 @@ html, body {
   margin: 0;
   padding: 0;
   height: 100dvh;
+  width: 100vw;
   overflow: hidden;
   font-family: sans-serif;
   color: var(--ci-creamwhite);
@@ -29,7 +30,15 @@ html, body {
   flex-direction: column;
 }
 
-/* === Hauptüberschrift === */
+/* === Hauptbereich === */
+main {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* === Überschrift oben === */
 main > h1 {
   flex: 0 0 auto;
   margin: 1rem 0;
@@ -37,7 +46,7 @@ main > h1 {
   text-align: center;
 }
 
-/* === Kalenderbildbereich === */
+/* === Bildcontainer passt sich an === */
 .kalenderbild {
   flex: 1 1 auto;
   display: flex;
@@ -46,13 +55,15 @@ main > h1 {
   overflow: hidden;
 }
 
-/* === Bild selbst === */
+/* === Bild passt sich dem verfügbaren Platz an === */
 .kalenderbild img {
   max-width: 100%;
   max-height: 100%;
+  width: auto;
+  height: auto;
   aspect-ratio: 16 / 9;
-  display: block;
   border: 4px solid var(--ci-gold);
   border-radius: 12px;
   object-fit: contain;
+  display: block;
 }