@import url('https://fonts.googleapis.com/css2?family=SUSE:wght@400;700&display=swap');

:root {
  --mint: rgb(220, 238, 231);
  --mint-dark: rgb(114, 186, 159);
  --lilac: rgb(118, 109, 171);
  --dark: rgb(50, 45, 78);
  --accent: rgb(255, 200, 87);
  --light-gray: rgb(248, 248, 248);
  --muted: rgb(211, 211, 211);
  --font: 'Suse', sans-serif;
  --header-height: 72px;  /* Höhe des Menüs */
  --progressbar-height: 6px; /* Höhe des Fortschrittsbalkens */
  --max-breite:1600px;
}

/************************************
  Allgemeine Basis-Stile
************************************/
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background-color: var(--mint);
  color: var(--dark);
  scroll-behavior: smooth;
}

h1, h2, h3, h4, p { color: var(--dark); }

h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; margin: 2rem 0; }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin: 0 0.5rem 0; }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); margin: 0.5rem; }

p, ul { font-size: clamp(0.95rem, 2vw, 1.3rem); margin 0 1rem; }

section { padding: 4rem 2rem; max-width: var(--max-breite); margin: 0 auto;}

section {
  scroll-margin-top: calc(var(--header-height) + var(--progressbar-height));
}

/* Wrapper für Sections, für Seitenbreiten-Ausnahme */
.content-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }


/************************************
  Header & Navigation
************************************/
.site-header {
  background-color: var(--dark);
  color: rgb(220, 238, 231);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo { display:flex; align-items:center; }
.logo-img { height: 40px; width: auto; display: block; }

.main-nav { display:flex; align-items:center; gap:1rem; }
.menu { display:flex; gap:1rem; list-style:none; margin:0; padding:0; }
.menu li a { color: rgb(220, 238, 231); text-decoration:none; font-weight:bold; white-space:nowrap; }
.menu li a:hover { text-decoration: underline; }

/************************************
   Fester CTA-Button links oben
************************************/

.fixed-cta-contact {
  position: fixed;
  left: 10px;
  top: 80px;
  background-color: var(--accent);
  color: var(--dark);
  padding: 1rem 1.5rem;
  font-weight: bold;
  font-size: 1.5rem;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  z-index: 10000;
  transition: all 0.3s ease;
}
.fixed-cta-contact:hover { background-color: #FFB73B; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.2); }
@media (max-width:700px){ .fixed-cta-contact { padding:.75rem 1rem; font-size:.9rem; } }

/************************************
   Scroll-Fortschrittsbalken
************************************/

.scroll-progress-container {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: 100%;
  height: var(--progressbar-height);
  background-color: var(--light-gray);
  z-index: 999;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--muted);
  transition: width 0.1s ease-out;
}

/************************************
  Hamburger Menü (Mobile)
************************************/
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 24px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.menu-toggle span {
  display: block;
  height: 4px;
  width: 100%;
  background-color: rgb(220, 238, 231);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1){ transform:rotate(45deg); transform-origin:top left; }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform:rotate(-45deg); transform-origin:bottom left; }

/************************************
  Hero Section / Bilder
************************************/
.hero { text-align:center; padding:0rem 2rem; background-color: var(--mint); padding-bottom:12rem; position:relative; overflow:hidden; 
  max-width: var(--max-breite);
  margin: 0 auto; /* zentriert die Section */} 
.hero p { max-width:800px; margin:1rem auto; margin-top:0; text-align: justify; } 
.hero-content { display:flex; gap:2rem; align-items:flex-start; } 
.hero-text { flex:0 0 calc(50% - 1rem); } 
.hero-bereich { flex:0 0 calc(50% - 1rem); display:flex; justify-content:center; align-items:flex-start; min-height:300px; } 
.hero-image { width:100%; height:auto; max-height:calc(100vh - var(--header-height)); object-fit:contain; border-radius:12px; } 


/* --- Hero Header --- */
.hero-header {
  height: calc(100vh - var(--header-height));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 0 1rem;
}

/* Standard: große Seitenbilder sichtbar */
.hero-side-image {
  width: 15%;
  object-fit: contain;
}

/* Die kleinen Bilder neben H1 sind standardmäßig ausgeblendet */
.hero-title-row .hero-side-image {
  display: none;
}

/* Hero-Text zentriert */
.hero-text-center {
  text-align: center;
  max-width: 600px;
}

.hero-text-center h1,
.hero-text-center p {
  margin: 0.5rem 0;
}

/* --------------------------------------------------------- */
/*                MOBILE / SCHMALER BILDSCHIRM               */
/* --------------------------------------------------------- */
@media (max-width: 768px) {

  /* Große Seitenbilder AUSBLENDEN */
  .hero-header > .hero-side-image {
    display: none;
  }

  /* Kleine Bilder neben H1 EINBLENDEN + verkleinern */
  .hero-title-row .hero-side-image {
    display: inline-block;
    width: 20%;
    height: auto;
  }

  /* Titelzeile als zentrierte Reihe */
  .hero-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }
}

/* --------------------------------------------------------- */
/*                DESKTOP / BREITER BILDSCHIRM               */
/* --------------------------------------------------------- */
@media (min-width: 769px) {

  /* Kleine Bilder neben H1 ausblenden */
  .hero-title-row .hero-side-image {
    display: none;
  }

  /* Große Seitenbilder bleiben sichtbar (Standard) */
}




/* --- Responsive Anpassung --- */ 
@media (max-width: 1200px) { 
.hero-content { flex-direction: column; align-items: center; } 
.hero-bereich, .hero-text { flex: 0 0 100%; max-width: 90%; } 
.bike-icon { width: 70px; bottom: 1rem; right: 1rem; } }


/************************************
  Sektionen
************************************/
.product-section { background-color: #ffffff; width:100%; max-width:100%; margin:0; padding:4rem 0; }
.supermarkt-section { padding:4rem 0; }
.gemeinden-section { background-color: #ffffff; width:100%; max-width:100%; margin:0; padding:4rem 0; }
.sales-section { padding-top:4rem; }
.team-section { padding-top:4rem; }
.contact-section { padding-top:4rem; }

/************************************
  Tabelle
************************************/
/* Allgemeine Tabelle */
table.vergleich {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1.1rem;
    border-radius: 20px;
    overflow: hidden;
}

.vergleich td, .vergleich th {
    padding: 15px;
    vertical-align: middle;
    border-bottom: 1px solid #DDD;
}

.icon-row {
    background: var(--light-gray);
}

/* Icons in Zeile 0 */
.icon-cell img {
    width: 100px;
}

/* Erste Zelle für Dreieck fixieren */
.row-header td:first-child {
    width: 30px;      /* feste Breite */
    text-align: center;
    padding: 0;       /* optional: Abstand minimieren */
}

/* Dreieck */
.row-header td:first-child::before {
    content: '\25BC'; /* ▼ */
    display: inline-block;
    transition: transform 0.3s ease;
}

.row-header.open td:first-child::before {
    transform: rotate(-90deg);
}


/* Haken und X */
.check {
    color: #2ECC71;
    font-size: 1.5rem;
    text-align: center;
    vertical-align: middle;
    width: 60px;
}
.cross {
    color: #B03A2E;
    font-size: 1.5rem;
    text-align: center;
    vertical-align: middle;
    width: 60px;
}

/* Zeilen-Header */
.row-header {
    cursor: pointer;
    background: var(--light-gray);
    transition: background 0.2s;
}
.row-header:hover {
    background: #EAEAF0;
}

/* Ausklapptexte */
.row-text {
    display: none;
    background: #ffffff;
    text-align: left;
}
.row-text.visible {
    display: table-row;
}

/* Responsive */
@media (max-width: 700px) {
    table.vergleich td, table.vergleich th {
        font-size: 0.95rem;
        padding: 10px;
    }
    .icon-cell img {
        width: 40px;
    }
}

/************************************
  Radfahrer-Effekt
************************************/

/* Positionierung relativ für Bikes */
.product-section { position: relative; padding-bottom: 12rem; }
.bike-icon { position:absolute; bottom:0; width:100px; height:auto; pointer-events:none; will-change:transform,opacity; transition: transform .25s linear, opacity .3s ease; opacity:1; }
#bike-icon1 { left:0; }
#bike-icon2 { right:0; }

/************************************
  Produkt / Cards
************************************/
.product-section .buddy-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: stretch;
}

.buddy-card {
  background-color: var(--light-gray);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  text-align: center;
  display:flex;
  flex-direction:column;
  justify-content: flex-start; /* statt space-between */
  text-align: center;
}

.buddy-card h4 {
  min-height: 4rem;        /* sorgt für gleiche Startposition */
  display: flex;
  align-items: center;
  justify-content: center;
}

.buddy-card p { font-size: clamp(0.95rem, 2vw, 1.2rem); padding:0.5rem; flex-grow:1; text-align: justify; }

.buddy-card:hover { transform: translateY(-6px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

.buddy-card img { width:100%; height:180px; object-fit:cover; border-bottom-left-radius:16px; border-bottom-right-radius:16px; margin-top:auto; filter:grayscale(50%); transition:filter .4s ease; }
.buddy-card:hover img { filter: grayscale(0%); }

/************************************
  Supermarkt / Vorteile
************************************/
.supermarkt-bild { display:flex; justify-content:center; align-items:flex-start; width:100%; }
.vorteile-container { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; margin-top:2rem; }
.vorteil-card { flex:1 1 180px; background-color:var(--light-gray); padding:1rem; border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,0.1); text-align:center; transition: transform .3s ease, box-shadow .3s ease; }
.vorteil-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
.vorteil-card .material-icons { font-size:48px; color:var(--dark); margin-bottom:1rem; }

/************************************
  Sales / Cards
************************************/
.sales-section .sales-cards { grid-template-columns: repeat(3, 1fr); gap:2rem; }
.sales-section .sales-card { background-color:#ffffff; padding:1rem; border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1); }
.sales-section .sales-cards ul {
  text-align: left;
  padding-left: 1.2em;
  margin-left: 0;
}
.sales-section .sales-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: stretch;
}

.sales-card {
  background-color: var(--light-gray);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  text-align: center;
  display:flex;
  flex-direction:column;
  justify-content: flex-start; /* statt space-between */
  text-align: center;
}

.sales-card h4 {
  min-height: 4rem;        /* sorgt für gleiche Startposition */
  display: flex;
  align-items: center;
  justify-content: center;
}

sales-card ul {
  font-size: clamp(0.95rem, 2vw, 1.2rem); 
  margin-top: 0;
  padding-top: 0.5rem;
  text-align: left;
  flex-grow: 1;
}

/************************************
  Formulare / Buttons
************************************/
form { display:flex; flex-direction:column; gap:1rem; max-width:700px; margin:0 auto; }
input, textarea, select, button { padding:.75rem; border-radius:8px; border:1px solid #ccc; font-family:var(--font); }
button { background-color: var(--dark); color: rgb(220, 238, 231); cursor:pointer; font-weight:bold; }
button:hover { background-color: rgb(30,28,45); }

.form-group { margin-bottom:1.5rem; display:flex; flex-direction:column; }
label { font-weight:600; color:var(--dark); margin-bottom:.5rem; }
input:focus, select:focus, textarea:focus { border-color: var(--dark); box-shadow: 0 0 0 3px rgba(50,45,78,0.1); outline:none; }

.info-box { background-color: rgba(91,75,138,0.1); color:var(--dark); border-left:4px solid rgba(91,75,138,1); padding:1rem; border-radius:8px; margin-bottom:1.5rem; }
.hidden-field { display:none; }

.cta-button-contact { background-color: var(--dark); color:white; border:none; padding:1rem 2rem; border-radius:12px; font-size:1rem; cursor:pointer; display:block; margin:0 auto; transition: background-color .3s ease, transform .3s ease; }
.cta-button-contact:hover { background-color:#4A3E76; transform: translateY(-3px); }

/************************************
  Team / Profilbilder
************************************/
.team-container { display:flex; justify-content:space-around; flex-wrap:wrap; gap:1.5rem; margin-top:2rem; }
.team-member { display:flex; flex-direction:column; align-items:center; text-align:center; }
.team-placeholder { width:150px; height:150px; border-radius:50%; overflow:hidden; background-color:transparent; display:flex; align-items:center; justify-content:center; }
.team-placeholder img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/************************************
  Kontakt-Section (nochmal Styles)
************************************/
.contact-section { background-color: var(--light-gray); padding:4rem 1rem; border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,0.05); margin-top:3rem; }
.contact-section h2 { text-align:center; color:var(--dark); margin-bottom:1rem; }
.contact-section p { text-align:justify; text-align-last:left; max-width:700px; margin:0 auto 2rem; color:#444; }

/************************************
  CTA / Footer
************************************/
.cta-box-sales { background-color: var(--light-gray); border-radius:12px; padding:2rem; margin-top:3rem; text-align:center; box-shadow:0 4px 8px rgba(0,0,0,0.1); }
.cta-button-sales { display:inline-block; margin-top:1rem; padding:.75rem 1.5rem; background-color:var(--dark); color:#fff; text-decoration:none; font-weight:bold; border-radius:8px; transition: background-color .3s ease; }
.cta-button-sales:hover { background-color: rgb(30,28,45); }

/************************************
  Footer
************************************/
.site-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; background-color:var(--dark); color: rgb(220,238,231); padding:1.2rem 2rem; gap:1rem; font-size:clamp(.9rem,1.5vw,1.2rem); }
.footer-left a { color:inherit; text-decoration:none; font-weight:bold; }
.footer-left a:hover { text-decoration:underline; }
.footer-right { text-align:right; font-size:clamp(.6rem,.8vw,.75rem); max-width:60%; white-space:normal; line-height:1.2; }
.footer-right a { color:inherit; text-decoration:underline; }

/* Utility */
.center-text { text-align:center !important; text-align-last:center !important; }
.responsive-image { width:100%; height:auto; object-fit:contain; }

/* Responsives Verhalten */
@media (max-width: 1024px) {
  .sales-section .cards { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .cards { display:flex; flex-direction:column; align-items:center; gap:1rem; }
}

@media (max-width: 850px) {
  .team-container { display:flex; flex-direction:column; align-items:center; gap:1rem; }
}

@media (max-width: 650px) {
  .menu-toggle { display:flex; }
  nav .menu { position:absolute; top:70px; right:0; background-color:var(--dark); flex-direction:column; width:200px; display:none; padding:1rem; border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
  nav .menu.show { display:flex; }
  .hero-content { flex-direction:column; }
  .hero-bereich, .hero-text { flex:0 0 100%; width:100%; min-height:300px; }
  .site-footer { align-items:flex-start; }
  .footer-right { flex:1; text-align:right; max-width:70%; }
}