@font-face {
  font-family: "Camera";
  src: url("../fonts/ABCCamera-Regular-Trial.woff") format("woff")
}

@font-face {
  font-family: "CameraPlain";
  src: url("../fonts/ABCCameraPlain-Regular-Trial.woff") format("woff")
}

h1 {
  font-family: var(--font-family-primary);
}

iframe {
  width: 100%;
  height: 100vh;
  min-height: 800px;
}

a {
  text-decoration: none;
}

:root {
  --clr-accent-400: rgba(112, 30, 247, 1);

  --clr-neutral-100: rgba(255, 255, 255, 1);

  --clr-primary-200: rgba(0, 49, 119, 1);

  --clr-background-300: rgba(217, 228, 233, 1);

  --radius-box: 16px;

  --ff-primary: "Camera", Arial, sans-serif;
  --ff-secondary: "CameraPlain", Arial, sans-serif;
  
  --ff-heading: var(--ff-primary);
  --ff-body: var(--ff-secondary);

  --fw-regular: 400;
  --fw-bold: 500;

  --fs-100: 16px;
  --fs-150: 18px;
  --fs-200: 22px;
  --fs-300: 24px;
  --fs-400: 28px;
  --fs-500: 30px;
  --fs-600: 40px;
  --fs-650: 44px;
  --fs-675: 48px;
  --fs-700: 80px;
  --fs-800: 100px;
  --fs-900: 150px;
  --fs-950: 160px;

  --fs-body: var(--fs-200);
  --fs-heading:var(--fs-650);
  --fs-button:var(--fs-150);
  --fs-icons:var(--fs-700);
  --fs-nav:var(--fs-500);
  --fs-footer:var(--fs-100);
  --fs-title:var(--fs-650);
  --fs-number-text:var(--fs-300);
  --fs-headings: var(--fs-500)
}

@media (min-width:50em) {
  :root {
    --fs-700: 120px;
    --fs-300: 32px
  }
}

@media (min-width: 91em) {
  :root {
    --fs-100: 28px;
    --fs-150: 28px;
    --fs-200: 32px;
    --fs-300: 48px;
    --fs-500: 40px;
    --fs-650: 100px;
    --fs-700: 160px;

  }
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Ultility Classes*/

.letters {
  margin-right: 2em;
  margin-top: 3em;
}

@media (max-width: 1100px) {
  .letters {
    display: none;
  }
}

.text-primary-200 {
  color: var(--clr-primary-200);
  font-family: var(--ff-body);
  word-wrap: break-word;
  max-width: 1046px;
}

.text-primary-300{
  color: var(--clr-primary-200);
  font-family: var(--ff-body);
  word-wrap: break-word;
  max-width: 1800px;
}

.text-heading-400 {
  color: var(--clr-accent-400);
  font-family: var(--ff-heading);
}

.bg-primary-200 {
  background-color: var(--clr-primary-200);

}

.bg-heading-400 {
  background-color: var(--clr-accent-400);

}

.fs-primary-heading {
  font-size: var(--fs-heading);
}

.fs-title {
  font-size: var(--fs-title);
}

.fs-body{
  font-size: var(--fs-body);
}

.headertext {
  font-size: var(--fs-300);
  font-weight: bold;
}

.Impress {
  font-family: var(--ff-heading);
  font-weight: bold;
  color: var(--clr-primary-200);
}

.fs-icons {
  font-size: var(--fs-icons);
}

.fs-number-text {
  font-size: var(--fs-number-text);
  max-width: 10vh;
}

.heading {
  font-size: var(--fs-headings);
  margin-top: 1em;

}


/* container */

.container1 {
  --max-width: 1900px;
  --padding: 0.5rem;

  width: min(var(--max-width), 100% - (var(--padding)*2));
  margin-inline: auto;
  margin-bottom: 1px;
}

.containerImpress {
  --max-width: 1900px;
  --padding: 0.5rem;

  width: min(var(--max-width), 100% - (var(--padding)*2));
  margin-inline: auto;
  margin-bottom: 1px;
  padding: 1em;
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.21);
  border-radius: var(--radius-box);
}

/* Legal pages (Impressum / Datenschutz / Rechtliches) */
.containerImpress h1 {
  font-family: var(--ff-heading);
  font-weight: bold;
  color: var(--clr-primary-200);
  font-size: var(--fs-title);
  margin-block: 1em;
}

.containerImpress p {
  font-size: var(--fs-body);
  font-family: var(--ff-body);
  color: var(--clr-primary-200);
  word-wrap: break-word;
  max-width: 1800px;
}

/* Responsible-party contact block: tight, not italic */
.containerImpress address {
  font-style: normal;
}

.containerImpress address p {
  margin-bottom: 0;
}

/* Long-form legal text: breathing room between paragraphs */
.containerImpress.legal-text > p,
.containerImpress.legal-text > address {
  margin-bottom: 5%;
}

/* Separator between logical groups (e.g. in the imprint) */
.containerImpress .section-gap {
  margin-bottom: 3em;
}

/* Stacks its (in-flow) children with a uniform gap — the absolutely
   positioned .branch5 decoration is out of flow and unaffected. Mirrors the
   bot grid's .parent gap. */
.stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.container2 {
  --max-width: 1900px;
  --padding: 0.5rem;

  width: min(var(--max-width), 100% - (var(--padding)*2));
  background-color: var(--clr-background-300);
  margin-inline: auto;
  border-radius: var(--radius-box);
  padding: 1rem;
}

.container3 {
  --max-width: 1900px;
  --padding: 0.5rem;

  width: min(var(--max-width), 100% - (var(--padding)*2));
  background-color: var(--clr-background-300);
  margin-inline: auto;
  border-radius: var(--radius-box);
  padding: 1rem;
}

.container4 {
  --max-width: 1900px;
  --padding: 0.5rem;

  width: min(var(--max-width), 100% - (var(--padding)*2));
  background-color: var(--clr-background-300);
  margin-inline: auto;
  border-radius: var(--radius-box);
  padding: 1rem;
}

.container5 {
  --max-width: 1900px;
  --padding: 0.5rem;

  width: min(var(--max-width), 100% - (var(--padding)*2));
  background-color: var(--clr-background-300);
  margin-inline: auto;
  border-radius: var(--radius-box);
  padding: 1rem;
}

/* Header row inside the bot grid — spans both columns, shares the grid gap. */
.grid-header {
  grid-column: 1 / -1;
  background-color: var(--clr-background-300);
  border-radius: var(--radius-box);
  padding: 1rem;
}

.container-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: var(--clr-background-300);
  height: 480px;
  border-radius: var(--radius-box);
  padding: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Subtle, dynamic purple glow on hover/focus (no layout shift — pure box-shadow). */
.container-grid:hover,
.container-grid:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px var(--clr-accent-400),
    0 8px 20px -12px rgba(112, 30, 247, 0.35),
    0 0 14px -6px rgba(112, 30, 247, 0.20);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .container-grid {
    transition: box-shadow 0.25s ease;
  }
  .container-grid:hover,
  .container-grid:focus-visible {
    transform: none;
  }
}

/* Description: clamp to 4 lines, ellipsis beyond — keeps every card aligned. */
.container-grid p {
  max-width: 586px;
  z-index: 90;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* The whole card is the link; pin the CTA to the bottom, sized to its content. */
.container-grid .button {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 50em) {
  .container-grid {
    max-height: 23em;
  }
}

@media (min-width: 90em) {
  .container1 {
      --max-width: 1900px;
      --padding: 0.5rem;
  
      width: min(var(--max-width), 100% - (var(--padding)*2));
      margin-bottom: 1px;
    }
  
    .container2 {
      height: 896px;
    }

    .container3 {

      height: 896px;

    }
    .container4 {

      height: 896px;

    }

    .container5 {
      height: 1151px;
    }
}

.even-columns {
  display: grid;
  gap: 1rem;
}

@media (min-width: 50em) {
  .even-columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}


@media (min-width: 50em) {
  .even-columns1 {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 900;
  }
}


.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.5rem;
}


.branch5 {
  position: absolute;
  top: 320px;
  right: 18.5%;
}

.botbranch1 {
  position: absolute;
  right: 50%;
  top: 722px;
}

.botbranch2 {
  position: absolute;
  right: 12.6%;
  top: 722px;
}

.botbranch3 {
  position: absolute;
  right: 50%;
  top: 1202px;
}

.botbranch4 {
  position: absolute;
  right: 12.6%;
  top: 1202px;
}

.botbranch5 {
  position: absolute;
  right: 50%;
  top: 1683px;
}

.botbranch6 {
  position: absolute;
  right: 12.6%;
  top: 1683px;
}

.botbranch7 {
  position: absolute;
  right: 50%;
  top: 2164px;
}

.botbranch8 {
  position: absolute;
  right: 12.6%;
  top: 2164px;
}


@media (max-width: 1920px) {
  .botbranch2 {
    position: absolute;
    right: 1%;
  }
  .botbranch4 {
    position: absolute;
    right: 1%;
  }

  .botbranch6 {
    position: absolute;
    right: 1%;
  }

  .botbranch8 {
    position: absolute;
    right: 1%;
  }
}

@media (max-width:90em) {
  .branch5 {
    display: none;
  }

  .botbranch1 {
    display: none;
  }

  .botbranch2 {
    display: none;
  }
  
  .botbranch3 {
    display: none;
  }

  .botbranch4 {
    display: none;
  }

  .botbranch5 {
    display: none;
  }

  .botbranch6 {
    display: none;
  }

  .botbranch7 {
    display: none;
  }

  .botbranch8 {
    display: none;
  }
}

@media (min-width: 92em) {

  .columns4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    z-index: 1;
  }

  .gridcontainer2 {
    margin: 5em;
  }
}

.gridcontainer2 {
  display: flex;
  align-items: center;
}


/*footer*/


.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Breathing room between page content and the page footer (not the card footer). */
body > footer {
  margin-top: 2rem;
}

.footernav {
  color: var(--clr-primary-200);
  text-decoration: none;
  list-style: none;
  font-size: var(--fs-footer);
  font-family: var(--ff-body);
}

.footernav li {
  margin-left: 4%;
}

.footernav a {
  text-decoration: none;
  color: var(--clr-primary-200);
}

.version {
  margin-top: 0.75em;
  text-align: center;
  font-family: var(--ff-body);
  font-size: var(--fs-footer);
  color: var(--clr-primary-200);
  opacity: 0.55;
}

.buttonmargintop {
  margin-bottom: 3em;
}

.buttonmargintop1 {
  margin-bottom: 3em;
}

.buttonmargintop2 {
  margin-bottom: 3em;
}

.parent {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 40em) {

  .footernav {
    display: flex;
  }

  .parent {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .buttonmargintop {
    margin-bottom: 23em;
  }

  .buttonmargintop1 {
    margin-bottom: 5em;
  }
  
  .buttonmargintop2 {
    margin-bottom: 10em;
  }
}



/* button*/

.button {
  display: inline-flex;
  border: 0;
  border-radius: 100vmax;
  text-decoration: none;
  font-size: var(--fs-button);
  color: var(--clr-neutral-100);
  background-color: var(--clr-primary-200);
  font-family: var(--ff-body);
  box-shadow: 0 1em 1em -1em black;
  margin-bottom: 16px;
  max-width: 250px;
  max-height: 72px;
  align-items: center;
  padding: 1em 1.75em;
  z-index: 100;
}

.button:hover,
.button:focus-visible,
.buttonhead:hover,
.buttonhead:focus-visible,
.buttonfooter:hover,
.buttonfooter:focus-visible {
  background-color: var(--clr-accent-400);
}

.buttonhead[data-type="inverse"]:hover,
.buttonhead[data-type="inverse"]:focus-visible {
  background-color: var(--clr-accent-400);
  color: var(--clr-neutral-100);
}

.button[data-type="inverted"]:hover,
.button[data-type="inverted"]:focus-visible {
  background-color: var(--clr-accent-400);
  color: var(--clr-neutral-100);
}

.button[data-type="inverted"] {
  color: var(--clr-primary-200);
  background-color: var(--clr-neutral-100);
}

@media (min-width: 56em) {
  .button {
    display: inline-flex;
    cursor: pointer;
    text-decoration: none;
    border: 0;
    border-radius: 100vmax;
    padding: 1em 1.75em;
    font-size: var(--fs-button);
    color: var(--clr-neutral-100);
    box-shadow: 0 1em 1em -1em black;
    margin-bottom: 16px;
    margin-top: 16px;    
  }
}

.buttonhead {
  display: inline-flex;
  border: 0;
  border-radius: 100vmax;
  text-decoration: none;
  font-size: var(--fs-button);
  color: var(--clr-neutral-100);
  background-color: var(--clr-primary-200);
  font-family: var(--ff-body);
  box-shadow: 0 1em 1em -1em var(--clr-primary-200);
  margin-bottom: 16px;
  max-width: 250px;
  max-height: 72px;
  align-items: center;
  padding: 1em 1.75em;
}

.buttonhead[data-type="inverse"] {
  color: var(--clr-primary-200);
  background-color: var(--clr-background-300);
}

@media (min-width: 56em) {
  .buttonhead {
    display: inline-flex;
    cursor: pointer;
    text-decoration: none;
    border: 0;
    border-radius: 100vmax;
    padding: 1em 1.75em;
    font-size: var(--fs-button);
    color: var(--clr-neutral-100);
    box-shadow: 0 1em 1em -1em var(--clr-primary-900);
    margin-bottom: 16px;
    margin-top: 16px;
    
  }
}

/* Icon buttons: fixed square -> always a perfect circle, regardless of icon. */
.buttonfooter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--clr-neutral-100);
  background-color: var(--clr-primary-200);
  box-shadow: 0 1em 1em -1em var(--clr-primary-200);
  cursor: pointer;
}

/* Fixed icon height, width auto -> no distortion across differently-sized SVGs. */
.buttonfooter img {
  width: auto;
  height: 18px;
}

/* ------------------------------------------------------------------ */
/* Bot detail card                                                    */
/* ------------------------------------------------------------------ */

.card {
  --max-width: 1900px;
  --padding: 0.5rem;

  position: relative;
  width: min(var(--max-width), 100% - (var(--padding) * 2));
  min-height: 817px;
  margin-inline: auto;
  margin-bottom: 1px;
  padding: 2.5em;
  background-color: var(--clr-background-300);
  border-radius: var(--radius-box);
  overflow: hidden;
}

/* Decorative branch, sits behind the content */
.card .branch {
  position: absolute;
  top: 120px;
  right: 5vw;
  width: 548px;
  z-index: 0;
}

/* Keep all readable content above the branch and within the left half */
.card > header,
.card > .card-body,
.card > footer {
  position: relative;
  z-index: 1;
  max-width: 50vw;
}

.card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  max-width: none;
}

.card header h2 {
  font-family: var(--ff-body);
  font-size: var(--fs-500);
  color: var(--clr-primary-200);
  max-width: 50vw;
}

.card .badge {
  font-family: var(--ff-heading);
  font-size: var(--fs-icons);
  line-height: 1;
  color: var(--clr-primary-200);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 2.5em;
}

.card-body p {
  font-family: var(--ff-body);
  font-size: var(--fs-150);
  color: var(--clr-primary-200);
}

.card > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin-top: 3em;
}

.card footer .button {
  margin-bottom: 0;
}

@media (max-width: 1150px) {
  .card .branch {
    display: none;
  }

  .card > header,
  .card header h2,
  .card > .card-body,
  .card > footer {
    max-width: 75vw;
  }
}