/*
  RINO Website Stylesheet
  --------------------------------------------------
  Hintergrundfarbe zentral ändern:
  -> in :root die Variable --site-bg anpassen.

  Aufbau:
  1.  Variablen und Basis
  2.  Header, Navigation und globale UI-Elemente
  3.  Hero-Bereiche und Seitenlayout
  4.  Karten, Raster, Modale und Formulare
  5.  Seitenspezifische Bereiche
  6.  Footer, Animationen und responsive Anpassungen
*/

/* --------------------------------------------------
   1. Zentrale Variablen
-------------------------------------------------- */

:root
{
  /* Zentrale Website-Farben */
  --site-bg:#161616;
  --site-text:#F4F4F4;

  /* Flächen / Boxen */
  --box-bg:#242424;
  --box-bg-soft:#2A2A2A;
  --hover-bg:#2A2A2A;

  /* Textfarben */
  --box-text:#F4F4F4;
  --text-soft:#E7E7E7;
  --text-muted:#C9C9C9;
  --text-dim:#9B9B9B;

  /* Markenfarbe: RAL 3003 Rubinrot */
  --red:#9B111E;
  --red2:#9B111E;
  --red-dark:#6F0C15;

  /* Grundfarben */
  --black:#161616;
  --dark:#161616;
  --white:#ffffff;
  --muted:#C9C9C9;
  --muted2:#9B9B9B;

  /* Linien, Schatten, Breite */
  --line-light:rgba(255,255,255,.12);
  --line-dark:rgba(255,255,255,.16);
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --max:1440px;

  /* Einheitliche Abstände */
  --section-space:40px;
  --section-space-mobile:33px;
  --section-inner-gap:20px;
}


/* --------------------------------------------------
   2. Basis
-------------------------------------------------- */

*
{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html
{
  scroll-behavior:smooth;
  max-width:100%;
  overflow-x:hidden;
}

body
{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--site-bg);
  color:var(--site-text);
  line-height:1.6;
  max-width:100%;
  overflow-x:hidden;
}

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

img
{
  max-width:100%;
  display:block;
}

.container
{
  width:min(var(--max),94%);
  margin:auto;
}

.text-red
{
  color:var(--red2);
}

.muted
{
  color:var(--muted2);
}

.upper
{
  text-transform:uppercase;
  letter-spacing:.08em;
}

strong
{
  font-weight:900;
}


/* --------------------------------------------------
   3. Header
-------------------------------------------------- */

.header
{
  position:fixed;
  top:0;
  width:100%;
  z-index:9999;
  padding:0;
  transition:transform .35s ease, opacity .25s ease;
}

.header.hide-header
{
  transform:translateY(-160%) !important;
}

.header-inner
{
  width:min(1260px,86%);
  max-width:1260px;
  margin:auto;
  min-height:86px;
  margin-top:16px;
  padding:0 34px;

  background:rgba(36,36,36,.92);
  color:var(--box-text);

  display:flex;
  align-items:center;
  justify-content:space-between;

  overflow:visible;
  backdrop-filter:blur(12px);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}

.logo
{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.logo img
{
  height:62px;
  width:auto;
  display:block;
}

.nav
{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:18px;
}

.nav a,
.dropbtn
{
  color:var(--box-text);
  font-weight:600;
  cursor:pointer;
  transition:.2s;
}

.nav a:hover,
.drop:hover .dropbtn
{
  color:var(--red);
}

.nav-job
{
  color:var(--red) !important;
  font-weight:900 !important;
}

.mobile-toggle
{
  display:none;
  width:46px;
  height:46px;
  border:0;
  background:var(--site-bg);
  color:#fff;
  font-size:25px;
  cursor:pointer;
}


/* Navigation: Dropdown */

.drop
{
  position:relative;
}

.dropdown
{
  position:absolute;
  top:100%;
  left:0;
  min-width:320px;

  background:var(--site-bg);
  color:#fff;

  border:1px solid rgba(255,255,255,.18);
  display:none;
  z-index:99999;
  padding:8px 0;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

@media(min-width:1181px)
{
  .drop:hover .dropdown
  {
    display:block;
  }
}

.dropdown a
{
  display:block;
  padding:16px 22px;
  border-bottom:1px solid rgba(255,255,255,.12);

  font-size:17px;
  font-weight:700;

  color:#fff !important;
  background:var(--site-bg);
}

.dropdown a:hover
{
  background:var(--red);
  color:#fff !important;
}

.dropdown a span
{
  display:block;
  margin-top:4px;
  font-size:13px;
  font-weight:500;
  color:var(--text-muted) !important;
}

.dropdown a:last-child
{
  border-bottom:0;
}


/* --------------------------------------------------
   4. Startseiten-Hero mit Video
-------------------------------------------------- */

.hero
{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:170px 0 110px;
  background:var(--site-bg);
}

.hero-video,
.hero-poster
{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-poster
{
  display:none;
  pointer-events:none;
}

.hero-video
{
  z-index:0;
  opacity:1;
  pointer-events:none;
}

.video-overlay
{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.52) 42%,
    rgba(0,0,0,.20) 72%,
    rgba(0,0,0,.05) 100%
  );
}

.hero-content
{
  position:relative;
  z-index:3;
  width:min(1280px,94%);
  margin:auto;
}

.hero-copy
{
  max-width:760px;
}

.kicker
{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;

  font-size:17px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;

  color:#fff !important;
}

.kicker:before
{
  content:"";
  display:block;
  width:72px;
  height:4px;
  background:var(--red2);
}

.hero h1
{
  font-size:clamp(58px,8vw,132px);
  line-height:.88;
  letter-spacing:-.065em;
  text-transform:uppercase;
  font-weight:1000;
  margin-bottom:18px;
}

.hero h1 .white
{
  display:block;
  color:#fff;
}

.hero h1 .red
{
  display:block;
  color:var(--red2);
}

.hero-subline
{
  font-size:21px;
  font-weight:1000;
  text-transform:uppercase;
  line-height:1.25;
  margin-bottom:26px;
  color:#fff;
}

.hero-text
{
  max-width:560px;
  color:#fff;
  font-size:18px;
  margin-bottom:28px;
  text-shadow:0 3px 12px rgba(0,0,0,.65);
}

.hero-actions
{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.hero .kicker,
.hero .kicker *
{
  color:#fff !important;
}

/* --------------------------------------------------
   5. Video-Hero Variante
-------------------------------------------------- */

.video-hero
{
  position:relative;
  overflow:hidden;
  background:#111;
}

.video-hero .hero-video
{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.video-hero::before
{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.72),
    rgba(0,0,0,.38),
    rgba(0,0,0,.18)
  );
  z-index:1;
}

.video-hero .page-hero-content
{
  position:relative;
  z-index:2;
}

/* --------------------------------------------------
   Page Hero / Random Bild Fallback
-------------------------------------------------- */

.hero-random-image
{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  z-index:0;
}

.video-hero .page-hero-content
{
  position:relative;
  z-index:2;
}

/* --------------------------------------------------
   6. Buttons
-------------------------------------------------- */

.btn,
.mini-btn
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border:2px solid var(--red2);
  background:var(--red);
  color:#fff !important;

  font-weight:1000;
  text-transform:uppercase;

  transition:.22s ease;
  cursor:pointer;
}

.btn
{
  min-height:56px;
  padding:0 28px;
}

.mini-btn
{
  min-width:205px;
  height:52px;
}

.btn:hover,
.mini-btn:hover
{
  background:var(--red2);
  border-color:var(--red2);
  transform:translateY(-3px);
}

.btn.outline
{
  background:transparent;
  color:#fff !important;
}

.btn.outline:hover
{
  background:var(--red);
}


/* --------------------------------------------------
   7. Social-Leiste
-------------------------------------------------- */

.side-social
{
  position:fixed;
  right:22px;
  top:36%;
  z-index:1800;

  display:flex;
  flex-direction:column;
  gap:13px;
}

.side-social a
{
  width:47px;
  height:47px;
  border-radius:50%;

  background:rgba(255,255,255,.96);
  color:var(--black);

  display:grid;
  place-items:center;

  font-size:24px;
  font-weight:900;

  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.side-autokran
{
  writing-mode:vertical-rl;
  transform:rotate(180deg);

  background:var(--red) !important;
  color:#fff !important;

  width:47px !important;
  height:138px !important;
  border-radius:14px !important;

  font-size:16px !important;
  letter-spacing:.05em;
}

.side-autokran:hover
{
  color:#000 !important;
}


/* --------------------------------------------------
   8. Allgemeine Sections
-------------------------------------------------- */

section
{
  padding:var(--section-space) 0;
  position:relative;
  background:var(--site-bg);
}

.section-head
{
  max-width:850px;
  margin-bottom:var(--section-inner-gap);
}

.section-head.center
{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.eyebrow
{
  color:var(--red);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.09em;
  margin-bottom:10px;
}

h2
{
  font-size:clamp(38px,5vw,76px);
  line-height:.98;
  text-transform:uppercase;
  letter-spacing:-.045em;
  margin-bottom:18px;
}

h3
{
  font-size:clamp(25px,2.2vw,38px);
  line-height:1.1;
  letter-spacing:-.03em;
}

.lead
{
  font-size:19px;
  color:var(--text-soft);
}

.dark-section,
.grey-section,
.light-section
{
  background:var(--site-bg) !important;
  color:var(--site-text) !important;
}

.red-section
{
  background:var(--red) !important;
  color:#fff !important;
  padding:var(--section-space) 0 !important;
}

.red-section .section-head
{
  max-width:760px;
  margin:0 auto;
}

.red-section .eyebrow
{
  color:#fff;
  font-size:13px;
  letter-spacing:.12em;
  margin-bottom:10px;
}

.red-section h2
{
  color:#fff;
  font-size:clamp(32px,3.5vw,54px);
  line-height:1.05;
  letter-spacing:-.035em;
  margin-bottom:18px;
}

.red-section .lead
{
  color:#fff;
  font-size:17px;
  line-height:1.6;
  max-width:680px;
  margin:0 auto;
}

.light-section .lead
{
  color:var(--text-soft);
}

/* Einheitlicher Abstand nach Seiten-Hero */
.page-hero + section
{
  padding-top:var(--section-space) !important;
}


/* --------------------------------------------------
   9. Kompetenz-Karten Startseite
-------------------------------------------------- */

.feature-wrap
{
  position:relative;
  z-index:5;
  margin-top:-150px;
  background:transparent;

  opacity:0;
  transform:translateY(70px);
  pointer-events:none;

  transition:
    opacity .45s ease,
    transform .45s ease;
}

.feature-wrap.feature-visible
{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.feature-grid
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.feature-card
{
  min-height:278px;
  background-color:var(--box-bg);
  color:var(--box-text);
  border:1px solid var(--line-light);
  padding:32px;
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  display:flex;
  flex-direction:column;
}

.feature-card:after
{
  display:none;
}

.feature-card h3
{
  font-size:33px;
  text-transform:uppercase;
  margin-bottom:6px;
  color:var(--box-text);
}

.feature-card .sub
{
  color:var(--red2);
  font-size:20px;
  font-weight:900;
  margin-bottom:18px;
}

.feature-card p
{
  max-width:315px;
  color:var(--text-soft);
  margin-bottom:24px;
}

.feature-image-content
{
  position:relative;
  z-index:2;
  width:100%;
  padding:32px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;

  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.feature-bg-card
{
  position:relative;
  min-height:420px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:0;

  background-color:transparent !important;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  cursor:pointer;

  transform:translateY(0) scale(1);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
  will-change:transform;
}

.feature-bg-card::before
{
  content:"";
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.55);
  z-index:1;
}

.feature-bg-card:hover
{
  transform:translateY(-20px) scale(1.04) !important;

  box-shadow:0 45px 90px rgba(0,0,0,.35);
  border-color:rgba(194,23,26,.45);
}

.feature-bg-card:hover::before
{
  background:linear-gradient(
    to top,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.26) 45%,
    rgba(0,0,0,.04) 100%
  );
}

.feature-bg-card h3,
.feature-bg-card .sub,
.feature-bg-card p
{
  color:#fff;
}

.feature-bg-card h3
{
  text-shadow:0 3px 12px rgba(0,0,0,.75);
}

.feature-bg-card .sub
{
  font-weight:800;
  text-shadow:0 3px 12px rgba(0,0,0,.75);
}

.feature-bg-card p
{
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}

.card-touch-icon
{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:3;

  width:38px;
  height:38px;
  border-radius:50%;

  background:rgba(255,255,255,.45);

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--red);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

.card-touch-icon i
{
  font-size:16px;
}


/* --------------------------------------------------
   10. Einheitlicher Seiten-Hero
-------------------------------------------------- */

.page-hero
{
  min-height:100vh;
  padding:170px 0 110px;

  display:flex;
  align-items:center;

  position:relative;
  overflow:hidden;

  background-image:var(--hero-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:var(--site-bg);
}

.page-hero::before
{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  background:linear-gradient(
    90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.52) 42%,
    rgba(0,0,0,.20) 72%,
    rgba(0,0,0,.05) 100%
  );
}

.page-hero-content
{
  width:min(1280px,94%);
  max-width:900px;
  margin:auto;

  position:relative;
  z-index:2;
}

.page-hero h1
{
  font-size:clamp(54px,8vw,112px);
  line-height:.9;
  letter-spacing:-.06em;
  text-transform:uppercase;

  margin-bottom:22px;

  color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,.65);
}

.page-hero p
{
  font-size:22px;
  max-width:760px;

  color:#fff;
  text-shadow:0 3px 12px rgba(0,0,0,.65);
}

.page-hero .kicker,
.page-hero .eyebrow
{
  color:#fff !important;
}

.page-hero.hero-startseite,
.page-hero.hero-kompetenzen,
.page-hero.hero-ueber-dem-boden,
.page-hero.hero-unter-dem-boden,
.page-hero.hero-in-der-luft,
.page-hero.hero-fuhrpark,
.page-hero.hero-unternehmen,
.page-hero.hero-ansprechpartner,
.page-hero.hero-karriere,
.page-hero.hero-kontakt,
.page-hero.hero-impressum,
.page-hero.hero-datenschutz,
.page-hero.hero-aktuelles
{
  background-image:var(--hero-image);
}


/* --------------------------------------------------
   11. Panels / Startseiten-Boxen
-------------------------------------------------- */

.split
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
  align-items:stretch;
}

.panel
{
  background:var(--box-bg) !important;
  border:1px solid var(--line-light);
  padding:36px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  color:var(--box-text);
}

.panel.light
{
  background:var(--box-bg) !important;
  color:var(--box-text);
}

.panel p,
.panel.light p
{
  color:var(--text-soft);
  margin-bottom:18px;
}

.home-box
{
  background:var(--box-bg) !important;
  border:1px solid var(--line-light);
  padding:32px;
  min-height:430px;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  box-shadow:0 18px 40px rgba(0,0,0,.10);
}

.home-box h2
{
  font-size:clamp(38px,4vw,56px);
  line-height:1;
  margin:10px 0 20px;
}

.home-box p
{
  font-size:16.5px;
  line-height:1.65;
  color:var(--text-soft);
}

.home-box ul
{
  margin:18px 0;
  padding:0;
}

.home-box li
{
  list-style:none;
  position:relative;
  padding-left:22px;
  margin-bottom:12px;

  font-size:16.5px;
  font-weight:700;
  color:var(--box-text);
}

.home-box li::before
{
  content:"";
  width:9px;
  height:9px;
  background:var(--red2);
  position:absolute;
  left:0;
  top:9px;
}

.home-box .btn
{
  min-width:210px;
  height:52px;
  padding:0 26px;
  font-size:16px;
  align-self:flex-start;
}

.home-box .eyebrow
{
  color:var(--red2) !important;
}

.checks
{
  display:grid;
  gap:12px;
  margin-top:18px;
}

.checks li
{
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  line-height:1.4;
}

.checks li:before
{
  content:"";
  width:10px;
  height:10px;
  background:var(--red2);
  flex:0 0 auto;
}


/* --------------------------------------------------
   12. Service / Raster
-------------------------------------------------- */

.grid-2
{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}

.grid-3
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.grid-4
{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.service,
.machine,
.team-card,
.info-box
{
  background:var(--box-bg) !important;
  color:var(--box-text);
  border:1px solid var(--line-light);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.service
{
  padding:30px;
  min-height:250px;
  transition:.25s;
}

.service:hover
{
  transform:translateY(-6px);
  border-color:var(--red2);
}

.service .num
{
  color:var(--red2);
  font-size:18px;
  font-weight:1000;
  margin-bottom:12px;
}

.service h3
{
  text-transform:uppercase;
  font-size:27px;
  margin-bottom:14px;
}

.service p
{
  color:var(--text-soft);
}


/* --------------------------------------------------
   13. Leistungsseiten / Kompetenzseiten
-------------------------------------------------- */

.above-ground-section
{
  background:var(--site-bg);
  padding:var(--section-space) 0;
}

.above-ground-intro
{
  max-width:900px;
  margin:0 auto 44px;
}

.above-ground-intro .eyebrow
{
  color:var(--box-text);
}

.above-service-grid
{
  width:min(1500px,92%);
  margin:30px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  overflow:visible;
}

.above-service-card
{
  min-height:260px;
  background:var(--box-bg);
  border:1px solid var(--line-light);
  padding:36px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 22px 55px rgba(0,0,0,.10);
  transition:.25s ease;
  position:relative;
  overflow:hidden;

  display:flex;
  flex-direction:column;
}

.above-service-card:hover
{
  transform:translateY(-20px) scale(1.04) !important;

  box-shadow:0 45px 90px rgba(0,0,0,.35);
  border-color:rgba(155,17,30,.45);
}

.above-service-num
{
  display:block;
  color:var(--red2);
  font-size:18px;
  font-weight:1000;
  margin-bottom:14px;
}

.above-service-card h3
{
  font-size:23px;
  text-transform:uppercase;
  margin:0 0 24px;
  color:var(--box-text);
  line-height:1.05;
  text-align:left;
}

.above-service-card p
{
  color:var(--text-soft);
  font-size:16px;
  line-height:1.6;
  max-width:620px;
  margin:0;
}

.above-service-more
{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  color:var(--red2);
  font-weight:900;
  text-transform:uppercase;
  font-size:13px;
}


/* --------------------------------------------------
   14. Leistungsseiten Popup
-------------------------------------------------- */

.service-modal
{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.82);
  padding:40px 20px;
  overflow:auto;
}

.service-modal.open
{
  display:block;
}

.service-modal-backdrop
{
  position:fixed;
  inset:0;
}

.service-modal-box
{
  max-width:1180px;
  margin:auto;
  background:var(--box-bg);
  color:var(--box-text);
  padding:72px 52px 52px;
  position:relative;
  border:1px solid var(--line-light);
  box-shadow:0 35px 90px rgba(0,0,0,.35);
}

.service-modal-close
{
  position:absolute;
  top:18px;
  right:18px;

  width:42px;
  height:42px;

  border:none;
  background:var(--red);
  color:#fff;

  font-size:30px;
  cursor:pointer;

  z-index:30;
}

.service-modal-content
{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:34px;
  align-items:start;
}

.service-modal-content h2
{
  font-size:clamp(36px,4vw,58px);
  margin-bottom:18px;
}

.service-modal-content p
{
  font-size:17px;
  color:var(--text-soft);
  line-height:1.65;
}

.service-carousel
{
  position:relative;
  height:430px;
  background:var(--box-bg);
  border:1px solid rgba(0,0,0,.10);
  overflow:hidden;
}

.service-carousel-stage
{
  width:100%;
  height:100%;
}

.service-carousel-stage img,
.service-carousel-stage video
{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:28px;
  background:var(--box-bg);
}

.service-carousel-btn
{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:30px;
  cursor:pointer;
}

.service-carousel-prev
{
  left:16px;
}

.service-carousel-next
{
  right:16px;
}

.service-carousel-empty
{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  text-align:center;
  color:var(--text-muted);
  font-weight:700;
}

.service-carousel-image
{
  cursor:zoom-in;
}

.service-image-lightbox
{
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(0,0,0,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
}

.service-image-lightbox img
{
  max-width:94vw;
  max-height:90vh;
  object-fit:contain;
}

.service-image-lightbox-close
{
  position:absolute;
  top:24px;
  right:24px;
  width:46px;
  height:46px;
  border:none;
  background:var(--red);
  color:#fff;
  font-size:28px;
  cursor:pointer;
}


/* --------------------------------------------------
   15. Fuhrpark
-------------------------------------------------- */

.fleet-list
{
  columns:2;
  column-gap:48px;
  color:var(--text-soft);
}

.fleet-list li
{
  break-inside:avoid;
  margin-bottom:9px;
  list-style:none;
  padding-left:18px;
  position:relative;
}

.fleet-list li:before
{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  background:var(--red2);
}

.fleet-highlight
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:42px;
}

.machine
{
  padding:28px;
}

.machine strong
{
  display:block;
  color:var(--red2);
  font-size:30px;
  margin-bottom:8px;
}

.fleet-page-grid
{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:42px;
  align-items:center;
}

.fleet-overview
{
  background:var(--box-bg);
  border:1px solid var(--line-light);
  padding:36px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.fleet-overview h2
{
  font-size:clamp(36px,4vw,58px);
  margin-bottom:24px;
}

.fleet-main-list
{
  list-style:none;
  margin:0 0 30px;
  padding:0;
}

.fleet-main-list li
{
  position:relative;
  padding-left:22px;
  margin-bottom:10px;
  font-size:18px;
  font-weight:700;
  color:var(--box-text);
}

.fleet-main-list li::before
{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  width:9px;
  height:9px;
  background:var(--red2);
}


/* Fuhrpark: Bilderkarussell */

.fleet-carousel
{
  position:relative;
  height:520px;
  overflow:hidden;
  background:transparent !important;
}

.fleet-carousel-stage
{
  height:100%;
  display:flex;
  align-items:center;
  transition:transform .65s ease;
  background:transparent !important;
}

.fleet-carousel-stage img
{
  min-width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  cursor:pointer;
  background:transparent !important;
}

.fleet-carousel-btn
{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:34px;
  cursor:pointer;
}

.fleet-carousel-prev
{
  left:16px;
}

.fleet-carousel-next
{
  right:16px;
}


/* Fuhrpark: Popup */

.fleet-modal
{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.82);
  padding:40px 20px;
  overflow:auto;
}

.fleet-modal.open
{
  display:block;
}

.fleet-modal-content
{
  max-width:1180px;
  margin:auto;
  background:var(--box-bg);
  color:var(--box-text);
  padding:52px;
  position:relative;
  border:1px solid var(--line-light);
  box-shadow:0 35px 90px rgba(0,0,0,.35);
}

.fleet-modal-content h2
{
  font-size:42px;
  margin-bottom:30px;
}

.fleet-modal-close
{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:none;
  background:var(--red);
  color:#fff;
  font-size:30px;
  cursor:pointer;
}

.fleet-modal-grid
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:28px;
}

.fleet-modal-grid > div
{
  background:var(--box-bg);
  border:1px solid rgba(0,0,0,.10);
  padding:24px;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
}

.fleet-modal-grid h3
{
  color:var(--red);
  font-size:22px;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--red);
}

.fleet-modal-grid ul
{
  list-style:none;
  padding:0;
  margin:0;
}

.fleet-modal-grid li
{
  position:relative;
  padding-left:18px;
  margin-bottom:9px;
  color:var(--box-text);
  font-size:15px;
  line-height:1.45;
}

.fleet-modal-grid li::before
{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:7px;
  height:7px;
  background:var(--red2);
}


/* Fuhrpark: Bildvorschau */

.image-lightbox
{
  display:none;
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(0,0,0,.9);
  align-items:center;
  justify-content:center;
  padding:30px;
}

.image-lightbox.open
{
  display:flex;
}

.image-lightbox img
{
  max-width:92vw;
  max-height:88vh;
  object-fit:contain;
}

.image-lightbox-close
{
  position:absolute;
  top:24px;
  right:24px;
  width:46px;
  height:46px;
  border:none;
  background:var(--red);
  color:#fff;
  font-size:32px;
  cursor:pointer;
}


/* --------------------------------------------------
   16. Kontakt / Formulare
-------------------------------------------------- */

.contact-grid
{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:26px;
}

.info-box
{
  padding:36px;
}

.info-item
{
  border-bottom:1px solid var(--line-light);
  padding:18px 0;
}

.info-item:first-of-type
{
  padding-top:0;
}

.info-item span
{
  display:block;
  color:var(--red2);
  font-weight:1000;
  text-transform:uppercase;
  font-size:13px;
  margin-bottom:3px;
}

form
{
  background:var(--box-bg);
  color:var(--box-text);
  padding:36px;
  border:1px solid var(--line-light);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.form-row
{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

label
{
  display:block;
  font-weight:900;
  margin-bottom:8px;
}

input,
select,
textarea
{
  width:100%;
  min-height:50px;
  padding:12px 14px;
  border:1px solid var(--line-light);
  background:var(--box-bg);
  color:var(--box-text);
  margin-bottom:16px;
  font:inherit;
}

textarea
{
  min-height:140px;
  resize:vertical;
}

.radio-list
{
  display:grid;
  gap:10px;
  margin-bottom:20px;
}

.radio-list label
{
  display:flex;
  gap:10px;
  align-items:center;
  background:var(--box-bg);
  border:1px solid var(--line-light);
  padding:12px;
  margin:0;
}

.radio-list input
{
  width:auto;
  min-height:auto;
  margin:0;
  accent-color:var(--red);
}

.upload-box
{
  background:var(--box-bg);
  border:2px dashed var(--line-light);
  padding:18px;
  margin-bottom:16px;
}

.upload-box input
{
  border:0;
  padding:0;
  min-height:auto;
  margin-bottom:0;
}

.success
{
  display:none;
  margin-top:16px;
  padding:14px;
  background:#dcfce7;
  color:#166534;
  font-weight:900;
}

/* --------------------------------------------------
   17. Kontaktseite Übersicht
-------------------------------------------------- */

.contact-overview
{
  margin-bottom:80px;
}

.contact-overview-grid
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:40px;
}

.contact-info-box
{
  background:var(--box-bg);
  border:1px solid var(--line-light);
  padding:32px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.contact-info-box h3
{
  margin-bottom:16px;
}

.contact-info-box a
{
  color:var(--red);
}

.team-contact-box
{
  background:var(--box-bg);
  border:1px solid var(--line-light);
  padding:52px;
  margin-bottom:80px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

/* --------------------------------------------------
   18. Datenschutz Popup
-------------------------------------------------- */

.privacy-check
{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:18px 0;
  color:var(--box-text);
}

.privacy-check input
{
  width:20px;
  min-height:auto;
  margin-top:4px;
}

.privacy-link
{
  color:var(--box-text);
  text-decoration:underline;
  cursor:pointer;
}

.privacy-modal
{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  z-index:9999999;
  padding:50px 20px;
  overflow:auto;
}

.privacy-modal.open
{
  display:block;
}

.privacy-modal-content
{
  max-width:900px;
  max-height:82vh;
  overflow:auto;
  margin:auto;
  background:var(--box-bg);
  color:var(--box-text);
  padding:54px;
  position:relative;
  z-index:10000000;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.privacy-close
{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:none;
  background:var(--red);
  color:#fff;
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10;
}

.privacy-modal .light-section
{
  padding:0;
  background:transparent !important;
}

.privacy-modal .container
{
  width:100%;
  max-width:none;
}

.privacy-modal .panel.light
{
  box-shadow:none;
  border:none;
  padding:0;
  background:var(--box-bg) !important;
}


/* --------------------------------------------------
   19. Ansprechpartner
-------------------------------------------------- */

.team-grid
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.team-card
{
  padding:34px 26px;
  text-align:center;
}

.team-card img
{
  width:145px;
  height:145px;
  object-fit:cover;
  border-radius:50%;
  margin:0 auto 22px;
  border:5px solid var(--red);
}

.team-card h3
{
  font-size:26px;
  margin-bottom:8px;
  color:var(--box-text);
}

.team-job
{
  color:var(--red);
  font-weight:800;
  margin-bottom:18px;
}

.team-card a
{
  display:block;
  color:var(--box-text);
  margin-bottom:6px;
  font-weight:700;
}

.team-card a:hover
{
  color:var(--red);
}


/* --------------------------------------------------
   20. Aktuelles
-------------------------------------------------- */

/* Aktuelles: Popup */

.aktuelles-modal
{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.82);
  padding:40px 20px;
  overflow:auto;
}

.aktuelles-modal.open
{
  display:block;
}

.aktuelles-modal-backdrop
{
  position:fixed;
  inset:0;
}

.aktuelles-modal-box
{
  max-width:1180px;
  margin:auto;
  background:var(--box-bg);
  color:var(--box-text);
  padding:52px;
  position:relative;
  border:1px solid var(--line-light);
  box-shadow:0 35px 90px rgba(0,0,0,.35);
}

.aktuelles-modal-close
{
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:none;
  background:var(--red);
  color:#fff;
  font-size:30px;
  cursor:pointer;
}

.aktuelles-modal-content
{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:34px;
  align-items:start;
}

.aktuelles-modal-date
{
  display:block;
  color:var(--text-dim);
  font-size:14px;
  margin-bottom:10px;
}

.aktuelles-modal-category
{
  display:block;
  color:var(--red);
  font-size:13px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.aktuelles-modal-content h2
{
  font-size:clamp(36px,4vw,58px);
  margin-bottom:18px;
  color:var(--box-text);
}

.aktuelles-modal-content p
{
  font-size:17px;
  color:var(--text-soft);
  line-height:1.65;
}

.aktuelles-carousel
{
  position:relative;
  height:470px;
  background:var(--box-bg);
  border:1px solid var(--line-light);
  overflow:hidden;
}

.aktuelles-carousel-stage
{
  width:100%;
  height:100%;
}

.aktuelles-carousel-stage img
{
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--box-bg);
}

.aktuelles-carousel-btn
{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:30px;
  cursor:pointer;
}

.aktuelles-carousel-prev
{
  left:16px;
}

.aktuelles-carousel-next
{
  right:16px;
}

.aktuelles-carousel-empty
{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-weight:700;
}


/* Aktuelles: Seite */

.hero-aktuelles .reveal,
.news-highlight-section .reveal,
.aktuelles-section .reveal
{
  opacity:1 !important;
  transform:none !important;
}

.news-ticker-section
{
  padding:14px 0 !important;
}

.news-ticker
{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  font-size:15px;
}

.news-ticker strong
{
  text-transform:uppercase;
  letter-spacing:.08em;
}

.news-highlight-section
{
  background:var(--site-bg) !important;
  color:#fff !important;
  padding:var(--section-space) 0 !important;
}

.news-highlight-grid
{
  display:grid;
  grid-template-columns:1fr 480px;
  gap:42px;
  align-items:center;
}

.news-highlight-section .eyebrow,
.news-highlight-section h2,
.news-highlight-section .lead
{
  color:#fff !important;
}


/* Mitarbeiter des Monats */

.news-employee-card
{
  background:var(--box-bg) !important;
  color:var(--box-text) !important;
  padding:18px 22px;
  text-align:center;
  border:1px solid var(--line-light);
  box-shadow:0 24px 70px rgba(0,0,0,.30);
  overflow:visible;
}

.news-employee-image-wrap
{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:135px;
  margin-bottom:10px;
}

.news-employee-image
{
  width:125px;
  height:125px;
  object-fit:cover;
  border-radius:50%;
  border:5px solid var(--red);
  position:relative;
  z-index:3;
  background:var(--box-bg);
}

.news-laurel
{
  position:absolute;
  width:120px;
  height:auto;
  z-index:2;
  pointer-events:none;
  top:7px;
}

.news-laurel-left
{
  right:50%;
  margin-right:0;
  transform:rotate(5deg);
  transform-origin:right center;
}

.news-laurel-right
{
  left:50%;
  margin-left:0;
  transform:rotate(-5deg);
  transform-origin:left center;
}

.news-employee-laurel
{
  color:var(--red);
  font-size:24px;
  line-height:1;
  margin-bottom:6px;
}

.news-employee-card span
{
  color:var(--red);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  display:block;
  margin-bottom:6px;
}

.news-employee-card h3
{
  margin:0 0 8px;
  font-size:24px;
  color:var(--box-text);
}

.news-employee-card p
{
  color:var(--text-soft);
  font-size:14px;
  line-height:1.45;
  margin:0;
}


/* Aktuelles: Karten */

.aktuelles-section
{
  background:var(--site-bg) !important;
  padding:var(--section-space) 0 !important;
}

.aktuelles-head
{
  max-width:850px;
  margin-bottom:34px;
}

.aktuelles-head h2
{
  margin-bottom:12px;
}

.aktuelles-head p
{
  color:var(--text-muted);
  font-size:18px;
}

.aktuelles-head-second
{
  margin-top:72px;
}

.aktuelles-grid
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  overflow:visible;
}

.aktuelles-card
{
  background:var(--box-bg) !important;
  color:var(--box-text) !important;
  border:1px solid var(--line-light);
  overflow:hidden;

  box-shadow:0 18px 40px rgba(0,0,0,.08);

  transform:translateY(0) scale(1);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;

  will-change:transform;
  cursor:pointer;
}

.aktuelles-card:hover
{
  background:var(--hover-bg) !important;
  transform:translateY(-20px) scale(1.04) !important;
  box-shadow:0 45px 90px rgba(0,0,0,.35) !important;
  border-color:rgba(155,17,30,.45) !important;
}

.aktuelles-card > img
{
  width:100%;
  height:240px;
  object-fit:cover;
}

.aktuelles-card-body
{
  padding:24px;
}

.aktuelles-date
{
  display:block;
  color:var(--text-dim);
  font-size:14px;
  margin-bottom:10px;
}

.aktuelles-category
{
  display:block;
  color:var(--red);
  font-size:13px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.aktuelles-card h3
{
  font-size:28px;
  margin-bottom:12px;
  color:var(--box-text);
}

.aktuelles-card p
{
  color:var(--text-soft);
}

.aktuelles-arrow
{
  display:block;
  margin-top:18px;
  color:var(--red);
  font-size:24px;
}


/* --------------------------------------------------
   21. Footer
-------------------------------------------------- */

footer
{
  background:var(--site-bg) !important;
  border-top:1px solid var(--line-dark);
  padding:28px 0 12px;
  color:#fff;
}

.footer-grid
{
  display:grid;
  grid-template-columns:1.3fr 0.8fr 0.8fr 0.8fr;
  gap:36px;
  align-items:start;
  margin-bottom:18px;
}

.footer-logo
{
  width:160px;
  height:auto;
  margin-bottom:12px;
}

footer h4
{
  color:#fff;
  margin-bottom:8px;
  font-size:15px;
  text-transform:uppercase;
}

footer p
{
  color:var(--text-muted);
  display:block;
  margin-bottom:6px;
  font-size:13px;
  line-height:1.45;
  max-width:340px;
}

footer a
{
  color:var(--text-muted);
  display:block;
  margin-bottom:6px;
  font-size:13px;
  line-height:1.35;
}

footer a:hover
{
  color:#fff;
}

.legal
{
  border-top:1px solid var(--line-dark);
  padding-top:10px;
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--text-dim);
  font-size:12px;
}


/* --------------------------------------------------
   22. Reveal Animation
-------------------------------------------------- */

.reveal
{
  opacity:0;
  transform:translateY(36px);
  transition:.75s ease;
}

.reveal.active
{
  opacity:1;
  transform:none;
}


/* --------------------------------------------------
   23. Globale dunkle Box-/Hover-Regeln
   --------------------------------------------------
   Diese Regeln sorgen dafür, dass alle Karten/Boxen die
   zentralen Variablen aus :root verwenden.
-------------------------------------------------- */

.feature-card:not(.feature-bg-card),
.panel,
.panel.light,
.home-box,
.service,
.machine,
.team-card,
.info-box,
.above-service-card,
.service-modal-box,
.fleet-overview,
.fleet-modal-content,
.fleet-modal-grid > div,
form,
.radio-list label,
.privacy-modal-content,
.privacy-modal .panel.light,
.news-employee-card,
.aktuelles-card
{
  background:var(--box-bg) !important;
  color:var(--box-text) !important;
  border-color:var(--line-light) !important;
}

.feature-card:not(.feature-bg-card):hover,
.panel:hover,
.home-box:hover,
.service:hover,
.machine:hover,
.team-card:hover,
.info-box:hover,
.above-service-card:hover,
.fleet-overview:hover,
.fleet-modal-grid > div:hover
{
  background:var(--hover-bg) !important;
}

.feature-card h3,
.panel h2,
.panel h3,
.panel p,
.panel.light p,
.home-box h2,
.home-box p,
.home-box li,
.service h3,
.service p,
.machine,
.team-card h3,
.team-card a,
.info-box,
.above-service-card h3,
.above-service-card p,
.service-modal-content h2,
.service-modal-content p,
.fleet-overview h2,
.fleet-main-list li,
.fleet-modal-grid li,
form,
label,
input,
select,
textarea,
.privacy-modal-content,
.news-employee-card h3,
.news-employee-card p,
.aktuelles-card h3,
.aktuelles-card p
{
  color:var(--box-text) !important;
}

.lead,
.muted,
.aktuelles-head p,
footer p,
footer a
{
  color:var(--text-muted) !important;
}

input::placeholder,
textarea::placeholder
{
  color:var(--text-dim);
}

/* --------------------------------------------------
   24. Leistungskreislauf Startseite
-------------------------------------------------- */

.kreislauf-section
{
  background:var(--site-bg);
  padding:40px 0 120px;
}

.kreislauf-wrapper
{
  position:relative;
  width:1200px;
  max-width:94vw;
  height:850px;
  margin:70px auto 0;
}

/* --------------------------------------------------
   24.1 Kreislauf Ring
-------------------------------------------------- */

.kreislauf-wrapper::before
{
  content:"";

  position:absolute;

  top:50%;
  left:50%;

  width:760px;
  height:760px;

  transform:translate(-50%,-50%);

  border:6px solid rgba(155,17,30);

  border-radius:50%;

  z-index:1;

  pointer-events:none;
}

/* Mitte */

.kreislauf-center
{
  position:absolute;
  top:50%;
  left:50%;

  width:330px;
  height:330px;

  transform:translate(-50%,-50%);

  border:3px solid var(--red);
  border-radius:50%;
  background:var(--box-bg);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;
  z-index:3;
}

.kreislauf-center span
{
  display:block;
  color:var(--red);
  font-size:22px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:12px;
}

.kreislauf-center strong
{
  display:block;
  color:#fff;
  font-size:38px;
  font-weight:1000;
  line-height:1.05;
  max-width:240px;
  text-align:center;
}

/* --------------------------------------------------
   24.2 Kreislauf Pfeile
-------------------------------------------------- */

.kreis-pfeil
{
  position:absolute;

  color:var(--red);

  font-size:34px;

  z-index:20;

  text-shadow:0 0 12px rgba(155,17,30,.25);
}

/* Oben rechts */
.p1
{
  top:58px;
  left:755px;
  transform:rotate(25deg);
}

/* Rechts oben */
.p2
{
  top:305px;
  right:213px;
  transform:rotate(76deg);
}

/* Rechts Mitte */
.p3
{
  top:550px;
  right:233px;
  transform:rotate(115deg);
}

/* Rechts unten */
.p4
{
  bottom:52px;
  right:420px;
  transform:rotate(160deg);
}

/* Unten links */
.p5
{
  bottom:52px;
  right:745px;
  transform:rotate(205deg);
}

/* Links unten */
.p6
{
  bottom:250px;
  right:936px;
  transform:rotate(250deg);
}

/* Links Mitte */
.p7
{
  top:305px;
  left:212px;
  transform:rotate(288deg);
}

/* Links oben */
.p8
{
  top:63px;
  left:400px;
  transform:rotate(340deg);
}

/* --------------------------------------------------
   24.3 Kreislauf Karten
-------------------------------------------------- */

.kreis-item
{
  position:absolute;

  width:240px;
  height:190px;

  overflow:visible;

  border:1px solid rgba(255,255,255,.30);
  background:#050505;

  box-shadow:0 20px 50px rgba(0,0,0,.30);

  clip-path:polygon(
    0 0,
    calc(100% - 24px) 0,
    100% 24px,
    100% 100%,
    24px 100%,
    0 calc(100% - 24px)
  );

  z-index:4;
}

.kreis-item::before
{
  content:attr(data-number);

  position:absolute;
  top:-16px;
  left:-16px;

  width:60px;
  height:60px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:linear-gradient(135deg,#d80000,#9b111e);
  color:#fff;

  font-size:34px;
  font-weight:1000;

  z-index:10;

  box-shadow:0 10px 24px rgba(0,0,0,.35);

  clip-path:polygon(
    0 0,
    100% 0,
    100% 72%,
    72% 100%,
    0 100%
  );
}

.kreis-item img
{
  width:100%;
  height:154px;

  object-fit:cover;

  display:block;
}

.kreis-title
{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  background:rgba(0,0,0,.85);

  color:#fff;

  font-size:16px;
  font-weight:1000;

  border-bottom:4px solid var(--red);
}

/* --------------------------------------------------
   24.4 Kreislauf Positionen
-------------------------------------------------- */

.item1
{
  top:-40px;
  left:50%;
  transform:translateX(-50%);
}

.item2
{
  top:120px;
  right:170px;
}

.item3
{
  top:360px;
  right:70px;
}

.item4
{
  bottom:60px;
  right:170px;
}

.item5
{
  bottom:-40px;
  left:50%;
  transform:translateX(-50%);
}

.item6
{
  bottom:60px;
  left:170px;
}

.item7
{
  top:360px;
  left:70px;
}

.item8
{
  top:120px;
  left:170px;
}

/* --------------------------------------------------
   25. Ansprechpartner Box auf Über uns
-------------------------------------------------- */

.team-contact-section
{
  background:var(--site-bg);
  padding:var(--section-space) 0;
}

.team-contact-box
{
  background:var(--box-bg);
  border:1px solid var(--line-light);
  padding:52px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.team-contact-box .section-head
{
  margin-bottom:42px;
}

.team-contact-box h2
{
  color:var(--box-text);
}

.team-contact-box .lead
{
  max-width:820px;
  margin:0 auto;
}


/* --------------------------------------------------
   26. Karriere Fun Popup
-------------------------------------------------- */

.career-fun-popup
{
  position:fixed;
  right:28px;
  bottom:28px;

  width:390px;
  max-width:calc(100vw - 32px);

  background:
    linear-gradient(135deg, rgba(155,17,30,.96), rgba(36,36,36,.98));

  color:#fff !important;

  border:1px solid rgba(255,255,255,.18);
  padding:26px;

  box-shadow:0 35px 90px rgba(0,0,0,.55);

  z-index:99999;

  opacity:0;
  transform:translateY(30px) scale(.96);
  pointer-events:none;

  transition:.35s ease;
}

.career-fun-popup.open
{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.career-fun-popup:hover
{
  transform:translateY(-6px) scale(1.02);
}

.career-fun-close
{
  position:absolute;
  top:10px;
  right:12px;

  width:34px;
  height:34px;

  border:0;
  background:rgba(0,0,0,.25);
  color:#fff;

  font-size:26px;
  cursor:pointer;

  z-index:2;
}

.career-fun-badge
{
  display:inline-flex;
  margin-bottom:14px;

  background:#fff;
  color:var(--red);

  padding:6px 12px;

  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.career-fun-content
{
  display:flex;
  gap:16px;
  align-items:center;
}

.career-fun-icon
{
  width:90px;
  height:90px;

  flex:0 0 90px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.career-fun-icon img
{
  width:100%;
  height:100%;

  object-fit:contain;

  display:block;
}

.career-fun-popup h3
{
  font-size:28px;
  text-transform:uppercase;
  margin-bottom:6px;
  color:#fff;
}

.career-fun-popup p
{
  color:rgba(255,255,255,.86);
  margin-bottom:8px;
  line-height:1.45;
}

.career-fun-popup span
{
  color:#fff;
  font-weight:1000;
  text-transform:uppercase;
}

/* --------------------------------------------------
   27. In der Luft - Kranbuchung
-------------------------------------------------- */

.crane-booking-section
{
  background:var(--site-bg);
  padding:var(--section-space) 0;
}

.crane-contact-card
{
  width:320px;
  max-width:100%;
  margin:0 auto 100px;
  padding:26px;
  text-align:center;
  background:var(--box-bg);
  border:1px solid var(--line-light);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.crane-contact-card img
{
  width:105px;
  height:105px;
  object-fit:cover;
  border-radius:50%;
  margin:0 auto 16px;
  border:4px solid var(--red);
}

.crane-contact-card h3
{
  font-size:24px;
  margin-bottom:4px;
}

.crane-contact-job
{
  color:var(--red);
  font-weight:900;
  margin-bottom:12px;
}

.crane-contact-card a,
.crane-contact-card p
{
  display:block;
  color:var(--box-text);
  font-weight:700;
  margin-bottom:6px;
}

.crane-booking-grid
{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
}

.crane-booking-card
{
  position:relative;
  overflow:visible;
  min-height:320px;
  margin-top:120px;
  background:var(--box-bg);
  border:1px solid var(--line-light);
}

.crane-booking-card img
{
  position:absolute;
  top:-200px;
  left:50%;
  width:650px;
  height:auto;
  transform:translateX(-50%);
  z-index:20;
}

.crane-booking-content
{
  padding:40px 30px 30px;
}

.crane-booking-content h3
{
  font-size:24px;
  margin-bottom:18px;
  text-transform:none;
}

.crane-booking-content p
{
  color:var(--text-soft);
  margin-bottom:26px;
}

.crane-booking-btn
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  min-height:50px;
  padding:0 28px;

  background:var(--red);
  color:#fff !important;

  font-weight:1000;
}

.crane-booking-note
{
  margin-top:20px;
  background:var(--red);
  color:#fff;
  padding:24px 32px;
  font-weight:800;
  line-height:1.55;
}

.crane-contact-job
{
  color:var(--red) !important;
  font-weight:900 !important;
}



/* --------------------------------------------------
   28. Responsive
-------------------------------------------------- */


/* Tablet / kleine Laptops bis 1180px */

@media(max-width:1180px)
{
  .header-inner
  {
    width:94%;
    min-height:76px;
    padding:12px 18px;
  }


  .nav
  {
    display:none;
  }


  .nav.open
  {
    display:flex;
  }


  .mobile-toggle
  {
    display:block;
  }


  .feature-grid,
  .grid-3,
  .fleet-highlight,
  .news-highlight-grid,
  .aktuelles-grid,
  .contact-overview-grid
  {
    grid-template-columns:1fr;
  }


  .grid-4
  {
    grid-template-columns:1fr 1fr;
  }


  .split,
  .contact-grid,
  .fleet-page-grid,
  .service-modal-content,
  .aktuelles-modal-content
  {
    grid-template-columns:1fr;
  }


  .fleet-carousel,
  .service-carousel,
  .aktuelles-carousel
  {
    height:360px;
  }


  .fleet-modal-grid
  {
    grid-template-columns:1fr;
  }


  .fleet-modal-content,
  .service-modal-box,
  .aktuelles-modal-box
  {
    padding:34px 22px;
  }


  .above-service-grid
  {
    grid-template-columns:repeat(2,1fr);
  }


  .team-grid
  {
    grid-template-columns:repeat(2,1fr);
  }


  .news-employee-card
  {
    max-width:520px;
    margin:0 auto;
  }


  .drop.open .dropdown
  {
    display:block !important;
  }


  /* Leistungskreislauf auf Tablet */

  .kreislauf-wrapper
  {
    width:100%;
    max-width:900px;
    height:auto;
    margin:50px auto 0;

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }


  .kreislauf-wrapper::before,
  .kreislauf-wrapper::after,
  .kreislauf-center,
  .kreis-pfeil
  {
    display:none !important;
  }


  .kreis-item
  {
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;

    width:100%;
    height:220px;
  }
}


/* Handy und kleine Tablets bis 840px */

@media(max-width:840px)
{
  html,
  body
  {
    max-width:100%;
    overflow-x:hidden;
  }


  .container
  {
    width:92%;
    max-width:100%;
  }


  .header
  {
    top:0;
    padding-top:10px;
  }


  .header-inner
  {
    width:94%;
    min-height:72px;
    padding:0 16px;
    margin-top:0;
  }


  .logo img
  {
    height:52px;
  }


  .nav
  {
    position:absolute;
    top:82px;
    left:0;
    right:0;
    width:100%;

    background:rgba(22,22,22,.97);
    border:1px solid var(--line-light);
    box-shadow:var(--shadow);

    flex-direction:column;
    align-items:stretch;
    gap:0;

    padding:12px;
  }


  .nav a:not(.nav-job),
  .nav .dropbtn
  {
    width:100%;
    display:block;
    padding:16px 18px;

    color:#fff !important;
    font-size:18px;
    font-weight:900;

    border-bottom:1px solid var(--line-light);
  }


  .nav a.nav-job
  {
    width:100%;
    display:block;
    padding:16px 18px;

    color:var(--red) !important;
    font-size:18px;
    font-weight:1000 !important;

    border-bottom:1px solid var(--line-light);
  }


  .nav a:last-child
  {
    border-bottom:0;
  }


  .drop
  {
    width:100%;
  }


  .dropdown
  {
    position:static;
    display:block;
    width:100%;
    margin-top:0;
    padding:0;

    background:#111;
    border:1px solid var(--line-light);
    box-shadow:none;
  }


  .dropdown a
  {
    padding:15px 22px 15px 34px;
    background:#111;
    color:#fff !important;
    font-size:16px;
  }


  .dropdown a span
  {
    color:var(--text-muted) !important;
  }


  .hero,
  .page-hero
  {
    min-height:92vh;
    padding:145px 0 90px;
    background-attachment:scroll;
  }


  .hero h1,
  .page-hero h1
  {
    font-size:clamp(42px,11vw,64px);
    line-height:.92;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }


  .hero-subline,
  .page-hero p
  {
    font-size:18px;
  }


  .hero-text
  {
    font-size:16px;
  }


  .btn,
  .mini-btn
  {
    width:100%;
    min-width:0;
  }


  .feature-wrap
  {
    margin-top:0;
    padding-top:20px;
    opacity:1 !important;
    transform:none !important;
    visibility:visible !important;
  }


  .feature-grid,
  .grid-2,
  .grid-4,
  .footer-grid,
  .team-grid,
  .above-service-grid,
  .contact-overview-grid
  {
    grid-template-columns:1fr;
  }


  .feature-bg-card
  {
    min-height:360px;
  }


  .home-box
  {
    min-height:auto;
  }


  .fleet-list
  {
    columns:1;
  }


  .fleet-carousel
  {
    height:320px;
  }


  .service-modal,
  .fleet-modal,
  .aktuelles-modal,
  .privacy-modal
  {
    padding:24px 14px;
  }


  .service-modal-box,
  .fleet-modal-content,
  .aktuelles-modal-box,
  .privacy-modal-content
  {
    padding:30px 18px;
  }


  .service-carousel,
  .aktuelles-carousel
  {
    height:320px;
  }


  .form-row
  {
    grid-template-columns:1fr;
  }


  .side-social
  {
    display:none;
  }


  .legal
  {
    flex-direction:column;
  }


  .kreislauf-wrapper
  {
    grid-template-columns:1fr;
    max-width:100%;
    overflow:hidden;
  }


  .kreislauf-section
  {
    max-width:100%;
    overflow:hidden;
  }


  .kreis-item
  {
    height:230px;
    width:100% !important;
    max-width:100%;
  }


  .kreislauf-section .section-head
  {
    overflow:hidden;
  }


  .kreislauf-section h2
  {
    font-size:clamp(32px,9vw,54px);
    line-height:.95;
    max-width:100%;
  }


  .crane-booking-grid
  {
    grid-template-columns:1fr;
    gap:44px;
  }


  .crane-booking-card
  {
    overflow:visible;
    min-height:auto;
    margin-top:112px;
    padding-top:118px;
  }


  .crane-booking-card img
  {
    position:absolute;
    top:-96px;
    left:50%;
    width:min(86vw,360px);
    max-width:360px;
    height:auto;
    margin:0;
    transform:translateX(-50%);
    z-index:2;
    pointer-events:none;
  }


  .crane-booking-content
  {
    padding:24px;
  }


  /* Kontaktseite Mobile Fix */

  .contact-overview-grid
  {
    grid-template-columns:1fr !important;
    gap:18px;
    width:100%;
    max-width:100%;
  }


  .contact-info-box
  {
    width:100%;
    max-width:100%;
    min-width:0;
    padding:28px 24px;
  }


  .contact-info-box h3
  {
    font-size:30px;
    line-height:1.1;
    word-break:break-word;
  }


  .contact-info-box p,
  .contact-info-box a
  {
    font-size:18px;
    line-height:1.6;
    word-break:break-word;
    overflow-wrap:anywhere;
  }


  .section-head.center h2
  {
    font-size:42px;
    line-height:1.05;
    word-break:normal;
  }


  .section-head.center .lead
  {
    font-size:20px;
    line-height:1.6;
  }
}


/* Kleine Handys bis 650px */

@media(max-width:650px)
{
  .header-inner
  {
    width:96%;
  }


  .logo img
  {
    height:48px;
  }


  .mobile-toggle
  {
    width:42px;
    height:42px;
    font-size:22px;
  }


  .nav
  {
    top:78px;
    padding:10px;
  }


  .nav a:not(.nav-job),
  .nav .dropbtn,
  .nav a.nav-job
  {
    padding:14px 16px;
    font-size:16px;
  }


  .dropdown a
  {
    padding:13px 18px 13px 28px;
    font-size:15px;
  }


  section
  {
    padding:var(--section-space-mobile) 0;
  }


  .hero,
  .page-hero
  {
    min-height:88vh;
    padding:130px 0 70px;
  }


  .kicker
  {
    font-size:13px;
    margin-bottom:18px;
  }


  .kicker:before
  {
    width:46px;
    height:3px;
  }


  .hero h1,
  .page-hero h1
  {
    font-size:clamp(34px,10vw,48px);
    line-height:.95;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
}


  h2
  {
    font-size:clamp(32px,11vw,46px);
  }


  h3
  {
    font-size:clamp(24px,8vw,32px);
  }


  .panel,
  .home-box,
  .service,
  .above-service-card,
  .info-box,
  form
  {
    padding:24px;
  }


  .feature-image-content
  {
    padding:26px;
  }


  .feature-bg-card
  {
    min-height:320px;
  }


  .aktuelles-card > img
  {
    height:210px;
  }


  .news-laurel
  {
    width:100px;
  }


  .news-employee-image
  {
    width:115px;
    height:115px;
  }


  .footer-grid
  {
    gap:24px;
  }


  .kreis-item
  {
    height:210px;
  }


  .crane-booking-card
  {
    margin-top:96px;
    padding-top:112px;
  }


  .crane-booking-card img
  {
    top:-84px;
    width:min(82vw,320px);
    max-width:320px;
  }


  /* Kontaktseite kleine Handys */

  .contact-info-box
  {
    padding:24px 20px;
  }


  .contact-info-box h3
  {
    font-size:28px;
  }


  .contact-info-box p,
  .contact-info-box a
  {
    font-size:17px;
  }


  .section-head.center h2
  {
    font-size:36px;
  }


  .section-head.center .lead
  {
    font-size:18px;
  }

  /* Kontakt Hero Mobile Fix */

  .hero-kontakt .page-hero-content
  {
    width:92%;
    max-width:92%;
  }

  .hero-kontakt h1
  {
    font-size:clamp(34px,9.5vw,46px);
    line-height:.95;
    letter-spacing:-1px;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .hero-kontakt p
  {
    font-size:18px;
    line-height:1.45;
  }
}