/*
==============================
Markus Heinlein
01-2024
==============================
*/

/*
------------------------------
BREAKPOINTS
------------------------------
*/

/* SMALL    = 576px */
/* MEDIUM   = 768px */
/* LARGE    = 992px */
/* X-LARGE  = 1200px */
/* XX-LARGE = 1400px */

/*
------------------------------
ROOT
------------------------------
*/

:root {
  --theme-primary-font: "Open Sans";
  --theme-capital-font: "Antonio";
  --theme-script-font: "Hertine";
  --theme-icon-font: "themify";
  --theme-mono-font: "Roboto";

  --theme-font-weight-light: 300;
  --theme-font-weight-bold: 600;

  --theme-darkgray-color: rgb(60, 60, 60);
  --theme-lightgray-color: rgb(231, 231, 231);

  /* --theme-blue-accent-color: rgb(29, 129, 249); */
  --theme-blue-accent-color: rgb(36, 95, 161);
  --theme-orange-accent-color: rgb(255, 165, 0);
  --theme-red-accent-color: rgb(255, 69, 0);

  --theme-tooltip-background: rgb(64, 64, 64);
  --theme-tooltip-font-color: rgb(231, 229, 228);

  /* Icons */

  --theme-site-icon: url("../assets/site-icon.svg");
  --theme-scroll-icon: url("../assets/scroll-icon.svg");
  --theme-menu-icon: url("../assets/menu-icon.svg");
  --theme-logout-icon: url("../assets/logout-icon.svg");
  --theme-group-icon: url("../assets/group-icon.svg");
  --theme-mail-icon: url("../assets/mail-icon.svg");
  --theme-phone-icon: url("../assets/phone-icon.svg");
  --theme-video-icon: url("../assets/video-icon.svg");
  --theme-quote-icon: url("../assets/quote-icon.svg");
  --theme-music-icon: url("../assets/music-icon.svg");
  --theme-scan-icon: url("../assets/scan-icon.svg");
  --theme-clip-icon: url("../assets/clip-icon.svg");
  --theme-book-icon: url("../assets/book-icon.svg");
  --theme-line-marker-left-icon: url("../assets/line-marker-left-icon.svg");
  --theme-line-marker-right-icon: url("../assets/line-marker-right-icon.svg");

  --theme-play-icon: url("../assets/play-icon.png");
  --theme-pause-icon: url("../assets/pause-icon.png");

  --theme-close-icon: url("../assets/close-icon.svg");
  --theme-caps-icon: url("../assets/caps-icon.svg");
  --theme-show-icon: url("../assets/show-icon.svg");
  --theme-hide-icon: url("../assets/hide-icon.svg");

  --theme-listen-icon: url("../assets/listen-icon.svg");
  --theme-mute-icon: url("../assets/mute-icon.svg");

  --theme-mh-logo: url("../assets/mh-logo.svg");
  --theme-horizontal-rule: url("../assets/trenner.png");

  /* Cursors */

  --theme-text-cursor: url("../assets/text-cursor.svg");
  --theme-pointer-cursor: url("../assets/pointer-cursor.cur");
  --theme-link-cursor: url("../assets/link-cursor.cur");
}

/*
------------------------------
RESET
------------------------------
*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html {
  cursor: var(--theme-pointer-cursor), auto;
}

/*
------------------------------
SELECTIONS
------------------------------
*/

::selection {
  background: rgba(255, 255, 255, 0.3);
  color: rgb(231, 229, 228);
}

/*
------------------------------
AUTOFILLS
------------------------------
*/

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--login-input-background) inset !important;
  -webkit-text-fill-color: var(--login-accent-color-orange) !important;
}

input:-webkit-autofill::first-line {
  font-size: var(--login-input-font-size) !important;
}

/*
------------------------------
FONTS
------------------------------
*/

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans.ttf") format("truetype");
}

@font-face {
  font-family: "Antonio";
  src: url("../fonts/antonio.ttf") format("truetype");
}

@font-face {
  font-family: "Hertine";
  src: url("../fonts/hertine.otf") format("opentype");
}

@font-face {
  font-family: "themify";
  src: url("../fonts/themify.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto.woff2") format("woff");
}

/*
------------------------------
FIXES
------------------------------
*/

/* ACHTUNG: Fix der Fago-Schriftart unter Firefox */
@-moz-document url-prefix() {
  h1 {
    letter-spacing: -1px;
    -webkit-text-stroke: 1px var(--theme-font-color);
    -webkit-text-fill-color: var(--theme-font-color);
  }
}

/* ACHTUNG: Fix der Fago-Schriftart unter Safari */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    h1 {
      letter-spacing: -1px;
      -webkit-text-stroke: 1px var(--theme-font-color);
      -webkit-text-fill-color: var(--theme-font-color);
    }
  }
}

/*
------------------------------
TYPOGRAPHY
------------------------------
*/

h1 {
  font-family: var(--theme-capital-font);
  font-size: clamp(3rem, 6.5vw, 4.5rem);
  font-weight: var(--theme-font-weight-light);
  line-height: 1.2;
  letter-spacing: -2px;
  padding-bottom: 50px;
}

h2 {
  font-family: var(--theme-capital-font);
  font-size: clamp(2.7rem, 5vw, 3.5rem);
  font-weight: var(--theme-font-weight-light);
  line-height: 1.2;
  letter-spacing: -2px;
}

h3 {
  /* font-size: clamp(1.25rem, 4.4vw, 2.2rem); */
  font-size: 1.25rem;
  font-weight: var(--theme-font-weight-light);
}

h4 {
  font-size: 1.25rem;
  font-weight: var(--theme-font-weight-light);
}

p {
  font-size: clamp(1rem, 3cqmin, 1.5rem);
  font-weight: var(--theme-font-weight-light);
  line-height: 1.5;
}

span {
  display: block;
  /* font-size: clamp(0.875rem, 2.25cqmin, 1rem); */
  font-size: clamp(1rem, 3cqmin, 1.25rem);
  font-weight: var(--theme-font-weight-light);
  line-height: 1.5;
  padding: 0 80px;
}

@media (max-width: 576px) {
  span {
    padding: 0 20px;
  }
}

strong {
  text-transform: uppercase;
  font-weight: var(--theme-font-weight-light);
}

ul {
  list-style: square outside;
  margin-left: 20px;
  padding-left: 0;
}

li {
  display: list-item;
  padding-top: 15px;
}

/* hr {
  border: none;
  border-top: 1px solid #707070;
} */

a {
  text-underline-offset: 6px;
  text-decoration-style: dotted;
  color: var(--theme-font-color);
}

/*
------------------------------
UTILITIES
------------------------------
*/

.u-columns {
  display: flex;
  flex-direction: column;
}

.u-rows {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.u-center {
  margin: 0 auto;
  /* padding: 0 20px; */
  width: 100%;
  max-width: 1500px;
}

.u-full {
  width: 100%;
  max-width: 100%;
}

.u-heading {
  width: 100%;
  text-align: center;
}

.u-dot {
  position: absolute;

  margin: 4px !important;

  width: 10px;
  height: 10px;

  border: none;
  border-radius: 100%;

  background-color: var(--theme-font-color);

  cursor: var(--theme-link-cursor), auto;

  transition: all 150ms ease-in-out;
  animation: pulse 2000ms ease-in-out infinite;
}

.u-dot:hover {
  margin: 0 !important;

  width: 18px;
  height: 18px;

  /* border: 4px solid var(--theme-font-color); */
  border: 4px solid var(--theme-font-color);
  background-color: transparent;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

.u-button {
  padding: 10px 20px;
  /* padding-bottom: 12px; */

  background-color: var(--theme-darkgray-color);
  color: var(--theme-lightgray-color);

  font-family: var(--theme-normal-font);
  font-size: 1rem;

  border-radius: 5px;
  border: none;

  outline: none;
  box-shadow: none;

  overflow: hidden;
  cursor: var(--theme-link-cursor), auto;

  transition: all 150ms ease-in-out;
}

.u-button:hover {
  background-color: var(--theme-lightgray-color);
  color: var(--theme-darkgray-color);
}

.u-link {
  outline: none;
  box-shadow: none;
  cursor: var(--theme-link-cursor), auto;

  transition: all 150ms ease-in-out;
}

.u-label {
  font-size: 1.125rem;
}

.u-rule {
  margin: 80px auto;
  height: 40px;

  background-image: var(--theme-horizontal-rule);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;

  opacity: 0.5;
}

@media (max-width: 768px) {
  .u-rule {
    margin: 60px 20px;
    height: 30px;

    background-size: cover;
  }
}

.u-title {
  font-size: 1.5rem;
  font-style: italic;
}

.u-footnote {
  font-size: 1rem;
}

/*
------------------------------
TOOLTIPS
------------------------------
*/

#tooltip {
  position: absolute;
  display: none;

  top: 0;
  left: 0;

  z-index: 999999;

  padding: 5px 10px;

  background: var(--theme-tooltip-background);
  color: var(--theme-tooltip-font-color);

  font-family: var(--theme-primary-font);
  font-size: 1rem;

  border-radius: 5px;
  white-space: nowrap;
}

#tooltip.right::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;

  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: var(--theme-tooltip-font-color) transparent transparent transparent;
}

#tooltip.left::before {
  content: "";
  position: absolute;

  top: 0;
  right: 0;

  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent var(--theme-tooltip-font-color) transparent transparent;
}

/*
------------------------------
PLACEHOLDER
------------------------------
*/

.placeholder {
  --size: 20px;
  --width: 3px;
  --color: var(--theme-red-accent-color);

  background:
    linear-gradient(
        var(--color) var(--size),
        transparent 0 calc(100% - var(--size)),
        var(--color) 0
      )
      0 0 / var(--width) 100%,
    linear-gradient(
        var(--color) var(--size),
        transparent 0 calc(100% - var(--size)),
        var(--color) 0
      )
      100% 0 / var(--width) 100%,
    linear-gradient(
        to right,
        var(--color) var(--size),
        transparent 0 calc(100% - var(--size)),
        var(--color) 0
      )
      0 0 / 100% var(--width),
    linear-gradient(
        to right,
        var(--color) var(--size),
        transparent 0 calc(100% - var(--size)),
        var(--color) 0
      )
      0 100% / 100% var(--width);

  background-repeat: no-repeat;

  display: none;
  margin: 80px 5%;
  padding: 10px;
}

.placeholder__hint {
  padding: 20px;
  text-align: center;
  font-size: 1rem;
  color: black;
  background: rgba(0, 0, 0, 0.2);
}

.placeholder__hint img {
  display: block;
  margin: 10px auto;
  width: 150px;
  opacity: 0.5;
}