:root {
  --bg: #1C1C1A;
  --card: #1C1C1A;

  --brand: #4E9A3C;
  --brand-dark: #4E9A3C;

  --text: #C6C6C1;
  --muted: #C6C6C1;

 /* Form der Waben (Hexagon) – Spitze oben & unten */
--hex-shape: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
);

}

/* Global */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Book Antiqua", "Palatino Linotype", Palatino, serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ================= HEADER ================= */

.logo-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--brand);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0 16px 0;
}

.brand img {
  max-width: 500px;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.brand img:hover { transform: scale(1.05); }

/* Navigation */
.nav-bar{
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--bg);
  border-bottom: 1px solid var(--brand);
  will-change: transform;
}
@supports (-webkit-touch-callout: none) {
  .nav-bar { position: -webkit-sticky; }
}

.nav-bar.is-fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

body.has-fixed-nav { padding-top: 64px; }

nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px 0 12px 0;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-family: "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  border: 1px solid rgba(198,198,193,0.18);
}

nav a:hover,
nav a:focus {
  background: var(--brand);
  color: #000;
  outline: none;
  border-color: var(--brand-dark);
}

/* Nur der Jobs-Link im Menü grün einfärben */
nav a[href*="https://www.arbeitsagentur.de/jobsuche/jobdetail/10001-1000906679-S"] {
  color: var(--brand);
}


/* ================= START-SLIDESHOW ================= */

.slideshow {
  position: relative;
  width: 100%;
  height: clamp(240px, 70vh, 550px);
  overflow: hidden;
  background: var(--bg);
  margin: 0;
  padding: 0;
}

.slideshow .slides {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 700ms ease-in-out;
}

.slideshow img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ================= SECTIONS / CARDS ================= */

section { padding: 56px 0; }

.card {
  background: var(--card);
  border: 1px solid rgba(198,198,193,0.22);
  border-radius: 16px;
  padding: 18px;
  box-shadow: none;
}

/* Karten im Waben-Look */
.card.hex-card {
  position: relative;
  padding: 24px;
  background: transparent;
  border: none;
  border-radius: 0;
  isolation: isolate;
}

.card.hex-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card);
  border: 1px solid rgba(198,198,193,0.22);
  clip-path: var(--hex-shape);
  z-index: -1;
}

/* Hexagon-Bild */
.hex-image {
  clip-path: var(--hex-shape);
  background: #111;
}

/* kleiner, grüner Waben-Punkt (z.B. für Angebote-Liste) */
.hex-bullet {
  width: 16px;
  height: 18px;
  background: var(--brand);
  clip-path: var(--hex-shape);
  flex-shrink: 0;
}


.card h3 {
  margin-top: 0;
  color: var(--brand);
  font-family: "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
}

section > .container > h2 {
  font-size: clamp(32px, 4.5vw, 46px);
  font-family: "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
  color: var(--brand);

  /* zentriert + Unterlinie wie „Navigation-Style“ */
  display: inline-block;
  margin: 0 auto 32px;      /* zentriert im Container */
  padding-bottom: 0px;      /* Abstand zur Linie */
  border-bottom: 2px solid var(--brand);
  text-align: center;       /* für mehrzeilige Headlines */
}


.section-subheading {
  margin-top: 8px;
  font-size: 22px;
  color: var(--brand);
}



/* ================= ÜBER UNS + TEAM ================= */

.about { display: grid; gap: 16px; }

/* ÜBER UNS – Listenpunkte als grüne Waben */
#ueber-uns ul {
  margin: 0;
  padding-left: 0;       /* Standard-Einrückung weg */
  list-style: none;      /* Standard-Bullets aus */
}

#ueber-uns li {
  position: relative;
  padding-left: 32px;    /* Abstand Text zur Wabe */
}

/* Waben-Bullet vor jedem Listeneintrag */
#ueber-uns li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;          /* vertikale Ausrichtung – kannst du feinjustieren */
  width: 18px;
  height: 20px;
  background: var(--brand);
  clip-path: var(--hex-shape);  /* gleiche Wabenform wie überall */
}


.team {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 8px;
}

.team-member {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 460px;
  border: 1px solid rgba(198,198,193,0.22);
  border-radius: 12px;
  padding: 16px;
  background: var(--card);
}

/* Waben-Variante für Teamkarten */
.team-member.hex-card {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 18px;
  isolation: isolate;
}

.team-member.hex-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card);
  border: 1px solid rgba(198,198,193,0.22);
  clip-path: var(--hex-shape);
  z-index: -1;
}


.team-member img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  background: #111;
}

.team-member h3 {
  margin: 0 0 6px 0;
  color: var(--brand);
  font-family: "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
}

.team-member p { margin: 0; color: var(--text); }

/* ================= FAHRZEUGE – SLIDER ================= */

.vehicle-slider {
  position: relative;
  width: 100%;
  height: clamp(600px, 70vh, 820px); /* mehr Platz für die Spitze */
  overflow: hidden;
  margin-top: 12px;
  background: var(--bg);
}



.v-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 700ms ease-in-out; /* <- muss 700ms bleiben */
}

.v-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  isolation: isolate;
}

/* ================= FAHRZEUGE – HEX FRAME POSITION ================= */

.v-slide .v-hex{
  position: absolute;
  right: clamp(4%, 9vw, 12%);
  top: 50%;
  width: min(33%, 520px);
  aspect-ratio: 0.87;
  height: auto;

  transform: translateY(-50%) translateZ(0);
  transition: transform 0.25s ease;
  will-change: transform;
}

.v-slide .v-hex > img{
  width: 100%;
  height: 100%;
}

/* Hover: sanft anheben – OHNE Ruckeln */
.v-slide .v-hex:hover{
  transform: translateY(-50%) translateY(-6px) scale(1.02);
}


/* Text-Wabe links */
.v-overlay {
  position: absolute;
  left: clamp(4%, 8vw, 9%);
  top: 10%;
  width: min(40%, 440px);
  transform: translateY(-50%);
  display: grid;
  align-content: center;
  justify-items: flex-start;
  padding: 19px 23px;
  pointer-events: auto;
}

/* Text steht über der Wabe */
.v-title,
.v-desc {
  position: relative;
  z-index: 1;
}

/* FAHRZEUGE – Listenpunkte im Overlay als Waben */
.v-desc ul {
  margin: 10px 0 0 0;
  padding-left: 0;     /* Standard-Einrückung weg */
  list-style: none;    /* Standard-Bullets aus */
}

.v-desc li {
  position: relative;
  margin: 0 0 6px 0;
  padding-left: 32px;  /* Platz für die Wabe links */
  color: var(--text);
  font-size: clamp(17px, 2.1vw, 27px);
}

/* Waben-Bullet vor jedem Punkt im Fahrzeuge-Overlay */
.v-desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.40em;
  width: 18px;
  height: 20px;
  background: var(--brand);
  clip-path: var(--hex-shape);
}



.v-sub {
  display: none; /* Untertitel ausblenden */
  
}

/* Original-Liste im Slide verstecken – wird im Overlay eingeblendet */
.v-slide > .v-points {
  display: none;
}


.v-desc ul { margin: 10px 0 0 0; padding-left: 18px; }
.v-desc li { margin: 0 0 6px 0; color: var(--text); }

/* Pfeile */
.v-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(198,198,193,0.35);
  background: rgba(0,0,0,0.35);
  color: var(--text);
  font-size: 22px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.v-arrow:hover {
  background: var(--brand);
  border-color: var(--brand-dark);
  color: #000;
}

.v-prev { left: 12px; }
.v-next { right: 12px; }

/* Dots */
.v-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.v-dot{
  appearance: none;          /* entfernt Button-Standardstil */
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: none;              /* entfernt Innenkante */
  outline: none;

  width: 14px;
  height: 16px;

  clip-path: var(--hex-shape);
  background: rgba(255,255,255,0.18);

  cursor: pointer;
  display: block;

  transition: transform .15s ease, background .15s ease;
}

.v-dot.active{
  background: var(--brand);
}

.v-dot:hover{
  border-color: var(--brand);
  background: rgba(95,178,74,0.25);
}

.v-dot.active {
  background: var(--brand);
  border-color: var(--brand-dark);
}

@media (max-width: 540px) {
  .v-overlay {
    top: 6%;
    width: 86%;
    left: 7%;
  }

  .v-slide img {
    top: auto;
    bottom: 6%;
    right: 50%;
    transform: translateX(50%);
    width: 72%;
    height: 42%;
  }
}


/* ================= AUFLIEGER ================= */

#auflieger { background: var(--bg); }

.auflieger-item {
  position: relative;
  display: flex;
  gap: 100px;
  align-items: center;
  border: 1px solid rgba(198,198,193,0.22);
  border-radius: 16px;
  padding: 32px;
  background: var(--card);
}

/* Waben-Rahmen */
.auflieger-item.hex-card {
  border: none;
  border-radius: 0;
  background: transparent;
  isolation: isolate;
}

.auflieger-item.hex-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card);
  clip-path: var(--hex-shape);
  z-index: -1;
}

/* Auflieger: Wrapper bekommt die alte Bildgröße */
.auflieger-item .hex-frame{
  width: min(48%, 460px);
  aspect-ratio: 0.87;
  flex-shrink: 0;
}

/* Optional: das alte clip-path auf .hex-image kann bleiben,
   ist aber redundant weil .hex-frame > img es eh setzt */


/* Text deutlich größer */
.auflieger-info h3 {
  font-size: 30px;
  line-height: 1.3;
  margin: 0;
  color: var(--brand);
  font-family: "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
}


.auflieger-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}


@media (max-width: 540px) {
  .v-slide img {
    top: auto;
    bottom: 6%;
    right: 50%;
    transform: translateX(50%);
    width: 72%;
    aspect-ratio: 0.87;  /* 👍 gleich wie Desktop */
    height: auto;        /* 👍 nicht mehr verzerren */
  }
}



/* ================= ANGEBOTE ================= */

/* Neue Angebote-Ansicht mit Wabenpunkten & großen Wabenbildern */

.hex-bullet {
  width: 18px;
  height: 20px;
  background: var(--brand);
  clip-path: var(--hex-shape);
  flex-shrink: 0;
}

.angebote-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px; /* großer Abstand zwischen den Angeboten */
}

.angebot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.angebot-label {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Überschriften viel größer und links */
.angebot-label h3 {
  margin: 0;
  font-size: 28px;
}

/* ANGEBOTE: Waben-Anordnung wie im Wunschlayout */

.angebot-images-hex{
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 6px 38px;          /* row-gap / column-gap */
  justify-content: center; /* Grid als Ganzes mittig */
  align-content: center;
  justify-items: center;   /* Items mittig in ihren Zellen */
}

/* 1 Bild: mittig (über beide Spalten) */
.angebot-images-hex .hex-frame:only-child{
  grid-column: 1 / 3;
}

/* 3 Bilder: 1 oben mittig, 2 unten nebeneinander */
.angebot-images-hex .hex-frame:first-child:nth-last-child(3){
  grid-column: 1 / 3;
  justify-self: center;
  margin-bottom: -70px; /* ggf. feinjustieren */
}

/* wichtig: 3. Element nicht mehr überschreiben */
.angebot-images-hex .hex-frame:nth-child(3):last-child{
  grid-column: auto;
  justify-self: auto;
  margin-top: 0;
}

/* Angebote: Wrapper statt img bekommt die Größe */
.angebot-images-hex .hex-frame{
  width: clamp(50px, 150vw, 330px);
  aspect-ratio: 0.87;
}

/* img füllt nur noch */
.angebot-images-hex .hex-frame > img{
  width: 100%;
  height: 100%;
}




@media (max-width: 700px) {
  .angebot-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .angebot-images-hex {
    justify-content: flex-start;
  }
  
}.angebot-images-hex img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wenn nur eine Wabe vorhanden ist → ganze Reihe nach links ausrichten */
.angebot-row:has(.angebot-images-hex--single) {
  justify-content: flex-start;
  gap: 253px; /* Abstand zwischen Text & Wabe */
}




/* ================= FOOTER ================= */

footer {
  border-top: 1px solid var(--brand);
  margin-top: 40px;
  background: var(--bg);
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}

.socials {
  display: flex;
  gap: 14px;
  align-items: center;
}

.socials a {
  display: inline-flex;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(198,198,193,0.22);
  background: transparent;
}

.socials a:hover {
  background: var(--brand);
  border-color: var(--brand-dark);
}

.socials a:hover svg { fill: #000; }
.socials svg { width: 22px; height: 22px; fill: var(--text); }

.legal a {
  color: var(--muted);
  text-decoration: none;
}
.legal a:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slideshow .slides,
  .v-track {
    transition: none !important;
  }
}

/* Grün = Futura PT Book */
h2,
h3,
.card h3,
.team-member h3,
.auflieger-info h3,
.angebot h3,
.v-title {
  font-family: "Futura PT Book", "Futura PT", Futura, "Trebuchet MS", Arial, sans-serif;
}

.v-title {
  margin: 0 0 8px 0;
  font-size: clamp(28px, 3.5vw, 34px);  /* größerer Titel */
  color: var(--brand);                  /* nur hier grün */
}

/* Externe Links: http/https, außer deine eigene Domain */
a[href^="http"]:not([href*="schroeder"]) {
  color: var(--brand);
}

/* ================= LIGHTBOX ================= */

#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
}

#lightbox img {
  max-width: 95%;
  max-height: 95%;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 0 20px rgba(0,0,0,.6);
}

#lightbox-close {
  position: fixed;
  top: 16px;
  right: 24px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

#lightbox[aria-hidden="false"] {
  display: flex;
}

/* Abstand nach oben beim Scrollen per Ankerlink */
#ueber-uns,
#fahrzeuge,
#auflieger,
#angebote,
#jobs {
  scroll-margin-top: 20px;   /* Wert = ungefähre Höhe deiner Navi */
}

/* 1) Globaler Hover für ALLE Bilder */
img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

img:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

/* 2) AUSNAHME: Bilder im oberen Slider sollen KEINEN Hover haben */
.slideshow img {
  transition: none;      /* keine Animation */
  box-shadow: none;      /* kein Schatten */
  transform: none;       /* Sicherheit */
}

.slideshow img:hover {
  transform: none;
  box-shadow: none;
}

/* ================= HEX 3D PREMIUM FRAME ================= */

/* Optional: kleine Farb-Varianten aus deinem Brand ableiten */
:root{
  --hex-frame-outer: rgba(95, 178, 74, 0.95);  /* var(--brand) */
  --hex-frame-inner: rgba(78, 154, 60, 0.95);  /* var(--brand-dark) */
  --hex-shadow-strong: rgba(0,0,0,0.55);
  --hex-shadow-soft: rgba(0,0,0,0.28);
}

.hex-frame{
  position: relative;
  display: inline-block;
  isolation: isolate;
}

/* grüner Rahmen */
.hex-frame::before{
  content:"";
  position:absolute;
  inset: -12px;              /* Rahmenstärke */
  clip-path: var(--hex-shape);
  background: var(--brand-dark);  /* normales Seiten-Grün */
  z-index: 0;
}

/* Bild oben */
.hex-frame > img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: var(--hex-shape);
}

/* Optional: Premium Hover */
.hex-frame:hover::before{
  transform: translateY(-2px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow:
    0 28px 54px rgba(0,0,0,0.62),
    0 12px 22px rgba(0,0,0,0.30);
}

/* ================= FIX: HOVER NUR AUF WRAPPER (Rahmen + Bild gemeinsam) ================= */

/* 1) Bild im Hex-Frame darf NICHT selbst "hochspringen" */
.hex-frame > img{
  transform: none !important;
  box-shadow: none;                 /* Schatten macht der Rahmen */
  transition: none !important;      /* Transition läuft über den Wrapper */
}

.hex-frame > img:hover{
  transform: none !important;
  box-shadow: none !important;
}

/* 2) Der Wrapper hebt sich sanft (gleichmäßig im Rahmen) */
.hex-frame{
  transition: transform 0.25s ease, filter 0.25s ease;
  will-change: transform;
  transform: translateZ(0); /* gegen Ruckler */
}

.hex-frame:hover{
  transform: translateY(-6px) scale(1.02);
}

/* 3) Optional: Rahmen darf mitgehen, aber NICHT separat verschieben (sonst wirkt’s wie „oben dünner“) */
.hex-frame:hover::before{
  transform: none;
  transition: box-shadow 0.25s ease;
  box-shadow:
    0 28px 54px rgba(0,0,0,0.62),
    0 12px 22px rgba(0,0,0,0.30);
}