/* =====================================================================
   POSprom-Shop — Design im Stil der Marketing-Webseite (Grau + Logo-Grün).
   Einfügen unter:  WordPress → Design → Customizer → Zusätzliches CSS
   (oder in die style.css eines Storefront-Child-Themes).
   Empfohlenes Theme: Storefront.
   Farben aus www-posprom: posprom (Grau) + accent (#6cb33f Logo-Grün).
   ===================================================================== */

:root {
  /* POSprom Design-Tokens — volle Palette (siehe docs/branding/BRANDING.md) */
  /* Grau (posprom) */
  --pp-gray-50:#fafafa;
  --pp-gray-100:#f4f4f5;
  --pp-gray-200:#e4e4e7;
  --pp-gray-300:#d4d4d8;
  --pp-gray-400:#a1a1aa;
  --pp-gray-500:#71717a;
  --pp-gray-600:#52525b;
  --pp-gray-700:#3f3f46;     /* Fließtext */
  --pp-gray-800:#27272a;
  --pp-gray-900:#18181b;     /* Überschriften / Dunkelbereiche */
  --pp-gray-950:#09090b;
  /* Grün (accent / Logo-Grün) */
  --pp-green-50:#f2faea;
  --pp-green-100:#e0f3cb;
  --pp-green-200:#c4e79f;
  --pp-green-300:#a1d76e;
  --pp-green-400:#82c648;
  --pp-green:#6cb33f;        /* Logo-Grün (=500) */
  --pp-green-600:#4f9230;    /* CTAs / Buttons */
  --pp-green-700:#3d7126;    /* Links / Hover */
  --pp-green-800:#335c22;
  --pp-green-900:#2c4d20;
  /* Schrift */
  --pp-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* --- Grundtypografie --- */
body,
button,
input,
select,
textarea {
  color: var(--pp-gray-700);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.product_title {
  color: var(--pp-gray-900);
}

/* --- Links --- */
a { color: var(--pp-green-700); }
a:hover { color: var(--pp-green-600); }

/* --- Header: weiß + dezente Trennlinie --- */
.site-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--pp-gray-200);
}
.site-header a,
.site-title a { color: var(--pp-gray-900); }
.main-navigation ul li a { color: var(--pp-gray-700); }
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a { color: var(--pp-green-600); }

/* --- Buttons: Logo-Grün, abgerundet (alle WooCommerce-Varianten) --- */
a.button,
button,
.button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.added_to_cart,
.wc-block-components-button {
  background-color: var(--pp-green-600) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
a.button:hover,
button:hover,
.button:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.added_to_cart:hover,
.wc-block-components-button:hover {
  background-color: var(--pp-green-700) !important;
}

/* --- Preise + Angebot-Badge --- */
.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce ins {
  color: var(--pp-gray-900);
  font-weight: 700;
  text-decoration: none;
}
.woocommerce span.onsale {
  background-color: var(--pp-green-600);
  color: #ffffff;
  border-radius: 9999px;
}

/* --- Produkt-/Inhaltskarten: weiche Ecken --- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.post, .page, .hentry {
  border-radius: 12px;
}

/* --- Formular-Fokus in Grün --- */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--pp-green-600) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(108, 179, 63, .25) !important;
}

/* --- WooCommerce-/Germanized-Hinweise (Akzentlinie grün) --- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-store-notice {
  border-top-color: var(--pp-green-600);
  background-color: var(--pp-gray-50);
  color: #18181b !important; /* Hinweistext schwarz statt fast-weiß */
}
.woocommerce-info .button,
.woocommerce-message .button { color: #fff !important; } /* Button-Text weiß lassen */
.woocommerce-info::before,
.woocommerce-message::before { color: var(--pp-green-600); }

/* --- Footer: dunkelgrau wie auf der Webseite (optional) --- */
.site-footer {
  background-color: var(--pp-gray-900);
  color: var(--pp-gray-200);
}
.site-footer a { color: #ffffff; }

/* --- Akzent-/Linkfarbe für Warenkorb-/Account-Icons --- */
.site-header-cart .count,
.storefront-handheld-footer-bar a { color: #ffffff; }

/* --- Leere "Shop by Brand"-Sektion der Startseite ausblenden (keine Marken gepflegt) --- */
.storefront-woocommerce-brands { display: none !important; }

/* =====================================================================
   NAHTLOSER ÜBERGANG VON DER WEBSEITE (www-posprom) — Header/Footer/Container
   exakt im Stil der Marketing-Seite (Tailwind: max-w-container 1200px,
   weißer Sticky-Header h-20, Grau-700-Nav mit Grün-Hover, dunkler Footer).
   ===================================================================== */

/* Gleiche Inhaltsbreite wie die Webseite (max-w-container = 1200px) */
.col-full { max-width: 1200px !important; padding-left: 1rem; padding-right: 1rem; }

/* Header: weiß, sticky, dezente untere Linie wie auf der Webseite */
.site-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--pp-gray-100, #f4f4f5) !important;
  position: sticky; top: 0; z-index: 100;
  padding-top: .75rem !important; padding-bottom: .75rem !important;
}
.site-header .col-full { display: flex; align-items: center; gap: 1.5rem; }
/* Logo links, ~60px hoch (wie Header der Webseite) */
.site-header .custom-logo,
.site-header .site-logo-anchor img { max-height: 60px; width: auto; }
.site-branding { margin: 0; }

/* Navigation: Grau-700, mittlere Schrift, Grün beim Hover/aktiv */
.main-navigation { margin-left: auto; }
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  color: var(--pp-gray-700, #3f3f46) !important;
  font-weight: 500; font-size: .95rem; text-transform: none;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a { color: var(--pp-green-600, #4f9230) !important; }

/* Warenkorb-Betrag/Icon im Header dezent grau, Grün beim Hover */
.site-header-cart .cart-contents { color: var(--pp-gray-700, #3f3f46) !important; }
.site-header-cart .cart-contents:hover { color: var(--pp-green-600, #4f9230) !important; }

/* Footer: dunkelgrau wie auf der Webseite, Spalten-Überschriften weiß */
.site-footer { background-color: var(--pp-gray-900, #18181b) !important; color: var(--pp-gray-400, #a1a1aa); }
.site-footer .widget-title,
.site-footer h2, .site-footer h3 {
  color: #ffffff !important; text-transform: uppercase;
  letter-spacing: .05em; font-size: .8rem; font-weight: 600;
}
.site-footer, .site-footer p, .site-footer li, .site-footer .widget { color: var(--pp-gray-400, #a1a1aa); }
.site-footer a { color: var(--pp-gray-300, #d4d4d8); }
.site-footer a:hover { color: #ffffff; }
.site-footer .site-info { color: var(--pp-gray-500, #71717a); border-top: 1px solid #27272a; margin-top: 2rem; padding-top: 1.5rem; }

/* =====================================================================
   EINZEILIGER HEADER (eigene Hook-Struktur, identisch zur Webseite):
   Logo links · Navigation mittig · grüner Button rechts.
   ===================================================================== */
.site-header { padding: 0 !important; }
.site-header .pp-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 80px; box-sizing: border-box; max-width: 1200px; margin: 0 auto;
  padding-left: 1rem; padding-right: 1rem;
}
@media (min-width: 640px)  { .site-header .pp-header-row { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .site-header .pp-header-row { padding-left: 2rem; padding-right: 2rem; } }
/* Storefront-Clearfix-Pseudoelemente (.col-full::before/::after) entfernen — sie werden im
   Flex-Container sonst zu unsichtbaren Items und rücken Logo/Aktionen um den Gap (24px) ein. */
.site-header .pp-header-row::before, .site-header .pp-header-row::after { content: none !important; display: none !important; }
.pp-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.pp-logo img { height: 40px; width: auto; display: block; }
.pp-nav { display: flex; justify-content: center; flex: 1 1 auto; }
.pp-nav ul { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.pp-nav li { margin: 0; }
.pp-nav a {
  color: var(--pp-gray-700, #3f3f46) !important; font-weight: 500;
  font-size: .95rem; text-decoration: none; padding: 0; line-height: 1;
}
.pp-nav .current-menu-item > a, .pp-nav a:hover { color: var(--pp-green-600, #4f9230) !important; }
.pp-actions { flex: 0 0 auto; display: flex; align-items: center; }
.pp-cart-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--pp-green-600, #4f9230); color: #fff !important;
  border-radius: .5rem; padding: .55rem 1.1rem; font-size: .95rem;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.pp-cart-btn:hover { background: var(--pp-green-700, #3d7126); color: #fff !important; }
@media (max-width: 880px) { .pp-nav { display: none; } }

/* Footer: Logo-Chip (weiß) in Spalte 1 wie auf der Webseite */
.site-footer .pp-foot-logo { display: inline-flex; background: #fff; border-radius: 8px; padding: 6px 10px; margin-bottom: 12px; }
.site-footer .pp-foot-logo img { height: 48px; width: auto; display: block; }

/* =====================================================================
   EXAKTE ANGLEICHUNG AN DIE WEBSEITE (www-posprom) — Feinabgleich, damit
   KEINE sichtbaren Unterschiede bleiben (Logo-Groesse, Nav, Footer-Farben,
   Schriftgroesse). Steht bewusst am Ende (Kaskade gewinnt) und nutzt die
   exakten Tailwind-/Webseiten-Werte.
   ===================================================================== */

/* Grundschriftgroesse wie der Tailwind-Default der Webseite (16px / 1.5-1.6) */
body, button, input, select, textarea { font-size: 16px; line-height: 1.6; }

/* Header: weiss/90 + Blur + dezente Linie (Webseite: bg-white/90 backdrop-blur border-b border-gray-100) */
.site-header {
  background-color: rgba(255,255,255,0.9) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #f4f4f5 !important;
}

/* Logo: exakt 60px hoch wie im Webseiten-Header (statt 40px) */
.pp-logo img { height: 60px !important; }

/* Navigation: text-sm (0.875rem), font-medium; Hover/aktiv = GRAU (posprom-600), wie die Webseite (nicht gruen) */
.pp-nav a { font-size: 0.875rem !important; font-weight: 500 !important; }
.pp-nav .current-menu-item > a,
.pp-nav .current_page_item > a,
.pp-nav a:hover { color: #52525b !important; }

/* Rechter Button (Warenkorb/"Zum Shop") = btn-accent der Webseite (accent-600 #4f9230, rounded-lg, text-sm) */
.pp-cart-btn { background: #4f9230 !important; border-radius: 0.5rem !important; font-size: 0.875rem !important; font-weight: 600 !important; }
.pp-cart-btn:hover { background: #3d7126 !important; }

/* Header: "Mein Konto"/"Anmelden" — dezenter Text-Link links neben dem Warenkorb */
.pp-actions { display: flex !important; align-items: center; gap: 1.1rem; }
.pp-account-btn { display: inline-flex; align-items: center; gap: .4rem; color: #52525b !important; font-size: 0.875rem; font-weight: 500; text-decoration: none; line-height: 1; white-space: nowrap; }
.pp-account-btn:hover { color: #4f9230 !important; }
.pp-account-btn svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
@media (max-width: 560px) { .pp-account-btn .pp-account-label { display: none; } }

/* Header: "Produkte"-Dropdown */
.pp-has-dropdown { position: relative; }
.pp-has-dropdown > a { display: inline-flex !important; align-items: center; gap: .25rem; cursor: pointer; }
.pp-caret { width: .75rem; height: .75rem; transition: transform .15s; }
.pp-has-dropdown:hover .pp-caret, .pp-has-dropdown:focus-within .pp-caret { transform: rotate(180deg); }
/* unsichtbare Brücke, damit der Hover beim Wechsel auf das Dropdown nicht abreißt */
.pp-has-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .8rem; }
.pp-dropdown {
  display: block !important; /* nicht das horizontale flex der Nav-ul erben */
  position: absolute; top: 100%; left: 0; margin-top: .6rem; min-width: 210px;
  list-style: none; padding: .5rem; margin-left: 0;
  background: #fff; border: 1px solid #e4e4e7; border-radius: .85rem;
  box-shadow: 0 14px 30px -10px rgba(24, 24, 27, .25);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease; z-index: 60;
}
.pp-has-dropdown:hover .pp-dropdown, .pp-has-dropdown:focus-within .pp-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.pp-dropdown li { margin: 0 !important; }
.pp-dropdown-head { font-weight: 700 !important; color: #18181b !important; border-bottom: 1px solid #f4f4f5; border-radius: .5rem .5rem 0 0 !important; margin-bottom: .25rem; }
.pp-dropdown-all { font-weight: 500; font-size: .78rem; color: #a1a1aa; }
.pp-dropdown-head:hover .pp-dropdown-all { color: #4f9230; }

/* === Schrift identisch zur Marketing-Webseite (System-Sans statt Source Sans Pro) === */
body, button, input, select, optgroup, textarea,
h1, h2, h3, h4, h5, h6, .site-title, .section-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.section-title { font-weight: 700 !important; letter-spacing: -0.01em; }

.pp-dropdown a { display: block !important; padding: .5rem .7rem; border-radius: .5rem; color: #3f3f46 !important; font-size: .9rem !important; font-weight: 500 !important; text-decoration: none; white-space: nowrap; }
.pp-dropdown a:hover { background: #f6faf0; color: #3d7126 !important; }

/* === Header-Produktsuche (Lupe neben "Mein Konto", aufklappbares Panel) === */
.pp-search { position: relative; display: inline-flex; align-items: center; }
.pp-header-row .pp-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid #d4d4d8 !important; background: #fff !important; color: #52525b !important; border-radius: .5rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.pp-header-row .pp-search-btn:hover { background: #f4f4f5 !important; color: #18181b !important; border-color: #a1a1aa !important; }
.pp-search-btn svg { width: 1.4rem; height: 1.4rem; }
.pp-search-panel { position: absolute; top: calc(100% + .55rem); right: 0; z-index: 60; width: min(90vw, 340px); padding: .75rem; background: #fff; border: 1px solid #e4e4e7; border-radius: .85rem; box-shadow: 0 14px 30px -10px rgba(24,24,27,.3); }
.pp-search-panel[hidden] { display: none; }
.pp-search-panel .woocommerce-product-search { display: flex; gap: .5rem; margin: 0; align-items: stretch; }
.pp-search-panel .woocommerce-product-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pp-search-panel input[type="search"], .pp-search-panel .search-field { flex: 1 1 auto; min-width: 0; border: 1px solid #d4d4d8; border-radius: .5rem; padding: .55rem .75rem; font-size: .95rem; background: #fff; color: #18181b; }
.pp-search-panel input[type="search"]:focus, .pp-search-panel .search-field:focus { border-color: #4f9230; outline: 2px solid rgba(79,146,48,.25); }
.pp-search-panel button[type="submit"] { flex: 0 0 auto; border: 0; border-radius: .5rem; background: #4f9230; color: #fff; padding: .55rem .9rem; font-weight: 600; font-size: .9rem; cursor: pointer; }
.pp-search-panel button[type="submit"]:hover { background: #3d7126; }

/* "Vorheriges/Nächstes Produkt"-Navigation (Storefront) ausblenden — Sicherung zum Theme-Mod-Filter */
.storefront-product-pagination { display: none !important; }

/* ============================================================
   MEIN KONTO — Login & Registrierung im Webseiten-Look
   (Headings fett wie die Webseite, Formulare als Karten,
   Inputs/Buttons rounded-lg, Akzent #4f9230)
   ============================================================ */
.woocommerce-account .entry-header h1.entry-title,
.woocommerce-account h1.entry-title {
  font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; color: #111827;
}
.woocommerce-account #customer_login { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.woocommerce-account #customer_login > div { flex: 1 1 340px; max-width: 480px; }
.woocommerce-account #customer_login h2 {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; color: #111827; margin-bottom: 1rem;
}
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
  border: 1px solid #e4e4e7 !important; border-radius: 1rem !important;
  padding: 1.5rem !important; background: #fff;
  box-shadow: 0 1px 3px rgba(24, 24, 27, .08);
}
.woocommerce-account form .form-row label { font-size: .875rem; font-weight: 500; color: #3f3f46; }
.woocommerce-account form .form-row input.input-text {
  border: 1px solid #d4d4d8; border-radius: .5rem; background: #fff;
  padding: .65rem .85rem; font-size: .95rem; box-shadow: none;
}
.woocommerce-account form .form-row input.input-text:focus {
  border-color: #4f9230; outline: 2px solid rgba(79, 146, 48, .25); outline-offset: 0;
}
.woocommerce-account form button.button,
.woocommerce-account .woocommerce-Button {
  background: #4f9230 !important; color: #fff !important;
  border-radius: .5rem !important; font-weight: 600 !important; font-size: .9rem !important;
  padding: .7rem 1.4rem !important;
}
.woocommerce-account form button.button:hover,
.woocommerce-account .woocommerce-Button:hover { background: #3d7126 !important; }
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-privacy-policy-text a { color: #4f9230; }
.woocommerce-account .woocommerce-privacy-policy-text p,
.woocommerce-account form.register p:not(.form-row) { color: #71717a; font-size: .9rem; line-height: 1.5; }

/* Eingeloggter Bereich: Navigation + Inhalte ebenfalls im Karten-Look */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0 0 .4rem; }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block; padding: .55rem .9rem; border-radius: .5rem;
  color: #3f3f46; font-weight: 500; text-decoration: none; font-size: .92rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: #f6faf0; color: #3d7126; }

/* ============================================================
   STARTSEITE: HERO wie die Webseite (dunkler Verlauf, TSE-Botschaft)
   ============================================================ */
.pp-hero {
  position: relative; overflow: hidden;
  /* full-bleed: ueber die Content-Breite hinaus auf volle Viewport-Breite */
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: -1px;
  background: linear-gradient(135deg, #27272a 0%, #3f3f46 50%, #18181b 100%);
}
/* Startseite: Hero bündig unter dem Header — kein weißer Abstand (wie auf der Webseite).
   Storefront setzt auf .site-main ein Top-Padding (~4.15em); auf der Home entfernen. */
.home #main.site-main { padding-top: 0 !important; }
.pp-hero-inner {
  max-width: 1200px; margin: 0 auto; padding: 5.5rem 1rem 6rem;
  display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;
}
@media (min-width: 1024px) { .pp-hero-inner { grid-template-columns: 1fr 1fr; } }
.pp-hero-eyebrow {
  display: inline-flex; align-items: center; border-radius: 9999px; padding: .3rem .85rem;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  background: rgba(255,255,255,.1); color: #e4e4e7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.pp-hero-title {
  margin: 1.25rem 0 0; color: #fff;
  font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
}
.pp-hero-title span { color: #82c648; }
.pp-hero-sub { margin-top: 1.4rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.6; color: #d4d4d8; }
.pp-hero-sub strong { color: #fff; font-weight: 600; }
.pp-hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.pp-hero-btn-light {
  display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem;
  background: #fff; color: #27272a !important; padding: .75rem 1.25rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: background .15s;
}
.pp-hero-btn-light:hover { background: #f4f4f5; }
.pp-hero-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.4); color: #fff !important; padding: .75rem 1.25rem; font-weight: 600;
  text-decoration: none; transition: background .15s;
}
.pp-hero-btn-ghost:hover { background: rgba(255,255,255,.1); }
.pp-hero-badges { margin: 2.8rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: nowrap; gap: .5rem 1.1rem; }
.pp-hero-badges li {
  display: inline-flex; align-items: center; gap: .375rem; margin: 0; white-space: nowrap;
  font-size: .875rem; font-weight: 500; color: #d4d4d8;
  border-left: 1px solid rgba(255,255,255,.2); padding-left: .75rem;
}
.pp-hero-badges li:first-child { border-left: 0; padding-left: 0; }
/* Badges in EINER Reihe (wie Webseite); nur auf schmalen Screens umbrechen */
@media (max-width: 640px) { .pp-hero-badges { flex-wrap: wrap; } }
.pp-hero-badges svg { width: 1rem; height: 1rem; color: #82c648; flex-shrink: 0; }
.pp-hero-visual { display: none; }
@media (min-width: 1024px) { .pp-hero-visual { display: block; } .pp-hero-visual svg { width: 100%; height: auto; } }
/* Coming-soon-Eck-Banner (wie Webseite) */
.pp-hero-banner { position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 20; max-width: 300px; display: none; pointer-events: none; }
@media (min-width: 640px) { .pp-hero-banner { display: block; } }
.pp-hero-banner-card {
  display: flex; align-items: flex-start; gap: .6rem; transform: rotate(-2deg);
  background: #facc15; color: #18181b; border-radius: 1rem; padding: .85rem 1.2rem;
  box-shadow: 0 16px 30px -10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(202,138,4,.6);
}
.pp-hero-banner-card svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .1rem; }
.pp-hero-banner-card p { margin: 0; font-size: .85rem; font-weight: 700; line-height: 1.3; }
.pp-hero-banner-card span {
  display: inline-block; margin-top: .4rem; border-radius: .25rem; background: #18181b; color: #facc15;
  padding: .1rem .5rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}

/* Startseiten-Sektionsueberschriften: fett wie die Webseite (statt Storefront-Light) */
.storefront-product-section .section-title,
.pp-branchen .section-title {
  font-weight: 800 !important; letter-spacing: -0.02em; color: #111827 !important;
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
}

/* Branchen-Kategorie: "Passende Kassensysteme" unter den Software-Kacheln */
.pp-ks { margin: 2.5rem 0 0; clear: both; }
.pp-ks-title { font-size: 1.5rem; font-weight: 700; color: #18181b; margin: 0 0 1rem; }
.pp-ks-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 480px; padding: 1.1rem 1.4rem; border: 1px solid #e4e4e7; border-radius: 14px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.pp-ks-card:hover { border-color: #a1d76e; box-shadow: 0 8px 20px -8px rgba(24, 24, 27, .2); }
.pp-ks-card-name { font-weight: 700; color: #18181b; font-size: 1.05rem; }
.pp-ks-card-meta { color: #4f9230; font-weight: 600; white-space: nowrap; }

/* Footer: exakt die Tailwind-Default-Grautoene der Webseite (gray-900/300/400/500/800) */
.site-footer { background-color: #111827 !important; color: #9ca3af !important; }
.site-footer p, .site-footer li, .site-footer .widget { color: #9ca3af !important; }
.site-footer .widget-title, .site-footer h2, .site-footer h3 {
  color: #ffffff !important; text-transform: uppercase; letter-spacing: .05em;
  font-size: .875rem; font-weight: 600;
}
.site-footer a { color: #d1d5db !important; }
.site-footer a:hover { color: #ffffff !important; }
.site-footer .site-info { color: #6b7280 !important; border-top: 1px solid #1f2937 !important; }
.site-footer .pp-foot-logo img { height: 60px !important; }

/* --- Eigene 4-Spalten-Fußzeile (custom Hook, Layout wie Footer.astro der Webseite) --- */
.pp-footer { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1rem 1.5rem; }
/* Zwei Spalten schon am Handy: Die vier Bloecke bilden damit zwei Reihen statt vier
   untereinander -- vorher war die Fusszeile auf dem Telefon laenger als der Bildschirm hoch.
   Ab 1024 px vier nebeneinander. Die Webseite nutzt dieselbe Aufteilung (Footer.astro). */
.pp-footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
@media (min-width: 640px)  { .pp-footer-cols { gap: 2.5rem; } }
@media (min-width: 1024px) { .pp-footer-cols { grid-template-columns: repeat(4, 1fr); } }
.pp-foot-col h3 { color:#fff !important; text-transform:uppercase; letter-spacing:.05em; font-size:.875rem; font-weight:600; margin:0 0 1rem; }
.pp-foot-col ul { list-style:none; margin:0; padding:0; }
.pp-foot-col li { margin:0 0 .5rem; font-size:.875rem; }
.pp-foot-col p  { font-size:.875rem; line-height:1.6; margin:.25rem 0; color:#9ca3af; }
.pp-foot-col a  { color:#d1d5db; text-decoration:none; }
.pp-foot-col a:hover { color:#fff; }
.pp-foot-h { font-weight:600; color:#d1d5db !important; margin-top:.75rem !important; }
.pp-footer .site-info { margin-top:3rem; padding-top:1.5rem; border-top:1px solid #1f2937; font-size:.75rem; color:#6b7280;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:.75rem; text-align:center; }
@media (min-width:640px){ .pp-footer .site-info { flex-direction:row; text-align:left; } }
.pp-footer .site-info .pp-foot-b2b { color:#9ca3af; }
.pp-footer .site-info .pp-foot-b2b strong { color:#fff; font-weight:600; }

/* =====================================================================
   RECHTSTEXT-/LONG-FORM-SEITEN (AGB, Datenschutz, Impressum, Widerruf,
   Versandkosten) — Typografie 1:1 wie die Marketing-Webseite (.prose).
   Scope: normale WP-Seiten, NICHT WooCommerce-Seiten (Shop/Warenkorb/Kasse).
   ===================================================================== */
.page:not(.woocommerce-page) .entry-title {
  font-size: 1.875rem !important; line-height: 1.2; font-weight: 800 !important;
  letter-spacing: -0.025em; color: #111827;
}
.page:not(.woocommerce-page):not(.pp-ksp-page) .entry-content {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #374151;
}
.page:not(.woocommerce-page):not(.pp-ksp-page) .entry-content h2 {
  font-size: 1.25rem !important; line-height: 1.4; font-weight: 600 !important;
  color: #111827; margin: 2rem 0 .75rem !important;
}
.page:not(.woocommerce-page):not(.pp-ksp-page) .entry-content h3 {
  font-size: 1.125rem !important; line-height: 1.4; font-weight: 600 !important;
  color: #111827; margin: 1.5rem 0 .5rem !important;
}
.page:not(.woocommerce-page):not(.pp-ksp-page) .entry-content p {
  font-size: 1rem; line-height: 1.625; color: #374151; margin: 0 0 1rem;
}
.page:not(.woocommerce-page):not(.pp-ksp-page) .entry-content ul {
  list-style: disc outside; margin: 0 0 1rem; padding-left: 1.5rem; color: #374151;
}
.page:not(.woocommerce-page):not(.pp-ksp-page) .entry-content ol {
  list-style: decimal outside; margin: 0 0 1rem; padding-left: 1.5rem; color: #374151;
}
.page:not(.woocommerce-page):not(.pp-ksp-page) .entry-content li { margin-bottom: .25rem; }
.page:not(.woocommerce-page):not(.pp-ksp-page) .entry-content strong { font-weight: 600; color: #111827; }
.page:not(.woocommerce-page):not(.pp-ksp-page) .entry-content a { color: #3d7126; text-decoration: none; }
.page:not(.woocommerce-page):not(.pp-ksp-page) .entry-content a:hover { text-decoration: underline; }

/* =====================================================================
   PRODUKT-RASTER & KARTEN — professionelle, gleichmäßige Produktlisten auf
   ALLEN Shop-Flächen (Shop, Kategorie/Tag-Archive, Startseiten-Produkt-
   bereiche, verwandte Produkte). AUSGENOMMEN sind reine Kategorie-Kachel-
   Listen (enthalten li.product-category) — z. B. "Nach Kategorie einkaufen"
   bleibt unverändert. Karten im Stil der Webseite-.card: schlicht, klar,
   nicht überladen. (Selektor nutzt :has(); ältere Browser fallen sauber auf
   das Storefront-Standardlayout zurück.)
   ===================================================================== */

/* Gleichmäßiges, responsives Raster (2/3/4 Spalten) statt Storefront-Float */
ul.products:not(:has(li.product-category)) {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 0 0 2.5rem !important;
  padding: 0;
}
@media (min-width: 768px)  { ul.products:not(:has(li.product-category)) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { ul.products:not(:has(li.product-category)) { grid-template-columns: repeat(4, 1fr); } }

/* Software-Kategorie (nur 4 Produkte): große 2-Spalten-Kacheln (2x2) statt 4 schmaler */
.term-kassensoftware ul.products:not(:has(li.product-category)) { grid-template-columns: 1fr !important; }
@media (min-width: 768px) {
  .term-kassensoftware ul.products:not(:has(li.product-category)) { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Software-Kategorie: Produktbild ~25% kleiner + zentriert (nicht randlos), etwas Luft */
.term-kassensoftware ul.products:not(:has(li.product-category)) li.product a img {
  width: 75% !important;
  max-width: 75% !important;
  margin: 0.5rem auto 1rem !important;
  border-radius: 10px;
}

/* Storefront-Clearfix-Pseudoelemente entfernen — sonst werden sie zu leeren Grid-Zellen */
ul.products:not(:has(li.product-category))::before,
ul.products:not(:has(li.product-category))::after { content: none !important; display: none !important; }

/* Karte: weiße Fläche, weicher Schatten, runde Ecken, RANDLOSES Bild oben,
   zentrierter Inhalt — eleganter "Premium"-Look (an die Referenz angelehnt,
   aber in POSprom-Identität: grüner Button, eigene Grautöne). */
ul.products:not(:has(li.product-category)) li.product {
  width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
  position: relative;
  background: #fff;
  border: 1px solid #e4e4e7;          /* gray-200 */
  border-radius: 16px;                /* rounded-2xl */
  overflow: hidden;                   /* randloses Bild sauber an die runden Ecken clippen */
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 1px 3px rgba(24,24,27,.06);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
ul.products:not(:has(li.product-category)) li.product:hover {
  border-color: #a1d76e;              /* accent-300 */
  box-shadow: 0 16px 30px -10px rgba(24,24,27,.20);
  transform: translateY(-4px);
}

/* Produktbild RANDLOS (edge-to-edge) am oberen Kartenrand — füllt die volle
   Kachelbreite, KEIN weißer Rahmen drumherum => effektiv mehr Bildfläche bei
   gleicher Kachelbreite. 3:2-Querformat (WooCommerce liefert bereits 3:2) — in den breiten
   Software-Kacheln groß und mit minimalem Beschnitt. */
ul.products:not(:has(li.product-category)) li.product a img {
  display: block;
  width: calc(100% + 2.5rem) !important;   /* + linkes/rechtes Karten-Padding */
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;                        /* füllt die Fläche (Quelle ist bereits 3:2) */
  object-position: center;
  margin: -1.25rem -1.25rem 1rem -1.25rem !important;  /* oben + seitlich bis an den Rand */
  border-radius: 0;
}

/* Titel: kräftig, dunkel, zentriert */
ul.products:not(:has(li.product-category)) li.product .woocommerce-loop-product__title {
  font-size: 1.15rem !important; font-weight: 700; color: #18181b;
  line-height: 1.3; padding: 0 !important; margin: 0 0 .25rem !important; min-height: 2.6em;
}

/* Untertitel (Kurzbeschreibung) — dezent grau, zentriert */
ul.products:not(:has(li.product-category)) li.product .pp-loop-desc {
  color: #71717a; font-size: .875rem; line-height: 1.4; margin: 0 0 .6rem;
}

/* Preis groß + fett, zentriert; Steuer-/Versandhinweise klein & grau */
ul.products:not(:has(li.product-category)) li.product .price {
  display: block; color: #18181b !important; font-weight: 700;
  font-size: 1.6rem; margin: .35rem 0 .15rem !important;
}
ul.products:not(:has(li.product-category)) li.product .price del { color:#a1a1aa !important; font-weight:400; font-size:1.05rem; }
ul.products:not(:has(li.product-category)) li.product .price ins { text-decoration:none; }
ul.products:not(:has(li.product-category)) li.product .woocommerce-price-suffix,
ul.products:not(:has(li.product-category)) li.product .wc-gzd-additional-info,
ul.products:not(:has(li.product-category)) li.product small {
  display: block; color: #a1a1aa; font-size: .75rem; font-weight: 400; line-height: 1.5; margin: 0;
}

/* Button: breit, kräftig, grün (POSprom-Akzent statt Schwarz der Referenz) */
ul.products:not(:has(li.product-category)) li.product .button {
  margin-top: auto !important; width: 100%; text-align: center;
  padding-top: .7rem !important; padding-bottom: .7rem !important; font-weight: 600;
}

/* "Mehr erfahren"-Link unter dem Button */
ul.products:not(:has(li.product-category)) li.product .pp-more {
  display: inline-block; margin-top: .65rem; font-size: .85rem;
  color: #52525b; text-decoration: underline; text-underline-offset: 2px;
}
ul.products:not(:has(li.product-category)) li.product .pp-more:hover { color: #4f9230; }

/* Sale-Badge dezent in die Karten-Ecke */
ul.products:not(:has(li.product-category)) li.product .onsale {
  position: absolute; top: .75rem; left: .75rem; right: auto; margin: 0;
  min-height: 0; min-width: 0; padding: .15rem .6rem; font-size: .72rem; line-height: 1.6;
}

/* Sortier-Dropdown ruhiger */
.woocommerce .woocommerce-ordering select {
  border: 1px solid #e4e4e7; border-radius: 8px; padding: .4rem .6rem; color: #3f3f46;
}

/* =====================================================================
   STARTSEITE — große Branchen-Tiles (Gastronomie | Einzelhandel & Handel)
   ===================================================================== */
.pp-branchen { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1rem; }
.pp-branchen .section-title { text-align: center; margin: 0 0 1.5rem; }
.pp-branchen-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .pp-branchen-grid { grid-template-columns: 1fr 1fr; } }
.pp-branche-card {
  border: 1px solid #e4e4e7; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 3px rgba(24,24,27,.08); display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.pp-branche-card:hover { box-shadow: 0 16px 30px -10px rgba(24,24,27,.2); transform: translateY(-3px); }
.pp-branche-hero { position: relative; display: block; height: 230px; background-size: cover; background-position: center; }
.pp-branche-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem;
  font-size: 1.5rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7));
}
.pp-branche-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .85rem; }
.pp-branche-desc { color: #71717a; margin: 0; font-size: .95rem; }
.pp-branche-products { list-style: none; margin: 0; padding: 0; }
.pp-branche-products li { margin: 0 0 .5rem; }
.pp-branche-products a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 1rem; border: 1px solid #e4e4e7; border-radius: 10px;
  color: #18181b; text-decoration: none; transition: border-color .15s, background .15s;
}
.pp-branche-products a:hover { border-color: #a1d76e; background: #f6faf0; }
.pp-prod-name { font-weight: 600; }
.pp-prod-price { font-weight: 700; white-space: nowrap; color: #18181b; text-align: right; }
.pp-prod-vat { display: block; font-size: .68rem; font-weight: 400; color: #71717a; line-height: 1.1; margin-top: .05rem; }
.pp-branche-btn {
  display: block; text-align: center; margin-top: .25rem; padding: .8rem 1rem;
  border: 1px solid #3f3f46; border-radius: 10px; color: #3f3f46; text-decoration: none;
  font-weight: 600; transition: background .15s, color .15s;
}
.pp-branche-btn:hover { background: #3f3f46; color: #fff; }

/* Produkt-Kachel (Software): Tagline + Highlights (✓) wie auf der Webseite */
.pp-loop-desc--rich .pp-tagline { color: #52525b; font-size: .92rem; margin: 0 0 .6rem; text-align: center; }
.pp-loop-desc--rich .pp-highlights { list-style: none; margin: 0; padding: 0; text-align: left; }
.pp-loop-desc--rich .pp-highlights li { position: relative; padding-left: 1.3rem; margin: .2rem 0; font-size: .84rem; color: #3f3f46; line-height: 1.4; }
.pp-loop-desc--rich .pp-highlights li::before { content: "✓"; position: absolute; left: 0; color: #4f9230; font-weight: 700; }

/* Software-Galerie unten in der Produktbeschreibung — 2 Bilder nebeneinander */
.pp-galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1rem 0 1.5rem; }
.pp-galerie figure { margin: 0; border: 1px solid #e4e4e7; border-radius: 10px; overflow: hidden; background: #fafafa; }
.pp-galerie img { display: block; width: 100%; height: auto; }
@media (max-width: 480px) { .pp-galerie { grid-template-columns: 1fr; } }

/* =====================================================================
   "BESTELLUNG ERHALTEN" / Danke- & Bestellübersichtsseite — stylisch (POSprom)
   ===================================================================== */
.woocommerce-order { max-width: 880px; margin: 1rem auto 0; }

/* Erfolgs-Banner mit grünem Häkchen */
.woocommerce-order .woocommerce-thankyou-order-received {
  display: flex; align-items: center; gap: 1rem;
  margin: .5rem 0 2.25rem; padding: 1.4rem 1.6rem;
  background: linear-gradient(135deg, #f2faea 0%, #e0f3cb 100%);
  border: 1px solid #c4e79f; border-radius: 1rem;
  font-size: 1.15rem; line-height: 1.4; font-weight: 600; color: #274d12;
}
.woocommerce-order .woocommerce-thankyou-order-received::before {
  content: "✓"; flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: #4f9230; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; line-height: 1;
  box-shadow: 0 4px 14px rgba(79,146,48,.35);
}

/* Eckdaten (Bestellnummer/Datum/E-Mail/Gesamt/Zahlungsart) als Karten-Raster */
.woocommerce-order ul.order_details {
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: #e4e4e7; border: 1px solid #e4e4e7;
  border-radius: 1rem; overflow: hidden;
}
.woocommerce-order ul.order_details li {
  margin: 0; padding: 1.05rem 1.25rem; background: #fff; border: 0 !important;
  list-style: none !important;
  font-size: .7rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #71717a;
}
.woocommerce-order ul.order_details li::marker,
.woocommerce-order ul.order_details li::before { content: "" !important; display: none; }
.woocommerce-order ul.order_details li strong {
  display: block; margin-top: .35rem;
  font-size: 1.1rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: #18181b;
}
.woocommerce-order ul.order_details li.woocommerce-order-overview__total strong { color: #4f9230; }

/* Abschnittstitel + Tabellen */
.woocommerce-order h2,
.woocommerce-order .woocommerce-column__title,
.woocommerce-order .woocommerce-order-details__title { font-size: 1.25rem; font-weight: 700; color: #18181b; margin: 0 0 1rem; }
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details { margin-top: 2.5rem; }
.woocommerce-order table.order_details {
  width: 100%; border-collapse: collapse;
  border: 1px solid #e4e4e7; border-radius: 1rem; overflow: hidden;
}
.woocommerce-order table.order_details th,
.woocommerce-order table.order_details td {
  padding: .9rem 1.1rem; border: 0; border-bottom: 1px solid #f0f0f1; text-align: left; vertical-align: top;
}
.woocommerce-order table.order_details thead th { background: #fafafa; font-weight: 700; color: #18181b; }
.woocommerce-order table.order_details th:last-child,
.woocommerce-order table.order_details td:last-child { text-align: right; }
.woocommerce-order table.order_details tfoot th,
.woocommerce-order table.order_details tfoot td { background: #fafafa; }
.woocommerce-order table.order_details tfoot tr:last-child th,
.woocommerce-order table.order_details tfoot tr:last-child td { border-bottom: 0; }
.woocommerce-order table.order_details tfoot strong { color: #4f9230; font-weight: 800; font-size: 1.05rem; }
.woocommerce-order .woocommerce-customer-details address {
  border: 1px solid #e4e4e7; border-radius: 1rem; padding: 1.1rem 1.25rem;
  font-style: normal; line-height: 1.7; color: #374151; margin: 0;
}

/* Aktions-Buttons */
.pp-thankyou-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2.5rem 0 .5rem; }
.pp-thankyou-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.4rem; border-radius: .6rem; font-weight: 600; text-decoration: none; transition: background .15s, color .15s;
}
.pp-thankyou-actions .pp-btn-primary { background: #4f9230; color: #fff; }
.pp-thankyou-actions .pp-btn-primary:hover { background: #3d7126; }
.pp-thankyou-actions .pp-btn-ghost { background: #fff; color: #18181b; border: 1px solid #d4d4d8; }
.pp-thankyou-actions .pp-btn-ghost:hover { background: #f4f4f5; }

/* ============================================================
   Konto-Seite: Login/Registrierung als Modale (+ Honeypot)
   Redesign (synthetisiert aus Design-Panel): Premium/branded,
   runder Close-Button, der den Storefront-Button-Override schlaegt.
   ============================================================ */

/* Honeypot: im DOM, aber unsichtbar (nicht display:none -> Bots fuellen eher aus) */
.pp-hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Intro / Account-Gate */
.pp-account-gate { display: flex; justify-content: center; padding: .5rem 0 2.5rem; }
.pp-account-intro { max-width: 620px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.pp-account-lead { font-size: 1.0625rem; line-height: 1.6; color: #3f3f46; margin: 0 0 1.5rem; }
.pp-account-actions { display: flex; gap: .875rem; justify-content: center; flex-wrap: wrap; }
.pp-account-actions .button { margin: 0; }

/* Ghost-/Sekundaer-Button */
.pp-account-actions .pp-btn-ghost { background: #fff !important; color: #4f9230 !important; border: 1px solid #4f9230 !important; }
.pp-account-actions .pp-btn-ghost:hover,
.pp-account-actions .pp-btn-ghost:focus-visible { background: #4f9230 !important; color: #fff !important; }

/* Modal-Grundgeruest */
body.pp-modal-open { overflow: hidden; }
.pp-modal { display: none; position: fixed; inset: 0; z-index: 100000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.pp-modal.is-open { display: block; }

/* Overlay: weicher Blur + dunkler Schleier */
.pp-modal__overlay { position: absolute; inset: 0; background: rgba(24,24,27,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: pp-modal-fade .18s ease-out; }

/* Box: 14px Radius, feiner Rahmen + mehrschichtige Schatten */
.pp-modal__box {
  position: relative; z-index: 1; width: calc(100% - 2rem); max-width: 440px; margin: 7vh auto;
  background: #fff; border: 1px solid #e4e4e7; border-radius: 14px; padding: 0 0 1.75rem;
  box-shadow: 0 1px 1px rgba(24,24,27,.04), 0 8px 16px -6px rgba(24,24,27,.12), 0 24px 48px -12px rgba(24,24,27,.22);
  max-height: 86vh; overflow-y: auto; animation: pp-modal-in .2s cubic-bezier(.16,.84,.44,1);
}
@keyframes pp-modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pp-modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* Header: Titel + feine Trennlinie + dezenter Gruen-Akzent */
.pp-modal__title { margin: 0; padding: 1.5rem 4rem 1.1rem 1.85rem; font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #18181b; border-bottom: 1px solid #e4e4e7; position: relative; }
.pp-modal__title::before { content: ""; position: absolute; left: 1.85rem; bottom: -1px; width: 38px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #4f9230, #82c648); }

/* --- Close-Button: runder Kreis, schlaegt den Storefront-/Customizer-Button-Override ---
   Spezifitaet 0-3-0 UND 0-3-1 (button.pp-modal__close) egalisiert Storefronts hoechsten
   Selektor (.woocommerce button.button.alt) unabhaengig von der Quellenreihenfolge.
   !important auf allen erzwungenen Eigenschaften (background/padding/border/width/height/color).
   X als zentriertes Inline-SVG; Fokus per echtem outline (ueberlebt High-Contrast). */
.pp-modal .pp-modal__box .pp-modal__close,
.pp-modal .pp-modal__box button.pp-modal__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important;
  padding: 0 !important; margin: 0 !important;
  background: #f4f4f5 !important; background-image: none !important;
  border: 1px solid #e4e4e7 !important; border-radius: 999px !important;
  color: #71717a !important; line-height: 1 !important; font-size: 0 !important;
  box-shadow: none !important; text-shadow: none !important; cursor: pointer;
  -webkit-appearance: none !important; appearance: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pp-modal .pp-modal__box .pp-modal__close svg { width: 18px; height: 18px; display: block; pointer-events: none; }
.pp-modal .pp-modal__box .pp-modal__close:hover { background: rgba(79,146,48,.10) !important; border-color: rgba(79,146,48,.30) !important; color: #3d7126 !important; }
.pp-modal .pp-modal__box .pp-modal__close:focus-visible { outline: 2px solid #4f9230 !important; outline-offset: 2px; border-color: #4f9230 !important; color: #3d7126 !important; }
.pp-modal .pp-modal__box .pp-modal__close:focus:not(:focus-visible) { outline: none !important; }

/* Hinweise / Notices */
.pp-modal__notices { margin: 1.25rem 1.85rem 0; }
.pp-modal__notices:empty { display: none; }
.pp-modal__notices .woocommerce-error,
.pp-modal__notices .woocommerce-message,
.pp-modal__notices .woocommerce-info { margin: 0 0 .5rem; padding-left: 1rem; }

/* Formulare im Modal */
.pp-modal .woocommerce-form { padding: 1.25rem 1.85rem 0; }
.pp-modal .woocommerce-form-row,
.pp-modal .form-row { margin-bottom: 1rem; }
.pp-modal label { display: block; font-weight: 600; font-size: .8125rem; margin-bottom: .4rem; color: #18181b; letter-spacing: .005em; }
.pp-modal .required { color: #4f9230; }
.pp-modal input[type=text],
.pp-modal input[type=email],
.pp-modal input[type=password] {
  width: 100%; padding: .7rem .85rem; border: 1px solid #d4d4d8; border-radius: 10px;
  font-size: 1rem; color: #18181b; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.pp-modal input[type=text]::placeholder,
.pp-modal input[type=email]::placeholder,
.pp-modal input[type=password]::placeholder { color: #a1a1aa; }
.pp-modal input[type=text]:hover,
.pp-modal input[type=email]:hover,
.pp-modal input[type=password]:hover { border-color: #b8b8bf; }
.pp-modal input[type=text]:focus,
.pp-modal input[type=email]:focus,
.pp-modal input[type=password]:focus { outline: none; border-color: #4f9230; box-shadow: 0 0 0 3px rgba(79,146,48,.15); }

/* Submit nutzt .button (Storefront-CTA-Gruen) — volle Breite */
.pp-modal .woocommerce-form-login__submit,
.pp-modal .woocommerce-form-register__submit { width: 100%; margin-top: .5rem; padding-top: .75rem; padding-bottom: .75rem; font-weight: 600; border-radius: 10px; }

/* "Angemeldet bleiben" */
.pp-modal .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: .5rem; font-weight: 400; font-size: .9375rem; color: #3f3f46; margin-bottom: .85rem; }
.pp-modal .woocommerce-form-login__rememberme input { width: auto; }

/* Passwort vergessen */
.pp-modal .lost_password { text-align: center; margin: 1rem 0 0; font-size: .875rem; }
.pp-modal .lost_password a { color: #4f9230; text-decoration: none; font-weight: 500; }
.pp-modal .lost_password a:hover { color: #3d7126; text-decoration: underline; }

/* Registrierungs-Hinweis */
.pp-modal .pp-reg-hint { font-size: .875rem; line-height: 1.55; color: #52525b; background: #f8faf6; border: 1px solid #e6f0de; border-left: 3px solid #6cb33f; padding: .8rem .9rem; border-radius: 10px; margin: 0 0 1rem; }

/* Responsive */
@media (max-width: 480px) {
  .pp-modal__box { margin: 4vh auto; }
  .pp-modal__title { padding: 1.25rem 3.5rem .95rem 1.4rem; font-size: 1.25rem; }
  .pp-modal__title::before { left: 1.4rem; }
  .pp-modal__notices { margin: 1rem 1.4rem 0; }
  .pp-modal .woocommerce-form { padding: 1rem 1.4rem 0; }
  .pp-modal .pp-modal__box .pp-modal__close,
  .pp-modal .pp-modal__box button.pp-modal__close { top: .85rem; right: .85rem; width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important; }
  .pp-account-actions { flex-direction: column; }
  .pp-account-actions .button { width: 100%; }
}

/* Reduced-Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  .pp-modal__box, .pp-modal__overlay { animation: none; }
  .pp-modal .pp-modal__box .pp-modal__close,
  .pp-modal input[type=text],
  .pp-modal input[type=email],
  .pp-modal input[type=password] { transition: none; }
}

/* ============================================================
   Landingpage Kategorie "Kassensysteme" (.pp-ksp-*)
   ============================================================ */
.pp-ksp h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; color: var(--pp-gray-900); letter-spacing: -.01em; margin: 0 0 .5rem; }
.pp-ksp-head { text-align: center; max-width: 640px; margin: 0 auto 2rem; }
.pp-ksp-head p { color: var(--pp-gray-600); font-size: 1.05rem; margin: 0; }

/* Hero */
.pp-ksp-hero { background: linear-gradient(160deg, #1d2b14 0%, var(--pp-gray-900) 58%); border-radius: 22px; padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.25rem, 4vw, 3rem); margin-bottom: 3rem; }
.pp-ksp-hero-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.pp-ksp-hero-art img { width: 100%; height: auto; display: block; }
.pp-ksp-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a3e07a; background: rgba(108,179,63,.15); border: 1px solid rgba(108,179,63,.35); padding: .35rem .85rem; border-radius: 999px; margin-bottom: 1.25rem; }
.pp-ksp-hero-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #fff; margin: 0 0 1rem; }
.pp-ksp-hero-sub { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6; color: #d4d4d8; margin: 0 auto 1.75rem; max-width: 620px; }
.pp-ksp-hero-cta { display: flex; gap: .8rem; justify-content: flex-start; flex-wrap: wrap; }
.pp-ksp-badges { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-start; list-style: none; margin: 2rem 0 0; padding: 0; }
.pp-ksp-badges li { font-size: .78rem; font-weight: 600; color: #e4e4e7; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .3rem .8rem; }

/* Buttons */
.pp-ksp-btn { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.6rem; border-radius: 11px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background .15s, color .15s, transform .1s; }
.pp-ksp-btn:active { transform: translateY(1px); }
.pp-ksp-btn-primary { background: var(--pp-green-600); color: #fff !important; }
.pp-ksp-btn-primary:hover { background: var(--pp-green-700); color: #fff !important; }
.pp-ksp-btn-ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,.4); }
.pp-ksp-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff !important; }
.pp-ksp-btn-ghost-dark { background: transparent; color: var(--pp-gray-900) !important; border: 1px solid var(--pp-gray-200); }
.pp-ksp-btn-ghost-dark:hover { background: var(--pp-gray-100); }

/* USPs */
.pp-ksp-usps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 3.5rem; }
.pp-ksp-usp { background: #fff; border: 1px solid var(--pp-gray-200); border-radius: 16px; padding: 1.6rem 1.25rem; text-align: center; }
.pp-ksp-usp-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(79,146,48,.1); color: var(--pp-green-600); margin-bottom: .9rem; }
.pp-ksp-usp-ic svg { width: 24px; height: 24px; }
.pp-ksp-usp h3 { font-size: 1.02rem; font-weight: 700; color: var(--pp-gray-900); margin: 0 0 .4rem; }
.pp-ksp-usp p { font-size: .9rem; line-height: 1.5; color: var(--pp-gray-600); margin: 0; }

/* Systeme (Shortcode-Grid) */
.pp-ksp-systems { margin-bottom: 3.5rem; }
.pp-ksp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.pp-ksp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pp-gray-200); border-radius: 18px; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.pp-ksp-card:hover { border-color: #a3e07a; box-shadow: 0 18px 40px -18px rgba(24,24,27,.28); transform: translateY(-3px); }
.pp-ksp-card-img { display: block; background: var(--pp-gray-50); padding: 1.5rem; }
.pp-ksp-card-img img { width: 100%; height: 220px; object-fit: contain; display: block; }
.pp-ksp-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.4rem 1.4rem; }
.pp-ksp-card-name { font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 0 0 .6rem; }
.pp-ksp-card-name a { color: var(--pp-gray-900); text-decoration: none; }
.pp-ksp-card-name a:hover { color: var(--pp-green-600); }
.pp-ksp-card-short { color: var(--pp-gray-600); font-size: .9rem; margin-bottom: 1rem; }
.pp-ksp-card-short ul { margin: 0; padding-left: 1.1rem; list-style: disc; }
.pp-ksp-card-short li { margin: .15rem 0; }
.pp-ksp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--pp-gray-100); }
.pp-ksp-card-price { font-size: 1.2rem; font-weight: 800; color: var(--pp-gray-900); }
.pp-ksp-card-cta { background: var(--pp-green-600) !important; color: #fff !important; border-radius: 10px; padding: .6rem 1.1rem !important; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pp-ksp-card-cta:hover { background: var(--pp-green-700) !important; }

/* Schritte */
.pp-ksp-steps { margin-bottom: 3.5rem; }
.pp-ksp-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.pp-ksp-step { background: var(--pp-gray-50); border: 1px solid var(--pp-gray-200); border-radius: 16px; padding: 1.75rem 1.4rem; text-align: center; }
.pp-ksp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pp-green-600); color: #fff; font-weight: 800; font-size: 1.2rem; margin-bottom: .9rem; }
.pp-ksp-step h3 { font-size: 1.05rem; font-weight: 700; color: var(--pp-gray-900); margin: 0 0 .4rem; }
.pp-ksp-step p { font-size: .92rem; color: var(--pp-gray-600); margin: 0; line-height: 1.5; }

/* Trust */
.pp-ksp-trust { background: var(--pp-gray-50); border: 1px solid var(--pp-gray-200); border-radius: 18px; padding: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 3.5rem; }
.pp-ksp-trust-inner { max-width: 760px; margin: 0 auto; }
.pp-ksp-trust h2 { text-align: center; }
.pp-ksp-trust-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.pp-ksp-trust-list li { position: relative; padding-left: 2.1rem; color: var(--pp-gray-700); line-height: 1.55; }
.pp-ksp-trust-list li::before { content: "\2713"; position: absolute; left: 0; top: .1rem; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; text-align: center; border-radius: 50%; background: var(--pp-green-600); color: #fff; font-size: .82rem; font-weight: 700; }
.pp-ksp-trust-list strong { color: var(--pp-gray-900); }

/* FAQ */
.pp-ksp-faq { max-width: 760px; margin: 0 auto 3.5rem; }
.pp-ksp-faq-item { border: 1px solid var(--pp-gray-200); border-radius: 12px; margin-bottom: .65rem; background: #fff; overflow: hidden; }
.pp-ksp-faq-item summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; color: var(--pp-gray-900); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pp-ksp-faq-item summary::-webkit-details-marker { display: none; }
.pp-ksp-faq-item summary::after { content: "+"; font-size: 1.5rem; color: var(--pp-green-600); font-weight: 400; line-height: 1; }
.pp-ksp-faq-item[open] summary::after { content: "\2212"; }
.pp-ksp-faq-item p { margin: 0; padding: 0 1.25rem 1.1rem; color: var(--pp-gray-600); line-height: 1.6; }

/* Abschluss-CTA */
.pp-ksp-cta { background: var(--pp-green-600); border-radius: 22px; padding: clamp(2.25rem, 5vw, 3.5rem) 1.5rem; text-align: center; }
.pp-ksp-cta h2 { color: #fff; }
.pp-ksp-cta p { color: rgba(255,255,255,.92); font-size: 1.05rem; margin: 0 0 1.5rem; }
.pp-ksp-cta .pp-ksp-btn-primary { background: #fff; color: var(--pp-green-700) !important; }
.pp-ksp-cta .pp-ksp-btn-primary:hover { background: var(--pp-gray-100); color: var(--pp-green-700) !important; }
.pp-ksp-cta .pp-ksp-btn-ghost-dark { color: #fff !important; border-color: rgba(255,255,255,.5); }
.pp-ksp-cta .pp-ksp-btn-ghost-dark:hover { background: rgba(255,255,255,.12); }

@media (max-width: 900px) { .pp-ksp-usps { grid-template-columns: repeat(2, 1fr); } .pp-ksp-steps-grid { grid-template-columns: 1fr; } .pp-ksp-hero-inner { grid-template-columns: 1fr; text-align: center; } .pp-ksp-hero-cta, .pp-ksp-badges { justify-content: center; } .pp-ksp-hero-art { max-width: 460px; margin: .5rem auto 0; } }
@media (max-width: 600px) { .pp-ksp-usps { grid-template-columns: 1fr; } .pp-ksp-card-foot { flex-direction: column; align-items: stretch; } .pp-ksp-card-cta { text-align: center; } }

/* Kassensysteme-Hero im Startseiten-Stil (.pp-hero-*), aber als contained Karte statt full-bleed */
.pp-ksp-herobox { width: auto; margin-left: 0; margin-top: 0; margin-bottom: 3rem; border-radius: 22px; }
.pp-ksp-herobox .pp-hero-inner { max-width: 1120px; padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem); }
.pp-ksp-herobox .pp-hero-visual img { width: 100%; height: auto; display: block; }
/* Hero-Text gegen fremde .entry-content-Typografie absichern */
.pp-ksp-herobox .pp-hero-title { color: #fff !important; font-size: clamp(2.25rem, 5vw, 3.5rem) !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.025em !important; margin: 1.25rem 0 0 !important; }
.pp-ksp-herobox .pp-hero-title span { color: #82c648 !important; }
.pp-ksp-herobox .pp-hero-sub { color: #d4d4d8 !important; font-size: 1.125rem !important; }
.pp-ksp-herobox .pp-hero-sub strong { color: #fff !important; font-weight: 600 !important; }
.pp-ksp-herobox .pp-hero-eyebrow { color: #e4e4e7 !important; }
.pp-ksp-herobox .pp-hero-badges li { color: #d4d4d8 !important; }

/* ===================================================================
   Zubehoer-Karten auf der Produktseite (posprom_accessory_cards).
   Eigenstaendig kaufbares Zubehoer: Bild, Name, Kurztext, Preis,
   Mengenwahl und eigener Warenkorb-Knopf je Karte. Empfohlene Karte
   wird mit dunklem Rahmen + Badge betont.
   =================================================================== */
.pp-acc { margin: 3rem 0 0; }
.pp-acc-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; color: #18181b; }
.pp-acc-intro { color: #52525b; margin: 0 0 1.5rem; font-size: .95rem; }

.pp-acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }

.pp-acc-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid #e4e4e7; border-radius: 14px; background: #fff; padding: 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pp-acc-card:hover { border-color: #a1a1aa; box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.pp-acc-card--rec { border-color: #18181b; border-width: 2px; }

.pp-acc-badge {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  background: #18181b; color: #fff; border-radius: 999px; padding: .15rem .6rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

.pp-acc-media { display: block; border-radius: 10px; overflow: hidden; background: #fafafa; }
.pp-acc-media img { display: block; width: 100%; height: 170px; object-fit: contain; }

.pp-acc-body { flex: 1 1 auto; text-align: center; padding: .85rem .25rem .75rem; }
.pp-acc-name { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; line-height: 1.3; color: #18181b; }
.pp-acc-sub { font-size: .85rem; color: #52525b; margin: 0 0 .6rem; line-height: 1.45; }
.pp-acc-price { font-size: 1.25rem; font-weight: 700; margin: 0; color: #18181b; }

.pp-acc-form { display: flex; gap: .5rem; margin-top: .25rem; }
.pp-acc-qty {
  flex: 0 0 4.5rem; border: 1px solid #d4d4d8; border-radius: 8px;
  padding: .5rem; background: #fff; font-size: .95rem;
}
.pp-acc-add.button { flex: 1 1 auto; text-align: center; }
.pp-acc-more { display: block; text-align: center; margin-top: .6rem; font-size: .9rem; text-decoration: underline; }

@media (max-width: 480px) {
  .pp-acc-grid { grid-template-columns: 1fr; }
  .pp-acc-media img { height: 190px; }
}

/* ===================================================================
   Software-Vorschau auf der Produktseite (posprom_software_previews).
   Je Software-Variante ein Block mit Galerie + Original-Beschreibung
   des Software-Produkts; sichtbar ist immer nur der zur gewaehlten
   Variante passende (Umschalten per JS, [hidden]).
   =================================================================== */
.pp-swp { margin: 3rem 0 0; }
.pp-swp-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; color: #18181b; }
.pp-swp-hint { color: #52525b; margin: 0 0 1.5rem; font-size: .95rem; }

/* Storefront setzt auf viele Container display:block/grid — [hidden] muss hier gewinnen. */
.pp-swp-item[hidden],
.pp-swp-hint[hidden] { display: none !important; }

.pp-swp-item { margin-top: 1.25rem; }
.pp-swp-name { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; line-height: 1.3; }
.pp-swp-name a { color: #18181b; text-decoration: none; }
.pp-swp-name a:hover { color: #4f9230; }

/* auto-fit + minmax(0,…): Karten fuellen die Breite, laufen aber nie darueber hinaus. */
.pp-swp-gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem; margin: 0 0 1.5rem;
}
.pp-swp-shot { display: block; border: 1px solid #e4e4e7; border-radius: 12px; overflow: hidden; background: #fafafa; }
.pp-swp-shot:hover { border-color: #a1a1aa; }
.pp-swp-shot img { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }

.pp-swp-desc { color: #3f3f46; line-height: 1.65; }
.pp-swp-desc :first-child { margin-top: 0; }
.pp-swp-desc :last-child { margin-bottom: 0; }
/* Fremde Inhalte (Tabellen, Bilder, Code) duerfen die Seite nicht breiter machen. */
.pp-swp-desc img { max-width: 100%; height: auto; }
.pp-swp-desc table { display: block; width: 100%; max-width: 100%; overflow-x: auto; }
.pp-swp-desc pre { max-width: 100%; overflow-x: auto; }

.pp-swp-more { display: inline-block; margin-top: 1.25rem; font-weight: 600; }

@media (max-width: 480px) {
  .pp-swp-gallery { grid-template-columns: 1fr; }
}

/* ===================================================================
   Zubehoer-Miniaturen im Warenkorb-Bereich (posprom_accessory_picker).
   Liegt INNERHALB von form.cart, direkt ueber Mengenfeld/Warenkorb-Knopf
   (bei variablen Produkten unter der Varianten-Tabelle). Anhaken ->
   gemeinsam mit dem Hauptartikel in den Warenkorb.
   =================================================================== */
.pp-accmini {
  clear: both;   /* Storefront arbeitet in form.cart mit Floats */
  margin: 0 0 1.25rem; padding: .85rem .95rem .95rem;
  border: 1px solid #e4e4e7; border-radius: 14px; background: #fafafa;
}
.pp-accmini-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.pp-accmini-title { font-size: 1rem; font-weight: 700; color: #18181b; line-height: 1.3; }
.pp-accmini-link { font-size: .8125rem; text-decoration: underline; white-space: nowrap; }
.pp-accmini-hint { margin: .3rem 0 .75rem; font-size: .8125rem; line-height: 1.45; color: #52525b; }

.pp-accmini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.pp-accmini-item {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  border: 1px solid #e4e4e7; border-radius: 10px; background: #fff; padding: .4rem .5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pp-accmini-item:hover { border-color: #a1a1aa; }
/* Angehakt sichtbar hervorheben; ohne :has()-Unterstuetzung entfaellt nur die Hervorhebung. */
.pp-accmini-item:has(input[type="checkbox"]:checked) { border-color: #4f9230; box-shadow: inset 0 0 0 1px #4f9230; background: #f7fbf4; }

.pp-accmini-pick { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; }
.pp-accmini-pick input[type="checkbox"] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: #4f9230; cursor: pointer; }
.pp-accmini-thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #fafafa; }
.pp-accmini-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pp-accmini-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pp-accmini-name { font-size: .8125rem; font-weight: 600; color: #18181b; }
.pp-accmini-rec {
  display: inline-block; vertical-align: 1px; background: #18181b; color: #fff; border-radius: 999px;
  padding: 0 .35rem; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.pp-accmini-price { font-size: .8125rem; font-weight: 700; color: #18181b; }
.pp-accmini-price del { font-weight: 400; opacity: .55; }
.pp-accmini-price ins { text-decoration: none; }

.pp-accmini-qty { flex: 0 0 auto; }
.pp-accmini-qty select {
  border: 1px solid #d4d4d8; border-radius: 8px; padding: .25rem .3rem;
  background: #fff; font-size: .8125rem; line-height: 1.2;
}
.pp-accmini-sum { margin: .7rem 0 0; font-size: .8125rem; font-weight: 600; color: #3f3f46; }
.pp-accmini-sum:empty { display: none; }

@media (max-width: 480px) {
  .pp-accmini-list { grid-template-columns: 1fr; }
}

/* ===================================================================
   Software-Auswahl als Box — bewusst dieselbe Anmutung wie
   „Zubehör mitbestellen" (.pp-accmini), damit die beiden Auswahlschritte
   als Einheit gelesen werden. Enthält den Umschalter für die
   Detail-Vorschau (#pp-software-vorschau).
   =================================================================== */
.pp-swbox {
  border: 1px solid #e4e4e7; border-radius: 12px; background: #fff;
  padding: .9rem 1rem; margin: 0 0 1rem;
}
.pp-swbox-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pp-swbox-title { font-weight: 700; color: #18181b; }
.pp-swbox-hint { margin: .35rem 0 .75rem; font-size: .85rem; color: #52525b; line-height: 1.45; }
/* Woos Variationstabelle sitzt in der Box — Rahmen/Abstände entschärfen. */
.pp-swbox table.variations { margin: 0; }
.pp-swbox table.variations th,
.pp-swbox table.variations td { padding: .25rem 0; border: 0; }

.pp-swbox-toggle-wrap { margin: .75rem 0 0; }
.pp-swbox-toggle {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid #d4d4d8; border-radius: 8px; background: #fafafa;
  padding: .45rem .8rem; font-size: .9rem; font-weight: 600; color: #18181b;
}
.pp-swbox-toggle:hover { background: #f4f4f5; border-color: #a1a1aa; }
.pp-swbox-toggle::after { content: "▾"; font-size: .8em; }
.pp-swbox-toggle[aria-expanded="true"]::after { content: "▴"; }

/* Vorschau erst einklappen, wenn JavaScript sie auch wieder aufklappen kann —
   ohne JS bleibt sie sichtbar, der Kunde verliert also nichts. */
.pp-swp--collapsible { display: none; }
.pp-swp--collapsible.pp-swp--open { display: block; }

/* Bild + Name der gewählten Software in der Auswahl-Box — Zeilenaufbau wie eine
   Zubehör-Zeile. Nur die aktive Variante ist sichtbar (Umschaltung per JS). */
.pp-swpick { margin: .75rem 0 0; }
.pp-swpick-item { display: none; align-items: center; gap: .75rem;
  border: 1px solid #e4e4e7; border-radius: 10px; background: #fafafa; padding: .6rem .7rem; }
.pp-swpick-item--on { display: flex; }
.pp-swpick-thumb { flex: 0 0 64px; }
.pp-swpick-thumb img { display: block; width: 64px; height: 64px; object-fit: contain;
  background: #fff; border-radius: 8px; }
.pp-swpick-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pp-swpick-name { font-weight: 700; color: #18181b; line-height: 1.25; }
.pp-swpick-sub { font-size: .82rem; color: #52525b; line-height: 1.4; }

/* Farbliche Trennung: Die Software-Beschreibung ist ein EIGENER Block und darf nicht
   mit der Beschreibung des Hauptartikels verschwimmen. Grüner Akzent = Software. */
#pp-software-vorschau.pp-swp {
  border: 1px solid #c4e79f; border-left: 5px solid #6cb33f; border-radius: 14px;
  background: #f7fbf3; padding: 1.5rem 1.5rem 2rem; margin: 2.5rem 0 0;
}
#pp-software-vorschau .pp-swp-title { margin-top: 0; }
/* Beschreibung des Hauptartikels neutral abgrenzen (grau statt grün). */
.woocommerce-Tabs-panel--description,
.woocommerce-product-details__short-description ~ #tab-description {
  border-left: 5px solid #e4e4e7; border-radius: 14px; padding-left: 1.25rem;
}
@media (max-width: 480px) {
  #pp-software-vorschau.pp-swp { padding: 1rem 1rem 1.5rem; }
  .pp-swpick-thumb, .pp-swpick-thumb img { flex-basis: 52px; width: 52px; height: 52px; }
}

/* Lightbox für die Software-Screenshots — Klick vergrößert, statt zum Produkt zu springen. */
.pp-swp-shot { cursor: zoom-in; }
.pp-lightbox {
  position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82); padding: 2rem; cursor: zoom-out;
}
.pp-lightbox img {
  max-width: min(96vw, 1600px); max-height: 92vh; width: auto; height: auto;
  border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.5); background: #fff; cursor: default;
}
.pp-lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem; z-index: 1;
  background: transparent; border: 0; color: #fff; font-size: 2.5rem; line-height: 1;
  cursor: pointer; padding: .25rem .5rem;
}
.pp-lightbox-close:hover { opacity: .75; }

/* Software-Screenshots auf Mobilgeräten als von links nach rechts WISCHBARE Reihe.
   Vorher stapelten sie untereinander — bei sieben Screenshots wurde die Seite dadurch
   sehr lang. Die ID-Auswahl ist bewusst spezifischer als die Grundregel weiter oben,
   damit sie deren Ein-Spalten-Layout überschreibt. */
@media (max-width: 768px) {
  #pp-software-vorschau .pp-swp-gallery {
    display: flex; grid-template-columns: none;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: .75rem; padding-bottom: .6rem; margin-bottom: 1rem;
    scrollbar-width: thin;
  }
  /* Etwas schmaler als die volle Breite: Der Rand des nächsten Bildes ist sichtbar
     und signalisiert, dass es weitergeht. */
  #pp-software-vorschau .pp-swp-gallery > .pp-swp-shot {
    flex: 0 0 84%; scroll-snap-align: center;
  }
  #pp-software-vorschau .pp-swp-gallery::-webkit-scrollbar { height: 6px; }
  #pp-software-vorschau .pp-swp-gallery::-webkit-scrollbar-thumb {
    background: #c4e79f; border-radius: 3px;
  }
  #pp-software-vorschau .pp-swp-gallery::-webkit-scrollbar-track { background: transparent; }
}

/* Eck-Emblem „Kartenzahlung — Coming soon" im Shop-Hero.
   Bewusst gleich wie auf der Webseite (dort die Komponente PaymentBadge.astro):
   Beide Auftritte sollen dasselbe Schild zeigen. Vorher ein breiter Banner-Kasten,
   der Bauhöhe kostete; als kleines gekipptes Schild fällt das Gelb genauso auf. */
.pp-hero { position: relative; }
.pp-paybadge { position: absolute; top: .75rem; right: .75rem; z-index: 30; pointer-events: none; }
.pp-paybadge-card {
  transform: rotate(3deg); background: #facc15; color: #18181b;
  border-radius: .75rem; padding: .5rem .75rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.22); outline: 1px solid rgba(202,138,4,.6);
}
.pp-paybadge-top { display: flex; align-items: center; gap: .5rem; }
.pp-paybadge-top svg { width: 20px; height: 20px; flex: none; }
.pp-paybadge-title { font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; line-height: 1; }
.pp-paybadge-bottom { display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin: .3rem 0 0; }
.pp-paybadge-sub { font-size: .68rem; font-weight: 600; color: #3f3f46; }
.pp-paybadge-soon { background: #18181b; color: #facc15; border-radius: .25rem;
  padding: .1rem .35rem; font-size: .58rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; }
@media (min-width: 640px) { .pp-paybadge { top: 1.25rem; right: 1.25rem; } }

/* ===================================================================
   Mobiles Menü. Vorher galt nur `@media (max-width:880px){.pp-nav{display:none}}` —
   die Navigation war auf dem Handy also ersatzlos weg und Branchen/Produkte/
   Preise/Service/Kontakt unerreichbar. Der Knopf klappt dieselbe Navigation als
   Panel auf; die Regel unten ist spezifischer und gewinnt gegen das display:none.
   =================================================================== */
.pp-navtoggle { display: none; }

@media (max-width: 880px) {
  .pp-navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;           /* bequeme Trefferfläche für den Daumen */
    margin-left: auto; margin-right: .5rem;
    background: transparent; border: 1px solid #d4d4d8; border-radius: .5rem; cursor: pointer;
  }
  .pp-navtoggle-bars { display: block; width: 20px; }
  .pp-navtoggle-bars span {
    display: block; height: 2px; background: #18181b; border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
  }
  .pp-navtoggle-bars span + span { margin-top: 4px; }
  /* Geöffnet: aus den drei Strichen wird ein X. */
  .pp-navtoggle[aria-expanded="true"] .pp-navtoggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .pp-navtoggle[aria-expanded="true"] .pp-navtoggle-bars span:nth-child(2) { opacity: 0; }
  .pp-navtoggle[aria-expanded="true"] .pp-navtoggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .pp-header-row { flex-wrap: wrap; }
  .pp-nav.is-open {
    display: block; flex-basis: 100%; order: 99;
    border-top: 1px solid #e4e4e7; margin-top: .6rem; padding: .5rem 0 .25rem;
  }
  .pp-nav.is-open ul.pp-menu { display: block; }
  .pp-nav.is-open .pp-menu > li { border-bottom: 1px solid #f4f4f5; }
  .pp-nav.is-open .pp-menu > li:last-child { border-bottom: 0; }
  .pp-nav.is-open .pp-menu a { display: block; padding: .7rem .25rem; }
  /* Untermenüs auf dem Handy immer ausklappen — Hover gibt es dort nicht. */
  .pp-nav.is-open .pp-dropdown {
    display: block; position: static; box-shadow: none; border: 0;
    margin: 0 0 .35rem .75rem; padding: 0; min-width: 0; background: transparent;
  }
  .pp-nav.is-open .pp-dropdown a { padding: .45rem .25rem; font-size: .85rem; color: #52525b !important; }
  .pp-nav.is-open .pp-caret { display: none; }
}

/* ===================================================================
   Mobiles Menü — Korrektur. Zwei Fehler der ersten Fassung:
   (a) Storefront gestaltet JEDES <button> mit der Themefarbe -> der Knopf war ein
       grüner Klotz statt drei Striche. Daher hier !important.
   (b) Das Panel hatte keinen Hintergrund -> der Hero schien hindurch und die
       Einträge lagen über dem Text. Jetzt deckendes Weiß mit Schatten.
   Aufbau bewusst wie auf der Webseite: Gruppen als graue Kleinschrift-Label,
   Einträge darunter, CTA-Knöpfe am Ende.
   =================================================================== */
@media (max-width: 880px) {
  .pp-header-row .pp-navtoggle,
  .pp-header-row .pp-navtoggle:hover,
  .pp-header-row .pp-navtoggle:focus {
    background: #fff !important; color: #18181b !important;
    border: 1px solid #d4d4d8 !important; border-radius: .5rem !important;
    padding: 0 !important; box-shadow: none !important; text-shadow: none !important;
    width: 44px !important; height: 44px !important; min-height: 0 !important;
  }
  .pp-header-row .pp-navtoggle .pp-navtoggle-bars span { background: #18181b !important; }

  /* Panel: deckend, volle Breite, unter der Kopfzeile im Fluss. */
  .pp-nav.is-open {
    background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.10);
    max-height: calc(100vh - 140px); overflow-y: auto;
    padding: .25rem 1rem .75rem; margin-top: .5rem;
  }
  .pp-nav.is-open .pp-menu > li { border-bottom: 1px solid #f4f4f5; }
  .pp-nav.is-open .pp-menu > li > a { font-weight: 600; color: #18181b !important; }

  /* Gruppen mit Untermenü: der Elterneintrag wird zur Rubrik-Überschrift
     (auf dem Handy fuehrt er ohnehin ins Leere, er war nur ein Hover-Ausloeser). */
  .pp-nav.is-open .pp-has-dropdown > a {
    pointer-events: none; font-size: .7rem !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .06em; color: #a1a1aa !important;
    padding-bottom: .15rem !important;
  }
  .pp-nav.is-open .pp-dropdown a { color: #3f3f46 !important; font-size: .95rem !important; }
}

/* ===================================================================
   Mobiles Menü — Fassung 3. Der eigentliche Fehler: `.pp-dropdown` traegt
   `opacity:0; visibility:hidden` (Zeile 301) und wird auf dem Desktop erst beim
   Hover eingeblendet. Im aufgeklappten Panel hatte ich zwar `position:static`
   gesetzt, diese beiden Eigenschaften aber nicht zurueckgenommen -- die
   Unterpunkte belegten Platz und blieben unsichtbar. Genau das waren die
   leeren Bloecke unter BRANCHEN und SERVICE.
   Dazu: engere Abstaende und ein Abschluss mit den zwei Wegen, die am Handy
   zaehlen -- Ware ansehen oder jemanden erreichen.
   =================================================================== */
.pp-navfoot { display: none; }

@media (max-width: 880px) {
  /* (1) Der Fehler: Untermenues im Panel dauerhaft sichtbar machen. */
  .pp-nav.is-open .pp-dropdown {
    opacity: 1 !important; visibility: visible !important;
    transform: none !important; transition: none !important;
  }

  /* (2) Enger. Vorher stand jeder Eintrag fuer sich, das Panel war ueberlang. */
  .pp-nav.is-open { padding: .25rem .9rem .9rem; }
  .pp-nav.is-open .pp-menu > li > a { padding: .6rem .1rem !important; }
  .pp-nav.is-open .pp-has-dropdown > a { padding: .7rem .1rem .1rem !important; }
  .pp-nav.is-open .pp-dropdown { padding: 0 0 .35rem !important; }
  .pp-nav.is-open .pp-dropdown a { padding: .45rem .1rem .45rem .9rem !important; }
  /* "Alle ... ansehen" im Untermenue braucht am Handy keinen Kopfzeilen-Rahmen. */
  .pp-nav.is-open .pp-dropdown-head { border-bottom: 0 !important; margin-bottom: 0 !important; }

  /* (3) Abschluss: zwei Knoepfe volle Breite + Fernwartungs-Streifen. */
  .pp-navfoot { display: block; margin-top: .9rem; }
  .pp-navcta {
    display: block; text-align: center; padding: .8rem 1rem; margin-bottom: .5rem;
    border: 1px solid #d4d4d8; border-radius: .6rem;
    font-size: .95rem !important; font-weight: 600 !important;
    color: #18181b !important; text-decoration: none;
  }
  .pp-navcta--primary {
    background: var(--pp-green-600, #4f9230); border-color: var(--pp-green-600, #4f9230);
    color: #fff !important;
  }
  .pp-navhelp {
    display: block; text-align: center; margin-top: .7rem; padding: .6rem;
    border-top: 1px solid #f4f4f5;
    font-size: .85rem !important; color: #52525b !important; text-decoration: none;
  }
  .pp-navhelp strong { color: #18181b; }
  .pp-navhelp-arrow { color: var(--pp-green-600, #4f9230); }
}

/* (4) "Menü" in Storefronts unterer Leiste. Storefront setzt die Symbole per
       ::before aus seiner Icon-Schrift -- fuer unseren Punkt gibt es dort keins,
       darum eigenes SVG und das Pseudoelement stilllegen. */
.storefront-handheld-footer-bar ul li.pp-menu > a::before { content: none !important; }
.storefront-handheld-footer-bar ul li.pp-menu > a {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: .4rem 0 !important; line-height: 1.1; text-indent: 0 !important;
}
.storefront-handheld-footer-bar ul li.pp-menu > a svg { width: 22px; height: 22px; }
.storefront-handheld-footer-bar ul li.pp-menu > a span { font-size: .62rem; font-weight: 600; }

/* Unter 768 px uebernimmt die untere Leiste -- dann waeren zwei Menue-Knoepfe
   gleichzeitig sichtbar. Oben bleibt er nur fuer 768-880 px, wo Storefront die
   Leiste ausblendet. So gibt es in jeder Breite genau einen Weg ins Menue. */
@media (max-width: 767px) { .pp-navtoggle { display: none !important; } }

/* ===================================================================
   Mobiles Menü — öffnet jetzt von UNTEN. Der Ausloeser sitzt in der unteren
   Leiste; ein Panel, das oben aufgeht, laesst den Daumen quer ueber den
   Bildschirm wandern und war ausserhalb des Sichtfelds, solange man nicht
   ganz oben stand. Als Blatt von unten entfaellt beides.
   768-880 px behaelt das Panel unter der Kopfzeile: dort blendet Storefront
   die untere Leiste aus, der Ausloeser ist also wieder der Knopf oben.
   =================================================================== */
@media (max-width: 767px) {
  .pp-nav.is-open {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 9998;                      /* Storefronts Leiste liegt auf 9999 und bleibt sichtbar */
    max-height: 78vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    margin: 0; border-radius: 1.1rem 1.1rem 0 0;
    box-shadow: 0 -12px 32px rgba(0,0,0,.22);
    padding: .5rem 1rem 4.8rem;         /* unten Platz, damit die Leiste nichts verdeckt */
    animation: pp-sheet-up .22s ease-out;
  }
  /* Griff oben — zeigt, dass das Blatt zum Bildschirmrand gehoert. */
  .pp-nav.is-open::before {
    content: ""; display: block; width: 38px; height: 4px; margin: .1rem auto .5rem;
    border-radius: 999px; background: #d4d4d8;
  }
  /* Abdunkeln dahinter; der Inhalt bleibt erkennbar, das Blatt steht klar davor. */
  body.pp-navopen::after {
    content: ""; position: fixed; inset: 0; z-index: 9997; background: rgba(24,24,27,.45);
  }
  body.pp-navopen { overflow: hidden; }  /* Hintergrund scrollt nicht mit */
}
@keyframes pp-sheet-up { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ===================================================================
   Hero /kassensysteme/ — echtes Produktfoto statt Illustration.
   Es steht in der rechten Spalte bzw. am Handy unter dem Text, nicht als
   Hintergrund: Der Aufnahmehintergrund ist hell, Text darauf waere je nach
   Ausschnitt mal lesbar und mal nicht. So bleibt die Schrift immer sicher.
   =================================================================== */
.pp-hero-visual picture { display: block; }
.pp-hero-visual img {
  display: block; width: 100%; height: auto; border-radius: 1rem;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.65);
}
/* Foto auch auf schmalen Screens zeigen (die Regel oben blendet .pp-hero-visual
   unter 1024 px aus -- das galt der alten Illustration, die klein nichts hergab). */
.pp-ksp-herobox .pp-hero-visual { display: block; }
@media (max-width: 1023px) {
  /* Text zuerst, Bild darunter: die Botschaft steht ueber dem Bild. */
  .pp-ksp-herobox .pp-hero-inner { padding: 3rem 1rem 3.5rem; gap: 2rem; }
  .pp-ksp-herobox .pp-hero-visual img { border-radius: .85rem; }
}
@media (max-width: 640px) {
  .pp-ksp-herobox .pp-hero-inner { padding: 2.25rem 1rem 2.75rem; }
  .pp-ksp-herobox .pp-hero-badges { margin-top: 1.8rem; }
}

/* -------------------------------------------------------------------
   Warum das Blatt nicht am Bildschirmrand sass: Die Kopfzeile traegt
   backdrop-filter: blur(8px) (Zeile 263). Ein Weichzeichner macht das Element
   zum Bezugsrahmen fuer position:fixed -- das Menue klebte also unten an der
   KOPFZEILE statt am Fenster und lag weit ausserhalb des Bilds.
   Am Handy ist der Weichzeichner ohnehin ohne Wirkung: Der Hintergrund ist
   weiss/90, praktisch deckend. Also dort abschalten und deckend setzen.
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background-color: #fff !important;
  }
}

/* Hero /kassensysteme/ am Handy randlos statt als schmale Box.
   Die gerahmte Fassung (Zeile 1022) laesst auf 375 px nur ~266 px fuer das Foto
   -- die Geraete werden dann zu klein, um etwas zu erkennen. */
@media (max-width: 640px) {
  .pp-ksp-herobox {
    width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; margin-bottom: 2rem;
  }
}

/* Im Vollbild bekam das Foto nur 488 px, weil die Spalten starr 50:50 stehen und
   die Box bei 1120 px endet. Der Text braucht keine 550 px Breite -- lange Zeilen
   lesen sich schlechter --, das Foto dagegen lebt von der Groesse. */
@media (min-width: 1024px) {
  .pp-ksp-herobox .pp-hero-inner { max-width: 1240px; grid-template-columns: 1fr 1.25fr; }
}

/* ===================================================================
   Startseiten-Hero mit Panorama-Foto (wie posprom.com).
   Kernpunkt ist die Hoehensperre: Das Bild hat 2,45:1. Ohne sie schneidet
   object-cover auf breiten Schirmen oben und unten ab -- und abgeschnitten
   werden zuerst die Kassen, also genau das, was verkauft werden soll.
   min-height ~41vw entspricht der Bildproportion, max-height deckelt das
   auf sehr grossen Schirmen.
   =================================================================== */
.pp-hero-photo { background: #0b0b0c; }          /* Bildhintergrund -> kein Farbsprung beim Laden */
.pp-hero-photo .pp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.pp-hero-photo .pp-hero-bg picture { display: block; height: 100%; }
.pp-hero-photo .pp-hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* Rechts liegen die Geraete, links die leere dunkle Flaeche fuer den Text.
     Beim Beschneiden schmaler Schirme darf nicht die Geraeteseite wegfallen. */
  object-position: 72% center;
}
.pp-hero-photo .pp-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(11,11,12,.82) 0%, rgba(11,11,12,.45) 38%, rgba(11,11,12,0) 62%);
}
.pp-hero-photo .pp-hero-inner {
  position: relative; z-index: 10; display: block;      /* kein zweispaltiges Raster mehr */
  max-width: 1200px; padding: 5rem 1.5rem 5.5rem;
}
.pp-hero-photo .pp-hero-copy { max-width: 42rem; }
@media (min-width: 1024px) {
  .pp-hero-photo { display: flex; align-items: center; min-height: 41vw; max-height: 880px; }
  .pp-hero-photo .pp-hero-inner { width: 100%; padding-top: 3rem; padding-bottom: 3rem; }
}
/* Schmale Schirme: gleichmaessig abdunkeln, der Text liegt dort ueber der Bildmitte.
   Zusaetzlich weiter nach rechts schauen, damit die Geraete im Bild bleiben. */
@media (max-width: 640px) {
  .pp-hero-photo .pp-hero-bg img { object-position: 78% center; }
  .pp-hero-photo .pp-hero-scrim { background: rgba(11,11,12,.62); }
  .pp-hero-photo .pp-hero-inner { padding: 3.25rem 1.25rem 3.5rem; }
  .pp-hero-photo .pp-hero-badges { margin-top: 2rem; }
}

/* Handy: Das Panorama hat 2,45:1, der Hero dort aber etwa 0,6:1. Vollflaechig
   beschnitten blieben nur 55 % der Geraete uebrig -- der linke Bildschirm und das
   orange Terminal fielen weg. Deshalb sitzt das Foto hier als eigenes Band unten
   im Hero statt hinter dem Text: flacheres Band = breiterer Bildausschnitt.
   Weil der Bildhintergrund dieselbe Farbe hat wie der Hero (#0b0b0c), entsteht
   trotzdem keine sichtbare Kante -- das Band geht nahtlos in die Flaeche ueber. */
@media (max-width: 640px) {
  .pp-hero-photo .pp-hero-bg { top: auto; height: clamp(210px, 62vw, 280px); }
  .pp-hero-photo .pp-hero-bg picture { height: 100%; }
  .pp-hero-photo .pp-hero-bg img {
    /* rechtsbuendig: dort stehen die Geraete, links ist die Flaeche ohnehin leer */
    object-position: 100% center;
  }
  .pp-hero-photo .pp-hero-scrim { display: none; }   /* Text steht ueber dem Band, nicht darauf */
  .pp-hero-photo .pp-hero-inner { padding-bottom: clamp(225px, 64vw, 295px); }
}

/* Feinschliff Handy: Der Text endete bei 699 px, das Bildband begann erst danach --
   auf einem 812-px-Schirm blieb davon nur ein Drittel im Bild. Engere Abstaende und
   ein flacheres Band ruecken es nach oben; der Ausschnitt bleibt dabei vollstaendig,
   weil ein flacheres Band sogar MEHR Bildbreite zeigt (rechtsbuendig beschnitten). */
@media (max-width: 640px) {
  .pp-hero-photo .pp-hero-inner { padding-top: 2.25rem; }
  .pp-hero-photo .pp-hero-title { font-size: clamp(2rem, 8.5vw, 2.5rem) !important; }
  .pp-hero-photo .pp-hero-sub { font-size: 1rem !important; margin-top: 1rem; }
  .pp-hero-photo .pp-hero-actions { margin-top: 1.6rem; }
  .pp-hero-photo .pp-hero-badges { margin-top: 1.5rem; gap: .4rem .8rem; }
  .pp-hero-photo .pp-hero-bg { height: clamp(185px, 52vw, 240px); }
  .pp-hero-photo .pp-hero-inner { padding-bottom: clamp(200px, 55vw, 255px); }
}

/* ===================================================================
   Zwei Fehler am Blatt, beide per elementFromPoint nachgewiesen:

   (1) Nicht anklickbar und grau ueberzogen. Die Kopfzeile hat z-index: 100 und
       bildet damit einen eigenen Stapelkontext -- die 9998 des Menues gelten nur
       INNERHALB der Kopfzeile. Der Abdunkler (body::after, 9997) liegt im
       Wurzelkontext und damit ueber der ganzen Kopfzeile samt Menue. Getroffen
       wurde deshalb der body, nicht der Link.
       Abhilfe: Kopfzeile solange anheben, wie das Menue offen ist. Zusaetzlich
       nimmt der Abdunkler keine Klicks mehr an -- geschlossen wird ohnehin ueber
       den Klick-Zuhoerer am Dokument.

   (2) Die CTA-Knoepfe waren 16 px hoch. `.pp-nav a` (Zeile 231) setzt padding: 0
       und ist spezifischer als `.pp-navcta`.
   =================================================================== */
@media (max-width: 767px) {
  body.pp-navopen .site-header { z-index: 9998 !important; }
  body.pp-navopen::after { pointer-events: none; }

  .pp-nav.is-open .pp-navcta {
    padding: .8rem 1rem !important; line-height: 1.2 !important;
    font-size: .95rem !important; font-weight: 600 !important;
  }
  .pp-nav.is-open .pp-navcta--primary { color: #fff !important; }
  .pp-nav.is-open .pp-navhelp { padding: .7rem .5rem !important; line-height: 1.3 !important; }
}

/* Das Blatt endet jetzt oberhalb der Leiste statt dahinter.
   Vorher reichte es bis zum Fensterrand und hielt nur mit einem Polster unten
   Abstand -- das half aber erst, wenn man INNERHALB des Blattes ganz nach unten
   scrollte. Bis dahin lagen die beiden CTA-Knoepfe im Bereich der Leiste und
   waren nicht antippbar. --pp-hfbar wird per JS aus der echten Leistenhoehe
   gesetzt (s. functions.php). */
@media (max-width: 767px) {
  .pp-nav.is-open {
    bottom: var(--pp-hfbar, 4.4rem) !important;
    padding-bottom: 1rem !important;
    max-height: calc(92vh - var(--pp-hfbar, 4.4rem)) !important;
    border-radius: 1.1rem 1.1rem 0 0;
  }
}

/* Letzte 23 px: Der Inhalt war knapp hoeher als das Blatt, die Fernwartungs-Zeile
   fiel unter die Kante. Lieber ein paar Millimeter enger als ein Menue, in dem
   man scrollen muss, um den letzten Punkt zu sehen. */
@media (max-width: 767px) {
  .pp-nav.is-open .pp-menu > li > a { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  .pp-nav.is-open .pp-dropdown a { padding-top: .38rem !important; padding-bottom: .38rem !important; }
  .pp-navfoot { margin-top: .6rem !important; }
  .pp-nav.is-open .pp-navcta { margin-bottom: .4rem !important; }
  .pp-nav.is-open .pp-navhelp { margin-top: .45rem !important; }
}

/* Korrektur der Straffung oben: Damit alles ohne Scrollen passte, waren die
   Antippflaechen auf 27 px geschrumpft -- empfohlen sind 44 px, darunter trifft
   man mit dem Finger den Nachbarpunkt. Ein Menue, in dem man danebentippt, ist
   schlimmer als eines, in dem man ein Stueck scrollt. Also zurueck auf brauchbare
   Hoehen; `.pp-nav a` setzt line-height: 1, deshalb hier ausdruecklich mehr. */
@media (max-width: 767px) {
  .pp-nav.is-open .pp-menu a { line-height: 1.35 !important; }
  .pp-nav.is-open .pp-menu > li > a { padding-top: .62rem !important; padding-bottom: .62rem !important; }
  .pp-nav.is-open .pp-dropdown a { padding-top: .55rem !important; padding-bottom: .55rem !important; }
}

/* Handy-Hero, zweiter Anlauf. Der erste zeigte das ganze Panorama als flaches Band --
   die Geraete wurden dadurch winzig und links blieb tote schwarze Flaeche. Jetzt
   laeuft ein eigener Zuschnitt (920x540, nur die Geraetegruppe) ueber die volle
   Breite: aspect-ratio statt fester Hoehe, damit nichts mehr beschnitten wird.
   Oben ein kurzer Verlauf in die Hero-Farbe, damit der gruene Lichtschein nicht
   mit einer geraden Kante beginnt. */
@media (max-width: 640px) {
  .pp-hero-photo .pp-hero-bg {
    inset: auto 0 0 0; height: auto; aspect-ratio: 920 / 540;
  }
  .pp-hero-photo .pp-hero-bg picture { height: 100%; }
  .pp-hero-photo .pp-hero-bg img { height: 100%; object-fit: cover; object-position: center; }
  .pp-hero-photo .pp-hero-bg::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 56px; z-index: 1;
    background: linear-gradient(to bottom, #0b0b0c 0%, rgba(11,11,12,0) 100%);
  }
  .pp-hero-photo .pp-hero-inner { padding-bottom: calc(100vw / 1.704 + .75rem); }
}

/* Handy: Das Emblem war 183 px breit -- die halbe Bildschirmbreite -- und lag
   ueber der Zeile "TSE 2026 · KassenSichV-konform". Deshalb hier kompakter und
   der Textblock beginnt darunter statt daneben. Auffallen soll es weiter, nur
   nicht auf Kosten der Lesbarkeit. */
@media (max-width: 640px) {
  .pp-paybadge { top: .5rem; right: .5rem; }
  .pp-paybadge-card { padding: .5rem .7rem; gap: .15rem; }
  .pp-paybadge-top svg { width: 15px; height: 15px; }
  .pp-paybadge-title { font-size: .64rem; letter-spacing: .02em; }
  .pp-paybadge-bottom { gap: .35rem; margin-top: .2rem; }
  .pp-paybadge-sub { font-size: .58rem; }
  .pp-paybadge-soon { font-size: .5rem; padding: .08rem .3rem; }

  /* Platz fuer das Emblem ueber der Kopfzeile; dafuer sitzen Titel und Text
     etwas enger, damit der Hero nicht in die Hoehe waechst. */
  .pp-hero-photo .pp-hero-inner { padding-top: 3.7rem; }
  .pp-hero-photo .pp-hero-title { margin-top: .9rem !important; }
  .pp-hero-photo .pp-hero-sub { margin-top: .85rem; }
  .pp-hero-photo .pp-hero-actions { margin-top: 1.35rem; }
  .pp-hero-photo .pp-hero-badges { margin-top: 1.25rem; }
}

/* Nachtrag Handy-Hero: Zuschnitt jetzt 920x480 (1,92:1 statt 1,70) -- oben und
   unten war ohnehin Leerraum, das Band wird dadurch 25 px flacher. Zusammen mit
   etwas engeren Textabstaenden passt der Hero damit ganz auf den Bildschirm.
   Ausserdem 12 statt 2 px Luft zwischen Emblem und der Zeile darunter. */
@media (max-width: 640px) {
  .pp-hero-photo .pp-hero-bg { aspect-ratio: 920 / 480; }
  .pp-hero-photo .pp-hero-inner {
    padding-top: 4.05rem;
    padding-bottom: calc(100vw / 1.917 + .5rem);
  }
  .pp-hero-photo .pp-hero-title { font-size: clamp(1.9rem, 8vw, 2.4rem) !important; margin-top: .8rem !important; }
  .pp-hero-photo .pp-hero-actions { margin-top: 1.15rem; }
  .pp-hero-photo .pp-hero-badges { margin-top: 1.05rem; gap: .35rem .75rem; }
}

/* ===================================================================
   Hero /kassensysteme/ — helle Bildfassung (v4).
   Das Foto hat links eine leere Wand-/Bodenflaeche, die als Textzone gedacht
   ist. Es liegt deshalb als Hintergrund unter dem Text statt als Spalte daneben.
   Folge: Die Schrift muss dunkel werden. Die alten Regeln (Zeile 1026 ff.) setzen
   Weiss mit !important -- darum hier durchgaengig gleiche Spezifitaet + !important.
   Flaechenfarbe #ccc5c1 ist aus der Textzone des Bildes gemessen, damit die
   Kachel beim Laden und beim Beschneiden nahtlos wirkt.
   =================================================================== */
.pp-ksp-hell { background: #ccc5c1 !important; position: relative; overflow: hidden; }
.pp-ksp-hell .pp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.pp-ksp-hell .pp-hero-bg picture { display: block; height: 100%; }
.pp-ksp-hell .pp-hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* Beim Beschneiden schmaler Fenster darf nicht die Geraeteseite wegfallen. */
  object-position: 100% center;
}
/* Aufhellung links: sichert den Textkontrast, falls der Ausschnitt wandert.
   Gleiche Farbe wie die Flaeche -> keine sichtbare Kante. */
.pp-ksp-hell .pp-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(226,222,218,.94) 0%, rgba(226,222,218,.72) 34%, rgba(226,222,218,0) 62%);
}
.pp-ksp-hell .pp-hero-inner {
  position: relative; z-index: 10; display: block;      /* kein zweispaltiges Raster */
  max-width: 1240px;
}
/* 34rem waren zu breit: Die laengsten Zeilen liefen 88 px ueber den linken
   Bildschirm. Verschieben half nicht -- bei dieser Bildbreite wird waagerecht
   gar nicht beschnitten, die Geraete stehen fest bei 42 % der Bildbreite. */
/* Keine Ausnahme fuer breite Fenster: Die Kachel bleibt bei 1200 px stehen, die
   Geraete stehen also immer an derselben Stelle -- eine breitere Textspalte lief
   dort erneut ins Bild. */
.pp-ksp-hell .pp-hero-copy { max-width: 27rem; }

/* Schrift auf hellem Grund */
.pp-ksp-hell .pp-hero-title { color: #18181b !important; }
.pp-ksp-hell .pp-hero-title span { color: #35631f !important; }   /* dunkleres Gruen -- #82c648 verschwindet auf Hell, #3d7126 lag bei nur 3,4:1 */
.pp-ksp-hell .pp-hero-sub { color: #3f3f46 !important; }
.pp-ksp-hell .pp-hero-sub strong { color: #18181b !important; }
.pp-ksp-hell .pp-hero-eyebrow {
  background: rgba(24,24,27,.07) !important; color: #3f3f46 !important;
  box-shadow: inset 0 0 0 1px rgba(24,24,27,.12) !important;
}
.pp-ksp-hell .pp-hero-badges li { color: #3f3f46 !important; border-left-color: rgba(24,24,27,.18) !important; }
.pp-ksp-hell .pp-hero-badges svg { color: #3d7126 !important; }
.pp-ksp-hell .pp-hero-btn-light {
  background: #18181b !important; color: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,.25) !important;
}
.pp-ksp-hell .pp-hero-btn-light:hover { background: #3f3f46 !important; }
.pp-ksp-hell .pp-hero-btn-ghost {
  border-color: rgba(24,24,27,.35) !important; color: #18181b !important;
}
.pp-ksp-hell .pp-hero-btn-ghost:hover { background: rgba(24,24,27,.06) !important; }

/* Handy: Text auf heller Flaeche, Foto als Band darunter -- gleiche Loesung wie
   auf der Startseite. Vollflaechig beschnitten blieben von den Geraeten zu wenig
   uebrig, dafuer gibt es den eigenen Zuschnitt (920x489). */
@media (max-width: 1139px) {
  .pp-ksp-hell .pp-hero-bg { inset: auto 0 0 0; height: auto; aspect-ratio: 920 / 489; }
  .pp-ksp-hell .pp-hero-bg img { object-position: center; }
  .pp-ksp-hell .pp-hero-bg::after { display: none; }
  .pp-ksp-hell .pp-hero-inner { padding-bottom: calc(100vw / 1.881 + .5rem); }
  .pp-ksp-hell .pp-hero-copy { max-width: none; }
}

/* Die Textspalte schmaler zu machen war ein Trugschluss: Der Titel bricht dann auf
   vier Zeilen, die Kachel wird hoeher als das Bildverhaeltnis -- und weil
   object-fit: cover dann nach der Hoehe skaliert, wird das Bild SEITLICH
   beschnitten und die Geraete rutschen genau dorthin, wo der Text steht.
   Richtige Reihenfolge: erst die Kachel auf das Bildverhaeltnis sperren (dann
   wird waagerecht gar nicht beschnitten und die Geraete stehen fest bei 42 %),
   danach die Schrift so waehlen, dass sie in diese Hoehe passt. */
@media (min-width: 1140px) {
  .pp-ksp-hell { aspect-ratio: 1200 / 646; display: flex; align-items: center; }
  .pp-ksp-hell .pp-hero-inner { width: 100%; padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .pp-ksp-hell .pp-hero-title {
    font-size: clamp(1.85rem, 3.1vw, 2.6rem) !important; line-height: 1.12 !important; margin-top: 1rem !important;
  }
  .pp-ksp-hell .pp-hero-sub { font-size: 1rem !important; margin-top: .9rem; }
  .pp-ksp-hell .pp-hero-actions { margin-top: 1.4rem; }
  .pp-ksp-hell .pp-hero-badges { margin-top: 1.5rem; }
}

/* Feste 27rem passen nur bei einer Kachelbreite. Die Geraete beginnen im Bild
   IMMER bei 42 % der Breite -- also muss die Textzone ein Anteil sein, kein
   fester Wert: 60 % rechts frei lassen, dann endet der Text stets vor den
   Geraeten, egal wie breit die Kachel gerade ist. */
@media (min-width: 1140px) {
  .pp-ksp-hell .pp-hero-inner { padding-right: 60%; }
  .pp-ksp-hell .pp-hero-copy { max-width: 30rem; }
}

/* Handy: Das Eck-Emblem lag 21 px ueber der Zeile "Komplettsysteme · TSE 2026".
   Gleiche Loesung wie auf der Startseite -- der Textblock beginnt unterhalb des
   Schildes statt daneben. */
@media (max-width: 640px) {
  .pp-ksp-hell .pp-hero-inner { padding-top: 4.35rem; }
}

/* Dritte Kachel (Kassensysteme): ab 1100 px drei nebeneinander. Bei zwei Spalten
   stuende die dritte allein in einer zweiten Reihe. Zwischen 768 und 1099 px
   bleibt es bei zwei Spalten -- drei waeren dort schmaler als das Bild hoch ist. */
@media (min-width: 1100px) { .pp-branchen-grid { grid-template-columns: repeat(3, 1fr); } }

/* Allgemeiner Hinweis in der Kassensysteme-Kachel — steht anstelle der
   Produktzeilen. Gleiche Kastenoptik wie diese, damit alle drei Kacheln denselben
   Rhythmus behalten; flex: 1 haelt den Knopf auf einer Linie mit den Nachbarn. */
.pp-branche-hint {
  display: flex; align-items: center; justify-content: center; flex: 1 1 auto;
  margin: 0 0 1rem; padding: 1.1rem 1rem; min-height: 96px;
  border: 1px solid #e4e4e7; border-radius: 12px; background: #fafafa;
  font-size: 1.05rem; font-weight: 600; color: #3f3f46; text-align: center;
}

/* Knopf in allen Kacheln auf einer Linie. Die Kachel ist bereits eine Flex-Spalte,
   der Koerper darin aber nicht gestreckt -- die dritte Kachel hat weniger Inhalt,
   ihr Knopf sass 30 px hoeher als die der Nachbarn. */
.pp-branche-body { flex: 1 1 auto; }
.pp-branche-btn { margin-top: auto; }

/* ===================================================================
   Gruener Abschlussbereich (/kassensysteme/). Drei Ursachen fuer den
   billigen Eindruck, alle im Browser nachgemessen:

   (1) Beide Knoepfe waren UNTERSTRICHEN -- Storefront unterstreicht jeden Link.
       Ein Knopf mit unterstrichener Schrift liest sich wie ein Textlink in einem
       Kasten. Das war der auffaelligste Punkt.
   (2) Die Knopfreihe stand linksbuendig (justify-content: flex-start aus der
       Hero-Variante), waehrend Ueberschrift und Text mittig sitzen.
   (3) Flaeche komplett flach: eine Volltonfarbe, keine Tiefe, kein Schatten an
       den Knoepfen.
   =================================================================== */

/* (1) gilt fuer alle Knoepfe dieser Seite, nicht nur im gruenen Bereich --
   im Hero waren "Systeme ansehen" und "Beratung anfragen" ebenso unterstrichen. */
.pp-ksp-btn, .pp-hero-btn-light, .pp-hero-btn-ghost, .pp-branche-btn {
  text-decoration: none !important;
}

.pp-ksp-cta {
  /* (3) Der erste Anlauf war nur ein Verlauf -- immer noch flach. Jetzt drei
     Ebenen: zwei weiche Lichtinseln diagonal versetzt (oben links hell, unten
     rechts im helleren Markengruen) ueber einem tiefen Grundverlauf. Das gibt
     der Flaeche Raum, ohne ein Bild zu laden oder bunt zu werden. */
  position: relative; isolation: isolate;
  background:
    radial-gradient(75% 120% at 12% 0%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(60% 110% at 92% 105%, rgba(130,198,72,.34) 0%, rgba(130,198,72,0) 62%),
    linear-gradient(150deg, #57a034 0%, #4a8b2d 45%, #2f5a1e 100%) !important;
  box-shadow: 0 26px 55px -30px rgba(24,24,27,.6),
              inset 0 1px 0 rgba(255,255,255,.28),
              inset 0 0 0 1px rgba(255,255,255,.12);
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.25rem, 4vw, 2.5rem);
}
/* Feines Punktraster darueber, zu den Raendern hin ausgeblendet -- aus der Naehe
   eine Struktur, aus normalem Abstand nur eine leichte Textur. z-index: -1 legt
   es ueber die Flaeche, aber unter Ueberschrift und Knoepfe. */
.pp-ksp-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(80% 80% at 50% 45%, #000 35%, transparent 100%);
}
.pp-ksp-cta h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); letter-spacing: -.02em; margin: 0; }
.pp-ksp-cta p {
  max-width: 34rem; margin: .85rem auto 1.9rem;   /* kurze Zeilen lesen sich besser */
  color: rgba(255,255,255,.9);
}

/* (2) Knoepfe mittig unter dem Text. */
.pp-ksp-cta .pp-ksp-hero-cta { justify-content: center; gap: .9rem; }

.pp-ksp-cta .pp-ksp-btn { padding: .9rem 1.8rem; border-radius: 12px; }
.pp-ksp-cta .pp-ksp-btn-primary {
  box-shadow: 0 10px 20px -8px rgba(24,24,27,.45);
  transition: transform .12s ease, box-shadow .12s ease, background .15s;
}
.pp-ksp-cta .pp-ksp-btn-primary:hover {
  transform: translateY(-1px); box-shadow: 0 14px 26px -8px rgba(24,24,27,.5);
}
.pp-ksp-cta .pp-ksp-btn-ghost-dark { border-width: 1.5px; }

/* Am Handy nebeneinander zu eng -- dann volle Breite untereinander. */
@media (max-width: 560px) {
  .pp-ksp-cta .pp-ksp-hero-cta { flex-direction: column; }
  .pp-ksp-cta .pp-ksp-btn { width: 100%; }
}

/* ===================================================================
   Produktseite am Handy: Kaufen zuerst, Lesen danach (Muster wie bei eBay).
   Bisher stand zwischen Preis und Warenkorb-Knopf die halbe Beschreibung --
   Kurztext, Haken-Liste, B2B-Kasten, Demo-Kasten. Wer kaufen wollte, musste
   daran vorbeiscrollen.
   Neue Reihenfolge: Titel, Preis (mit den Pflichtangaben), Auswahl + Menge +
   Knopf, danach erst Kurzbeschreibung und Hinweiskaesten.

   WICHTIG: "inkl. MwSt., zzgl. Versand" und der Grundpreis-Hinweis bleiben
   direkt beim Preis. Das ist keine Geschmacksfrage, sondern die
   Preisangabenverordnung -- sie muessen in unmittelbarer Naehe stehen.
   =================================================================== */
@media (max-width: 768px) {
  .single-product div.product .summary { display: flex; flex-direction: column; }

  /* Standardplatz fuer alles, was hier nicht ausdruecklich genannt ist:
     lieber hinter dem Knopf als unbeabsichtigt davor. */
  .single-product div.product .summary > * { order: 50; }

  .single-product div.product .summary > .product_title            { order: 10; }
  .single-product div.product .summary > .price                    { order: 20; }
  .single-product div.product .summary > .legal-price-info,
  .single-product div.product .summary > .wc-gzd-additional-info   { order: 25; }

  /* Auswahl (Software/Zubehoer), Menge und "In den Warenkorb" stecken alle im Formular. */
  .single-product div.product .summary > form.cart,
  .single-product div.product .summary > .pp-anfrage,
  .single-product div.product .summary > .stock                    { order: 30; }

  .single-product div.product .summary > .woocommerce-product-details__short-description { order: 40; }
  .single-product div.product .summary > .pp-b2b-note,
  .single-product div.product .summary > .pp-demo-note             { order: 45; }
  .single-product div.product .summary > .ppcp-messages            { order: 60; }
  .single-product div.product .summary > .product_meta             { order: 70; }

  /* Etwas Luft ueber der Kurzbeschreibung, damit sie sich vom Kaufbereich absetzt. */
  .single-product div.product .summary > .woocommerce-product-details__short-description {
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #e4e4e7;
  }
}

/* ===================================================================
   Miniaturen der Produktgalerie am Handy: eine wischbare Reihe statt Raster.
   Bei zwoelf Bildern und vier Spalten waren das drei Reihen -- der halbe
   Bildschirm ging fuer Vorschaubilder drauf, bevor der Preis kam.
   Das grosse Bild laesst sich ohnehin schon wischen (Slider), die Reihe hier
   ist die Uebersicht dazu.
   =================================================================== */
@media (max-width: 768px) {
  .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: .5rem; margin: .75rem 0 0 !important; padding: 0 0 .4rem !important;
    list-style: none;
  }
  /* Storefront setzt hier float + Breite in Prozent — beides muss weg, sonst
     bricht die Reihe weiterhin um. */
  .woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 23%;              /* gut vier je Bildschirm; der Rand des naechsten
                                   bleibt sichtbar und zeigt, dass es weitergeht */
    width: auto !important; margin: 0 !important; float: none !important;
    scroll-snap-align: start;
  }
  .woocommerce-product-gallery .flex-control-thumbs img {
    width: 100%; height: auto; display: block; border-radius: 8px;
    opacity: 1; border: 1px solid #e4e4e7;
  }
  /* Das gerade gezeigte Bild hervorheben — sonst weiss man in einer langen
     Reihe nicht, wo man steht. */
  .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
    border-color: var(--pp-green-600, #4f9230);
    box-shadow: 0 0 0 1px var(--pp-green-600, #4f9230);
  }
  /* Schmale, unaufdringliche Bildlaufleiste. */
  .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { height: 4px; }
  .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb {
    background: #d4d4d8; border-radius: 999px;
  }
}

/* ===================================================================
   Produktseite am Handy, zweiter Durchgang: kompakter und wirklich klappbar.
   =================================================================== */
@media (max-width: 768px) {
  /* (1) Titel kleiner. Vorher lief er ueber drei Zeilen und schob Preis und
     Kaufbereich weit nach unten. */
  .single-product div.product .summary > .product_title {
    font-size: clamp(1.25rem, 5.4vw, 1.6rem) !important;
    line-height: 1.25 !important; margin: 0 0 .35rem !important;
  }
  .single-product div.product .summary > .price { font-size: 1.5rem !important; }

  /* (2) PayPal-Ratenhinweis direkt unter die Preisangaben (vorher weit unten,
     hinter Beschreibung und Hinweiskaesten). */
  .single-product div.product .summary > .ppcp-messages { order: 27; margin: .25rem 0 0; }

  /* (3) Eigene Ausklapper (Kurzinfo, Beschreibung). Die WooCommerce-Reiter
     konnten das nicht: Reiter wechseln nur, sie klappen nicht ein. */
  .pp-mobbox { border: 1px solid #e4e4e7; border-radius: 10px; margin: .9rem 0 0; background: #fff; }
  .pp-mobbox-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    width: 100%; padding: .85rem 1rem !important; margin: 0 !important;
    background: #fafafa !important; border: 0 !important; border-radius: 10px !important;
    font-size: .95rem !important; font-weight: 600 !important; color: #18181b !important;
    text-align: left; text-decoration: none !important; box-shadow: none !important;
    min-height: 0 !important; cursor: pointer;
  }
  .pp-mobbox-head:hover { background: #f4f4f5 !important; color: #18181b !important; }
  /* Pfeil dreht sich beim Oeffnen — ohne das ist nicht erkennbar, ob offen oder zu. */
  .pp-mobbox-pfeil {
    width: 10px; height: 10px; flex: none; border-right: 2px solid #71717a;
    border-bottom: 2px solid #71717a; transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
  }
  .pp-mobbox.is-open .pp-mobbox-pfeil { transform: rotate(-135deg) translate(-2px, -2px); }
  .pp-mobbox-body { display: none; padding: 0 1rem 1rem; }
  .pp-mobbox.is-open .pp-mobbox-body { display: block; }
  /* Die Kurzinfo steht im Kaufbereich — dort etwas enger. */
  .summary .pp-mobbox { margin-top: 1.1rem; }
  .summary .pp-mobbox-body > * { margin-top: .75rem; }

  /* (4) Produktdaten stehen jetzt VOR der Beschreibung und immer offen. */
  .pp-produktdaten {
    margin: 1.25rem 0 0 !important; padding: 1rem;
    border: 1px solid #e4e4e7; border-radius: 10px; background: #fff;
  }
  /* Der Block bringt eigene Inline-Stile mit; nur die Breite muss mitgehen. */
  .pp-produktdaten > div { max-width: 100%; }

  /* Reiterleiste ist auf dem Handy verborgen (s. functions.php) — der Rahmen
     der Reiter-Umgebung wuerde sonst als leerer Kasten stehen bleiben. */
  .single-product .woocommerce-tabs { border: 0; padding: 0; margin-top: 0; }
  .single-product .woocommerce-tabs .panel { margin: 0; padding: 0; border: 0; }
}

/* Die Kurzinfo steckt jetzt in einem Ausklapper — die Sortierregel muss auf den
   Ausklapper zeigen, nicht auf die Kurzbeschreibung darin. Sonst landet sie hinter
   den Hinweiskaesten statt davor. */
@media (max-width: 768px) {
  .single-product div.product .summary > .pp-mobbox { order: 40; }
}

/* Kopfzeile der Ausklapper exakt wie Storefronts Reiter-Beschriftung.
   Ausgemessen an .woocommerce-tabs .wc-tabs li a auf dem Handy:
   16 px, Schnitt 400, Farbe #6d6d6d, Polster 16px 0, kein Kasten,
   Trennlinie 1px rgba(0,0,0,.05). Vorher war meine Kopfzeile 15,2 px, fett und
   in einem grauen Kasten -- das wich sichtbar vom Rest der Seite ab.

   GILT FUER JEDE BREITE (der Klassenname stammt noch aus der Handy-Fassung):
   Am Schreibtisch stand sonst weiterhin Storefronts gruener Reiter-Knopf da,
   waehrend das Handy die schlichte Zeile zeigte -- zwei Gestaltungen fuer
   dieselbe Sache. */
.pp-tabs-aus .wc-tabs { display: none !important; }
.pp-mobbox {
  border: 0; border-top: 1px solid rgba(0,0,0,.05);
  border-radius: 0; margin: 0; background: transparent;
}
.pp-mobbox-head {
  /* Aufbau (volle Breite, Pfeil rechts, kein Rahmen) MUSS ausserhalb der
     Handy-Abfrage stehen: Am Schreibtisch war die Kopfzeile sonst ein kleiner
     Knopf mit Rahmen, und der Pfeil wurde zerquetscht -- man sah gar nicht mehr,
     dass sich da etwas aufklappen laesst. */
  display: flex !important; align-items: center; justify-content: space-between;
  gap: .75rem; width: 100%; margin: 0 !important;
  border: 0 !important; box-shadow: none !important; text-align: left;
  text-decoration: none !important; min-height: 0 !important; cursor: pointer;
  padding: 16px 0 !important; background: transparent !important;
  font-size: 16px !important; font-weight: 400 !important;
  line-height: 1.6 !important; color: #6d6d6d !important;
  border-radius: 0 !important;
}
/* Pfeil sichtbar halten: Er zeigt, dass sich der Bereich zuklappen laesst. */
.pp-mobbox-pfeil {
  width: 10px; height: 10px; flex: none;
  border-right: 2px solid #6d6d6d; border-bottom: 2px solid #6d6d6d;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
.pp-mobbox.is-open .pp-mobbox-pfeil { transform: rotate(-135deg) translate(-2px, -2px); }
.pp-mobbox-head:hover { background: transparent !important; color: #18181b !important; }
.pp-mobbox-pfeil { border-color: #6d6d6d; }
.pp-mobbox-body { padding: 0 0 1.25rem; }

/* Produktdaten stehen unter der Beschreibung — ohne eigenen Kasten, damit sie
   sich in dieselbe Reihe aus Trennlinien einfuegen. */
.pp-produktdaten {
  margin: 0 !important; padding: 1.25rem 0 0;
  border: 0; border-top: 1px solid rgba(0,0,0,.05); border-radius: 0; background: transparent;
}

/* Nur am Handy: Die Kurzinfo sitzt im Kaufbereich und braucht Abstand zum
   Warenkorb-Knopf. Am Schreibtisch bleibt sie unveraendert ausgeschrieben. */
@media (max-width: 768px) {
  .summary .pp-mobbox { margin-top: 1.25rem; border-bottom: 1px solid rgba(0,0,0,.05); }
}

/* Auf- und Zuklappen gilt fuer jede Breite. Diese beiden Zeilen standen noch in
   der Handy-Abfrage — am Schreibtisch blieb der Inhalt deshalb immer sichtbar und
   der Klick auf die Kopfzeile tat nichts. */
.pp-mobbox-body { display: none; }
.pp-mobbox.is-open .pp-mobbox-body { display: block; }

/* Storefront floatet das Reiter-Panel am Schreibtisch nach rechts. In einem
   Ausklapper faellt dessen Hoehe dadurch zusammen -- geoeffnet blieben nur die
   20 px des unteren Polsters stehen, der Text ragte unsichtbar heraus.
   flow-root schliesst den Float ein; der Float selbst wird aufgehoben, damit der
   Inhalt die volle Breite des Ausklappers nutzt. */
.pp-mobbox.is-open .pp-mobbox-body { display: flow-root; }
.pp-mobbox-body > .wc-tab { float: none !important; width: auto !important; }

/* Seitlicher Reiter zum Ausblenden der Software-Vorschau.
   Der Knopf in der Software-Box oben bleibt, ist nach dem Lesen aber ausser
   Reichweite -- man musste zum Schliessen erst wieder hochscrollen. Ein Knopf am
   Ende des Bereichs half nur, wer bis unten gelesen hatte. Der Reiter hier haengt
   am linken Fensterrand und ist an jeder Stelle der Vorschau erreichbar. */
.pp-swp { position: relative; }
/* Am Fenster verankert, NICHT im Bereich: div.product und body setzen
   overflow: hidden, damit funktioniert position: sticky nicht (der Reiter
   scrollte weg, gemessen y = -1816). Sichtbar nur, solange die Vorschau offen
   und im Bild ist -- dafuer setzt das Skript --sichtbar. */
.pp-swp-zu-wrap {
  position: fixed; left: 0; top: 45vh; z-index: 40;
  display: none; pointer-events: none;
}
.pp-swp-zu-wrap--sichtbar { display: block; }
.pp-swp-zu {
  pointer-events: auto;
  display: block; width: 34px; padding: .9rem .4rem;
  /* Schrift laeuft nach unten, die Buchstaben bleiben dabei aufrecht und stehen
     untereinander -- gekippte Buchstaben waren gewuenscht anders. */
  writing-mode: vertical-rl; text-orientation: upright;
  background: var(--pp-green-600, #4f9230); color: #fff !important;
  /* !important, weil die allgemeine Knopf-Regel weiter oben allen Knoepfen
     border-radius: 8px !important verpasst -- ohne das waere auch die dem
     Fensterrand zugewandte Seite rund. */
  border: 0; border-radius: 0 8px 8px 0 !important;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; line-height: 1.15;
  box-shadow: 0 6px 14px -6px rgba(24,24,27,.45);
  cursor: pointer; transition: background .15s;
}
.pp-swp-zu:hover { background: var(--pp-green-700, #3d7126); color: #fff !important; }
.pp-swp-zu:focus-visible { outline: 2px solid #18181b; outline-offset: 2px; }

/* Am Handy etwas tiefer, damit der Reiter nicht mit der unteren Leiste kollidiert. */
@media (max-width: 768px) {
  .pp-swp-zu-wrap { top: 40vh; }
}

/* Gehoert zum eingeklappten Bereich und verschwindet mit ihm — sonst stuende ein
   „Ausblenden" da, wenn nichts eingeblendet ist. */
.pp-swp--collapsible:not(.pp-swp--open) .pp-swp-zu-wrap { display: none; }