@import url("fs.css");

:root {
  --bg-opacity: 0.8;
  --nav-height: 10vh;
  --fg-personaris: #b31c18;
}

body{
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  background-color: var(--bs-light-rgb)
}

a {
  color: var(--fg-personaris);
  text-decoration: none;
}
/* Base: collapsed navbar = 3 rows */
.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
  
.navbar:has(.navbar-toggler[aria-expanded="true"]) {
  background-color: rgba(var(--bs-light-rgb), 1) !important;
  border-bottom: 1px solid #ddd;
}

.navbar-toggler[aria-expanded="true"] {
  background-color: #fff;
}

footer .bg-light {
  --bs-bg-opacity: var(--bg-opacity);
}

footer a {
  color: inherit;
  text-decoration: none;
}

/*
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
*/

/* Fullscreen background only on md */
@media (min-width: 768px) {
  .navbar-nav .nav-item {
    flex: 0 0 33.333%; /* 3 items per row */
    text-align: center;
    margin-right: 0 !important;
  }
  
  .topnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    --bs-bg-opacity: var(--bg-opacity);
  }
    
  #scroll-container {
    width: 100%;
    height: 100%; 
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  
  .panel {
    position: absolute;
    will-change: transform;
    height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	position: fixed;
	overflow-y: auto;
  }
  
  .panel-content {
    margin-top: calc(var(--nav-height) + 4vh);
    max-width: 100%;
    max-height: 100%;
    --bs-bg-opacity: var(--bg-opacity);
  }
  
  .has-promo {
    position: absolute;
  }
  
  .promo-strip {
    position: absolute;
    bottom: -25vh;
    height: 25vh;
    width: 100vw;
    background: #ff0;
  }

  .scroll-helper {
    position: fixed;
    bottom: 9rem;
    left: 50%;
    padding: 0.8rem;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    transform: translate(-50%, 0);
    text-transform: lowercase;
    --bs-bg-opacity: var(--bg-opacity);
    overflow: visible;
    z-index: 999;
  }
  
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }
}


/* min lg */
@media (min-width: 992px) {
  .navbar-nav {
    flex-wrap: nowrap;
  }

  .navbar-nav .nav-item {
    flex: 0 0 auto; /* natural width */
  }
  
  .topnav {
    height: var(--nav-height);
  }
  
  .panel-content {
    max-width: 80%;
    max-height: 80%;
  }
}

/* min xl */
@media (min-width: 1200px) {
  .panel-content {
    max-width: 70%;
    max-height: 70%;
  }      
}

/* min xxl */
@media (min-width: 1400px) {
  .panel-content {
    max-width: 60%;
    max-height: 60%;
  }      
}

/* On small screens: normal layout */
@media (max-width: 767.98px) {
  .container {
    overflow: auto;
  }
  
  #scroll-container {
    position: relative;
    width: 100vw;
    height: 90vh;
    overflow: hidden;    
  }
  
  .panel {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;

  }

  .panel-content {
    margin-top: 1rem;
    position: static;
    color: inherit;
    text-shadow: none;
    padding: 2rem 0;
    --bs-bg-opacity: var(--bg-opacity);
  }

  .content {
  	padding: 2vw;
	background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)) !important;
  }

  #panel-2 .content {
  	padding: auto !important;
	background-color: auto !important;
  }
  
  .scroll-helper {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    padding: 0.8rem;
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    transform: translate(-50%, 0);
    text-transform: lowercase;
    --bs-bg-opacity: var(--bg-opacity);
    overflow: visible;
    z-index: 999;
  }
  
  footer {
    width: 100%;
    z-index: 100;
  }
  
  footer a {
    display: block;
  }
  
  footer .container {
    padding-top: 1rem!important;
  }
}

/* Startseite: alle Fließtext-Elemente in den Leistungsboxen vereinheitlichen */
#scroll-container .panel .panel-content p,
#scroll-container .panel .panel-content li,
#scroll-container .panel .panel-content address,
#scroll-container .panel .panel-content .content,
#scroll-container .panel .panel-content .text {
  font-size: 1.5rem !important;
  line-height: 1.5 !important;
}

/* ==========================================================
   Unternehmensseiten auf Mobilgeräten:
   Der lange Text bleibt im weißen Feld und ist dort scrollbar.
   Gilt für Ressourcen / Panels: 2, 6, 7, 20 und 21.
   ========================================================== */

@media (max-width: 767.98px) {
  /* Hintergrund-Panels auf die sichtbare Bildschirmhöhe begrenzen */
  #panel-2,
  #panel-6,
  #panel-7,
  #panel-20,
  #panel-21 {
    height: 100dvh;
    overflow: hidden;
  }

  /* Das weiße Textfeld innerhalb der jeweiligen Seite scrollbar machen */
  #panel-2 .panel-content .content,
  #panel-6 .panel-content .content,
  #panel-7 .panel-content .content,
  #panel-20 .panel-content .content,
  #panel-21 .panel-content .content,
  #panel-2 .panel-content .text,
  #panel-6 .panel-content .text,
  #panel-7 .panel-content .text,
  #panel-20 .panel-content .text,
  #panel-21 .panel-content .text {
    max-height: calc(100dvh - 12rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================
   „Über Personaris“ – Grounding Page
   Gilt ausschließlich innerhalb von:
   <div class="grounding-page"> ... </div>
   ========================================================== */

/* Allgemeiner Inhaltsbereich */
.grounding-page {
  max-width: 100%;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Schutz gegen zu lange Wörter, E-Mail-Adressen und URLs */
.grounding-page h1,
.grounding-page h2,
.grounding-page h3,
.grounding-page p,
.grounding-page li,
.grounding-page a,
.grounding-page th,
.grounding-page td {
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Überschriften-Abstände */
.grounding-page h1 {
  margin-bottom: 1.5rem;
}

.grounding-page h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.grounding-page h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Text- und Listen-Abstände */
.grounding-page p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.grounding-page ul,
.grounding-page ol {
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.grounding-page li {
  margin-bottom: 0.75rem;
}

/* Fakten-Tabelle auf Desktop und Tablet */
.grounding-page table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: inherit;
}

.grounding-page th,
.grounding-page td {
  padding: 0.75rem;
  vertical-align: top;
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.grounding-page th {
  width: 32%;
  font-weight: 700;
}

/* Smartphone:
   Die Tabellenbezeichnung steht über dem jeweiligen Inhalt,
   damit die Tabelle nicht zu breit wird. */
@media (max-width: 767.98px) {
  .grounding-page th,
  .grounding-page td {
    display: block;
    width: 100%;
  }

  .grounding-page th {
    padding-bottom: 0.25rem;
    border-bottom: 0;
  }

  .grounding-page td {
    padding-top: 0.25rem;
  }
}

/* ==========================================================
   Ressource 20: Motivation
   Gilt nur für <section id="panel-20">
   ========================================================== */

#panel-20 .motivation {
  max-width: 100%;
  font-size: 18px;
  line-height: 1.32;
  text-align: left;
}

#panel-20 .motivation h1 {
  margin: 0 0 2rem;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
}

#panel-20 .motivation h2 {
  margin: 0 0 2rem;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

#panel-20 .motivation p {
  margin: 0 0 2rem;
  text-align: left;
}

#panel-20 .motivation h2 + p {
  margin-top: 0;
}