/* ==========================================================================
   Let's Do. – Mobile-First Responsive Overrides
   Loaded AFTER sections.css / chatbot.css to override desktop-first defaults
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════
   BASE: Mobile Default (< 768px)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Global Section Overrides ── */
  .hero-philosophy,
  .philosophy,
  .methode,
  .ki-produkte,
  .referenzen,
  .chat-section {
    height: auto !important;
    min-height: 100dvh;
    padding-block: clamp(1.5rem, 3vh, 3rem);
  }

  /* ── Glasbox: full width, less padding ── */
  .glasbox,
  .hero-philosophy__inner,
  .kontakt__glasbox,
  .referenzen__glasbox,
  .ki-produkte__glasbox {
    max-width: 100%;
    padding: clamp(1.2rem, 3vh, 2rem) clamp(1rem, 3vw, 1.5rem);
  }

  /* ── Hero Philosophy ── */
  .hero-philosophy {
    padding-top: calc(64px + 0.5rem); /* clear fixed nav */
  }
  .hero-philosophy__inner {
    gap: clamp(0.6rem, 1.5vh, 1.2rem);
    padding: clamp(0.8rem, 2vh, 1.5rem) clamp(1rem, 3vw, 1.5rem);
  }
  .hero-philosophy__split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }
  .hero-philosophy__left {
    align-items: center;
    gap: clamp(0.5rem, 1.2vh, 0.8rem);
  }
  .hero-philosophy__right {
    order: -1;
    padding-top: 0;
  }
  .hero-ecosystem {
    max-width: 200px;
  }
  .hero-philosophy__claim {
    text-align: center;
    font-size: clamp(1.5rem, 6.5vw, 2.2rem);
  }
  .hero-philosophy__lead {
    text-align: center;
    font-size: clamp(0.85rem, 3.2vw, 1rem);
    line-height: 1.5;
  }
  .hero-philosophy__ctas {
    justify-content: center;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
  }
  .hero-philosophy__ctas .btn,
  .hero-philosophy__ctas a {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding-block: 0.6rem;
    font-size: clamp(0.75rem, 2.8vw, 0.85rem);
  }
  .hero-philosophy__numbers {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-num__value {
    font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  }
  .hero-num__label {
    font-size: clamp(0.5rem, 2vw, 0.65rem);
  }
  .hero-philosophy__subtitle {
    font-size: clamp(0.6rem, 2.2vw, 0.75rem);
    letter-spacing: 0.1em;
  }
  .hero-philosophy__logo {
    height: clamp(34px, 5vh, 48px);
  }
  .hero-ecosystem {
    filter: drop-shadow(0 0 40px rgba(5,5,8,0.8));
  }
  .hero-philosophy__bottom {
    gap: clamp(0.4rem, 1vh, 0.8rem);
  }

  /* ── Philosophy / About ── */
  .philosophy {
    padding: clamp(1.5rem, 3vh, 3rem) clamp(1rem, 4vw, 2rem);
  }
  .philosophy__quote {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    line-height: 1.5;
  }
  .philosophy__meta {
    font-size: clamp(0.75rem, 2.5vw, 0.85rem);
  }
  .philosophy__body {
    font-size: clamp(0.85rem, 3vw, 0.95rem);
  }

  /* ── Methode ── */
  .methode {
    padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1rem, 3vw, 1.5rem);
  }
  .methode__grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .methode__card {
    padding: clamp(0.8rem, 2vh, 1.2rem) clamp(0.6rem, 3vw, 1rem);
  }
  .methode__icon-wrap {
    width: 44px;
  }
  .methode__desc {
    font-size: clamp(0.8rem, 3vw, 0.9rem);
    line-height: 1.6;
  }
  .methode__hero-img,
  .referenzen__hero-img {
    height: clamp(140px, 22vh, 240px);
  }
  .philosophy__hero-img {
    max-height: clamp(220px, 38vh, 380px);
  }

  /* ── KI-Produkte ── */
  .ki-produkte {
    padding: clamp(1.5rem, 3vh, 2.5rem) clamp(0.8rem, 2vw, 1.5rem);
  }
  .ki-produkte__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .ki-card__image-wrap {
    aspect-ratio: 16 / 8;
  }
  .ki-card__body {
    padding: clamp(0.6rem, 2vh, 1rem) clamp(0.6rem, 3vw, 1rem);
  }
  .ki-card__tagline {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
  }
  .ki-card__desc {
    font-size: clamp(0.75rem, 2.8vw, 0.85rem);
  }
  .ki-produkte__hero-img {
    height: clamp(80px, 12vh, 150px);
  }

  /* Card Overlay (expanded card) */
  .card-overlay {
    padding: 0.5rem;
  }
  .card-overlay .ki-card {
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
  }
  .card-overlay .ki-card__body {
    padding: clamp(1rem, 3vh, 1.5rem) clamp(1rem, 4vw, 1.5rem);
  }
  .card-overlay .ki-card__features {
    grid-template-columns: 1fr;
  }

  /* ── AI Gen ── */
  .ai-gen {
    padding: clamp(1.5rem, 3vh, 2.5rem) clamp(0.8rem, 2vw, 1.5rem);
  }
  .ai-gen__grid {
    gap: 0.8rem;
  }

  /* ── AI Services ── */
  .ai-services {
    padding: clamp(1.5rem, 3vh, 2.5rem) clamp(0.8rem, 2vw, 1.5rem);
  }
  .ai-services__grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  /* ── Referenzen ── */
  .referenzen {
    padding: clamp(1rem, 2vh, 2rem) clamp(0.5rem, 2vw, 1rem);
  }
  .referenzen__glasbox {
    min-height: auto;
    padding: clamp(1.2rem, 3vh, 2rem) clamp(0.8rem, 2vw, 1.2rem);
  }
  .ref-tile {
    width: clamp(180px, 58vw, 230px);
    max-width: clamp(180px, 58vw, 230px);
    padding: 0.5rem 0.55rem;
  }
  .ref-tile__title {
    font-size: clamp(0.75rem, 3vw, 0.9rem);
  }
  .ref-tile__text {
    font-size: clamp(0.7rem, 2.5vw, 0.8rem);
  }
  .ref-tile__icon {
    width: 26px;
    height: 26px;
  }
  .ref-cases {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .ref-case {
    padding: clamp(0.8rem, 2vh, 1rem) clamp(0.8rem, 3vw, 1.2rem);
  }

  /* ── Kontakt ── */
  .kontakt {
    padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1rem, 3vw, 1.5rem);
  }
  .kontakt__grid {
    grid-template-columns: 1fr;
  }
  .kontakt__label {
    font-size: clamp(0.7rem, 2.5vw, 0.8rem);
  }
  .kontakt__input,
  .kontakt__select,
  .kontakt__textarea {
    font-size: clamp(0.9rem, 3.5vw, 1rem);
    padding: clamp(0.6rem, 1.5vh, 0.8rem) clamp(0.8rem, 3vw, 1rem);
    /* Larger touch targets */
    min-height: 44px;
  }
  .kontakt__btn {
    width: 100%;
    justify-content: center;
    padding: clamp(0.7rem, 1.5vh, 0.9rem) 1.5rem;
    min-height: 44px;
  }
  .kontakt__map {
    min-height: 180px;
  }

  /* ── Chat Section ── */
  .chat-section {
    padding: clamp(1rem, 2vh, 2rem) clamp(0.8rem, 2vw, 1.5rem);
  }
  .chat-section__glasbox {
    max-width: 100%;
  }
  .chat {
    height: clamp(350px, 55vh, 500px);
    border-radius: 14px;
  }
  .chat__msg {
    max-width: 90%;
    font-size: clamp(0.82rem, 3vw, 0.92rem);
  }
  .chat__input-wrap {
    padding: clamp(0.5rem, 1vh, 0.6rem) clamp(0.6rem, 2vw, 0.8rem);
  }
  .chat__input {
    font-size: clamp(0.9rem, 3.5vw, 1rem);
    min-height: 38px;
  }
  .chat__send-btn,
  .chat__tts-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  /* ── Footer ── */
  .footer__status-inner {
    flex-direction: column;
    gap: 0.3rem;
  }
  .footer__status-sep {
    display: none;
  }

  /* ── Section Headers (consistent) ── */
  .section__tagline,
  .methode__tag,
  .ki-produkte__tag,
  .ai-gen__tag,
  .ai-services__tag,
  .referenzen__tag,
  .kontakt__tag,
  .chat-section__tag {
    font-size: clamp(0.7rem, 2.8vw, 0.9rem);
    letter-spacing: 0.2em;
  }
  .methode__sub,
  .ki-produkte__sub,
  .ai-gen__sub,
  .ai-services__sub,
  .referenzen__sub,
  .kontakt__sub,
  .chat-section__sub {
    font-size: clamp(0.85rem, 3.5vw, 1.05rem);
  }
}

/* ══════════════════════════════════════════════════════════════════
   TABLET (≥ 768px, < 1024px)
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-philosophy__split {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  .hero-philosophy__left {
    align-items: center;
  }
  .hero-philosophy__right {
    order: -1;
  }
  .hero-ecosystem {
    max-width: 350px;
  }
  .hero-philosophy__ctas {
    justify-content: center;
  }

  .methode__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ki-produkte__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ai-gen__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ai-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* ══════════════════════════════════════════════════════════════════
   SMALL PHONES (< 380px) — extra tight
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 379px) {
  .hero-philosophy__claim {
    font-size: clamp(1.4rem, 8vw, 1.8rem);
  }
  .hero-philosophy__numbers {
    gap: 0.8rem;
  }
  .hero-num__value {
    font-size: clamp(1.2rem, 7vw, 1.5rem);
  }
  .glasbox,
  .hero-philosophy__inner {
    padding: 1rem 0.8rem;
  }
  .ref-tile {
    width: 180px;
    max-width: 180px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP SUB/AT 1080p (≥ 1024px wide, ≤ 1080px tall)
   Tightens dense sections so content fits 1366×768, 1440×900, 1680×1050, 1920×1080
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) and (max-height: 1080px) {
  /* ── Philosophy / About ── */
  .philosophy {
    padding-block: clamp(1rem, 2vh, 2rem);
  }
  .philosophy__glasbox {
    padding: clamp(1rem, 2vh, 1.6rem) clamp(1.5rem, 2.5vw, 2.5rem);
  }
  .philosophy__hero-img {
    max-height: clamp(220px, 38vh, 420px);
  }

  /* ── KI-Produkte ── */
  .ki-produkte {
    padding-block: clamp(1rem, 2vh, 2rem);
  }
  .ki-produkte__glasbox {
    padding: clamp(1rem, 2vh, 1.6rem) clamp(1.5rem, 2.5vw, 2.2rem);
  }
  .ki-produkte__header {
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
  }

  /* ── AI-Gen / KI-Lösungen ── */
  .ai-gen {
    padding-block: clamp(1rem, 2vh, 2rem);
  }
  .ai-gen__header {
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
  }
  .ai-gen .ki-card__body {
    padding: clamp(0.6rem, 1vh, 1rem) clamp(0.8rem, 1.4vw, 1.2rem);
  }

  /* ── Hero Philosophy ── */
  .hero-philosophy {
    padding-block: clamp(1rem, 2vh, 2rem);
  }
  .hero-philosophy__inner {
    gap: clamp(0.6rem, 1.2vh, 1.2rem);
    padding: clamp(1rem, 2vh, 1.6rem) clamp(1.5rem, 2.5vw, 2.5rem);
  }
  .hero-ecosystem {
    max-width: clamp(280px, 32vh, 380px);
  }
  .hero-philosophy__claim {
    font-size: clamp(1.6rem, 4.2vh, 2.6rem);
  }

  /* ── Methode ── */
  .methode {
    padding-block: clamp(1rem, 2vh, 2rem);
  }
  .methode__header {
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
  }
  .methode__hero-img {
    max-width: 720px;
    aspect-ratio: 5 / 1;
    margin-bottom: clamp(0.6rem, 1.2vh, 1.2rem);
  }
  .methode__grid {
    gap: clamp(0.6rem, 1vh, 1rem) clamp(0.8rem, 1.2vw, 1.2rem);
  }
  .methode__card {
    padding: clamp(0.6rem, 1vh, 1rem) clamp(0.8rem, 1.4vw, 1.4rem);
  }

  /* ── Leistungen / AI Services ── */
  .ai-services {
    padding-block: clamp(1rem, 2vh, 2rem);
  }
  .ai-services__glasbox {
    padding: clamp(1rem, 2vh, 1.6rem) clamp(1.5rem, 2.5vw, 2.2rem);
  }
  .ai-services__header {
    margin-bottom: clamp(0.4rem, 0.8vh, 0.8rem);
  }
  .ai-services__grid {
    gap: clamp(0.5rem, 0.8vw, 0.8rem);
  }
  .ai-services__grid .ki-card__image-wrap {
    aspect-ratio: 16 / 7;
  }
  .ai-services__grid .ki-card__body {
    padding: clamp(0.4rem, 0.7vh, 0.6rem) clamp(0.6rem, 1.2vw, 1rem);
  }
  .ai-services__grid .ki-card__desc {
    line-height: 1.4;
  }

  /* ── Erfahrung / Referenzen ── */
  .referenzen {
    padding-block: clamp(1rem, 2vh, 2rem);
  }
  .referenzen__glasbox {
    padding: clamp(1rem, 2vh, 1.6rem) clamp(1.5rem, 2.5vw, 2.2rem);
  }
  .referenzen__header {
    margin-bottom: clamp(0.4rem, 0.8vh, 0.8rem);
  }
  .referenzen__hero-img {
    max-width: 640px;
    aspect-ratio: 5 / 1;
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
  }
  .ref-ticker-wrap {
    gap: clamp(0.4rem, 0.8vh, 0.7rem);
  }
  .ref-tile {
    width: clamp(200px, 16vw, 250px);
    max-width: clamp(200px, 16vw, 250px);
    padding: clamp(0.3rem, 0.5vh, 0.5rem) clamp(0.5rem, 0.8vw, 0.7rem);
    gap: 0.15rem;
  }
  .ref-tile__icon {
    width: 24px;
    height: 24px;
    margin-bottom: 0.15rem;
  }
  .ref-tile__title {
    font-size: clamp(0.8rem, 1vw, 0.92rem);
    line-height: 1.2;
  }
  .ref-tile__text {
    font-size: clamp(0.7rem, 0.9vw, 0.78rem);
    line-height: 1.4;
  }
  .ref-tile__badge {
    padding-top: 0.1rem;
  }
  .ref-cases {
    gap: clamp(0.5rem, 1vh, 0.9rem);
  }
  .ref-case {
    padding: clamp(0.5rem, 0.9vh, 0.8rem) clamp(0.8rem, 1.3vw, 1.2rem);
  }
}

/* ══════════════════════════════════════════════════════════════════
   DESKTOP SUB-850p (≥ 1024px wide, ≤ 850px tall) — laptops 1366×768
   Extra-tight: smaller hero imgs, shorter cards, tighter tickers
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) and (max-height: 850px) {
  /* Hero Philosophy */
  .hero-ecosystem {
    max-width: clamp(240px, 28vh, 320px);
  }
  .hero-philosophy__claim {
    font-size: clamp(1.4rem, 3.6vh, 2.2rem);
  }
  .hero-philosophy__lead {
    font-size: clamp(0.85rem, 1.6vh, 1rem);
  }

  /* Methode */
  .methode__hero-img {
    max-width: 600px;
    aspect-ratio: 6 / 1;
  }

  /* Leistungen */
  .ai-services__grid .ki-card__image-wrap {
    aspect-ratio: 16 / 6;
  }
  .ai-services__grid .ki-card__desc {
    font-size: clamp(0.68rem, 0.9vw, 0.78rem);
    line-height: 1.35;
  }

  /* Erfahrung */
  .referenzen__hero-img {
    max-width: 540px;
    aspect-ratio: 6 / 1;
  }
  .ref-tile {
    width: clamp(190px, 14vw, 230px);
    max-width: clamp(190px, 14vw, 230px);
  }
  .ref-tile__text {
    font-size: clamp(0.65rem, 0.85vw, 0.74rem);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ref-cases {
    gap: clamp(0.4rem, 0.7vh, 0.7rem);
  }
  .ref-case {
    padding: clamp(0.4rem, 0.7vh, 0.6rem) clamp(0.7rem, 1.2vw, 1rem);
  }
  .ref-case__title {
    font-size: clamp(0.85rem, 1.2vw, 1rem);
  }
  .ref-case__text {
    font-size: clamp(0.7rem, 0.9vw, 0.8rem);
    line-height: 1.4;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SHORT VIEWPORTS (landscape phones)
   ══════════════════════════════════════════════════════════════════ */

@media (max-height: 600px) and (max-width: 900px) {
  .hero-philosophy,
  .philosophy,
  .methode,
  .ki-produkte,
  .referenzen,
  .chat-section {
    min-height: auto;
    padding-block: 1.5rem;
  }
  .hero-philosophy__inner {
    gap: 0.8rem;
  }
  .hero-philosophy__logo {
    height: 28px;
  }
  .chat {
    height: clamp(280px, 45vh, 400px);
  }
}