/* ---------- Grundlegende Einstellungen ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	
}

body {
    /* Vista-typische Schriftarten */
    font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
    background-attachment: fixed; /* Wird auf iOS nicht korrekt umgesetzt */

    /* Hintergrundbild */
    background-image: url('windows7.jpg');
	 background-repeat: no-repeat;
    background-position: center center;
	    background-size: cover;

   overscroll-behavior: none;  /* verhindert das „Überscrollen“ */
  margin: 0; 
  padding: 0;
  overflow: hidden;

    /* Fallback für iOS Safari (erkennt man via -webkit-touch-callout) */
    @supports (-webkit-touch-callout: none) {
      background-attachment: scroll; 
    }

    /* Schriftfarbe und Mindesthöhe setzen */
    color: #fff;
    min-height: 100vh;

    position: relative; /* Ermöglicht absolute/fixed Positionierung der Desktop-Icons */
}

/* ---------- Hauptinhalt ---------- */
.vista-content {
    max-width: 800px;
    margin: 4rem auto 6rem; /* Platz nach unten für die Taskleiste */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);             /* Unscharfer Hintergrund */
    -webkit-backdrop-filter: blur(6px);     /* Safari-Prefix */
    padding: 2rem;
    border-radius: 8px;

    /* Vista-typischer Schatten */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

    /* Kleine Übergänge bei Hover-Effekten innerhalb des Containers */
    transition: background 0.3s, box-shadow 0.3s;
}

.vista-content:hover {
    background: rgba(255, 255, 255, 0.20);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

/* ---------- Vista-Button ---------- */
.vista-button {
    display: inline-block;
    background: linear-gradient(to bottom, #eee, #ccc);
    color: #000;
    border: 1px solid #999;
    border-radius: 4px;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    max-width: 1200%;  
    /* Leichte Lichtkante */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);

    transition: background 0.2s, transform 0.2s;
}

.vista-button:hover {
    background: linear-gradient(to bottom, #fff, #ddd);
    transform: scale(1.02);
}

/* ---------- Taskleiste ---------- */
.vista-taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Angepasst für bessere Darstellung des Logos */

    /* Angepasster Hintergrund mit (optionalem) Blur */
    background: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); /* Für Safari */

    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
  
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    
    z-index: 1000; /* Sicherstellen, dass die Taskleiste immer oben ist */
}

/* ---------- Taskleiste Links ---------- */
.taskbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Start-Button mit Windows-Logo ---------- */
.start-button {
    background: none;
    border: none;
    border-radius: 4px;
    padding: 0.3rem;
    cursor: pointer;

    /* Leichtes Hover-Hervorheben */
    transition: background 0.2s, box-shadow 0.2s;
}

.start-button:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.windows-logo {
    width: 36px; /* Anpassung der Größe nach Bedarf */
    height: 36px;
    display: block;
}

/* ---------- Anwendungs-Icons in Taskleiste ---------- */
.taskbar-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.4rem;
    cursor: pointer;
    font-size: 1.2rem;

    /* Subtiler Schlagschatten */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);

    transition: background 0.2s, box-shadow 0.2s;
}

.taskbar-icon:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ---------- Taskleiste Rechts ---------- */
.taskbar-right {
    display: flex;
    align-items: center;
    
    /* Linke Grenze hinzufügen */
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 1rem; /* Abstand zwischen Grenze und Inhalt */
}

/* ---------- Uhr in Taskleiste ---------- */
.clock {
    color: #fff;
    font-weight: normal;
	font-size:10px;
    margin-left: 1rem;
    font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
}

/* ---------- Start-Menü ---------- */
/* === START-BUTTON (Kurz) === */
.start-button {
    background: none;
    border: none;
    border-radius: 4px;
    padding: 0.3rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
  
.start-button:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
  
.windows-logo {
    width: 36px; /* Größe des Windows-Logos */
    height: 36px;
    display: block;
}
  
/* ---------- START-MENÜ GESAMT (Windows-7-artig) ---------- */
.start-menu {
    position: absolute;
    bottom: 60px; /* Taskleiste: 50px + kleiner Abstand */
    left: 10px;
    width: 480px;             /* Gesamtbreite des Menüs */
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    border-radius: 6px;       /* Rundung des gesamten Menüs */
    overflow: hidden;         /* Kein Überlaufen außerhalb der Ränder */
    display: none;            /* Per JS ein-/ausblenden */
    z-index: 1001;            /* Über der Taskleiste */
    background: none;         /* Hier auf "none", da wir die Spalten einzeln stylen */
}
  
/* ---------- LINKER BEREICH (Weißer Teil) ---------- */
.start-menu-left {
    float: left;
    width: 50%;
    background: #f2f2f2;       /* Heller, fast weißer Bereich */
    padding: 0.5rem 0.7rem;
    box-sizing: border-box;
    min-height: 300px;         /* Grundhöhe */
}
  
.start-menu-left .program-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
  
.start-menu-left .program-list li {
    padding: 0.3rem 0.5rem;
}
  
.start-menu-left .program-list li a {
    color: #333;               /* Dunkelgrauer Text */
    text-decoration: none;
    display: block;
    transition: background 0.2s;
    padding: 2px 4px;          /* Kleiner Innenabstand */
    border-radius: 3px;
}
  
.start-menu-left .program-list li a:hover {
    background: rgba(0,0,0,0.1); /* Dezentes Dunklerwerden */
}
  
/* ---------- RECHTER BEREICH (Aero-Glas) ---------- */
.start-menu-right {
    float: left;
    width: 50%;
    /*background: linear-gradient(
      to bottom, 
      rgba(87, 109, 139, 0.2) 0%, 
      rgba(52, 64, 82, 0.05) 100%
    );*/
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
	
	background-color:#61D5F1;
	opacity: 0.95;
    padding: 0.5rem 0.7rem;
    box-sizing: border-box;
    min-height: 300px;
}
  
.start-menu-right .folder-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
  
.start-menu-right .folder-list li {
    padding: 0.3rem 0.5rem;
}
  
.start-menu-right .folder-list li a {
    color: #fff; /* Weißer Text */
    text-decoration: none;
    display: block;
    transition: background 0.2s;
    padding: 2px 4px;
    border-radius: 3px;
}
  
.start-menu-right .folder-list li a:hover {
    background: rgba(255,255,255,0.2);
}
  
/* ---------- Trennlinie in den Listen ---------- */
.start-menu-left hr,
.start-menu-right hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0.3rem 0;
}
  
/* ---------- UNTERER BEREICH (Herunterfahren-Button) ---------- */
.start-menu-bottom {
    clear: both;               /* Float aufheben */
    background: linear-gradient(to bottom, #f3f3f3 0%, #ddd 100%);
    padding: 0.5rem 0.8rem;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
    min-height: 40px;          /* Höhe, je nach Bedarf */
}
  
.shutdown-button {
    float: right;              /* Rechts ausgerichtet */
    background: linear-gradient(to bottom, #eee, #ccc);
    border: 1px solid #999;
    border-radius: 4px;
    color: #000;
    padding: 0.3rem 1rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    margin-top: 0.2rem;
}
  
.shutdown-button:hover {
    background: linear-gradient(to bottom, #fff, #ddd);
    transform: scale(1.02);
}
  
/* ---------- Floats fixen (Clear) ---------- */
.start-menu::after {
    content: "";
    display: block;
    clear: both;
}
  
/* ---------- Separator ---------- */
.separator {
    width: 1px; /* Breite des Strichs */
    height: 90%; /* Höhe des Strichs im Verhältnis zur Taskleiste */
    background-color: rgba(255, 255, 255, 0.3); /* Farbe und Transparenz */
    margin: 0 1rem; /* Abstand von den Taskbar-Elementen */
}

/* ---------- Desktop-Icons Container ---------- */
.desktop-icons {
    position: fixed;  /* Fixiert die Icons auf der Seite */
    top: 1rem;        
    left: 1rem;       
    z-index: 1000;    /* Sicherstellen, dass die Icons über anderen Elementen liegen */
    
    display: flex;
    flex-direction: column; 
    gap: 1.7rem;              
    padding: 1rem;
    
    align-items: center;    
}

/* ---------- Einzelnes Desktop-Icon ---------- */
.desktop-icon {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    text-align: center;     
}

/* ---------- Social Media Logos ---------- */
.social-logo {
    width: 60px;             
    height: 60px;
    margin-bottom: 0.5rem;   
    margin-right: 0;         
}

/* ---------- Beschriftungen ---------- */
.desktop-icon a span {
    font-size: 16px;
    margin-top: 0.3rem;       
    color: #fff;              
    text-decoration: none !important; 
    border: none;             
    outline: none;            
}

/* ---------- Entferne Unterstreichung und Rahmen in allen Zuständen ---------- */
.desktop-icon a,
.desktop-icon a:visited,
.desktop-icon a:hover,
.desktop-icon a:focus {
    text-decoration: none !important; 
    color: #fff !important;           
    border: none !important;          
    outline: none !important;         
}

/* ---------- Hover-Effekte ---------- */
.desktop-icon a:hover .social-logo {
    transform: scale(1.1);
}

.desktop-icon a:hover span {
    color: #ddd;
    text-decoration: none;  
    border: none;           
}

/* ---------- Responsive Anpassungen ---------- */
@media (max-width: 600px) {
    .social-logo {
        width: 60px;
        height: 60px;
        margin-bottom: 0.3rem;
    }
    
    .desktop-icon span {
        font-size: 14px;
    }
    
    .desktop-icons {
        display: flex;            
        flex-direction: row;      
        flex-wrap: wrap;          
        gap: 0.8rem;              
        top: 1rem;                
        left: 0.3rem;             
        max-width: 100%;          
    }
}

/* ---------- Body Positionierung (nochmals) ---------- */
body {
    position: relative; /* Ermöglicht absolute Positionierung der Desktop-Icons */
}

/* ---------- Zusätzliche Regeln zur Fehlerbehebung ---------- */
.desktop-icon a {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

.desktop-icon a span {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    color: #fff !important; 
}

.desktop-icon a::after,
.desktop-icon a::before {
    content: none;
    text-decoration: none;
    border: none;
    outline: none;
}

.desktop-icon a,
.desktop-icon a:hover,
.desktop-icon a:focus {
    box-shadow: none !important;
}

.desktop-icon a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

a {
    text-decoration: none;
    border: none;
    outline: none;
    color: inherit;
}

/* Vorsicht mit diesem großen Hover-Effekt: 
   Falls es zu “Springen” auf Mobilgeräten kommt, ggf. reduzieren oder entfernen. */
.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); 
    
    /* Verschiebt das Element – kann auf Touchgeräten für "Springen" sorgen */
    top: -15px;    
    left: -15px;   
    right: -15px;  
    bottom: -15px; 

    border-radius: 4px;
    transition: background 0.2s, box-shadow 0.2s, backdrop-filter 0.2s;
    transform: scale(1.05);
}

/* ---------- Vista-Style Widget ---------- */
.vista-widget {
    position: fixed;      
    top: 1rem;            
    right: 1rem;          
    width: 300px;         
    height: 230px;        
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border-radius: 4px;
    margin: 0;           
    overflow: visible;    
    z-index: -1;          
}
  
.widget-frame {
    position: relative;
    width: 100%;
    height: 100%;
    
    border-radius: 6px;
    background: none;
    border: 1px solid #7ba0d8;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    padding: 4px;
    box-shadow:
      inset 0 -1px 2px rgba(255,255,255,0.4),
      inset 0 1px 2px rgba(0,0,0,0.1);
}
  
.widget-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

@media (max-width: 600px) {
    .vista-widget {
      top: auto;
      bottom: 5rem;
      right: 1rem;
      width: 240px;
      height: 183px;
    }

    .start-menu {
      width: 380px; /* Etwas schmaler im mobilen Kontext */
    }
}