/* =============================================================
   Inverta — das Telefon

   Eine Datei für alles, was auf einem Telefon (bis 640 px, dieselbe Grenze,
   an der Inverta_CSS die Werte „mobil“ der Einstellungen einsetzt) anders
   sein soll als auf dem Tablet und dem Monitor.

   Warum eine eigene Datei und nicht responsive.css im Hauptpaket: die lädt
   vor den Stylesheets der Sektionen und des Shops und verliert gegen jede
   ihrer Regeln gleicher Stärke. Diese hier lädt als letzte (inc/enqueue.php,
   inverta_enqueue_mobile_layer()) und nur mit media="(max-width: 640px)" —
   auf einem Monitor lädt der Browser sie ohne zu warten und wendet nichts an.

   Was hier gilt, und warum:

   1. Text steht nie am Glas. Die Sektionen dürfen auf dem Telefon randvoll
      sein (--inv-edge mobil = 0), ihr Inhalt nicht: mindestens 16 px.
   2. Überschriften und Text haben eine Obergrenze. Die Größen aus dem
      Customizer gelten weiter — kleiner geht immer —, aber eine für den
      Monitor gewählte 42-px-Überschrift wird auf 390 px nicht 42 px groß.
      min(Einstellung, Grenze): die Einstellung bleibt wirksam.
   3. Knöpfe sind kompakt: 44 px hoch (die kleinste Fläche, die ein Daumen
      sicher trifft), 14 px Schrift.
   4. Sektionen sind randvoll und eckig. Gerundet bleiben Karten in ihnen.
   5. Bewegung ist kurz und billig: keine Unschärfe-Filter beim Einblenden,
      nichts, was endlos läuft, ohne dass man es sieht.
   ============================================================= */

/* -------------------------------------------------------------
   1. Der Rand

   Den Rand von Katalog und Produktseite (mindestens 16 px) setzt
   pages/woocommerce.css bis 1024 px — er fehlte auch auf dem Tablet.
   ------------------------------------------------------------- */

/* Das Band oben im Katalog ist eine Sektion, kein Kärtchen: randvoll und
   eckig wie der Hero der Startseite. Der negative Rand nimmt genau den
   Innenabstand zurück, den pages/woocommerce.css gibt — dieselbe Formel. */
body.woocommerce .vf-content-area .inv-shop-hero {
  margin-inline: calc(-1 * var(--inv-shop-px, max(var(--inv-edge, 0px), 16px)));
  border-inline: 0;
  border-radius: 0;
  padding-inline: 16px;
}

/* Die Suche im Katalog: rechtsbündig 144 px breit, der Platzhalter
   „Produkt suchen“ war auf 390 px abgeschnitten („Produkt suc“). Auf dem
   Telefon bekommt sie die ganze Zeile. */
.inv-shop-bar {
  flex-wrap: wrap;
}

.inv-shop-bar__end,
.inv-shop-bar__end .inv-shop-search {
  flex: 1 1 100%;
  width: 100%;
}

.inv-shop-bar__end .inv-shop-search input {
  flex: 1 1 auto;
  min-width: 0;
}

/* -------------------------------------------------------------
   2. Schriftgrößen

   Jede Regel hier liest dieselbe Variable wie die Regel, die sie ablöst,
   und setzt nur eine Obergrenze: min(Einstellung, Grenze). Eine kleinere
   Einstellung gilt also weiter, eine größere wird auf dem Telefon nicht
   größer als die Grenze. Ohne Einstellung gilt, was das Stylesheet der
   Sektion für das Telefon vorsieht.

   Gemessen am 16.10.2026 auf 390 px, vorher → Grenze:
     Produkttitel 42 → 26, Hero 38 → 30, Suche 34 → 26,
     Sektionsüberschriften 32 → 26, Shop-Band und Seitentitel 28,8 → 26,
     Preis 28 → 22, Überschriften auf der Produktseite 27 → 22.
   ------------------------------------------------------------- */

/* Hero — sections/hero.css setzt bis 600 px mit !important. */
.vf-hero-title {
  font-size: min(var(--vf-hero-title-size, clamp(1.15rem, 4.8vw, 1.45rem)), clamp(1.625rem, 7.6vw, 1.875rem)) !important;
  line-height: 1.12;
}

/* Die Überschrift einer Sektion. Allgemein clamp(2rem, 4vw, 3rem) —
   mindestens 32 px, auch auf 360 px. FAQ und Leistungen haben eigene Werte
   für das Telefon und stehen deshalb nicht hier. */
.vf-section-title:not(.vf-faq-title, .vf-services-title, .vf-cta-title),
.inv-section-title {
  font-size: clamp(1.375rem, 6.4vw, 1.625rem);
  line-height: 1.15;
}

.vf-cta-title {
  font-size: clamp(1.375rem, 6.4vw, min(var(--vf-cta-title-size, 1.625rem), 1.625rem));
  line-height: 1.15;
}

/* Titel der Seiten: Warenkorb, Kasse, Beiträge, Seiten. */
.vf-page-header h1 {
  font-size: clamp(1.375rem, 6.4vw, 1.625rem);
}

.inv-search__title {
  font-size: min(var(--inv-search-title, 34px), 1.625rem);
}

.inv-404__head {
  font-size: min(max(22px, calc(var(--inv-404-title, 38px) * .72)), 1.625rem);
}

/* Shop */
.inv-shop-hero__title {
  font-size: clamp(1.375rem, 6.4vw, 1.625rem);
}

.woocommerce div.product .product_title {
  font-size: min(var(--inv-sp-title-size, clamp(1.375rem, 6.4vw, 1.625rem)), 1.625rem);
  line-height: 1.15;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: min(var(--inv-sp-price-size, 1.25rem), 1.375rem);
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2,
.woocommerce div.product .woocommerce-tabs h2 {
  font-size: min(var(--inv-sp-head-size, 1.25rem), 1.375rem);
}

/* Kundenkonto: der Satz neben der Anmeldung. Mit h2 davor, weil
   `.entry-content h2` (Klasse + Element) sonst gewinnt — auch gegen die
   eigene Regel des Kontos. */
h2.inv-auth__claim {
  font-size: clamp(1.25rem, 5.6vw, 1.5rem);
}

/* Karten der Leistungen: „Service Smartphones“ und Geschwister, 22 px aus
   der Einstellung — auf einer 358 px breiten Karte zwei Zeilen. */
.vf-services-about-pillars .title {
  font-size: min(var(--vf-services-card-title-size, 20px), 1.1875rem);
}

/* -------------------------------------------------------------
   3. Knöpfe

   Hauptaktionen 44 px hoch (die kleinste Fläche, die ein Daumen sicher
   trifft), alle anderen um 40 px; 14 px Schrift. Die Regeln der Sektionen
   setzen eigene Höhen
   und Innenabstände (Produktseite 52 px, Kontakt 53, Anmelden 50, CTA 50)
   und schlagen damit die mobilen Werte aus buttons.css — und die gelten
   ohnehin nur für .vf-btn, nicht für .inv-btn („Mehr laden“, 404).
   Eingestellte Werte bleiben wirksam, solange sie kleiner sind.
   ------------------------------------------------------------- */
.inv-btn,
.vf-btn {
  font-size: min(var(--inv-btn-size-mob, var(--inv-btn-size-tab, .875rem)), .875rem);
  padding-block: min(var(--inv-btn-py-mob, var(--inv-btn-py-tab, .625rem)), .625rem);
  padding-inline: min(var(--inv-btn-px-mob, var(--inv-btn-px-tab, 1.125rem)), 1.25rem);
  line-height: 1.3;
}

/* CTA-Band */
.vf-cta-actions .vf-cta-btn {
  font-size: min(var(--vf-cta-btn-size, .875rem), .875rem);
  padding-block: .625rem;
  min-height: 44px;
}

/* Kontaktformular */
.vf-contact-form .vf-contact-submit {
  font-size: min(var(--vf-contact-btn-size, .875rem), .875rem);
  padding-block: .625rem;
  min-height: 44px;
}

/* Produktseite: „In den Warenkorb“ */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
  min-height: min(var(--inv-sp-btn-h, 44px), 44px);
  font-size: min(var(--inv-sp-btn-size, .9375rem), .9375rem);
}

/* Anmelden im Kundenkonto */
.inv-auth__submit {
  min-height: min(var(--inv-authb-h, 44px), 44px);
  padding-block: .625rem;
  line-height: 1.3;
  font-size: min(var(--inv-authb-size, .875rem), .9375rem);
}

/* „Zur Startseite“ auf der 404 */
.inv-404__btn {
  min-height: 44px;
  font-size: min(var(--vf-404-btn-size, 15px), .875rem);
}

/* -------------------------------------------------------------
   4. Sektionen randvoll und eckig

   Auf dem Monitor stehen die Sektionen als Kapseln — gerundete Inseln mit
   Abstand zum Rand. Auf 390 px wird daraus ein Stapel gerundeter Platten,
   deren Ecken nichts mehr trennen, sondern nur Breite kosten. Hier sind sie
   eckige Bänder; gerundet bleiben die Karten in ihnen.

   !important nur, weil sections/services.css bis 768 px selbst eins setzt.
   Mit den Flächen mitgemeint: die Schichten für Hintergrund und Schimmer,
   die genau in der Kapsel liegen — sonst ständen in den eckigen Ecken ihre
   runden.

   Der eigene „Abstand zum Bildschirmrand“ einer Sektion gilt weiter
   (FAQ der Website: 10 px). Nur die festen 6 px von Bento und Marken, die
   kein Regler setzt, fallen auf 0.
   ------------------------------------------------------------- */
.vf-hero-card,
.vf-section-about.vf-about-capsule-mode .vf-about-capsule,
.vf-section-services.vf-services-capsule-mode .vf-services-capsule,
.vf-services-capsule-bg,
.vf-section-bento.vf-bento-capsule-mode .vf-bento-capsule,
.vf-bento-capsule-bg,
.vf-bento-glow,
.vf-section-brands.vf-brands-capsule-mode .vf-brands-capsule,
.vf-cta-capsule,
.vf-contact-capsule,
.vf-contact-glow,
.vf-news-capsule,
.vf-news-glow,
.vf-faq-capsule,
.vf-faq-capsule-bg,
.vf-faq-glow,
.inv-404--capsule .inv-404__inner,
.inv-footershell-capsule .inv-footer-shell,
.inv-footershell-capsule .inv-footer-aura {
  border-radius: 0 !important;
}

.vf-section-bento.vf-bento-capsule-mode:not([style*="--inv-section-px"]),
.vf-section-brands.vf-brands-capsule-mode:not([style*="--inv-section-px"]) {
  padding-inline: var(--inv-section-px, 0px) !important;
}

/* Eckig heißt auch: ohne Seitenrand. Sonst steht neben dem Band links und
   rechts ein Pixel Rahmenlinie am Glas. */
.inv-footershell-capsule .inv-footer-shell {
  border-inline: 0;
}

/* -------------------------------------------------------------
   5. Die Kopfzeile liegt auf dem Hero

   Auf dem Monitor steht die Hero-Karte unter der schwebenden Kopfzeile, mit
   einem Spalt dazwischen. Auf dem Telefon kostete das 80 px hellen Streifen
   über einem dunklen Hero, und die Karte begann erst darunter. Hier beginnt
   der Hero oben am Bildschirm (unter der Adminleiste, solange sie zu sehen
   ist — hero.css klebt die Bühne an --vf-adminbar-top), und die Kopfzeile
   schwebt auf ihm. Der Inhalt der Karte rückt um die Höhe der Kopfzeile
   nach unten, damit nichts unter ihr liegt.

   Nicht bei „Kopfzeile unter dem Hero-Bereich“: dort ist oben nichts frei
   zu halten (hero.css, body.inv-headerpos-below_hero).
   ------------------------------------------------------------- */
body:not(.inv-headerpos-below_hero):not(.inv-header-below-hero) .vf-hero-sticky {
  padding-top: 0 !important;
}

body:not(.inv-headerpos-below_hero):not(.inv-header-below-hero) .vf-hero-card {
  padding-top: calc(var(--inv-header-bar-pt, 10px) + var(--inv-header-bar-h, 60px));
}

/* -------------------------------------------------------------
   6. Bewegung

   Einblenden ohne Unschärfe. filter: blur() rechnet der Browser bei jedem
   Bild der Animation neu, für jedes Element einzeln — auf einem Telefon
   die teuerste Art, etwas erscheinen zu lassen, und beim Scrollen mit dem
   Finger die, die man als Ruckeln spürt. Die Bewegung selbst bleibt.

   Die Namen sind dieselben wie in utilities/reveal.css, sections/team.css
   und utilities/skeleton.css: die spätere Definition gewinnt, und diese
   Datei gilt nur bis 640 px — auf dem Monitor bleibt alles, wie es ist.
   Den Text in „Über uns“ blendet about-scroll.js ein, dort steht dasselbe.
   ------------------------------------------------------------- */
@keyframes inv-reveal-depth {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes inv-reveal-word-depth {
  from {
    transform: translate3d(0, 70%, 0);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes vf-team-zoom {
  from {
    opacity: 0;
    transform: scale(.9);
  }
}

@keyframes inv-fresh-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Das Rollen der Knopfbeschriftung beim Überfahren: ohne Maus wird es nie
   ausgelöst, die Ebene im Grafikspeicher braucht es dann auch nicht. */
.txt-anim__inner {
  will-change: auto;
}

/* -------------------------------------------------------------
   7. Warenkorb auf 360 px

   WooCommerce baut die Zeile im schmalen Warenkorb als Raster aus festen
   80 px + 132 px, die Summe in einer dritten Spalte dahinter. Auf 360 px
   (Inhalt 328 px) ergibt das 336 px — der Preis stand 10 px vor dem Glas,
   8 px über den Rand der Karte hinaus. Das Bild wird schmaler, die Spalte
   des Produkts nimmt, was bleibt.
   ------------------------------------------------------------- */
.wp-block-woocommerce-cart .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row {
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 12px;
}

.wp-block-woocommerce-cart .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-item__image {
  width: 64px;
  max-width: 64px;
}

.wp-block-woocommerce-cart .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-item__image img {
  width: 100%;
  height: auto;
}