/* Der Container für das Bild */
.image-shine-wrapper {
    position: relative;    /* Zwingend nötig für das absolute Positionieren des Glanzes */
    display: inline-block; /* Der Container passt sich genau der Bildgröße an */
    overflow: hidden;      /* Zwingend nötig, damit der Glanz nicht über den Rand ragt */
    border-radius: 6px;    /* Optional: abgerundete Ecken (wie in deinem Originalcode) */
}

/* Das Bild selbst (bleibt unverändert) */
.image-shine-wrapper img {
    display: block;        
    max-width: 100%;
    height: auto;
}

/* Der eigentliche Glanz-Effekt */
.image-shine-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0; /* WICHTIG: left wird fest auf 0 gesetzt und nicht mehr animiert */
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(230, 239, 246, 0.6) 50%, transparent 100%);
    /* Startposition mit translateX setzen (entspricht dem alten left: -100%) */
    transform: translateX(-200%) skewX(-25deg); 
    animation: shinePass 8s infinite linear;
    pointer-events: none;
}

/* Die GPU-optimierte Animation */
@keyframes shinePass {
    /* Wichtig: Wir müssen bei jedem Keyframe auch das skewX wiederholen, sonst verschwindet die Neigung! */
    0% { 
        transform: translateX(-200%) skewX(-25deg); 
    }
    20% { 
        transform: translateX(400%) skewX(-25deg); 
    } 
    100% { 
        transform: translateX(400%) skewX(-25deg); 
    } 
}


  /*	Menu Top  verkleinerung	*/
  #navbar {
    position: fixed;
    top: -120px; 
    width:100%;
    left:-0pfx;
    z-index: 2;
    transition: top 0.8s; }
#navbar {
    position: fixed;
    top: -120px; 
    width:100%;
    left:-0px;
    z-index: 2;
    transition: top 0.8s; }

#navbartb {
background-color: #004494;
filter:alpha(opacity=91);
 opacity:0.9;}

@media handheld {div.rausmenue {display: none; } }

  /*	Menu Top  verkleinerung ENDE	*/
  
  
  .oktagon-prozent {
  max-width: 100%; height: auto;
clip-path: polygon(
    5% 0%,        /* Punkt 1 */
    95% 0%,       /* Punkt 2 */
    100% 5%,      /* Punkt 3 */
    100% 95%,     /* Punkt 4 */
    95% 100%,     /* Punkt 5 */
    5% 100%,      /* Punkt 6 */
    0% 95%,       /* Punkt 7 */
    0% 5%         /* Punkt 8 */
  );
}


  /*	Allgemein	*/
a:link { color: #0054BB; text-decoration: none; }
a:visited { color: #0054BB; text-decoration: none; }
a:hover {color:#353535; text-decoration: none;}
a:active {color:#353535; background: ; text-decoration: none; }  

body { z-index: 0; margin-left:5px; margin-right:5px; margin-top:0px;}
body td { font-size:10pt; line-height:12pt; font-family:Helvetica,Arial;  font-color:#FFFFFF; letter-spacing:0.08mm; word-spacing:0.3mm;}
  /*	Allgemein ENDE	*/
  
   /*	verkleinern	*/
div.raus3 {display: none; }

A.nobrb { text-decoration: none;}

.tabelw {width:100%;}

  /* Standard-Stil für mobile Geräte */
  .responsive-cell {padding-left: 20px;}
  
  
  
  input.formular,TEXTAREA.formular,select.formular {background-color:#FFFFFF; font-size:11pt; font-family:Arial,sans-serif;
border-radius: 4px;
border: 1px solid #555;
padding-left: 5px;
height:27px;
line-height:16pt;}

input.formular2 {background-color:#F0F0F0; font-size:11pt; font-family:Arial,sans-serif;
border-radius: 4px;
padding-left: 5px;
height:27px;
border: 1px solid #555;
line-height:16pt;}

input.formular2:focus,input.formular:focus,TEXTAREA.formular:focus,select.formular:focus {background-color:#FFFFFF; font-size:11pt; font-family:Arial,sans-serif;
border-radius: 4px;
border: 1px solid lightblue;
padding-left: 5px;
line-height:16pt;}

td.bildkasse { background-color: #FFFFFF; width:60px; }
  
@media all and (max-width: 900px) {
div.raus {display: none; }
}
   
@media all and (max-width: 900px) {

 .responsive-cell {padding-left: 0px;}
.tabelw {width:695px;}
img.bild1 {display: none; }
div.raus2 {display: none; }
div.raus3 {display: inline; }
body td { font-size:12pt; line-height:14pt; font-weight:bold;}
.verlinkung { height:35pt;}
A.menue:link { line-height:30pt; font-size:12pt;  }
A.menue:visited { line-height:30pt; font-size:12pt; }
A.menue:hover {line-height:30pt; font-size:12pt;}
A.menue:active {line-height:30pt; font-size:12pt; }
A.anleitung:link { line-height:60pt; font-size:18pt;  }
A.anleitung:visited { line-height:60pt; font-size:18pt; }
A.anleitung:hover {line-height:60pt; font-size:18pt;}
A.anleitung:active {line-height:60pt; font-size:18pt; }
input.formular,TEXTAREA.formular,select.formular {font-size:16pt; height:37px;}
input.formular2:focus,input.formular:focus,TEXTAREA.formular:focus,select.formular:focus {font-size:16pt; height:37px;}
input.formular2 {font-size:16pt; height:37px;}
td.bildkasse{ background-color: #E2E2E2; width:0px; }
}
   
@media all and (min-width: 1100px) { A.nobrb { white-space: nowrap;}}

  /*	verkleinern Ende 	*/
  
 /*	scrollmenue 	*/
.link {  text-decoration: none; font-size:8pt; font-family:Helvetica,Arial; letter-spacing:0pt; word-spacing:0pt; }
.linka {  text-decoration: none; font-size:8pt; font-family:Helvetica,Arial; letter-spacing:0pt; word-spacing:0pt; color:#000000; }
TD.linka {height:16px;}
.verlinkungenscroll:hover {cursor:pointer; color: #004494; }
TD.verlinkungenscroll {height:16px; }
 /*	scrollmenue ende 	*/
 
A.menue:link { color:#E6E6E6; text-decoration: none; }
A.menue:visited { color :#E6E6E6; text-decoration: none; }
A.menue:hover {color:#FFFFFF;text-decoration: none;}
A.menue:active {color: #FFFFFF; text-decoration: none; }

A.menue2:link { color:#004494; text-decoration: none;  padding-top: 5px; }
A.menue2:visited { color :#004494; text-decoration: none; }
A.menue2:hover {color:#353535;text-decoration: none;}
A.menue2:active {color:#353535; text-decoration: none; }


        A.menue2 {
  line-height:16pt; 
            color:#004494;
            border-left: 2px solid #FFFFFF;
        }
        
        
        A.menue2:hover { 
           color:#353535 ;
            border-left: 2px solid #3399FF;
            background: linear-gradient(90deg, rgba(0,221,255,0.1) 0%, transparent 100%);
        }



        A.menu-link {
            display: block;
            padding: 10px 0;
            border-bottom: 1px solid #1f3652;
            color: #004494 ;
            transition: 0.2s; 
        }
        
        
        A.menu-link:hover { 
           color:#353535;
            padding-left: 10px; 
            border-left: 2px solid #3399FF;
            background: linear-gradient(90deg, rgba(0,221,255,0.1) 0%, transparent 100%);
        }
    
li.shop {list-style-image: url(vorteil.gif); font-size: 9pt; font-family:Helvetica,Arial; color:#444444; }
    
ext:link { color:#FFFFFF;  }
ext:visited { color :#FFFFFF; }
ext:hover {color:#FFFFFF;}
ext:active {color:#FFFFFF;}
.ext {color:#000000;}
    
div.klein { font-size:9pt; line-height:15pt; font-family:Helvetica,Arial; font-weight:bold;}
div.kleinkasse { font-size:8pt; line-height:9pt;  font-family:Helvetica,Arial; }
div.kleiner { font-size:7pt; line-height:8pt; font-family:Helvetica,Arial;}
div.kleiner2 { font-size:9pt; line-height:10pt; font-family:Helvetica,Arial; display : inline;}
div.status { font-size:8pt; line-height:10pt; font-family:Helvetica,Arial; }
div.menge { font-size:9pt; line-height:8pt; font-family:Helvetica,Arial; }
 div.das { font-size: 1mm; line-height: 0.1mm; font-family:Helvetica,Arial;  color: #333333; letter-spacing:0.1mm; word-spacing:0.1mm; }
         
nobr { white-space:nowrap; }
   
img { border:0;}
   
.verlinkung:hover {cursor:pointer; background-color:#C3CBDE;}
.verlinkung {cursor:pointer;  background-color:#E6EFF6;}
  
.autolist { font-family:arial; font-size:15px; margin-left:3px; line-height:20px; cursor:pointer; }
.autolist:hover {background-color:#CCCCCC; }

   A.bewertung:link { color:#494949; text-decoration: none ; }
A.bewertung:visited { color :#494949; text-decoration: none  ; }
A.bewertung:hover {color:#494949;text-decoration: underline ;}
A.bewertung:active {color:#494949; text-decoration: none; }   

A.bewertungklein:link { color:#494949; text-decoration: none ; }
A.bewertungklein:visited { color :#494949; text-decoration: none  ; }
A.bewertungklein:hover {color:#494949;text-decoration: underline ;}
A.bewertungklein:active {color:#494949; text-decoration: none; }   

.bewertung { font-size: 9pt; font-family:Helvetica,Arial;  font-weight:bold;}
.bewertungklein { font-size: 6.5pt;  font-family:Helvetica,Arial; font-weight:bold;}

.verlinkungen:hover {cursor:pointer; }
  /*	Auto Suche	*/
#af {  width:475px;  border-radius: 5px; margin-left:105px; text-align: left; position:absolute; margin-top:-7px; background:white;border-top:solid 0px;border-left:solid 2px;border-right:solid 2px; border-bottom:solid 0px; border-color:#033367;filter:alpha(opacity=91); opacity:0.9; }
.autolist { font-family:arial; font-size:15px; cursor:pointer; }
.autolist:hover {background-color:#E8E8E8; }
  /*	Auto Suche ende	*/
#input { background-color:#FFFFFF; font-size:15pt; border:0; height:22px; font-family:Helvetica,Arial; }
     
#input2 { background-color:#FFFFFF; font-size:22pt; border:0; height:30px; font-family:Helvetica,Arial; }
             
.suchbutton {  font-size: 11.0pt;  font-weight:bold;}
          
td.hintergrund,tr.hintergrund { background-color: #E2E2E2; }
td.hintergrund2,tr.hintergrund2 { background-color: #E2E2E2; }
td.hintergrund3,tr.hintergrund3 { background-color: #CBCBCB; }

/* Hintergrund Animation ENDE*/
#scene-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    overflow: hidden; 
    pointer-events: none;
}

#inhalt-container {
    position: relative;
    z-index: 4;
}
/* Hintergrund Animation ENDE*/

/* Suche */
.search-wrapper {
    display: flex;
    align-items: center;
    border: 5px solid transparent; /* Immer transparent */
    border-radius: 28px; 
    width: 350px; 
    height: 50px; 
    padding: 4px 2px 2px 5px;
    box-sizing: border-box; 
    transition: width 0.4s ease-in-out; 

    /* Der Trick: Dauerhafter Hintergrund-Rahmen (Weiß innen, Blau außen) */
    background-image: linear-gradient(#ffffff, #ffffff),
                      linear-gradient(#033367, #033367); /* Einfach nur solides Blau im Ruhezustand */
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

/* --- ANIMATIONEN --- */
@keyframes bluePulse {
    0% { box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); }
    50% { box-shadow: 0 0 15px rgba(0, 123, 255, 0.7); }
    100% { box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); }
}

@keyframes borderGlare {
    0% { background-position: 0% 0%, 100% 0%; }
    100% { background-position: 0% 0%, 0% 0%; }
}

/* FOKUS-ZUSTAND: Wenn angeklickt wird */
.search-wrapper:focus-within {

width: 500px;

@media all and (max-width: 900px) {width: 400px;}
 
    
    /* Wir tauschen nur das solide Blau gegen den Glanz-Verlauf aus, Struktur bleibt! */
    background-image: linear-gradient(#ffffff, #ffffff),
                      linear-gradient(115deg, #033367 0%, #033367 40%, rgba(0, 123, 255, 0.9) 50%,#033367 60%, #033367 100%);
    background-size: 100% 100%, 300% 100%; 
    
    animation: bluePulse 2s infinite ease-in-out, borderGlare 4s infinite linear;
}

/* Das Eingabefeld */
.search-input {
    flex: 1; 
    min-width: 0; /* Wichtig: Verhindert, dass lange Texte das Layout sprengen */
    height: 100%; 
    border: none; 
    background: transparent; 
    outline: none;
    padding-left: 10px; 
    font-size: 17pt; 
    color: #003366; 
}

/* Der Button */
.search-btn {
    flex-shrink: 0; /* Wichtig: Verhindert, dass der Browser den Button quetscht */
    background-color: #386899; 
    border: none;
    border-radius: 20px; 
    height: 100%; 
    width: 44px; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff; 
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.search-btn:hover {
    background-color: #0056b3; 
}

.search-btn svg {
    transition: transform 0.3s ease;
}

.search-btn:hover svg {
    transform: rotate(10deg) scale(1.15); 
}
/* Suche ENDE */