/*
 * Danys Bike Suspension – responsive refinements
 * Zielbereiche: Smartphones, Tablets und kleine Laptop-Displays.
 * Diese Datei liegt bewusst nach den Basis- und Tailwind-Stilen.
 */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Lange technische Bezeichnungen, E-Mail-Adressen und URLs dürfen nie
   den Viewport verbreitern. */
p,
li,
dd,
blockquote,
label,
a,
strong,
small {
  overflow-wrap: anywhere;
}

/* Kleine Laptops / große Tablets: nicht versuchen, die Desktopdarstellung
   auf 1024–1180 px zusammenzupressen. */
@media (max-width: 1180px) {
  .container {
    width: min(100% - 2.5rem, 72rem);
  }

  .card-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calculator-layout {
    grid-template-columns: 1fr;
  }

  .calculator-summary {
    position: static;
  }

  .split-heading {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .status-list {
    justify-content: flex-start;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 3rem;
  }

  .footer-grid > div:last-child {
    grid-column: auto;
  }

  /* Tailwind-basierte Unterseiten: 4 Spalten sind bei ca. 1024 px zu eng. */
  .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-media {
    left: 18%;
  }

  .hero-copy {
    max-width: 43rem;
  }
}

/* Tablet / schmale Browserfenster */
@media (max-width: 900px) {
  .container {
    width: min(100% - 2rem, 80rem);
  }

  .section {
    padding: 5.5rem 0;
  }

  .card-grid.three,
  .benefit-grid,
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-media {
    left: 0;
    opacity: 0.48;
    background-position: 62% center;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 5rem 0 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(9,9,11,.96) 0%, rgba(9,9,11,.82) 48%, rgba(9,9,11,.35) 100%);
  }

  .hero-copy {
    max-width: 39rem;
  }

  .comparison-wrap,
  .table-scroll {
    max-width: 100%;
  }

  .table-scroll {
    -webkit-overflow-scrolling: touch;
  }

  .contact-panel {
    position: static;
  }

  /* Auch Tailwind-Unterseiten konsequent auf maximal zwei Spalten halten. */
  .grid.md\:grid-cols-3,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Smartphones */
@media (max-width: 720px) {
  .container {
    width: min(100% - 1.25rem, 80rem);
  }

  .section {
    padding: 4.5rem 0;
  }

  .hero {
    min-height: auto;
  }

  .hero-content {
    min-height: 42rem;
    padding-block: 3.5rem;
    align-items: center;
  }

  .hero-media {
    opacity: .4;
    background-position: 68% center;
  }

  .hero::after {
    background: linear-gradient(90deg, rgba(9,9,11,.98) 0%, rgba(9,9,11,.88) 62%, rgba(9,9,11,.58) 100%);
  }

  .hero h1,
  .page-hero h1,
  .split-heading h2,
  .section-header h2,
  .cta-panel h2 {
    hyphens: auto;
    overflow-wrap: normal;
  }

  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.35rem, 11vw, 3.15rem);
    line-height: .94;
  }

  .hero-copy > p,
  .page-hero p,
  .section-header p,
  .split-heading > p,
  .split-heading > div > p {
    font-size: 1rem;
    line-height: 1.7;
  }

  .eyebrow-pill {
    max-width: 100%;
    letter-spacing: .13em;
    line-height: 1.35;
  }

  .hero-highlights {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
  }

  .button,
  .button-large,
  .button-small {
    min-height: 3.25rem;
    padding-inline: 1rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .button-row {
    gap: .75rem;
  }

  .card-grid.two,
  .card-grid.three,
  .card-grid.four,
  .benefit-grid,
  .faq-grid,
  .form-grid,
  .component-toggles,
  .grid.sm\:grid-cols-2,
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  .feature-card,
  .service-card,
  .reason-card,
  .process-card,
  .brand-card,
  .testimonial-card,
  .benefit-card,
  .config-panel,
  .calculator-summary,
  .contact-panel,
  .form-card,
  .legal-page article,
  .notice-panel {
    border-radius: 1.15rem;
    padding: 1.25rem;
  }

  .process-card {
    min-height: auto;
  }

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

  .component-toggle {
    padding: 1rem;
  }

  .option-choice {
    gap: .7rem;
    padding: .9rem;
  }

  .summary-block dl div,
  .summary-line,
  .subtotal,
  .grand-total {
    gap: .65rem;
  }

  .summary-block dd {
    max-width: 58%;
  }

  .grand-total strong {
    font-size: 1.9rem;
  }

  .comparison {
    min-width: 36rem;
  }

  .comparison th,
  .comparison td {
    padding: .85rem .8rem;
    font-size: .85rem;
  }

  .cta-panel {
    border-radius: 1.5rem;
    padding: 2.6rem 1.1rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom,
  .footer-bottom div {
    flex-direction: column;
  }

  .footer-bottom div {
    gap: .65rem;
  }

  .cookie-banner {
    left: .65rem;
    right: .65rem;
    bottom: .65rem;
    max-height: calc(100dvh - 1.3rem);
    overflow-y: auto;
  }

  .page-hero {
    padding: 5.25rem 0 3.5rem;
  }

  .form-card input,
  .form-card select,
  .form-card textarea,
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Tailwind-basierte Formulare und Karten bekommen auf schmalen Displays
     weniger Außenabstand, ohne ihre Desktopgestaltung zu verändern. */
  .rounded-\[2rem\] {
    border-radius: 1.25rem !important;
  }

  .p-8,
  .sm\:p-8,
  .lg\:p-10 {
    padding: 1.25rem !important;
  }

  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-24 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  /* Mobile Links/Buttons gut mit dem Daumen bedienbar. */
  header a,
  header button,
  form button,
  .mobile-link {
    min-height: 44px;
  }
}

/* Sehr kleine Geräte, z. B. 320–390 px */
@media (max-width: 390px) {
  .container {
    width: min(100% - 1rem, 80rem);
  }

  .hero h1,
  .page-hero h1 {
    font-size: 2.15rem;
  }

  .section-kicker {
    gap: .55rem;
    letter-spacing: .14em;
  }

  .section-kicker span {
    width: 1.75rem;
  }

  .status-list span {
    font-size: .64rem;
    padding: .45rem .6rem;
  }

  .feature-card,
  .service-card,
  .reason-card,
  .process-card,
  .brand-card,
  .testimonial-card,
  .benefit-card,
  .config-panel,
  .calculator-summary,
  .contact-panel,
  .form-card {
    padding: 1rem;
  }
}
/* v4.0 – Laptop-Optimierung: kompaktere Darstellung ohne Änderung der Mobile-Ansicht */
/*
 * Ziel: typische Notebook-Auflösungen wie 1024–1500 px Breite bzw.
 * 1366×768 / 1440×900 deutlich kompakter darstellen.
 * Smartphones bis 720 px werden von diesen Regeln bewusst nicht berührt.
 */
@media (min-width: 721px) and (max-width: 1500px) {
  html {
    scroll-padding-top: calc(5rem - 1px) !important;
  }

  section[id],
  form[id] {
    scroll-margin-top: calc(5rem - 1px) !important;
  }

  /* Allgemeine vertikale Verdichtung */
  .section {
    padding-top: 4.75rem;
    padding-bottom: 4.75rem;
  }

  .section-header {
    margin-bottom: 2.6rem;
  }

  .section-header.compact {
    margin-bottom: 1.35rem;
  }

  .split-heading {
    gap: 1.75rem;
    margin-bottom: 2.75rem;
  }

  .split-heading h2,
  .section-header h2 {
    font-size: clamp(2.2rem, 3.7vw, 3.3rem);
  }

  .section-header p,
  .split-heading > p,
  .split-heading > div > p {
    font-size: .98rem;
    line-height: 1.62;
  }

  .section-kicker {
    font-size: .7rem;
  }

  /* Karten bleiben hochwertig, benötigen aber weniger Höhe. */
  .feature-card,
  .service-card,
  .reason-card,
  .process-card,
  .brand-card,
  .testimonial-card,
  .benefit-card {
    padding: 1.35rem;
    border-radius: 1.2rem;
  }

  .feature-card h3,
  .service-card h3,
  .reason-card h3,
  .process-card h3,
  .brand-card h3 {
    margin-top: 1.15rem;
    margin-bottom: .6rem;
    font-size: 1.22rem;
  }

  .feature-card p,
  .reason-card p,
  .process-card p,
  .brand-card p {
    line-height: 1.55;
  }

  .process-card {
    min-height: 11.25rem;
  }

  .brand-card h3 {
    font-size: 1.45rem;
  }

  .testimonial-card blockquote {
    margin: .75rem 0 1rem;
    line-height: 1.55;
  }

  .legal-note {
    margin-top: 1.5rem;
  }

  /* Serviceübersicht */
  .service-cards {
    margin-bottom: 3rem;
  }

  .service-card .price {
    margin: .9rem 0;
    padding: .75rem 0;
  }

  .service-card .price strong {
    font-size: 1.7rem;
  }

  .service-card ul,
  .feature-card ul {
    margin: 1rem 0;
  }

  .service-card li,
  .feature-card li {
    margin: .5rem 0;
  }

  .comparison-wrap {
    margin: 3rem 0;
  }

  .comparison th,
  .comparison td {
    padding: .82rem 1rem;
  }

  .benefit-card {
    padding: 1rem 1.1rem;
  }

  .benefit-card > span {
    width: 2.4rem;
    height: 2.4rem;
  }

  /* Hero: Inhalt passt auf typischen Laptops deutlich besser in einen Viewport. */
  .hero-content-v35 {
    min-height: calc(100vh - 5rem) !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .hero-content-v35 .mb-6 {
    margin-bottom: 1rem !important;
  }

  .hero-content-v35 h1 {
    max-width: 42rem !important;
    font-size: clamp(3rem, 4.65vw, 4.2rem) !important;
    line-height: .91 !important;
  }

  .hero-content-v35 h1 span {
    margin-top: .25rem !important;
  }

  .hero-content-v35 p {
    margin-top: 1.1rem !important;
    max-width: 38rem !important;
    font-size: .98rem !important;
    line-height: 1.55 !important;
  }

  .hero-content-v35 .mt-9 {
    margin-top: 1.35rem !important;
    gap: .65rem !important;
  }

  .hero-content-v35 .mt-9 > a {
    min-height: 3rem !important;
    padding: .72rem 1rem !important;
    border-radius: .65rem !important;
    font-size: .7rem !important;
  }

  .hero-content-v35 > .relative.z-20 {
    margin-top: 1.65rem !important;
  }

  .hero-content-v35 > .relative.z-20 > .relative {
    border-radius: 1.2rem !important;
  }

  .hero-content-v35 > .relative.z-20 .grid > div {
    min-height: 4.75rem !important;
    gap: .8rem !important;
    padding: .8rem 1.1rem !important;
  }

  .hero-content-v35 > .relative.z-20 .grid > div > span {
    width: 2.35rem !important;
    height: 2.35rem !important;
    font-size: 1rem !important;
  }

  .hero-content-v35 > .relative.z-20 .grid > div > p {
    margin: 0 !important;
    font-size: .85rem !important;
    line-height: 1.35 !important;
  }

  /* Erste Leistungssektion auf der Startseite */
  .home-services-intro {
    padding-top: 4.75rem !important;
    padding-bottom: 4.75rem !important;
  }

  .home-services-intro .gap-8 {
    gap: 1.5rem !important;
  }

  .home-services-intro .mb-5 {
    margin-bottom: .9rem !important;
  }

  .home-services-intro h2 {
    font-size: clamp(2.35rem, 4vw, 3.45rem) !important;
  }

  .home-services-intro .mt-14 {
    margin-top: 2rem !important;
  }

  .home-services-intro .gap-6 {
    gap: 1rem !important;
  }

  .home-services-intro article {
    padding: 1.35rem !important;
    border-radius: 1.3rem !important;
  }

  .home-services-intro article h3 {
    margin-top: 1.2rem !important;
    font-size: 1.3rem !important;
  }

  .home-services-intro article p {
    margin-top: .75rem !important;
    font-size: .9rem !important;
    line-height: 1.55 !important;
  }

  .home-services-intro article .mt-8 {
    margin-top: 1.15rem !important;
  }

  .home-services-intro article .py-2 {
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
  }

  /* Detailbereiche Tuning & Bike Setup bewusst laptop-kompakt halten. */
  #tuning,
  #bike-setup {
    padding-top: 4.75rem !important;
    padding-bottom: 4.75rem !important;
  }

  #tuning .gap-10,
  #bike-setup .gap-10 {
    gap: 2rem !important;
  }

  #tuning h2,
  #bike-setup h2 {
    font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
  }

  #tuning h2 + p,
  #bike-setup h2 + p {
    margin-top: 1.15rem !important;
    font-size: .98rem !important;
    line-height: 1.6 !important;
  }

  #tuning .mt-10,
  #bike-setup .mt-10 {
    margin-top: 1.75rem !important;
  }

  #tuning .mt-8,
  #bike-setup .mt-8 {
    margin-top: 1.3rem !important;
  }

  /* Warum-wir-Bereich */
  #warum-wir {
    padding-top: 4.75rem !important;
    padding-bottom: 4.75rem !important;
  }

  #warum-wir .min-h-\[34rem\] {
    min-height: 25rem !important;
  }

  #warum-wir .py-6,
  #warum-wir .lg\:py-10 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  #warum-wir .mb-6 {
    margin-bottom: 1rem !important;
  }

  #warum-wir h2 {
    font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
  }

  #warum-wir h2 + p {
    margin-top: 1.2rem !important;
    font-size: .98rem !important;
    line-height: 1.6 !important;
  }

  #warum-wir .mt-8.grid {
    margin-top: 1.75rem !important;
  }

  #warum-wir article {
    min-height: 10.5rem !important;
    padding: 1.15rem 1.25rem !important;
  }

  #warum-wir article h3 {
    margin-top: .85rem !important;
    font-size: 1rem !important;
  }

  #warum-wir article p {
    margin-top: .6rem !important;
    font-size: .8rem !important;
    line-height: 1.45 !important;
  }

  /* Preisrechner */
  .price-heading {
    padding-bottom: 1.25rem;
  }

  .component-toggles {
    margin: 1.25rem 0;
  }

  .component-toggle {
    padding: .9rem 1rem;
  }

  .config-panel,
  .calculator-summary {
    padding: 1.05rem;
    border-radius: 1.15rem;
  }

  .config-title {
    padding-bottom: .75rem;
  }

  .config-step {
    padding-top: 1rem;
  }

  .choice {
    min-height: 3.35rem;
    padding: .58rem .65rem;
  }

  .service-choice,
  .option-choice {
    padding: .75rem;
  }

  .summary-block {
    margin-top: .85rem;
    padding-top: .85rem;
  }

  .grand-total {
    margin-top: .85rem;
    padding-top: .85rem;
  }

  .grand-total strong {
    font-size: 1.85rem;
  }

  /* FAQ und CTA */
  .faq summary {
    padding: .9rem 1rem;
  }

  .faq details p {
    padding: .9rem 1rem;
    line-height: 1.55;
  }

  .cta-panel {
    padding: 2.75rem 1.5rem;
    border-radius: 1.8rem;
  }

  .cta-panel h2 {
    margin: 1rem 0;
    font-size: clamp(2.35rem, 4.8vw, 4rem);
  }

  .cta-panel p {
    margin: 1rem auto;
    line-height: 1.6;
  }

  /* Unterseiten und Formulare */
  .page-hero {
    padding-top: 5.8rem;
    padding-bottom: 3.6rem;
  }

  .page-hero.compact {
    padding-bottom: 2.4rem;
  }

  .page-hero h1 {
    margin: .9rem 0;
    font-size: clamp(2.5rem, 5.2vw, 4.2rem);
  }

  .page-hero p {
    font-size: .98rem;
    line-height: 1.6;
  }

  .contact-panel,
  .form-card,
  .legal-page article,
  .notice-panel {
    padding: 1.35rem;
    border-radius: 1.15rem;
  }

  .form-card label {
    margin-bottom: .75rem;
  }

  .site-footer {
    padding-top: 2.75rem;
  }

  .footer-grid {
    gap: 1.75rem 2rem;
  }

  .footer-bottom {
    margin-top: 2rem;
  }
}

/* Ab 1024 px ist genügend Breite vorhanden, um unnötige Stapelung zu vermeiden. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .container {
    width: min(100% - 2rem, 72rem);
  }

  .card-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
  }

  .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .split-heading {
    grid-template-columns: 1.15fr .85fr;
    align-items: end;
  }

  .status-list {
    justify-content: flex-end;
  }

  .calculator-layout {
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 1rem;
  }

  .calculator-summary {
    position: sticky;
    top: 5.5rem;
  }

  .choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 1366×768 und ähnliche flache Notebook-Displays noch etwas dichter. */
@media (min-width: 1024px) and (max-height: 820px) {
  .section,
  .home-services-intro,
  #tuning,
  #bike-setup,
  #warum-wir {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .hero-content-v35 {
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }

  .hero-content-v35 h1 {
    font-size: clamp(3rem, 4.2vw, 3.65rem) !important;
  }

  .hero-content-v35 p {
    margin-top: .85rem !important;
    line-height: 1.45 !important;
  }

  .hero-content-v35 .mt-9 {
    margin-top: 1rem !important;
  }

  .hero-content-v35 > .relative.z-20 {
    margin-top: 1.2rem !important;
  }

  .hero-content-v35 > .relative.z-20 .grid > div {
    min-height: 4.25rem !important;
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
  }

  .section-header,
  .split-heading {
    margin-bottom: 2.15rem;
  }

  .comparison-wrap {
    margin: 2.4rem 0;
  }

  #warum-wir .min-h-\[34rem\] {
    min-height: 22rem !important;
  }
}

/* Leistungskarten auf der Startseite: identische vertikale Struktur.
   Unabhängig von Text- und Taglänge stehen alle Bereiche auf einer Linie. */
.service-intro-card {
  height: 100%;
}

.service-intro-card__body {
  display: flex;
  min-height: 100%;
  height: 100%;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .service-intro-card__text {
    min-height: 5.25rem;
  }

  .service-intro-card__tags {
    min-height: 7.25rem;
  }

  .service-intro-card__link {
    margin-top: auto !important;
    padding-top: 1.25rem;
  }
}

@media (min-width: 1181px) {
  .service-intro-card__tags {
    min-height: 6.75rem;
  }
}

/* Hero v6.1: kompletter Überblick bei 100 % Browser-Zoom auf Desktop/Notebook. */
@media (min-width:1024px) and (max-height:950px) {
  .hero-content-v35{
    min-height:calc(100svh - 5rem)!important;
    padding-top:1.2rem!important;
    padding-bottom:1rem!important;
  }

  body.has-workshop-banner .hero-content-v35{
    min-height:calc(100svh - 10.75rem)!important;
  }

  .hero-content-v35 .mb-6{
    margin-bottom:.8rem!important;
  }

  .hero-content-v35 h1{
    max-width:44rem!important;
    font-size:clamp(3.2rem,3.75vw,4.1rem)!important;
    line-height:.9!important;
  }

  .hero-content-v35 h1 span{
    margin-top:.18rem!important;
  }

  .hero-content-v35 p{
    margin-top:.9rem!important;
    max-width:39rem!important;
    font-size:.96rem!important;
    line-height:1.48!important;
  }

  .hero-content-v35 .dbs-hero-actions{
    margin-top:1.05rem!important;
    gap:.55rem!important;
  }

  .hero-content-v35 .dbs-hero-actions-secondary{
    gap:.55rem!important;
  }

  .hero-content-v35 .dbs-hero-actions .dbs-hero-action{
    min-height:2.85rem!important;
    padding:.64rem 1rem!important;
    border-radius:.65rem!important;
    font-size:.69rem!important;
  }

  .hero-content-v35 > .relative.z-20{
    margin-top:1rem!important;
  }

  .hero-content-v35 .dbs-hero-tab{
    min-height:3rem!important;
    padding:.55rem 1rem!important;
  }

  .hero-content-v35 .dbs-hero-tab-label{
    font-size:.84rem!important;
    line-height:1.25!important;
  }
}

@media (min-width:1024px) and (max-height:780px) {
  .hero-content-v35{
    padding-top:.75rem!important;
    padding-bottom:.7rem!important;
  }

  .hero-content-v35 h1{
    font-size:clamp(2.85rem,3.35vw,3.6rem)!important;
  }

  .hero-content-v35 p{
    margin-top:.7rem!important;
    font-size:.91rem!important;
    line-height:1.4!important;
  }

  .hero-content-v35 .dbs-hero-actions{
    margin-top:.8rem!important;
  }

  .hero-content-v35 > .relative.z-20{
    margin-top:.75rem!important;
  }
}


/* Hero v6.2 – größere Reiter, aber weiterhin kompletter Überblick bei 100 % Zoom */
@media (min-width:1024px) and (max-height:950px){
  .hero-content-v35 > .relative.z-20{
    margin-top:.78rem!important;
  }

  .hero-content-v35 .dbs-hero-tab{
    min-height:4.75rem!important;
    padding:.68rem .9rem!important;
    grid-template-columns:2.9rem minmax(0,1fr) 2.2rem;
    gap:.78rem;
  }

  .hero-content-v35 .dbs-hero-tab-icon{
    width:2.8rem;
    height:2.8rem;
  }

  .hero-content-v35 .dbs-hero-tab-icon svg{
    width:2.2rem;
    height:2.2rem;
  }

  .hero-content-v35 .dbs-hero-tab-label{
    font-size:.93rem!important;
  }

  .hero-content-v35 .dbs-hero-tab-copy small{
    font-size:.7rem!important;
  }

  .hero-content-v35 .dbs-hero-tab-arrow{
    width:2.05rem;
    height:2.05rem;
    font-size:1rem;
  }
}

@media (min-width:1024px) and (max-height:780px){
  .hero-content-v35 > .relative.z-20{
    margin-top:.55rem!important;
  }

  .hero-content-v35 .dbs-hero-tab{
    min-height:4.1rem!important;
    padding:.5rem .75rem!important;
    grid-template-columns:2.55rem minmax(0,1fr) 1.9rem;
    gap:.62rem;
  }

  .hero-content-v35 .dbs-hero-tab-icon{
    width:2.45rem;
    height:2.45rem;
  }

  .hero-content-v35 .dbs-hero-tab-icon svg{
    width:1.9rem;
    height:1.9rem;
  }

  .hero-content-v35 .dbs-hero-tab-label{
    font-size:.86rem!important;
  }

  .hero-content-v35 .dbs-hero-tab-copy small{
    font-size:.65rem!important;
  }

  .hero-content-v35 .dbs-hero-tab-arrow{
    width:1.82rem;
    height:1.82rem;
    font-size:.92rem;
  }
}


/* =========================================================
   Preisrechner – mitwandernde Zusammenfassung V4
   Kein sticky/fixed, kein eigener Scrollbereich.
   Die Box bleibt in ihrer Grid-Spalte und wird innerhalb des
   Preisrechners per transform passend zum Viewport verschoben.
   ========================================================= */
@media (min-width: 1024px) {
  .calculator-section,
  .calculator-section > .container,
  #calculator-app,
  .calculator-layout {
    overflow: visible !important;
  }

  .calculator-summary {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: translateY(var(--dbs-summary-follow-offset, 0px));
    will-change: transform;
  }
}

@media (max-width: 1023px) {
  .calculator-summary {
    position: static !important;
    transform: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* DBS 2026-10 V5: Leistungskarten kompakter – alte künstliche Mindesthöhen zurücknehmen. */
@media (min-width:1024px){
  .service-intro-card__text{min-height:4.35rem!important}
  .service-intro-card__tags{min-height:4.6rem!important}
  .service-intro-card__link{padding-top:.7rem!important}
}

/* =========================================================
   V7 – Preisrechner Follow-Fix 2
   Auf flachen Desktop-Viewports wird NUR die Zusammenfassung
   automatisch kompakter, damit sie beim Hoch-/Runterscrollen
   nicht am unteren Bildschirmrand abgeschnitten wird.
   Kein interner Scrollbalken, keine Änderung am Rechnerinhalt.
   ========================================================= */
@media (min-width: 1024px) {
  .calculator-summary.dbs-summary-compact {
    padding: .9rem !important;
    border-radius: 1.05rem !important;
  }

  .calculator-summary.dbs-summary-compact > h3 {
    margin: 0 0 .55rem !important;
    font-size: 1.08rem !important;
    line-height: 1.15 !important;
  }

  .calculator-summary.dbs-summary-compact .summary-block {
    margin-top: .62rem !important;
    padding-top: .62rem !important;
  }

  .calculator-summary.dbs-summary-compact .summary-block h4 {
    margin: 0 0 .45rem !important;
    font-size: .82rem !important;
  }

  .calculator-summary.dbs-summary-compact .summary-block dl div {
    padding: .18rem 0 !important;
    line-height: 1.28 !important;
  }

  .calculator-summary.dbs-summary-compact .summary-line {
    margin-top: .32rem !important;
    padding: .52rem .62rem !important;
    line-height: 1.25 !important;
  }

  .calculator-summary.dbs-summary-compact .summary-line.option {
    margin-top: 0 !important;
    padding: .2rem 0 !important;
  }

  .calculator-summary.dbs-summary-compact .subtotal {
    margin-top: .48rem !important;
    padding-top: .55rem !important;
  }

  .calculator-summary.dbs-summary-compact .grand-total {
    margin-top: .68rem !important;
    padding-top: .68rem !important;
  }

  .calculator-summary.dbs-summary-compact .grand-total strong {
    font-size: 1.9rem !important;
  }

  .calculator-summary.dbs-summary-compact .shipping-cost {
    margin-top: .55rem !important;
    padding: .55rem .65rem !important;
  }

  .calculator-summary.dbs-summary-compact > .price-note,
  .calculator-summary.dbs-summary-compact [data-service-request-area] .price-note {
    margin-top: .5rem !important;
    margin-bottom: 0 !important;
    font-size: .76rem !important;
    line-height: 1.4 !important;
  }

  .calculator-summary.dbs-summary-compact [data-price-list-area] {
    margin-top: .58rem !important;
  }

  .calculator-summary.dbs-summary-compact [data-service-request-area] {
    margin-top: .62rem !important;
  }

  .calculator-summary.dbs-summary-compact [data-price-list-area] .button,
  .calculator-summary.dbs-summary-compact [data-service-request-area] .button {
    min-height: 2.65rem !important;
    padding-top: .58rem !important;
    padding-bottom: .58rem !important;
  }
}
/* =========================================================
   V7 – Mobile Typografie / saubere Zeilenumbrüche
   Ziel: keine willkürlichen Worttrennungen, ausgewogenere
   Überschriften und ruhigere Fließtext-Zeilen auf Smartphones.
   ========================================================= */
@media (max-width: 720px) {
  /* Überschriften: Zeilen möglichst gleichmäßig verteilen.
     Deutsche Zusammensetzungen dürfen nur an sinnvollen
     Trennstellen umbrechen – niemals mitten im Wort erzwingen. */
  h1,
  h2,
  h3,
  h4,
  .hero h1,
  .page-hero h1,
  .section-header h2,
  .split-heading h2,
  .cta-panel h2,
  .feature-card h3,
  .service-card h3,
  .reason-card h3,
  .process-card h3,
  .brand-card h3,
  .service-intro-card h3,
  .faq summary {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none;
    -webkit-hyphens: none;
    text-wrap: balance;
  }

  /* Fließtexte werden optisch schöner verteilt; lange technische
     Einzelbegriffe bleiben bei Bedarf weiterhin umbrechbar. */
  p,
  li,
  dd,
  blockquote,
  .section-header p,
  .split-heading p,
  .feature-card p,
  .service-card p,
  .reason-card p,
  .process-card p,
  .brand-card p,
  .faq details p {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    -webkit-hyphens: none;
    text-wrap: pretty;
  }

  /* Buttons, Reiter und kurze Labels: nur an Leerzeichen umbrechen,
     nicht innerhalb einzelner Wörter. */
  button,
  .button,
  .button-large,
  .button-small,
  .mobile-link,
  .dbs-hero-action,
  .dbs-hero-tab-label,
  .service-intro-card__tags span,
  .status-list span,
  .eyebrow-pill {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    text-wrap: balance;
  }

  /* Hero-Titel etwas flexibler skalieren, damit z. B. PERFORMANCE
     auf kleinen Geräten nicht unschön gequetscht wird. */
  .hero-content-v35 h1,
  .hero h1 {
    font-size: clamp(2.15rem, 10.5vw, 3rem) !important;
    letter-spacing: -0.035em;
  }

  /* Lange Abschnittsüberschriften auf Mobil etwas ruhiger skalieren. */
  .section-header h2,
  .split-heading h2,
  #warum-wir h2,
  #tuning h2,
  #bike-setup h2,
  .cta-panel h2 {
    font-size: clamp(1.9rem, 9vw, 2.65rem) !important;
    line-height: 1.02;
    letter-spacing: -0.025em;
  }

  /* Kartenüberschriften erhalten etwas mehr nutzbare Breite. */
  .feature-card h3,
  .service-card h3,
  .reason-card h3,
  .process-card h3,
  .brand-card h3,
  .service-intro-card h3 {
    line-height: 1.15;
  }

  /* E-Mail, URLs und technische Werte dürfen weiterhin sicher umbrechen. */
  .legal-page a,
  .site-footer a,
  .summary-block dd,
  .calculator-summary dd {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
  }
}

@media (max-width: 390px) {
  .hero-content-v35 h1,
  .hero h1,
  .page-hero h1 {
    font-size: clamp(2rem, 10vw, 2.25rem) !important;
  }

  .section-header h2,
  .split-heading h2,
  #warum-wir h2,
  #tuning h2,
  #bike-setup h2,
  .cta-panel h2 {
    font-size: clamp(1.75rem, 8.7vw, 2.15rem) !important;
  }

  .button,
  .button-large,
  .button-small,
  .dbs-hero-action {
    font-size: .72rem;
    line-height: 1.25;
  }
}
/* V7 – iPhone/Safari: keine unschönen Silbentrennungen im Bike-Setup */
@media (max-width: 720px) {
  #bike-setup p,
  #bike-setup strong,
  #bike-setup a,
  #bike-setup h1,
  #bike-setup h2,
  #bike-setup h3,
  #bike-setup h4 {
    -webkit-hyphens: none !important;
    hyphens: none !important;
    word-break: normal !important;
  }

  #bike-setup p {
    overflow-wrap: normal;
  }
}


/* =========================================================
   V7 – größeres Logo, Formulareinstieg & mobiler Scroll-Hinweis
   ========================================================= */
.dbs-site-logo{
  max-height:4.45rem !important;
  width:auto !important;
}
.dbs-footer-logo{
  width:min(19rem,100%);
  height:auto;
  object-fit:contain;
}

#terminformular,
#serviceanfrage{
  scroll-margin-top:6.5rem;
}

.dbs-form-guidance{
  margin-top:.75rem;
  max-width:42rem;
  color:#a1a1aa;
  font-size:.95rem;
  line-height:1.6;
}

/* Auf Desktop nicht sichtbar. */
.dbs-mobile-scroll-hint{
  display:none;
}

@media (max-width:720px){
  .dbs-site-logo{
    max-height:4.15rem !important;
  }

  #terminformular,
  #serviceanfrage{
    scroll-margin-top:5.75rem;
  }

  .dbs-form-guidance{
    margin-top:.65rem;
    font-size:.9rem;
    line-height:1.55;
  }

  /* Dezenter, pulsierender Hinweis: zeigt nur nach unten und verschwindet
     automatisch nach 7 Sekunden oder sobald der Nutzer selbst scrollt. */
  .dbs-mobile-scroll-hint{
    position:fixed;
    left:50%;
    bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index:70;
    display:grid;
    place-items:center;
    width:3.15rem;
    height:3.15rem;
    margin:0;
    padding:0;
    border:1px solid rgba(239,68,68,.55);
    border-radius:999px;
    background:rgba(18,18,20,.88);
    color:#ef4444;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, .5rem);
    transition:opacity .28s ease, transform .28s ease, border-color .28s ease;
  }

  .dbs-mobile-scroll-hint svg{
    width:1.55rem;
    height:1.55rem;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .dbs-mobile-scroll-hint.is-visible{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%, 0);
    animation:dbs-scroll-hint-pulse 1.5s ease-in-out infinite;
  }

  .dbs-mobile-scroll-hint:active{
    border-color:rgba(239,68,68,.9);
  }

  @keyframes dbs-scroll-hint-pulse{
    0%,100%{
      transform:translate(-50%, 0);
      box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(239,68,68,.16);
    }
    50%{
      transform:translate(-50%, .35rem);
      box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 .5rem rgba(239,68,68,0);
    }
  }

  @media (prefers-reduced-motion: reduce){
    .dbs-mobile-scroll-hint,
    .dbs-mobile-scroll-hint.is-visible{
      animation:none;
      transition:none;
    }
  }
}