/* ==========================================================================
   Taxi Schöls – Taxi- und Transportservice
   Nachbau des Webflow-Onepagers ohne Webflow-Framework.
   ========================================================================== */

@font-face {
  font-family: "Helvetica Neue Local";
  src: url("../fonts/HelveticaNeue.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue Local";
  src: url("../fonts/HelveticaNeue-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-weiss: #f2fcf9;
  --c-schwarz: #000d11;
  --c-blau: #00bfd8;
  --c-button: #e4efec;

  --font: "Helvetica Neue Local", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-base: clamp(15px, 2vh, 20px);
  --lh-base: 1.4;

  --section-pad-y: 10vw;
  --section-pad-x: 17vw;
  --stack: 1.5rem;
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-schwarz);
  background: var(--c-schwarz);
}
img { display: block; max-width: 100%; height: auto; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-size: 1em; font-weight: 700; }
a { color: var(--c-blau); }
button, input, select, textarea { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .5rem 1rem; background: var(--c-weiss); color: var(--c-schwarz);
}
.skip-link:focus { top: 1rem; }

/* --- Fixed UI: Logo, Seitennavigation, Taxi-Button --------------------- */
.site-logo {
  position: fixed; z-index: 20;
  top: 4vh; left: 2vw;
  width: 7vw; min-width: 80px; max-width: 130px;
}
.side-nav {
  position: fixed; z-index: 20;
  top: 45%; left: 2vw;
}
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav a {
  display: flex; align-items: center; gap: .5vw;
  color: var(--c-weiss); text-decoration: none;
  font-size: .9em; line-height: 1.55;
}
.side-nav a:hover, .side-nav a:focus-visible { color: var(--c-blau); }
.side-nav a::before {
  content: ""; flex: none;
  width: .6rem; height: .6rem;
  border: 1.5px solid var(--c-weiss); border-radius: 50%;
  transition: background-color .3s;
}
.side-nav a[aria-current="true"]::before { background: var(--c-blau); }

.taxi-button {
  position: fixed; z-index: 20;
  right: 2vw; bottom: 2vh;
  width: 5vw; min-width: 75px; max-width: 100px;
  aspect-ratio: 1;
}
.taxi-button__anim { width: 100%; height: 100%; }

/* --- Sektionen (gemeinsam) --------------------------------------------- */
.section {
  position: relative;
  min-height: 100vh;
  padding: var(--section-pad-y) var(--section-pad-x);
  background-size: cover;
  background-position: 0 0;
  overflow: hidden;
}
.section--welcome { background-image: url("../img/bg/willkommen.jpg"); }
.section--service { background-image: url("../img/bg/service.jpg"); color: var(--c-weiss); }
.section--gallery { background-image: url("../img/bg/galerie.jpg"); padding-right: 0; }
.section--taxicall { background-image: url("../img/bg/taxirufen.jpg"); color: var(--c-weiss); }
.section--jobs { background-image: url("../img/bg/jobs.jpg"); min-height: 0; }
.section--contact { background-image: url("../img/bg/kontakt.jpg"); color: var(--c-weiss); }

.section__title {
  margin-bottom: 30px;
  text-align: center;
}

/* --- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh; min-height: 480px;
  overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: 0 0;
  transform: translateX(100%);
  transition: transform 3s ease-in-out;
}
.hero__slide.is-active { transform: translateX(0); }
.hero__slide.is-leaving { transform: translateX(-100%); }
.hero__slide.no-transition { transition: none; }
.hero__gradient {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  pointer-events: none;
}
.hero__logo {
  position: absolute; z-index: 2;
  left: 50%; bottom: 5vh;
  transform: translateX(-50%);
  height: 25vh; width: auto; max-width: 90vw;
}

/* --- Willkommen -------------------------------------------------------- */
.welcome {
  display: flex; gap: 2%;
  height: calc(100vh - 2 * var(--section-pad-y));
  min-height: 420px;
}
.welcome__image { flex: 0 0 40%; height: 100%; }
.welcome__image img { width: 100%; height: 100%; object-fit: cover; }
.welcome__text { flex: 1; }
.welcome__text h2 { margin-bottom: 1em; }

/* --- Service ------------------------------------------------------------ */
.services {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 5em;
}
.services__list { list-style: none; margin: 0; padding: 0; }
.services__item + .services__item { margin-top: 3vh; }
.services__toggle {
  display: block; width: 100%;
  padding: 0 0 .1em;
  background: none; border: 0;
  border-bottom: 1px solid var(--c-blau);
  color: var(--c-weiss);
  text-align: left; white-space: nowrap;
  cursor: pointer;
  transition: border-bottom-width .2s;
}
.services__toggle:hover,
.services__toggle:focus-visible,
.services__toggle[aria-expanded="true"] { border-bottom-width: 3px; margin-bottom: -2px; }
.services__toggle:focus-visible { outline: 1px dotted var(--c-blau); outline-offset: 4px; }
.services__panel {
  position: absolute; top: 0; right: 0;
  width: calc(50% - 2.5em);
  color: var(--c-blau);
}
.services__panel[hidden] { display: none; }
.services__panel img {
  width: 100%; max-height: 45vh; object-fit: cover;
  margin-top: 1.5em;
}

/* --- Galerie ------------------------------------------------------------ */
.gallery { position: relative; height: calc(100vh - 2 * var(--section-pad-y)); min-height: 420px; }
.gallery__track {
  display: flex; gap: 2vw;
  height: 60vh;
  margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item { flex: none; height: 100%; scroll-snap-align: start; }
.gallery__item img { height: 100%; width: auto; max-width: none; }
.gallery__nav {
  position: absolute; left: 0; right: 2vw; top: calc(60vh + 6vh);
  display: flex; justify-content: space-between;
  pointer-events: none;
}
.gallery__btn {
  pointer-events: auto;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--c-schwarz);
}
.gallery__btn svg { width: 1.6rem; height: 1.6rem; }
.gallery__btn:hover { color: var(--c-blau); }

/* --- Taxi rufen (Formular) ---------------------------------------------- */
.taxi-form { display: flex; flex-direction: column; }
.field {
  display: block; width: 100%;
  min-height: 40px; margin-bottom: 10px; padding: 8px 12px;
  background: transparent; color: var(--c-weiss);
  border: 0; border-bottom: 1px solid var(--c-weiss); border-radius: 0;
  font-size: .7em; font-style: italic; line-height: 1.7rem;
}
.field::placeholder { color: rgb(255 255 255 / .86); }
.field:focus { outline: none; border-bottom-color: var(--c-blau); }
.field--spaced { margin-top: 4vh; }
select.field { color: rgb(242 252 249 / .6); appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23f2fcf9' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
}
select.field:valid { color: var(--c-weiss); }
select.field option { color: var(--c-schwarz); font-style: normal; }
input[type="date"].field, input[type="time"].field { color-scheme: dark; }
.field-icon { display: flex; align-items: flex-end; gap: 10px; }
.field-icon img { width: 36px; height: 35px; flex: none; margin-bottom: 10px; }
.taxi-form__actions { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 2vh; gap: 1rem; }
.taxi-form__status { margin: 0 0 1.5em; color: var(--c-blau); }
.taxi-form__status--error { color: #ff6b6b; }
.taxirechner { display: block; width: 90px; flex: none; }

.button {
  display: inline-block;
  padding: .6em 30px;
  background: var(--c-button); color: var(--c-schwarz);
  border: 0; text-decoration: none; cursor: pointer;
  font-size: 1em; line-height: 1.4;
  transition: background-color .2s;
}
.button:hover, .button:focus-visible { background: var(--c-blau); }
.button:active { background: rgb(0 191 216 / .65); }

/* --- Jobs ---------------------------------------------------------------- */
.job + .job { margin-top: 90px; }
.job__title { margin-bottom: 1.4em; }
.job .button { margin-top: .4em; }

/* --- Kontakt ------------------------------------------------------------ */
.contact a { color: var(--c-blau); }
.contact a:hover { color: var(--c-weiss); }
.contact__address { margin-top: 90px; font-style: normal; }
.contact__address a { color: inherit; text-decoration: none; }
.contact__address p { margin-bottom: .5em; }
.contact__links { list-style: none; margin: 90px 0 0; padding: 0; }
.contact__links li + li { margin-top: .6em; }

/* --- Impressum ---------------------------------------------------------- */
.section--legal {
  background: var(--c-weiss) url("../img/bg/impressum.svg") 50% 0 / cover no-repeat;
  color: var(--c-schwarz);
}
.legal { max-width: 60%; }
.legal h1 { margin-bottom: 2em; }
.legal h2 { margin: 2.5em 0 .3em; }
.legal h3 { margin: 1.6em 0 .2em; }
.legal a { color: inherit; }

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 991px) {
  .side-nav a { font-size: .75em; }
  .side-nav a::before { width: .45rem; height: .45rem; }
  .services { grid-template-columns: 1fr; }
  .services__toggle { white-space: normal; }
  .services__panel { position: static; width: auto; margin: 1em 0 0; }
  .services__panel img { max-height: 40vh; margin-top: 1em; }
  .legal { max-width: none; }
}

/* --- Mobil -------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --fs-base: 16px;
    --section-pad-y: 4rem;
    --section-pad-x: 10vw;
  }
  .site-logo, .side-nav { display: none; }
  .taxi-button { width: 60px; min-width: 0; right: 4vw; }

  .section { min-height: 0; }
  .section__title { text-align: left; font-size: 1.25em; }

  .hero__logo { height: auto; width: 80vw; bottom: 8vh; }

  .welcome { flex-direction: column; height: auto; min-height: 0; gap: 1.5em; }
  .welcome__image { flex: none; height: 40vh; }

  .gallery { height: auto; min-height: 0; }
  .gallery__track { height: 50vh; }
  .gallery__item img { width: auto; }
  .gallery__nav { position: static; margin-top: 1.5em; padding-right: 10vw; }

  .field { font-size: .9em; }
  .taxi-form__actions { flex-direction: column-reverse; }
  .taxi-form__actions .button { align-self: flex-end; }

  .job + .job { margin-top: 3.5rem; }
  .contact__address, .contact__links { margin-top: 3rem; }
}