/* ==========================================================================
   CONNECT Landingpage
   Referenzbreite der Vorlage: 1920px. Größen/Abstände werden über clamp()
   fluid zwischen einem Mobile-Minimalwert und dem aus der Vorlage
   gemessenen Desktop-Wert skaliert (Faktor: Wert / 19.2 = vw-Anteil bei 1920px).
   ========================================================================== */

/* ----- @font-face: Klavika (lokal) ----- */
@font-face {
  font-family: "Klavika";
  src:
    url("../assets/fonts/Klavika-Light/Klavika Light.woff2") format("woff2"),
    url("../assets/fonts/Klavika-Light/Klavika Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Klavika";
  src:
    url("../assets/fonts/Klavika-Regular/KlavikaRegular.woff2") format("woff2"),
    url("../assets/fonts/Klavika-Regular/KlavikaRegular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Klavika";
  src:
    url("../assets/fonts/Klavika-Medium/KlavikaMedium.woff2") format("woff2"),
    url("../assets/fonts/Klavika-Medium/KlavikaMedium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ----- Custom Properties ----- */
:root {
  /* Farben (Vorgaben/Farbenvorgaben.jpg) */
  --color-white: #ffffff;
  --color-light-gray: #f5f5f5;
  --color-pale-gray: #d0d0d0;
  --color-mid-gray: #707070;
  --color-dark-gray: #3f3f3e;
  --color-red: #d51317;
  --color-red-dark: #af151b;
  --color-red-darker: #901115;

  /* Typografie */
  --font-base: "Klavika", "Arial", sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --fs-notice: clamp(11px, 0.73vw, 14px);
  --fs-slogan: clamp(24px, 2.08vw, 40px);
  --fs-heading: clamp(28px, 3.33vw, 64px);
  --fs-pill: clamp(18px, 1.56vw, 30px);
  --fs-table: clamp(14px, 0.94vw, 18px);
  --fs-price: clamp(44px, 5vw, 96px);
  --fs-currency: clamp(30px, 3.75vw, 72px);
  --fs-footnote: clamp(13px, 0.83vw, 16px);
  --fs-footer: clamp(13px, 0.83vw, 16px);

  /* Layout */
  --container-width: 1421px;
  --container-padding: clamp(20px, 5vw, 60px);
  --privat-grid-width: 1009px;
  --footer-width: 1630px;
}

/* ----- Reset / Basis ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--weight-regular);
  color: var(--color-dark-gray);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
p,
dl,
dd {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ----- Smartphone-Mockups: Einblenden + dezentes Schweben ----- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes phone-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes phone-float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-14px);
    }
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Hero-Screen: Kopfzeile + Hero/rotes Band zusammen genau 100vh hoch,
   damit beim ersten Aufruf der Scroll-Button im roten Band ohne Scrollen
   sichtbar ist.
   ========================================================================== */
.hero-screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ----- Kopfzeile: "HIER ENTSTEHT DIE WEBSITE VON" ----- */
.top-notice {
  flex: 0 0 auto;
  padding-top: clamp(10px, 1vw, 20px);
  text-align: center;
}

.top-notice__text {
  display: inline-block;
  font-size: var(--fs-notice);
  font-weight: var(--weight-regular);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  padding-bottom: clamp(8px, 0.6vw, 11px);
  border-bottom: 1px solid var(--color-pale-gray);
}

/* ==========================================================================
   Hero + rotes Band: Logo, Smartphone-Mockup 1, Slogan, Scroll-Button
   Nutzt aspect-ratio, um die Vorlagen-Proportionen (1920 x 1001) bei jeder
   Breite exakt zu erhalten; ab --bp-s wird auf ein gestapeltes Layout
   umgeschaltet (siehe Media Query unten).
   ========================================================================== */
.intro {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  background: linear-gradient(
    to bottom,
    var(--color-white) 0%,
    var(--color-white) 65.03%,
    var(--color-red-dark) 65.03%,
    var(--color-red-dark) 100%
  );
}

.intro__logo {
  position: absolute;
  top: 13.69%;
  left: 50%;
  width: 31.15%;
  min-width: 190px;
  transform: translateX(-50%);
}

.intro__phone {
  position: absolute;
  top: 27%;
  left: 1.5%;
  width: 45%;
  min-width: 260px;
}

@media (prefers-reduced-motion: no-preference) {
  .intro__phone {
    opacity: 0;
    animation:
      phone-fade-in 1s ease-out 0.3s forwards,
      phone-float 4.5s ease-in-out 1.3s infinite;
  }
}

.intro__slogan {
  position: absolute;
  top: 71.6%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-slogan);
  font-weight: var(--weight-light);
  color: var(--color-white);
}

.intro .scroll-btn {
  position: absolute;
  top: 87.1%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   Scroll-Button (wiederverwendet in Band 1 und Band 2)
   ========================================================================== */
.scroll-btn {
  width: clamp(36px, 3.125vw, 60px);
  height: clamp(36px, 3.125vw, 60px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.scroll-btn img {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   TARIFE | Business Mobil
   ========================================================================== */
.business {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-red-darker);
  padding-block: clamp(40px, 8vw, 120px);
}

.section-heading {
  font-size: var(--fs-heading);
  font-weight: var(--weight-medium);
  text-align: center;
  margin-bottom: clamp(24px, 2.55vw, 49px);
}

.section-heading .divider {
  font-weight: var(--weight-regular);
  opacity: 0.6;
  padding-inline: 0.15em;
}

.business .section-heading {
  color: var(--color-white);
}

.tariff-grid {
  display: grid;
  margin-inline: auto;
}

.tariff-grid--business {
  max-width: var(--container-width);
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8.72%;
  row-gap: clamp(32px, 3vw, 58px);
}

.tariff-grid--privat {
  max-width: var(--privat-grid-width);
  grid-template-columns: repeat(2, 1fr);
  column-gap: 22.5%;
  row-gap: clamp(32px, 3vw, 58px);
}

.tariff-card__pill {
  font-size: var(--fs-pill);
  font-weight: var(--weight-medium);
  text-align: center;
  color: var(--color-white);
  padding-block: clamp(10px, 1.1vw, 20px);
  margin-bottom: clamp(14px, 1.5vw, 28px);
}

.tariff-card--business .tariff-card__pill {
  background: var(--color-red-dark);
}

.tariff-card--privat .tariff-card__pill {
  background: var(--color-mid-gray);
}

.tariff-card__table div {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: var(--fs-table);
  padding-block: clamp(8px, 0.65vw, 13px);
  border-bottom: 1px solid var(--row-divider-color, rgba(255, 255, 255, 0.18));
}

.tariff-card--privat .tariff-card__table {
  --row-divider-color: var(--color-pale-gray);
  color: var(--color-dark-gray);
}

.tariff-card--business .tariff-card__table {
  color: var(--color-white);
}

.tariff-card__price {
  text-align: right;
  font-weight: var(--weight-regular);
  margin-top: clamp(18px, 2vw, 38px);
}

.tariff-card--business .tariff-card__price {
  color: var(--color-white);
}

.tariff-card--privat .tariff-card__price {
  color: var(--color-mid-gray);
}

.tariff-card__price .currency {
  font-size: var(--fs-currency);
  margin-right: 0.15em;
}

.tariff-card__price .amount {
  font-size: var(--fs-price);
  line-height: 1;
}

.tariff-note {
  text-align: center;
  font-size: var(--fs-footnote);
  margin-top: clamp(24px, 2.6vw, 50px);
}

.business .tariff-note {
  color: rgba(255, 255, 255, 0.8);
}

.privat .tariff-note {
  color: var(--color-mid-gray);
}

.business__phone-wrap {
  position: absolute;
  right: 2.2%;
  bottom: clamp(-260px, -14vw, -110px);
  width: clamp(230px, 40vw, 768px);
  pointer-events: none;
}

.business__phone {
  display: block;
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .business__phone-wrap {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  }

  .business__phone-wrap.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .business__phone-wrap.is-visible .business__phone {
    animation: phone-float 4.5s ease-in-out 0.9s infinite;
  }
}

.business .scroll-btn {
  position: relative;
  display: block;
  margin: clamp(32px, 3.5vw, 68px) auto 0;
}

/* ==========================================================================
   TARIFE | Privat Mobil
   ========================================================================== */
.privat {
  background: var(--color-white);
  padding-block: clamp(50px, 11.25vw, 216px);
}

.privat .section-heading {
  color: var(--color-dark-gray);
}

.privat .section-heading .divider {
  color: var(--color-dark-gray);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-mid-gray);
  color: var(--color-white);
  padding-block: clamp(28px, 3vw, 58px);
}

.site-footer__inner {
  width: 100%;
  max-width: var(--footer-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
}

.site-footer__company {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.5vw, 26px);
}

.site-footer__logo {
  width: clamp(48px, 4.3vw, 83px);
  height: clamp(48px, 4.3vw, 83px);
  flex-shrink: 0;
}

.site-footer__address {
  font-style: normal;
  font-size: var(--fs-footer);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.site-footer__address a {
  text-decoration: none;
}

.site-footer__address a:hover,
.site-footer__address a:focus-visible {
  text-decoration: underline;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55em;
  font-size: var(--fs-footer);
  letter-spacing: 0.02em;
}

.site-footer__links a {
  text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
   Fokus-Sichtbarkeit (Tastaturbedienbarkeit)
   ========================================================================== */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
}

/* ==========================================================================
   Responsive: Tablet
   ========================================================================== */
@media (max-width: 1024px) {
  .tariff-grid--business {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5%;
  }
}

/* ==========================================================================
   Responsive: Smartphone / schmale Tablets
   Da keine Mobile-Vorgaben vorliegen, werden Logo/Mockup/Slogan vom
   freien Positionierungs-Canvas auf ein gestapeltes Flow-Layout umgestellt
   und die Tarif-Grids auf eine Spalte reduziert.
   ========================================================================== */
@media (max-width: 760px) {
  .hero-screen {
    height: auto;
  }

  .intro {
    flex: none;
    display: flex;
    flex-direction: column;
    background: none;
  }

  .intro__hero-bg {
    background: var(--color-white);
    padding-block: clamp(28px, 10vw, 60px) clamp(20px, 6vw, 40px);
    display: flex;
    justify-content: center;
  }

  .intro__band-bg {
    background: var(--color-red-dark);
    padding-block: clamp(32px, 10vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 8vw, 40px);
    position: relative;
  }

  .intro__logo {
    position: static;
    transform: none;
    width: clamp(190px, 60vw, 320px);
  }

  .intro__phone {
    position: static;
    width: clamp(150px, 55vw, 260px);
  }

  .intro__slogan {
    position: static;
    text-align: center;
  }

  .intro .scroll-btn {
    position: static;
    transform: none;
  }

  .tariff-grid--business,
  .tariff-grid--privat {
    grid-template-columns: 1fr;
    max-width: 420px;
    row-gap: clamp(32px, 9vw, 48px);
  }

  .business {
    padding-bottom: clamp(70px, 24vw, 130px);
  }

  .business__phone-wrap {
    position: static;
    width: clamp(160px, 55vw, 260px);
    margin: clamp(32px, 9vw, 48px) auto 0;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .site-footer__company {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .site-footer__links {
    align-items: center;
  }
}