/* ==========================================================================
   1. SCHRIFTARTEN & GLOBALE STYLES
   ========================================================================== */
@font-face {
  font-family: 'BebasNeue';
  src: url('assets/fonts/BebasNeue-Regular.otf') format('opentype'); 
}

.text-wrapper-6, .text-wrapper-9, .text-wrapper-8, .text-wrapper-21 {
  font-family: 'BebasNeue', sans-serif !important;
}

html {
  scroll-behavior: smooth; /* Aktiviert das flüssige Scrollen für die Links */
}

.screen {
  background-color: #f5f4f1;
  overflow: hidden;
  width: 100%;
  min-width: 1440px;
  min-height: 1921px;
  position: relative;
}

/* ==========================================================================
   2. HERO BILDER (Oben)
   ========================================================================== */
.screen .group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 684px;
  display: flex;
  overflow: hidden;
}
.screen .image { width: 50%; height: 100%; object-fit: cover; }
.screen .img { width: 50%; height: 100%; object-fit: cover; }

/* ==========================================================================
   3. WEISSE RASTER-BOXEN (Zentriert)
   ========================================================================== */
.screen .rectangle, .screen .rectangle-2, .screen .rectangle-3, .screen .rectangle-4,
.screen .rectangle-5, .screen .rectangle-6, .screen .rectangle-7, .screen .rectangle-8,
.screen .rectangle-9, .screen .rectangle-10, .screen .rectangle-11, .screen .div {
  position: absolute;
  width: 453px;
  background-color: #ffffff;
  border-radius: 20px;
}

/* REIHE 1: VORTEILE */
.screen .rectangle    { top: 763px; left: calc(50% - 700px); height: 122px; }
.screen .rectangle-10 { top: 763px; left: calc(50% - 226px); height: 122px; }
.screen .rectangle-11 { top: 763px; left: calc(50% + 247px); height: 122px; }

/* REIHEN 2-4: BRANCHEN */
.screen .div         { top: 1070px; left: calc(50% - 700px); height: 153px; }
.screen .rectangle-2 { top: 1243px; left: calc(50% - 700px); height: 153px; }
.screen .rectangle-3 { top: 1416px; left: calc(50% - 700px); height: 153px; }

.screen .rectangle-4 { top: 1070px; left: calc(50% - 226px); height: 153px; }
.screen .rectangle-5 { top: 1243px; left: calc(50% - 226px); height: 153px; }
.screen .rectangle-6 { top: 1416px; left: calc(50% - 226px); height: 153px; }

.screen .rectangle-7 { top: 1070px; left: calc(50% + 247px); height: 153px; }
.screen .rectangle-8 { top: 1243px; left: calc(50% + 247px); height: 153px; }
.screen .rectangle-9 { top: 1416px; left: calc(50% + 247px); height: 153px; }

/* ==========================================================================
   4. VORTEILE ICONS STYLING
   ========================================================================== */
.screen .vorteil-icon-1, .screen .vorteil-icon-2, .screen .vorteil-icon-3 {
  position: absolute;
  top: 783px;
  width: 32px;
  height: 32px;
}
.screen .vorteil-icon-1 { left: calc(50% - 680px); }
.screen .vorteil-icon-2 { left: calc(50% - 206px); }
.screen .vorteil-icon-3 { left: calc(50% + 267px); }

/* ==========================================================================
   5. TEXTE UND ÜBERSCHRIFTEN (Branchen & Vorteile)
   ========================================================================== */
.screen [class^="text-wrapper-1"], .screen .text-wrapper-20 {
  position: absolute;
  width: 413px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #666666;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal !important;
}

.screen .text-wrapper-10 { position: absolute; top: 835px; left: calc(50% - 680px); font-family: "Inter-Medium", Helvetica; font-weight: 500; font-size: 20px; color: #242424; }
.screen .text-wrapper-11 { position: absolute; top: 835px; left: calc(50% - 206px); font-family: "Inter-Medium", Helvetica; font-weight: 500; font-size: 20px; color: #242424; }
.screen .premium-qualit-t { position: absolute; top: 835px; left: calc(50% + 267px); font-family: "Inter-Medium", Helvetica; font-weight: 500; font-size: 20px; color: #242424; }

.screen .hotellerie-spa, .screen .imkereien, .screen .firmenkunden { position: absolute; left: calc(50% - 660px); font-family: "Inter-Medium", Helvetica; font-weight: 500; font-size: 20px; color: #242424; }
.screen .gastronomie, .screen .feinkost-le, .screen .konditoreien { position: absolute; left: calc(50% - 186px); font-family: "Inter-Medium", Helvetica; font-weight: 500; font-size: 20px; color: #242424; }
.screen .kosmetik-beauty, .screen .getr-nke-weinhandel, .screen .souvenirs-mode { position: absolute; left: calc(50% + 287px); font-family: "Inter-Medium", Helvetica; font-weight: 500; font-size: 20px; color: #242424; }

.screen .hotellerie-spa, .screen .gastronomie, .screen .kosmetik-beauty { top: 1130px; }
.screen .imkereien, .screen .feinkost-le, .screen .getr-nke-weinhandel { top: 1303px; }
.screen .firmenkunden, .screen .konditoreien, .screen .souvenirs-mode { top: 1476px; }

.screen .text-wrapper-12, .screen .text-wrapper-15, .screen .text-wrapper-18 { left: calc(50% - 660px); }
.screen .text-wrapper-13, .screen .text-wrapper-16, .screen .text-wrapper-19 { left: calc(50% - 186px); }
.screen .text-wrapper-14, .screen .text-wrapper-17, .screen .text-wrapper-20 { left: calc(50% + 287px); }

.screen .text-wrapper-12, .screen .text-wrapper-13, .screen .text-wrapper-14 { top: 1165px; }
.screen .text-wrapper-15, .screen .text-wrapper-16, .screen .text-wrapper-17 { top: 1338px; }
.screen .text-wrapper-18, .screen .text-wrapper-19, .screen .text-wrapper-20 { top: 1511px; }

/* ==========================================================================
   6. NUMMERN-KAPSELN (Erste Variante: Nahtlos verschmolzen)
   ========================================================================== */
[class^="b-box-"] {
  position: absolute;
  display: flex !important;
  gap: 0;
  background-color: #e0e0e1; /* Farbe des rechten "09"-Teils (Grau) */
  border-radius: 14px;
  overflow: hidden;
  height: 32px;
}

.circle-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 13px;
}

.color-a { 
  background-color: #009de0; /* Farbe des linken Teils (Blau) */
  color: #ffffff;
  border-radius: 50%; 
}

.color-b { 
  background-color: #e0e0e1; 
  color: #242424;
}

/* Spalten-Ausrichtung für die Kapseln */
.b-box-1 { left: calc(50% - 680px); }
.b-box-2 { left: calc(50% - 206px); }
.b-box-3 { left: calc(50% + 267px); }

/* Reihen-Ausrichtung für die Kapseln */
.r-1 { top: 1090px; }
.r-2 { top: 1263px; }
.r-3 { top: 1436px; }

/* ==========================================================================
   7. SLOGANS, NAVIGATION LINKS & HOVER-EFFEKTE
   ========================================================================== */
.screen .text-wrapper { top: 464px; left: calc(50% - 326px); width: 652px; text-align: center; position: absolute; font-family: "Inter-Regular", Helvetica; color: #242424; font-size: 16px; }
.screen .p { top: 1719px; left: calc(50% - 151px); text-align: center; white-space: nowrap; position: absolute; font-family: "Inter-Regular", Helvetica; color: #242424; font-size: 16px; }
.screen .text-wrapper-6 { position: absolute; top: 290px; left: calc(50% - 404px); width: 808px; font-size: 64px; text-align: center; color: #242424; }
.screen .text-wrapper-8 { position: absolute; top: 985px; left: calc(50% - 211px); font-size: 40px; white-space: nowrap; color: #242424; }
.screen .text-wrapper-9 { position: absolute; top: 683px; left: calc(50% - 139px); font-size: 40px; white-space: nowrap; color: #242424; }
.screen .text-wrapper-21 { position: absolute; top: 1630px; left: calc(50% - 250px); width: 500px; font-size: 32px; text-align: center; color: #242424; }

/* Menü-Links dauerhaft im originalen Button-Blau */
.screen .text-wrapper-2, .screen .text-wrapper-3, .screen .text-wrapper-4, .screen .text-wrapper-5 {
  position: absolute;
  top: 71px;
  font-family: "Inter-Regular", Helvetica;
  font-size: 12px;
  text-align: center;
  color: #009de0 !important;
  text-decoration: none;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.screen .text-wrapper-2 { left: calc(50% - 157px); }
.screen .text-wrapper-3 { left: calc(50% - 72px); }
.screen .text-wrapper-4 { left: calc(50% + 38px); }
.screen .text-wrapper-5 { left: calc(50% + 126px); }

/* Hover für das obere Menü */
.screen .text-wrapper-2:hover, .screen .text-wrapper-3:hover, .screen .text-wrapper-4:hover, .screen .text-wrapper-5:hover {
  color: #0082ba !important;   /* Wird beim Drüberfahren dunkler */
  transform: translateY(-1px);
}

/* ==========================================================================
   8. MAIN BUTTONS STYLING & HOVER
   ========================================================================== */
.screen .frame, .screen .frame-2 {
  display: inline-flex;
  gap: 101px;
  padding: 7px 13px 7px 150px;
  background-color: #009de0;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  position: absolute;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.screen .frame { top: 542px; left: calc(50% - 217px); }
.screen .frame-2 { top: 1778px; left: calc(50% - 188px); }

.screen .frame:hover, .screen .frame-2:hover {
  background-color: #0082ba;
  box-shadow: 0 4px 15px rgba(0, 157, 224, 0.3);
  transform: scale(1.02);
}

.screen .text-wrapper-7 {
  position: relative;
  width: fit-content;
  font-family: "Inter-Regular", Helvetica;
  color: #f5f4f1 !important; /* Bleibt weiß */
  font-size: 16px;
  white-space: nowrap;
}

.screen .arrow-wrapper {
  position: relative;
  width: 27px;
  height: 27px;
  background-color: #f5f4f1;
  border-radius: 13.5px;
}

.screen .arrow {
  position: absolute;
  top: 7px;
  left: 8px;
  width: 11px;
  height: 15px;
}

/* Verhindert, dass die neuen SEO-Überschriften ihr Design verändern */
h1.text-wrapper-6, 
h2.text-wrapper-8, 
h2.text-wrapper-9 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* ==========================================================================
   9. MOBILE OPTIMIERUNG (RESPONSIVE DESIGN)
   ========================================================================== */

/* Wenn der Bildschirm kleiner als 1100 Pixel ist (Tablets & Handys) */
@media screen and (max-width: 1100px) {
  
  html, body {
    overflow-x: hidden; /* Verhindert unschönes seitliches Wischen */
  }

  .screen {
    min-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  /* 1. HERO BILDER (Werden untereinander oder kleiner dargestellt) */
  .screen .group {
    position: relative !important;
    width: 100% !important;
    height: 350px !important;
    margin-bottom: 30px;
  }

  /* 2. NAVIGATION & TEXTE (Werden flexibel zentriert) */
  .screen .text-wrapper-2, .screen .text-wrapper-3, 
  .screen .text-wrapper-4, .screen .text-wrapper-5 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 10px 15px !important;
    display: inline-block;
  }
  
  /* Menü-Container-Ersatz, damit die Links nebeneinander stehen */
  .screen .text-wrapper-6 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    font-size: 32px !important; /* Kleinere Schrift fürs Handy */
    margin: 40px 0 20px 0 !important;
  }

  .screen .text-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 20px 0 !important;
  }

  /* 3. BUTTONS (Werden zentriert untereinander platziert) */
  .screen .frame, .screen .frame-2 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 350px;
    padding: 12px 20px !important;
    margin: 15px 0 !important;
    box-sizing: border-box;
    justify-content: space-between;
  }

  /* Sektions-Überschriften */
  .screen .text-wrapper-8, .screen .text-wrapper-9 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    font-size: 28px !important;
    margin: 50px 0 20px 0 !important;
    text-align: center;
    white-space: normal !important;
  }

  /* 4. DAS BOXEN-RASTER (Absolute Positionen werden gelöscht) */
  .screen .rectangle, .screen .rectangle-2, .screen .rectangle-3, .screen .rectangle-4,
  .screen .rectangle-5, .screen .rectangle-6, .screen .rectangle-7, .screen .rectangle-8,
  .screen .rectangle-9, .screen .rectangle-10, .screen .rectangle-11, .screen .div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 450px;
    height: auto !important; /* Boxen wachsen flexibel mit dem Text mit */
    margin: 15px 0 !important;
    padding: 65px 20px 20px 20px !important; /* Platz für Nummern/Icons oben */
    display: block !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }

  /* 5. INHALTE IN DEN BOXEN (Nummern, Titel, Texte flexibel machen) */
  .screen .text-wrapper-10, .screen .text-wrapper-11, .screen .premium-qualit-t,
  .screen .hotellerie-spa, .screen .imkereien, .screen .firmenkunden,
  .screen .gastronomie, .screen .feinkost-le, .screen .konditoreien,
  .screen .kosmetik-beauty, .screen .getr-nke-weinhandel, .screen .souvenirs-mode {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-bottom: 10px !important;
    white-space: normal !important;
  }

  .screen [class^="text-wrapper-1"], .screen .text-wrapper-20 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
  }

  /* Vorteile Icons */
  .screen .vorteil-icon-1, .screen .vorteil-icon-2, .screen .vorteil-icon-3 {
    top: 20px !important;
    left: 20px !important;
  }

  /* Branchen Kapsel-Nummern */
  [class^="b-box-"] {
    top: 20px !important;
    left: 20px !important;
  }

  /* Slogans ganz unten */
  .screen .text-wrapper-21 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    font-size: 22px !important;
    margin: 40px 0 !important;
  }

  .screen .p {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    white-space: normal !important;
    margin-bottom: 20px !important;
  }

  /* Dekorative Figma-Reste auf dem Handy verstecken, damit sie nicht stören */
  .screen .group-2, .screen .group-3, .screen .group-4 {
    display: none !important;
  }
}