Merge remote-tracking branch 'refs/remotes/origin/master'

Author: Christopher Werner

.gitignore

@@ -21,4 +21,5 @@ static/images/autoeq.app.png
 static/images/qudelix-5k-app.png
 static/js/bracket-v0.6.2-alpha.js
 static/js/bracket-v0.6.4-alpha.js
-static/images/Screenshot\ 2025-12-23\ at\ 07-59-46\ 🏆\ Tournament\ for\ Anime\ Pics.png
+static/images/Screenshot\ 2025-12-23\ at\ 07-59-46\ 🏆\ Tournament\ for\ Anime\ Pics.png
+resources/_gen/

assets/sass/main.sass

@@ -817,13 +817,21 @@ footer
 
 // Media Queries
 
-@media (max-width: 1920px)
-  .match-competitor
-    img
-      height: 300px
-  .match-window
-    width: 46%
+//<<<<<<< HEAD
+//@media (max-width: 1920px)
+//  .match-competitor
+//    img
+//      height: 300px
+//  .match-window
+//    width: 46%
       
+//=======
+//<<<<<<< Updated upstream
+//@media (max-width: 1920px)
+//  .match-competitor
+//    img
+//      height: 300px
+//>>>>>>> refs/remotes/origin/master
 
 // Tablets und kleinere Desktops
 @media (max-width: 1200px) 
@@ -843,6 +851,79 @@ footer
   .match-vs 
     transform: rotate(90deg)
     margin: 20px 0
+//=======
+// Bessere Ansatz: Setze Standard-Breite direkt in .match-window
+// und überschreibe nur für kleinere Bildschirme
+
+// Media Queries für Bracket
+
+// 4K und größer - schmalere Window
+@media (min-width: 2560px)
+  .match-window
+    width: 33%
+
+// FullHD bis 4K - mittlere Breite  
+@media (min-width: 1201px) and (max-width: 2559px)
+  .match-window
+    width: 46%
+  .match-competitor
+    max-width: 266px
+    padding: 16px
+    img
+      width: 100%
+      height: auto
+
+//@media (max-width: 1200px)
+//  .bracket
+//    gap: 60px
+//  
+//  .bracket-column
+//    min-width: 180px
+//  
+//  .match-window
+//    width: 53%
+//  .match-competitor
+//    max-width: 236px
+//    padding: 16px
+//    img
+//      width: 100%
+//      height: auto
+
+//@media (max-width: 2000px)
+//  .match-window 
+//    width: 46% // oder was auch immer besser aussieht
+//
+//  .bracket 
+//    gap: 40px
+//
+//  .bracket-column 
+//    min-width: 160px
+//
+//  .match-content 
+//    flex-direction: column
+//
+//  .match-vs 
+//    transform: rotate(90deg)
+//    margin: 20px 0
+//
+// Tablets und kleinere Desktops
+//@media (max-width: 1200px) 
+//  .bracket 
+//    gap: 40px
+//
+//  .bracket-column 
+//    min-width: 160px
+//
+//  .match-content 
+//    flex-direction: column
+//
+//  .match-window
+//    width: 46%
+//
+//  .match-vs 
+//    transform: rotate(90deg)
+//    margin: 20px 0
+//>>>>>>> Stashed changes
 
 // Tablets
 @media (max-width: 768px)
@@ -1247,4 +1328,4 @@ footer
     height: 180px
 
   .winner-card img
-    height: 200px
+    height: 200px