/* zeitWerk365 — Responsive Design System
   Ergänzt extensions.css (behandelt ≤900px mit !important-Regeln).

   Breakpoints:
   • ≤1024px  Tablet (landscape/portrait, kleine Laptops)
   • ≤768px   Mobile  (ergänzt den 900px-Block aus extensions.css)
   • ≤480px   Small Phone
*/

/* ================================================================
   HAMBURGER BUTTON
   ================================================================ */

.zw-nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-1), border-color var(--dur-1);
}
.zw-nav__hamburger:hover { background: var(--color-bg-soft); border-color: var(--color-border); }
.zw-nav__hamburger:focus-visible {
  outline: 2px solid var(--arnio-gruenblau);
  outline-offset: 2px;
}
.zw-nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--arnio-stahlblau);
  border-radius: 1px;
  transform-origin: center;
  transition: transform 240ms var(--easing-standard), opacity 160ms, background var(--dur-1);
}
.zw-nav__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.zw-nav__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
.zw-nav__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ================================================================
   MOBILE NAV — slide-down panel
   ================================================================ */

.zw-mobile-nav {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  border-top: 1px solid transparent;
  transition: max-height 320ms var(--easing-standard),
              border-color 160ms;
  /* keeps the nav on top of hero */
  position: relative;
  z-index: 48;
}
.zw-mobile-nav.is-open {
  max-height: 560px;
  border-top-color: var(--color-border);
  box-shadow: 0 14px 32px rgba(0,52,74,.13);
}

.zw-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}
.zw-mobile-nav__list li a {
  display: flex;
  align-items: center;
  padding: 15px 0;
  font-family: "Flama", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--arnio-stahlblau);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--dur-1), padding-left var(--dur-1);
  min-height: 44px; /* touch target */
}
.zw-mobile-nav__list li:last-child a { border-bottom: none; }
.zw-mobile-nav__list li a:hover {
  color: var(--arnio-gruenblau);
  padding-left: 6px;
}
.zw-mobile-nav__cta {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--color-border);
}
.zw-mobile-nav__cta .zw-btn {
  width: 100%;
  justify-content: center;
}

/* ================================================================
   SCROLLABLE TABLE WRAPPER
   ================================================================ */

.zw-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
  /* subtle scroll indicator on the right edge */
  background:
    linear-gradient(to right, #fff 30%, transparent),
    linear-gradient(to right, transparent, #fff 70%) 100% 0;
  background-color: #fff;
  background-size: 40px 100%, 40px 100%;
  background-attachment: local, scroll;
  background-repeat: no-repeat;
}
.zw-table-wrap::-webkit-scrollbar { height: 4px; }
.zw-table-wrap::-webkit-scrollbar-track { background: var(--color-bg-soft); }
.zw-table-wrap::-webkit-scrollbar-thumb {
  background: var(--arnio-stahlblau-30);
  border-radius: 2px;
}

/* ================================================================
   TABLET  (≤1024px)
   Adds intermediate layouts between desktop (>1024) and the
   900px collapse in extensions.css.
   ================================================================ */

@media (max-width: 1024px) {

  /* ---- Layout ---- */
  .zw-container { padding: 0 30px; }
  .zw-nav__inner { padding: 16px 30px; }
  .zw-footer__legal { padding: 20px 30px; }

  /* ---- Section padding ---- */
  .zw-hero    { padding: 56px 0 80px; }
  .zw-counter { padding: 64px 0; }
  .zw-promises, .zw-problem, .zw-plakativ,
  .zw-compliance, .zw-livedemo, .zw-showcase,
  .zw-timeline, .zw-compare, .zw-hardware,
  .zw-pricing, .zw-targets, .zw-faq,
  .zw-contact { padding: 90px 0; }
  .zw-footer { padding: 64px 0 0; }

  /* ---- Typography ---- */
  .zw-section-head { margin-bottom: 44px; }
  .zw-section-head h2 { font-size: 44px; }
  .zw-cta h2,
  .zw-pricing__head h2,
  .zw-contact__head h2,
  .zw-timeline__head h2 { font-size: 44px; }
  .zw-livedemo h2 { font-size: 38px; }
  .line--flama { font-size: 44px; }
  .line--flood  { font-size: 60px; }

  /* ---- Nav ---- */
  .zw-nav__list { gap: 22px; }
  .zw-nav__list a { font-size: 11px; }

  /* ---- Targets → 2-col tablet ---- */
  .zw-targets__grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- Footer cols → 2×2 grid ---- */
  .zw-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* ---- Compliance ---- */
  .zw-compliance__grid { gap: 12px; }
  .zw-paragraph { padding: 24px; gap: 20px; }

  /* ---- Showcase ---- */
  .zw-showcase__row { gap: 40px; margin-bottom: 72px; }
  .zw-showcase__copy p { max-width: 100%; }

  /* ---- Hardware ---- */
  .zw-hardware__grid { gap: 40px; }

  /* ---- Pricing ---- */
  .zw-pricing__inner { gap: 40px; }

  /* ---- FAQ ---- */
  .zw-faq__layout { gap: 48px; }

  /* ---- Contact ---- */
  .zw-contact__inner { gap: 40px; }

  /* ---- Plakativ loops ---- */
  .loop { width: 110px; height: 110px; }
}

/* ================================================================
   TABLET RANGE  (901px–1024px)
   Ranged query nötig, weil responsive.css nach extensions.css geladen wird.
   Ohne min-width würden diese Regeln den 900px-Collapse überschreiben.
   ================================================================ */

@media (min-width: 901px) and (max-width: 1024px) {
  /* Problem grid → 2-col nur auf echtem Tablet */
  .zw-problem__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================================
   MOBILE  (≤768px)
   Supplements / refines the 900px block in extensions.css.
   Use !important where extensions.css already set !important.
   ================================================================ */

@media (max-width: 768px) {

  /* ---- Layout ---- */
  .zw-container   { padding: 0 20px !important; }
  .zw-nav__inner  { padding: 12px 20px; }
  .zw-footer__legal {
    padding: 16px 20px;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .zw-footer__legal .badges { justify-content: center; flex-wrap: wrap; }

  /* ---- Section padding ---- */
  .zw-hero    { padding: 40px 0 52px; }
  .zw-counter { padding: 52px 0; }
  .zw-promises, .zw-problem, .zw-plakativ,
  .zw-compliance, .zw-livedemo, .zw-showcase,
  .zw-timeline, .zw-compare, .zw-hardware,
  .zw-pricing, .zw-targets, .zw-faq,
  .zw-contact { padding: 64px 0; }
  .zw-footer { padding: 48px 0 0; }

  /* ---- Typography ---- */
  .zw-section-head h2,
  .zw-cta h2,
  .zw-pricing__head h2,
  .zw-contact__head h2,
  .zw-timeline__head h2  { font-size: 30px !important; }
  .zw-section-head       { margin-bottom: 28px; }
  .zw-section-head p     { font-size: 15px; }
  .line--flama           { font-size: 30px !important; }
  .line--flood           { font-size: 40px !important; }
  .zw-livedemo h2        { font-size: 28px; }

  /* ---- Show hamburger ---- */
  .zw-nav__hamburger { display: flex; }

  /* ---- Hero ---- */
  .zw-hero__lede  { font-size: 15px; margin-bottom: 20px; }
  .zw-hero__trust { gap: 14px; margin-top: 24px; padding-top: 18px; }
  .zw-hero__trust-item { font-size: 11px; }

  /* ---- Plakativ ---- */
  .zw-plakativ__inner { grid-template-columns: 1fr !important; gap: 36px; }
  .zw-plakativ .line--flama { font-size: 30px !important; }
  .zw-plakativ .line--flood { font-size: 40px !important; }
  .zw-plakativ__loops     { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .zw-plakativ__loops-row { gap: 12px; }
  .loop       { width: 100px; height: 100px; font-size: 11px; padding: 10px; }
  .loop strong { font-size: 22px; }

  /* ---- Problem ---- */
  .zw-problem__verdict {
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    align-items: flex-start;
  }

  /* ---- Compliance ---- */
  .zw-paragraph         { padding: 18px; gap: 14px; }
  .zw-paragraph__sigil  { font-size: 46px; min-width: 68px; padding-right: 14px; }

  /* ---- Timeline ---- */
  .zw-timeline__story {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 20px;
  }
  .zw-timeline__story-badge { font-size: 13px; padding: 8px 14px; align-self: flex-start; }
  .zw-timeline__head        { margin-bottom: 40px; }
  .zw-timeline__head h2     { font-size: 30px !important; }

  /* ---- Table ---- */
  .zw-table { min-width: 500px; }

  /* ---- Targets: keep 2-col on 768px ---- */
  .zw-targets__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* ---- FAQ sidebar ---- */
  .zw-faq__sidebar { position: static; top: auto; }

  /* ---- Footer cols: 2-col ---- */
  .zw-footer__cols { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

  /* ---- Counter ---- */
  .zw-counter__num { font-size: 64px; }

  /* ---- Pricing ---- */
  .zw-pricing__card   { padding: 24px; }
  .zw-pricing__result { grid-template-columns: 1fr 1fr; }

  /* ---- Hardware ---- */
  .zw-hardware__visual { aspect-ratio: 4/3; padding: 24px; }

  /* ---- Contact ---- */
  .zw-contact__form { padding: 24px !important; }
}

/* ================================================================
   SMALL PHONE  (≤480px)
   ================================================================ */

@media (max-width: 480px) {

  /* ---- Layout ---- */
  .zw-container  { padding: 0 16px !important; }
  .zw-nav__inner { padding: 10px 16px; }
  .zw-footer__legal { padding: 14px 16px; }

  /* Hide CTA text in nav; only hamburger shown */
  .zw-nav__cta .zw-btn { display: none; }

  /* ---- Section padding ---- */
  .zw-hero    { padding: 28px 0 40px; }
  .zw-counter { padding: 44px 0; }
  .zw-promises, .zw-problem, .zw-plakativ,
  .zw-compliance, .zw-livedemo, .zw-showcase,
  .zw-timeline, .zw-compare, .zw-hardware,
  .zw-pricing, .zw-targets, .zw-faq,
  .zw-contact { padding: 52px 0; }
  .zw-footer { padding: 40px 0 0; }

  /* ---- Typography ---- */
  .zw-section-head h2,
  .zw-cta h2,
  .zw-pricing__head h2,
  .zw-contact__head h2,
  .zw-timeline__head h2 { font-size: 24px !important; }
  .line--flama           { font-size: 24px !important; }
  .line--flood           { font-size: 32px !important; }
  .zw-section-head       { margin-bottom: 20px; }
  .zw-section-head p     { font-size: 14px; }
  .zw-livedemo h2        { font-size: 24px; }
  .zw-plakativ .line--flama { font-size: 24px !important; }
  .zw-plakativ .line--flood { font-size: 32px !important; }
  .zw-timeline__head h2  { font-size: 24px !important; }
  .zw-eyebrow            { font-size: 10px; gap: 7px; }

  /* ---- Hero ---- */
  .zw-hero__title    { margin: 10px 0 14px; }
  .zw-hero__lede     { font-size: 14px; }
  .zw-hero__ctas     { flex-direction: column; }
  .zw-hero__ctas .zw-btn { width: 100%; justify-content: center; }
  .zw-hero__trust    { flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 16px; }

  /* ---- Counter ---- */
  .zw-counter__num   { font-size: 48px; }
  .zw-counter__label { font-size: 16px; }

  /* ---- Promises ---- */
  .zw-promise                  { padding: 20px 16px; }
  .zw-promise h3               { font-size: 20px; }
  .zw-promise__metric strong   { font-size: 28px; }
  .zw-promise__loop            { width: 52px; height: 52px; font-size: 22px; }

  /* ---- Problem ---- */
  .zw-problem__card        { padding: 18px 16px; }
  .zw-problem__card .num   { font-size: 38px; }
  .zw-problem__card h4     { font-size: 17px; }
  .zw-problem__verdict     { padding: 16px; }

  /* ---- Plakativ loops ---- */
  .loop        { width: 80px; height: 80px; font-size: 9px; padding: 8px; }
  .loop strong { font-size: 17px; }

  /* ---- Compliance ---- */
  .zw-paragraph          { padding: 14px; gap: 10px; overflow: hidden; }
  .zw-paragraph__sigil   { font-size: 28px; width: 56px; min-width: 0; padding-right: 10px; flex-shrink: 0; line-break: anywhere}
  .zw-paragraph__body    { min-width: 0; }
  .zw-paragraph__body h4 { font-size: 15px; overflow-wrap: break-word; }

  /* ---- Targets → 1-col ---- */
  .zw-targets__grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ---- Timeline ---- */
  .zw-timeline__story   { padding: 16px; }
  .zw-timeline__story p { font-size: 15px; }
  .zw-timeline__rail { display: none; }

  /* ---- Compare table ---- */
  .zw-table { min-width: 420px; font-size: 11px; }
  .zw-table thead th,
  .zw-table tbody td   { padding: 8px 6px; }
  .zw-table .yes,
  .zw-table .no,
  .zw-table .partial   { font-size: 14px; }

  /* ---- Pricing ---- */
  .zw-pricing__card         { padding: 18px 14px; }
  .zw-pricing__result       { grid-template-columns: 1fr; }
  .zw-pricing__result-row .v { font-size: 28px; }
  .zw-pricing__card-h        { font-size: 18px; }

  /* ---- Keypad ---- */
  .zw-keypad               { padding: 10px; max-width: 100%; }
  .zw-keypad__display      { font-size: 26px; min-height: 38px; margin-bottom: 4px; }
  .zw-keypad__btn          { padding: 13px 0; font-size: 17px; }
  .zw-keypad__btn--clear,
  .zw-keypad__btn--ok      { font-size: 9.5px; padding: 13px 0; }
  .zw-keypad__grid         { gap: 6px; }

  /* ---- FAQ ---- */
  .zw-faq__q        { font-size: 13px; gap: 10px; padding: 12px 14px; }
  .zw-faq__sidebar  { padding: 16px; }
  .zw-faq__sidebar h4 { font-size: 18px; }
  .zw-faq__bubble   { width: 30px; height: 30px; font-size: 14px; flex-shrink: 0; }

  /* ---- Contact form ---- */
  .zw-contact__form       { padding: 16px !important; }
  .zw-contact__head h2    { margin-bottom: 16px; }

  /* ---- Footer → 1-col ---- */
  .zw-footer__cols  { grid-template-columns: 1fr !important; gap: 24px !important; }
  .zw-footer__inner { gap: 28px !important; }
  .zw-footer__brand .product { font-size: 18px; }
}

/* ================================================================
   LANDSCAPE PHONE (sehr kleine Höhe)
   ================================================================ */

@media (max-height: 500px) and (orientation: landscape) {
  .zw-hero { padding: 28px 0 36px; }
  .zw-nav  { position: relative; }
}

/* ================================================================
   REDUCED MOTION (zusätzliche Deklarationen)
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .zw-nav__hamburger span,
  .zw-mobile-nav { transition: none; }
}

/* ================================================================
   PRINT
   ================================================================ */

@media print {
  .zw-ticker,
  .zw-nav,
  .zw-mobile-nav,
  .zw-consent,
  .zw-toast,
  .zw-livedemo,
  .zw-counter      { display: none !important; }
  .zw-container    { padding: 0 20px; max-width: 100%; }
  .zw-hero__device { display: none; }
}