#flk_tool
{
    /* padding:20px; */
}

/* #flk_tool #strich_leiste
{
    margin-bottom:20px;
    display:none;
} */
#flk_tool #reiter_wrapper
{
    margin-left:12px;
    display: flex; /* Tabs nebeneinander */
}

#flk_tool .reiter
{
    background-color:rgb(255, 210, 210);
    color:black;
    width: 80px;
    height: 35px;
    background-color: black; /* Basis: BORDER-Farbe (Blau) */
    position: relative; /* Wichtig für das innere Element und z-index */
    cursor: pointer;
    
    /* KEINE BORDER mehr nötig, da die äußere Farbe der Rand ist */
    
    /* Überlappung: Tabs um 10px nach links ziehen */
    margin-left: -10px;
    
    /* Trapez-Form: Oben schmaler (15% von links/rechts abgeschnitten), unten volle Breite */
    clip-path: polygon(15% 0, 85% 0, 100% 100%, 0% 100%); 
    
    /* Transformation: Wichtig für den Skalierungs-Effekt */
    transform-origin: bottom; /* Skalierung startet von unten (zur Sicherheit) */
    transform: scale(1); /* Basis-Skalierung, wichtig für die Transition */

    /* Übergang nur für Schatten (KEINE Bewegung!) */
    transition: box-shadow 0.3s;
    
    /* Leichter Schatten für den 3D-Effekt */
    box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.15); 
}
#flk_tool .reiter:hover,#flk_tool .reiter.aktiv
{
    z-index: 800 !important; /* Kommt über alle anderen (Nach vorne) aber UNTER Malert! */
    /* transform: scale(1.1) translateY(-0.5px);  */
    transform: scale(1.1) translateY(-3px);
    transform-origin: top;
}
#flk_tool .reiter .reiter_inner:hover,#flk_tool .reiter.aktiv .reiter_inner
{
    background-color:#ff0000;
    color:white;
}
/* , #flk_tool .reiter_inner:hover, #flk_tool .reiter_inner.aktiv */
#flk_tool .reiter_inner
{
    /* Positionierung und Größe, um den 3px blauen Rand zu lassen */
    position: absolute;
    top: 3px; 
    left: 3px;
    width: calc(100% - 6px); /* 6px (2x 3px) von der Breite abziehen */
    height: calc(100% - 6px); /* 6px (2x 3px) von der Höhe abziehen */

    background-color: rgb(195, 195, 195); /* Basis: FÜLL-Farbe (Grün) */
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Die Trapez-Form muss hier wiederholt werden, damit sie sich anpasst */
    clip-path: inherit; 
    transition: background-color 0.3s;
}

#flk_wrapper
{
    position:relative;
    border:2px solid black;
    width:100%;
    max-width:1414px;
    background-color:#ffffff;
    padding:0px;
    display: inline-block;
    overflow: hidden;
}
#flk_bild
{
    width:100%;
    height: auto;
    display: block;
    /* margin-left: -15px;  */
    /* margin-top: -15px; */
    /* width: calc(100% + 30px);  */
}

#flk_tool #merke_reiter
{
    display:none;
}

#flk_tool .flk_pfeil
{
    position:absolute;
    bottom:10px;
    color:red;
    padding:3px;
    cursor:pointer;
    text-decoration:none;
    border:1px solid red;
}

@keyframes blaetternblink {
    0%, 100% {
      opacity: 1; /* Am Anfang/Ende sichtbar */
    }
    50% {
      opacity: 0; /* In der Mitte unsichtbar */
    }
}
  
#flk_tool .umblaettern{
    position: absolute;
    bottom:20px;
    right:20px;
    /* Die Animation selbst: */
    animation-name: blaetternblink;
    animation-duration: 1s; /* 1 Sekunde sichtbar + 1 Sekunde unsichtbar = 2 Sekunden Zyklus */
    animation-iteration-count: infinite; /* Läuft endlos */
    animation-timing-function: step-end; /* Wichtig, damit es hart umschaltet (0 oder 1), nicht weich überblendet */
}

/*
#flk_tool .eselsohr{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 40px 0 0 40px;
    border-color: white white white #ccc;
    position: absolute;
    bottom:0px;
}
#flk_tool #flk_pfeil_h{
    transform:rotate(90deg);
    right: 0px;
}
#flk_tool #flk_pfeil_v{
    transform:rotate(180deg);
    left: 0px;
} */