/* Tablet styles: apply between 601px and 1024px */
/* Add to templates with media="(min-width:601px) and (max-width:1024px)" */

/* General rhythm */
:root {
  --tablet-side-pad: 28px;
}

html, body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
.container-content { margin: 0; padding: 0; }
.header-video-container { margin: 0 !important; padding: 0 !important; }
.header-video-container {
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.ds-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover; /* füllt den Bereich ohne Balken */
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  display: block;
}
.content img { max-width: 420px; }
.content h2 { font-size: 2.2rem; letter-spacing: 4px; }

/* Hero section under header */
.slide-container {
  width: min(1100px, 96vw);
  gap: 44px;
  padding: 40px var(--tablet-side-pad);
}
.content-left { padding-right: 20px; }
.title { font-size: 3rem; }
.features li { font-size: 1.2rem; }

.content-right { min-height: 360px; }
.right-image { 
    width: 50%; 
    height: auto; 
    max-height: 35%; 
    display: block; /* Entfernt eventuelle zusätzliche Leerzeichen unter dem Bild */
}

/* Timeline */
/* Timeline adjustments */
.timeline::after {
  left: 32px; /* move central line left to align with stacked items */
}

.container img, .left-container img, .right-container  {
  left: 12px !important;
  right: auto !important;
  width: 40px;
  top: 18px;
}

.left-container-arrow, .right-container-arrow {
  display: none; /* remove arrow decorations on small screens to keep layout simple */
}

.timeline { max-width: 1400px; margin: 50% auto; }
/* Wichtig: Padding darf die 50%-Breite nicht sprengen */
.timeline .container { padding: 10px 24px; box-sizing: border-box; }
.timeline .container.full-width { 
  width: 100% !important; 
  left: 0 !important; 
  right: auto !important; 
  padding-left: var(--tablet-side-pad); 
  padding-right: var(--tablet-side-pad);
}
.timeline .container.full-width .text-box { 
  max-width: 780px; 
  margin-left: 50px; 
  margin-right: 60px
}
.timeline .container.full-width .features-vorteile {
  display: block;
  width: 100%;
}

.left-container .text-box{
    margin-left: 50px;
    padding: 20px 50px;
    border-radius: 6px;
    margin-right: 40px;
}
.right-container .text-box{
    margin-left: 90px;
    padding: 20px 50px;
    border-radius: 6px;
    margin-right: 40px;
    width: 100%;
}
.features-vorteile li{
    font-size: 1.1rem;
}
.text-box h2 { font-size: 1.5rem; }
.text-box p { font-size: 1.2rem; line-height: 1.6; width: calc(300% - 10px);}
.timeline-vorteile-img { width: 100%; height: auto; border-radius: 10px; display:block; }

/* Developer path (benefits) */
.developer-path-section { width: 92%; max-width: 1100px; margin: 60px auto; }
.path-header h1 { font-size: 2.4rem; }
.benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.benefit-card { padding: 26px; }
.benefit-card h3 { font-size: 1.25rem; }
.benefit-card p { font-size: 1.05rem; }

/* AI features cards */
.ai-features-section { width: 92%; max-width: 1100px; margin: 0 auto; }
.three-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.feature-card { min-width: 0; }
.card-visual { height: 220px; }

/* Timeline advantages list – flexible width on tablet */
.features-vorteile {
  display: inline-block;      /* shrink-to-content, aber nicht über 100% */
  width: -moz-fit-content;    /* Firefox */
  width: fit-content;         /* moderne Browser */
  max-width: 100%;            /* niemals über Container hinaus */
}
.features-vorteile li { white-space: normal; }

/* Newsletter popup */
.newsletter-popup-content { max-width: 520px; padding: 36px; }
.newsletter-popup-inner h2 { font-size: 2rem; }

/* Footer */
.footer-links-and-social { gap: 16px; }
.subscribe-container { padding: 24px; }
.subscribe-title { font-size: 1.2rem; }
.subscribe-text { font-size: 1.05rem; }

/* Ensure no horizontal overflow */
body, .container-content { overflow-x: hidden; }