/* CSS FÜR BJÖRN */
/*
Copyright (C) 2021 Velometrik GmbH
<http://www.velometrik.de/>
GPLv3
*/

/* Base imports */
@import url("normalized.css");
@import url("materialdesignicons.min.css");



.main-content{
    overflow: auto;
    height: 90vh;
}


.uk-button-primary {
    background-color: var(--secondary-back);
    color: var(--secondary-text);
    border: 1px solid transparent;
    transition: all 0.5s linear;
}

.uk-button-primary:hover {
    background-color: var(--primary-back);
    color: var(--primary-text);
    border: 1px solid var(--secondary-back);
}

.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
    outline: 0;
    background-color: var(--primary-back);
    color: var(--light-4);
    border-color: var(--primary);
}

.uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover {
    color: var(--primary);
    text-decoration: none;
}

.uk-table-hover tbody tr, .uk-table-hover>tr {
    transition: all 0.5s linear;
}

.uk-table-hover tbody tr:hover, .uk-table-hover>tr:hover {
    background: var(--secondary-back);
    color: var(--secondary-text);
    cursor: pointer;
}

.card-media {
  aspect-ratio: 16 / 9;    /* oder 4/3, je nach Design */
  overflow: hidden;
  border-radius: 12px;
}

.card-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.login-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    flex-direction: column;
}

.login-logo{
  height: 75px;
  width: auto;
  display:block;
}

.login-body{
  display:flex;
  gap: 1.5em;
}

/* Bildbox: gleiche Optik, egal welches Bild */
.login-media{
  flex: 1 1 45%;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  border-radius: 12px;
}

.login-media-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.login-form{
  flex: 1 1 55%;
  min-width: 260px;
}

/* Mobile: untereinander */
@media (max-width: 959px){
  .login-body{
    flex-direction: column;
  }
  .login-form{
    min-width: 0;
  }
}



/* ===== Switch ===== */
.switch{ position: relative; display: inline-block; width: 50px; height: 24px; vertical-align: middle; }
.switch input{ opacity: 0; width: 0; height: 0; }
.switch .slider{
  position: absolute; cursor: pointer; inset: 0;
  background-color: #ccc;
  transition: background-color var(--t-med, .3s);
  border-radius: 34px;
}
.switch .slider::before{
  position: absolute; content: ""; height: 20px; width: 20px; left: 2px; bottom: 2px;
  background-color: white; transition: transform var(--t-med, .3s); border-radius: 50%;
}
.switch input:checked + .slider{ background-color: var(--primary); }
.switch input:checked + .slider::before{ transform: translateX(26px); }
.switch input:focus + .slider{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); }