/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     rwd_default
 * @copyright   Copyright (c) 2006-2017 X.commerce, Inc. and affiliates (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* Alpine.js cloak: hide elements until Alpine initializes */
[x-cloak] { display: none !important; }

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

/*
 * Removes default margin.
 */
body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Visible focus indicator for keyboard navigation (WCAG 2.4.7).
 * Uses :focus-visible to only show on keyboard, not mouse click.
 */
a:focus {
  outline: none;
}
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
 * Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
}

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic;
}

/*
 * Addresses styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * Sets consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * Removes border when inside `a` element in IE 8/9.
 */
img {
  border: 0;
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */
}

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/*
 * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default;
}

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  /* 2 */
  box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================ *
 * Reset
 * ============================================ */
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Prevent tap highlight on iOS/Android */
  -webkit-text-size-adjust: 100%;
  /* Prevent automatic scaling on iOS */
}

/* ============================================ *
 * Local Fonts (Raleway + Lato)
 * ============================================ */
@font-face {
  font-family: 'Raleway';
  src: url('https://logisch-bio.de/skin/frontend/rwd/logbio/fonts/Raleway/static/Raleway-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('https://logisch-bio.de/skin/frontend/rwd/logbio/fonts/Raleway/static/Raleway-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('https://logisch-bio.de/skin/frontend/rwd/logbio/fonts/Raleway/static/Raleway-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('https://logisch-bio.de/skin/frontend/rwd/logbio/fonts/Raleway/static/Raleway-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('https://logisch-bio.de/skin/frontend/rwd/logbio/fonts/Raleway/static/Raleway-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('https://logisch-bio.de/skin/frontend/rwd/logbio/fonts/Lato/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('https://logisch-bio.de/skin/frontend/rwd/logbio/fonts/Lato/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================ *
 * Design Tokens (CSS Custom Properties)
 * ============================================ */
:root {
  /* Colors: Brand */
  --color-primary: rgb(12, 95, 47);
  --color-primary-hover: rgb(8, 70, 32);
  --color-cta: rgb(242, 173, 72);
  --color-cta-hover: rgb(230, 158, 50);
  --color-cta-active: rgb(200, 135, 35);
  /* Colors: Text */
  --color-text: #4a4a4a;
  --color-text-light: #a0a0a0;
  --color-text-dark: #333;
  --color-text-muted: #767676;
  /* Colors: Status */
  --color-success: #11b400;
  --color-error: #df280a;
  --color-warning: #e26703;
  --color-info: #2196f3;
  /* Colors: Backgrounds */
  --color-bg: #fff;
  --color-bg-subtle: #fafafa;
  --color-bg-light: #f4f4f4;
  --color-bg-hover: #f0f0f0;
  --color-bg-error: #fef2f0;
  --color-bg-success: #f0faf0;
  /* Colors: Borders & Dividers */
  --color-border: #eee;
  --color-border-medium: #ccc;
  --color-divider: #ededed;
  /* Typography */
  --font-heading: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 34px;
  --text-5xl: 42px;
  /* Spacing Scale (4px base unit) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  /* Border Radius */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-card: 10px;
  /* Transforms */
  --hover-subtle: translateY(-2px);
  --hover-medium: translateY(-3px);
  --hover-prominent: translateY(-4px);
  /* Shadows */
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.12);
  --shadow-prominent: 0 6px 20px rgba(0, 0, 0, 0.15);
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  /* Layout */
  --sidebar-width: 25%;
  /* FD-013 Einheit 7, 18.08.2026: Werte der Seitenhuelle (css/layout.css). */
  --container-max: 1260px;
  --sidebar-max: 260px;
  /* Hoehe des klebrigen Kategorietitels. Rueckfallwert; die echte Hoehe
     misst alpine-components.js zur Laufzeit. */
  --category-title-height: 31px;
  --header-height-desktop: 80px;
  --header-height-mobile: 142px; /* fallback, overridden by JS measurement */
  /* Breakpoints (Tailwind CSS — reference only, CSS can't use vars in @media)
   * sm:  640px  |  md:  768px  |  lg: 1024px  |  xl: 1280px  |  2xl: 1536px */
  /* Focus & Accessibility */
  --focus-ring: 0 0 0 3px rgba(12, 95, 47, 0.4);
  --focus-ring-cta: 0 0 0 3px rgba(242, 173, 72, 0.5);
  --focus-ring-error: 0 0 0 3px rgba(223, 40, 10, 0.3);
}

/* ================================================================ *
 *  TABLE OF CONTENTS
 * ================================================================ *
 *
 *  FOUNDATION
 *    @font-face declarations .................. ~395
 *    :root custom properties .................. ~450
 *    Reset & Base ............................. ~475
 *
 *  COMPONENTS
 *    Buttons .................................. ~1050
 *    Header & Navigation ...................... ~4020
 *    Search ................................... ~4625
 *    Footer ................................... ~5090
 *    Back to Top .............................. ~1820
 *
 *  LAYOUT
 *    Homepage Hero & Welcome .................. ~1540
 *    Homepage Teasers ......................... ~1640
 *    Main Container ........................... ~1860
 *    Sidebar / Account Sidebar ................ ~940
 *    CMS Pages ................................ ~2755
 *
 *  CATALOG
 *    Product List General ..................... ~5200
 *    Product Grid ............................. ~5270
 *    Product List ............................. ~5580
 *    Product Detail View ...................... ~6030
 *    Toolbar (sort/pager) ..................... ~2910
 *    Layered Navigation ....................... ~5750
 *    Configurable Swatches .................... ~8815
 *
 *  CART & CHECKOUT
 *    Shopping Cart ............................ ~7565
 *    Checkout One Page ........................ ~8240
 *    Checkout Success ......................... ~8800
 *    Checkout Progress ........................ ~8460
 *    Mini Cart ................................ ~10990
 *
 *  CUSTOMER ACCOUNT
 *    Dashboard & Greeting ..................... ~9280
 *    Quick-Action Cards ....................... ~9420
 *    Bestellvorlage ........................... ~9470
 *    Order History ............................ ~11825
 *    Account Reviews .......................... ~11355
 *
 *  FORMS
 *    Inputs ................................... ~3470
 *    Contact Form ............................. ~2835
 *
 *  MODULES
 *    EcoInform Product Data Sheet ............. ~12515
 *    Bestellvorlagen UX ....................... ~12575
 *    Sidebar Nav (Codnitive) .................. ~12620
 *
 *  MISC
 *    Print Styles ............................. ~3330
 *    Search Auto-Suggest ...................... ~11265
 *    Search Advanced .......................... ~11325
 *    Checkout Multiple Addresses .............. ~12135
 *
 * ================================================================ */

body {
  background: #fff;
  color: #000000;
  line-height: 1;
}

html,
body,
img,
fieldset,
abbr,
acronym {
  border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

th,
code,
cite,
caption {
  font-weight: normal;
  font-style: normal;
  text-align: left;
}

address {
  font-style: normal;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

img {
  display: block;
}

ol,
ul {
  list-style: none;
}

q:before,
q:after {
  content: '';
}

input:focus,
input[type="search"]:focus {
  outline-offset: -2px;
}

input[type="search"] {
  -webkit-appearance: none;
  /* 1 */
  /* 2 */
  box-sizing: border-box;
}

/* ============================================ *
 * Base Styles
 * ============================================ */
@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

a, button {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

body,
button,
input,
select,
table,
textarea {
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
}

a {
  color: var(--color-primary);
  font-family: Lato;
  font-weight: bold;
  text-decoration: none;
}

a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

a:focus {
  /*outline-color: #3091c2;*/
  color: var(--color-primary);
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================================ *
 * Typography
 * ============================================ */
h1, .h1 {
  margin: 0;
  margin-bottom: 0.7em;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
}

h2, .h2 {
  margin: 0;
  margin-bottom: 0.5em;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
}

h3, .h3 {
  margin: 0;
  margin-bottom: 10px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: none;
}

h4, .h4 {
  margin: 0;
  margin-bottom: 10px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: none;
}

h5, .h5 {
  margin: 0;
  margin-bottom: 10px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: none;
}

h6, .h6 {
  margin: 0;
  margin-bottom: 5px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
}

/* ============================================ *
 * Shared Classes
 * ============================================ */
.address-list address {
  margin-bottom: 1em;
}

.availability {
  margin-bottom: 0;
  font-size: 13px;
  text-transform: uppercase;
}

.availability .label {
  display: none;
}

.availability.in-stock {
  color: var(--color-success);
}

.availability.available-soon,
.availability.out-of-stock {
  color: var(--color-error);
}

.availability-only {
  color: var(--color-error);
  margin-bottom: 10px;
}

/* -------------------------------------------- *
 * Page Titles
 */
.page-title h1,
.page-title h2,
.product-name h1,
.product-name .h1 {
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid #ededed;
  padding-bottom: 3px;
  margin-bottom: 15px;
}

/* -------------------------------------------- *
 * Block Module
 */
.block,
.col-left-first {
  margin-bottom: 20px;
}

.col-left-first .block:last-of-type {
  margin-bottom: 0;
}

.block-title {
  position: relative;
  padding: 10px 0 0;
  margin-bottom: 5px;
  border-top: 1px solid #cccccc;
}
.block-title h2,
.block-title h3,
.block-title strong {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
}
.block-title small {
  font-size: 100%;
  font-weight: normal;
  color: var(--color-text-muted);
}

body:not(.customer-account) .block:first-child .block-title {
  border-top: none;
  padding-top: 0;
}

.block-subtitle {
  font-weight: bold;
  margin-bottom: 7px;
}

.block-content {
  margin-top: 5px;
}

.block-content.unpad {
  padding: 0;
}

.block-content li.item {
  margin: 0 0 10px 9px;
}

.block-content li.item:last-child {
  margin-bottom: 0;
}

.block .actions {
  margin: 10px 0 0;
}
.block .actions:after {
  content: '';
  display: table;
  clear: both;
}
.block .actions a {
  float: left;
}
.block .actions .button {
  float: right;
}

.col-left .block .actions .button ~ a,
.col-right .block .actions .button ~ a {
  line-height: 33px;
  margin-right: 5px;
}

@media only screen and (max-width: 767px) {
  .sidebar .block:not(.block-layered-nav) {
    margin-bottom: 4px;
  }
  .sidebar .block:not(.block-layered-nav) .block-title {
    padding: 0;
    margin: 0;
    border: none;
  }
  .sidebar .block:not(.block-layered-nav) .block-title > strong {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 10px 14px;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0.02em;
    position: relative;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 100%;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .sidebar .block:not(.block-layered-nav) .block-title > strong:after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: translateY(-50%) rotate(-45deg);
    transition: transform 0.2s ease;
  }
  .sidebar .block:not(.block-layered-nav) .block-title > strong:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-border-medium);
  }
  /* Active / expanded state */
  .sidebar .block:not(.block-layered-nav) .block-title.active > strong {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 10px 14px;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0.02em;
    position: relative;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    width: 100%;
    user-select: none;
  }
  .sidebar .block:not(.block-layered-nav) .block-title.active > strong:after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .sidebar .block:not(.block-layered-nav) .block-title.active > strong:hover {
    background-color: var(--color-bg-hover);
  }
  .sidebar .block:not(.block-layered-nav) .block-content {
    padding: 12px 14px;
    margin-top: 0;
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: #fff;
  }
  .sidebar .block:last-of-type {
    border-bottom: none;
  }
}
/* -------------------------------------------- *
 * Secondary Navigation
 */
.block-cms-menu .block-title {
  padding-top: 0;
  border-top: none;
}
.block-cms-menu li {
  text-transform: uppercase;
  font-family: var(--font-heading);
  margin: 7px 0;
}
.block-cms-menu li strong {
  font-weight: 400;
  color: var(--color-primary);
}
.block-cms-menu li a {
  color: var(--color-text);
}
.block-cms-menu li a:hover {
  color: var(--color-primary);
}

/* -------------------------------------------- *
 * Account Sidebar — styled like category sidenav
 */
.block-account {
  margin-bottom: 20px;
}
.block-account .block-title {
  background: var(--color-primary);
  padding: 12px 16px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: none;
}
.block-account .block-title strong span {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.block-account .block-content {
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 0;
}
.block-account .block-content ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.block-account li {
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
  font-family: var(--font-heading);
  font-size: 14px;
}
.block-account li:last-child {
  border-bottom: none;
}
.block-account li a {
  display: block;
  padding: 12px 16px;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.block-account li a:hover {
  color: var(--color-primary);
  background: rgba(12, 95, 47, 0.04);
}
.block-account li.current {
  background: rgba(12, 95, 47, 0.05);
}
.block-account li.current a,
.block-account li strong {
  color: var(--color-primary);
  font-weight: 700;
}
/* "Mehr" toggle */
.block-account .nav-more-toggle {
  cursor: pointer;
}
.block-account .nav-more-toggle:after {
  content: ' \25BE';
}
.block-account .nav-more-toggle.open:after {
  content: ' \25B4';
}
.block-account .nav-more-links {
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
}
.block-account .nav-more-links li a {
  padding-left: 32px;
  font-size: 13px;
  font-weight: 400;
}

/* -------------------------------------------- *
 * Bestellvorlagen (amlist) — action column
 */
.amlist-intro {
  margin-bottom: 15px;
  color: #555;
}
.amlist-overview .amlist-col-items,
.amlist-overview .amlist-col-total {
  white-space: nowrap;
}
.amlist-overview .amlist-col-total {
  font-weight: 600;
}
.amlist-icon-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.amlist-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  color: var(--color-text-muted);
  transition: color .15s, background .15s;
}
.amlist-icon-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
}
.amlist-icon-cart {
  color: var(--color-primary);
}
.amlist-icon-cart:hover {
  background: var(--color-primary);
  color: #fff;
}
.amlist-icon-remove:hover {
  background: #fde8e8;
  color: #c00;
}
.amlist-preview {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.amlist-preview-img {
  width: 75px;
  height: 75px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #e0e0e0;
  flex-shrink: 0;
}
.amlist-preview-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  border-radius: 4px;
  background: var(--color-bg-hover);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ============================================ *
 * Buttons
 * ============================================ */
/* Secondary Buttons */
.cart .buttons-set .button,
.cart-table .button,
.sidebar .actions .button,
.button.button-secondary {
  background: var(--color-bg-hover);
  color: var(--color-text);
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid #d0d0d0;
}
.cart .buttons-set .button:hover,
.cart-table .button:hover,
.sidebar .actions .button:hover,
.button.button-secondary:hover {
  background: #e4e4e4;
  border-color: #bbb;
  cursor: pointer;
}
.cart .buttons-set .button:active,
.cart-table .button:active,
.sidebar .actions .button:active,
.button.button-secondary:active {
  background: #d8d8d8;
  color: var(--color-text);
}
.cart .buttons-set .button:focus,
.cart-table .button:focus,
.sidebar .actions .button:focus,
.button.button-secondary:focus {
  color: var(--color-text);
  background: #d8d8d8;
  outline: none;
}
.cart .buttons-set .button:focus-visible,
.cart-table .button:focus-visible,
.sidebar .actions .button:focus-visible,
.button.button-secondary:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

.sidebar .actions button.button {
  white-space: normal;
}

/* Primary Buttons */
.button,
#co-shipping-method-form .buttons-set .button,
.footer .button {
  background: var(--color-primary);
  display: inline-block;
  border-radius: var(--radius-sm);
  border: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
  /* FD-013 Einheit 10, 18.08.2026: 10 + 19 + 10 ergaben 39 px. Jeder Knopf
     aus .button lag damit unter dem Mindestmass 44 px der Spezifikation —
     "In den Warenkorb", "Zur Kasse" und jeder Formularknopf. */
  line-height: 20px;
  padding: 12px 22px;
  min-height: 44px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.button:hover,
#co-shipping-method-form .buttons-set .button:hover,
.footer .button:hover {
  background: var(--color-primary-hover);
  cursor: pointer;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(12, 95, 47, 0.3);
}
.button:active,
#co-shipping-method-form .buttons-set .button:active,
.footer .button:active {
  background: var(--color-primary-hover);
  color: #fff;
  transform: translateY(0);
  box-shadow: none;
}
.button:focus,
#co-shipping-method-form .buttons-set .button:focus,
.footer .button:focus {
  background-color: var(--color-primary-hover);
  outline: none;
  color: #fff;
}
.button:focus-visible,
#co-shipping-method-form .buttons-set .button:focus-visible,
.footer .button:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

a.button {
  text-decoration: none;
}

a.button:hover {
  color: #fff;
}

/* Disabled - class for anchor, state for form elements */
.button.disabled,
.button:disabled {
  background: #c8c8c8;
  color: #fff;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Adjacent buttons */
.button + .button {
  margin-left: 5px;
}

.button2 {
  border: 0;
  padding: 0 5px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}

.button2:focus {
  outline: none;
}
.button2:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

.button2 span,
.button2 span span {
  line-height: 30px;
  height: 30px;
  text-decoration: underline;
  text-transform: uppercase;
  display: inline-block;
  color: var(--color-primary);
  font-family: var(--font-heading);
}
.button2 span:hover,
.button2 span span:hover {
  text-decoration: none;
  color: var(--color-primary-hover);
}

@media only screen and (max-width: 767px) {
  .col2-set .buttons-set {
    flex-direction: column;
  }
  .col2-set .buttons-set .button,
  .col2-set .buttons-set .button2 {
    width: 100%;
  }
  .col2-set .buttons-set .back-link {
    display: none;
  }
  .col2-set .buttons-set .required {
    display: none;
  }
}
@media only screen and (max-width: 639px) {
  .buttons-set {
    flex-direction: column;
    gap: 7px;
  }
  .buttons-set .button {
    width: 100%;
  }
  .buttons-set .back-link {
    display: none;
  }
  .buttons-set .required {
    display: none;
  }
}
/* -------------------------------------------- *
 * Paypal Button
 */
.paypal-logo.paypal-after {
  float: left;
}

.paypal-after .paypal-or {
  float: left;
}

.paypal-or {
  line-height: 34px;
  margin: 0 10px 5px;
}

.paypal-after .paypal-button {
  float: left;
}

.paypal-button {
  line-height: 0;
}

.paypal-button img {
  display: inline;
}

@media only screen and (max-width: 767px) {
  .paypal-or {
    line-height: 20px;
  }

  .paypal-logo,
  .paypal-or,
  .paypal-button {
    text-align: center;
    width: 100%;
    display: block;
    margin-right: 0;
    margin-left: 0;
    float: none;
  }
}
/* -------------------------------------------- *
 * Button Sets
 */
.buttons-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #ededed;
}
.buttons-set p.required {
  margin: 0;
  line-height: 33px;
}
.buttons-set .back-link {
  margin: 0;
  margin-right: auto;
  line-height: 33px;
}
.buttons-set a:not(.button) {
  line-height: 20px;
  padding: 5px;
}
.buttons-set button.button {
  min-width: 140px;
}

/* -------------------------------------------- *
 * Icons
 */
.icon-sprite, .btn-remove2, .ratings .rating-box, .ratings .rating-box .rating, .sorter > .sort-by .sort-by-switcher, .sorter > .view-mode .grid,
.sorter > .view-mode .list, .skip-nav .icon, .skip-search .icon, #search_mini_form .search-button:before, .skip-account .icon, .skip-cart .icon, .product-view .sharing-links a, .review-summary-table .rating-box .rating-number:after, .ratings-table .rating-box, .ratings-table .rating-box .rating {
  background-image: url(https://logisch-bio.de/skin/frontend/rwd/logbio/images/icon_sprite.png);
  background-repeat: no-repeat;
  text-indent: -9999px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .icon-sprite, .btn-remove2, .ratings .rating-box, .ratings .rating-box .rating, .sorter > .sort-by .sort-by-switcher, .sorter > .view-mode .grid,
  .sorter > .view-mode .list, .skip-nav .icon, .skip-search .icon, #search_mini_form .search-button:before, .skip-account .icon, .skip-cart .icon, .product-view .sharing-links a, .review-summary-table .rating-box .rating-number:after, .ratings-table .rating-box, .ratings-table .rating-box .rating {
    background-image: url(https://logisch-bio.de/skin/frontend/rwd/logbio/images/icon_sprite@2x.png);
    background-size: 100px 1000px;
  }
}
/* -------------------------------------------- *
 * Sprite → CSS Migration
 * Override sprite background-image on elements now using SVGs or CSS-only replacements.
 * Original sprite declarations above kept for fallback; these overrides take precedence.
 */
/* Skip-link icons: now inline SVGs in header.phtml */
.skip-nav .icon,
.skip-search .icon,
.skip-account .icon,
.skip-cart .icon {
  background-image: none !important;
  text-indent: 0;
}
/* Search button: SVG in template, :before pseudo disabled */
#search_mini_form .search-button:before {
  background-image: none !important;
}
/* View mode: already background:none via earlier rule */

/* Rating stars: CSS unicode replacement */
.ratings .rating-box,
.ratings-table .rating-box {
  background-image: none !important;
  background-color: transparent;
  position: relative;
  text-indent: 0;
  font-size: 0;
  line-height: 13px;
}
.ratings .rating-box::before,
.ratings-table .rating-box::before {
  content: '\2605\2605\2605\2605\2605';
  font-size: 13px;
  letter-spacing: 1px;
  color: #ddd;
}
.ratings .rating-box .rating,
.ratings-table .rating-box .rating {
  background-image: none !important;
  position: absolute;
  top: 0;
  left: 0;
  text-indent: 0;
  font-size: 0;
  line-height: 13px;
}
.ratings .rating-box .rating::before,
.ratings-table .rating-box .rating::before {
  content: '\2605\2605\2605\2605\2605';
  font-size: 13px;
  letter-spacing: 1px;
  color: #f5a623;
}
.review-summary-table .rating-box .rating-number:after {
  background-image: none !important;
  content: '\2605';
  font-size: 13px;
  color: #f5a623;
  text-indent: 0;
  width: auto;
  height: auto;
}

/* Sort direction switcher: CSS arrows */
.sorter > .sort-by .sort-by-switcher {
  background-image: none !important;
  text-indent: 0;
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sorter > .sort-by .sort-by-switcher--asc,
.sorter > .sort-by .sort-by-switcher--asc:hover {
  background-image: none !important;
  background-position: 0 0;
}
.sorter > .sort-by .sort-by-switcher--asc::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--color-text-muted);
}
.sorter > .sort-by .sort-by-switcher--asc:hover::before {
  border-bottom-color: var(--color-primary);
}
.sorter > .sort-by .sort-by-switcher--desc,
.sorter > .sort-by .sort-by-switcher--desc:hover {
  background-image: none !important;
  background-position: 0 0;
}
.sorter > .sort-by .sort-by-switcher--desc::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-text-muted);
}
.sorter > .sort-by .sort-by-switcher--desc:hover::before {
  border-top-color: var(--color-primary);
}

/* btn-remove2: CSS × symbol */
.btn-remove2 {
  background-image: none !important;
  background-position: 0 0;
  text-indent: 0;
  font-size: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-remove2::before {
  content: '\00D7';
  font-size: 18px;
  color: var(--color-text-muted);
  line-height: 1;
}
.btn-remove2:hover::before {
  color: var(--color-error, #df280a);
}

/* Sharing links: CSS unicode icons */
.product-view .sharing-links a {
  background-image: none !important;
  text-indent: 0;
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-view .sharing-links a::before {
  font-size: 16px;
  line-height: 26px;
}
.product-view .sharing-links a.link-wishlist::before { content: '\2661'; }
.product-view .sharing-links a.link-compare::before  { content: '\21C4'; }
.product-view .sharing-links a.link-email-friend::before { content: '\2709'; }
.product-view .sharing-links a.link-facebook::before { content: 'f'; font-family: var(--font-heading); font-weight: 700; }
.product-view .sharing-links a.link-twitter::before  { content: '\1D54F'; }

/* Out-of-stock button: remove sprite */
.product-view .add-to-cart button.out-of-stock {
  background-image: none !important;
  background-position: 0 0;
}

/* -------------------------------------------- *
 * Breadcrumbs
 */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 15px;
}

.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumbs li {
  font-size: 12px;
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.breadcrumbs a {
  color: var(--color-text);
}

.breadcrumbs a:hover {
  color: var(--color-primary);
}

.breadcrumbs strong {
  color: var(--color-text);
  font-weight: normal;
}

.breadcrumbs span {
  padding: 0 7px;
}

@media only screen and (max-width: 767px) {
  .breadcrumbs {
    display: none;
  }
}
/* -------------------------------------------- *
 * Button - Remove / Previous
 */
.btn-remove,
.btn-previous {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ededed;
  text-align: center;
  /* Hide text */
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  position: relative;
}
.btn-remove:hover,
.btn-previous:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-remove:after {
  content: 'X';
  color: var(--color-primary);
  height: 20px;
  line-height: 20px;
  width: 100%;
  font-size: 10px;
  font-family: Arial, "Helvetica Neue", Verdana, Arial, sans-serif;
  font-weight: bold;
}
.btn-remove:hover:after {
  color: #fff;
  text-decoration: none;
}

.btn-remove2 {
  background-position: 4px -648px;
  border: none;
  vertical-align: top;
}
.btn-remove2:after {
  display: none;
}
.btn-remove2:hover {
  background-color: transparent;
  opacity: 0.8;
}

.btn-previous:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid var(--color-primary);
  border-left: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -2px;
  margin-top: -4px;
}
.btn-previous:hover:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid white;
  border-left: none;
}

.block-layered-nav .currently .btn-remove,
.block-layered-nav .currently .btn-previous,
.mini-products-list .btn-remove,
.mini-products-list .btn-previous,
#compare-items .btn-remove,
#compare-items .btn-previous {
  float: right;
  margin-left: 6px;
}

/* -------------------------------------------- *
 * Checkout Agreements
 */
.checkout-agreements li {
  margin-bottom: 20px;
}

.checkout-agreements .agreement-content {
  overflow-y: auto;
  max-width: 670px;
  max-height: 125px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #cccccc;
  background: var(--color-bg-light);
}

/* -------------------------------------------- *
 * CVV Security Code
 */
.cvv-what-is-this {
  margin-left: 10px;
  font-size: 13px;
  line-height: 24px;
}

/* -------------------------------------------- *
 * Container
 */
/* FD-013 Einheit 5, 18.08.2026: dvh statt vh — vh ignoriert die einklappende
   Browserleiste auf dem Telefon. */
.main-container{
  min-height: 60dvh;
  position: relative;
  padding: 15px;
  width: 100%;
}

/* Nur Desktop: Abstand fuer fixed header */
@media only screen and (min-width: 1024px) {
  .main-container {
    margin-top: var(--header-height-desktop);
  }
}
/* -------------------------------------------- *
 * Landing Page — Hero
 */
.main-container .welcome {
    background-attachment: fixed;
    background-image: url(https://logisch-bio.de/skin/frontend/rwd/logbio/images/bg/home/shutterstock_231564058.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    min-height: 480px;
    overflow: hidden;
    margin-top: -42px;
    padding: 120px 40px 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-container .welcome .welcomeText {
    width: 100%;
    max-width: 700px;
    text-align: center;
}
.main-container .welcome .welcomeText a {
    background: var(--color-cta);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 50px;
    height: 50px;
    margin: 20px auto 0;
    text-align: center;
    text-decoration: none;
    width: 220px;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.main-container .welcome .welcomeText a:hover {
    background: var(--color-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(242, 173, 72, 0.4);
}
.main-container .welcome .welcomeText .welcomeContent {
    background: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.main-container .welcome .welcomeText .welcomeContent .hero-logo {
    display: block;
    width: 100%;
    max-width: 550px;
    height: auto;
    margin: 0 auto -12px;
    filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}
.main-container .welcome .welcomeText .welcomeContent .line1 {
    display: none;
}
.main-container .welcome .welcomeText .welcomeContent .line2 {
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.15em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    margin: 0;
}
.main-container .welcome::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}
.main-container .welcome .welcomeText {
    position: relative;
    z-index: 1;
}
.main-container .welcome .line,
.main-container .welcome .clear {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
}
.main-container .welcome .line hr {
    display: none !important;
}
.cms_shop
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 10px 0;
}
.cms_shop > a
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    padding: 16px 12px;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid var(--color-border);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cms_shop > a:hover
{
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: rgba(12, 95, 47, 0.3);
    color: var(--color-primary);
}
.cms_shop > a > img
{
    width: 100%;
    max-width: 160px;
    height: auto;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    box-shadow: none;
}
@media only screen and (max-width: 767px) {
    .cms_shop {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 6px 0;
    }
    .cms_shop > a {
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: 4px 10px;
        height: 64px;
    }
    .cms_shop > a > img {
        width: 52px !important;
        max-width: 52px !important;
        height: 52px !important;
        object-fit: cover;
        margin-bottom: 0;
        margin-right: 10px;
        flex-shrink: 0;
    }
    .cms_shop > a:hover {
        transform: none;
    }
}

/* -------------------------------------------- *
 * Homepage Teasers (base rules before mobile overrides)
 */
.main-container .main .home-teaser:before {
    display: none;
}
.main-container .main .home-teaser {
    background: linear-gradient(180deg, #fff 0%, #f8faf8 100%);
    padding: 56px 0 32px;
    position: relative;
}
.main-container .main .home-teaser:after {
    display: none;
}
.main-container .main .home-teasers {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0 auto;
    max-width: 1260px;
    padding: 0 26px;
    position: relative;
    z-index: 1;
}
.main-container .main .home-teasers .home-teaser-element {
    flex: 1;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: none;
    margin: 0;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.main-container .main .home-teasers .home-teaser-element:hover {
    transform: var(--hover-medium);
    box-shadow: var(--shadow-medium);
    border-color: rgba(12, 95, 47, 0.25);
}
/* Hide empty teaser elements */
.main-container .main .home-teasers .home-teaser-element .widget.widget-static-block:empty {
    display: none;
}
.main-container .main .home-teasers .home-teaser-element:has(.widget-static-block:empty) {
    display: none;
}

/* Auto-style any WYSIWYG content inside teaser cards.
   Expected structure from editor: <p><img></p> <h3>Title</h3> <p>Text</p> <p><a>Link</a></p>
   All content gets centered and styled automatically. */
.home-teaser-element .widget-static-block {
    text-align: center;
    font-family: var(--font-heading);
}
.home-teaser-element .widget-static-block img {
    display: block;
    margin: 0 auto 16px;
    border-radius: var(--radius-sm);
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 200px;
    object-fit: cover;
}
/* Middle teaser (Firmenkunden) — wider, edge-to-edge image */
.main-container .main .home-teasers .home-teaser-element:nth-child(2) {
    flex: 1.4;
    padding: 0 0 28px;
}
.home-teaser-element:nth-child(2) .widget-static-block img {
    border-radius: 0;
    max-height: 240px;
    width: 100%;
    margin: 0 0 16px;
}
.main-container .main .home-teasers .home-teaser-element:nth-child(1),
.main-container .main .home-teasers .home-teaser-element:nth-child(3) {
    padding: 20px 18px;
}
.home-teaser-element:nth-child(1) .widget-static-block img,
.home-teaser-element:nth-child(3) .widget-static-block img {
    max-height: 140px;
}
.home-teaser-element:nth-child(2) .widget-static-block h3,
.home-teaser-element:nth-child(2) .widget-static-block p {
    padding-left: 20px;
    padding-right: 20px;
}
.home-teaser-element .widget-static-block figure {
    margin: 0;
    padding: 0;
}
.home-teaser-element:nth-child(2) .widget-static-block p:last-child a {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 10px 28px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: var(--text-lg);
    text-decoration: none;
    transition: background 0.15s ease;
}
.home-teaser-element:nth-child(2) .widget-static-block p:last-child a:hover {
    background: var(--color-primary-dark, #08472a);
}
.home-teaser-element .widget-static-block h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 10px;
    text-align: center;
}
.home-teaser-element .widget-static-block p {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    line-height: 1.6;
    color: #555;
    margin: 0 0 12px;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
}
.home-teaser-element .widget-static-block p:last-child {
    margin-bottom: 0;
}
.home-teaser-element .widget-static-block a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    position: static;
    transition: color 0.15s ease;
}
.home-teaser-element .widget-static-block a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.home-teaser-element:hover .widget-static-block a {
    text-decoration: underline;
    color: var(--color-primary-hover);
}
.main-container .main .home-teaser .pages-wrap {
    background: #fff;
    margin: 0 auto;
    max-width: 1260px;
    padding: 48px 26px;
    position: relative;
    z-index: 1;
}
.home-teaser .pages-wrap p {
    font-size: var(--text-lg);
    line-height: 1.6;
    max-width: 72ch;
}
.home-teaser .pages-wrap h2,
.home-teaser .pages-wrap h3 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);
}

@media only screen and (max-width: 1023px) {
    .main-container .main .home-teasers {
        display: block;
        padding: 0 20px;
        gap: 0;
    }
    .main-container .main .home-teasers .home-teaser-element,
    .main-container .main .home-teasers .home-teaser-element:nth-child(1),
    .main-container .main .home-teasers .home-teaser-element:nth-child(2),
    .main-container .main .home-teasers .home-teaser-element:nth-child(3) {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        margin-bottom: 16px;
        padding: 20px 16px;
    }
    .home-teaser-element .widget-static-block img,
    .home-teaser-element:nth-child(1) .widget-static-block img,
    .home-teaser-element:nth-child(3) .widget-static-block img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        margin: 0 0 16px;
    }
    .main-container .main .home-teasers .home-teaser-element:nth-child(2) {
        padding: 12px 16px;
    }
    .home-teaser-element:nth-child(2) .widget-static-block img {
        max-height: 140px;
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-sm);
        margin: 0 0 12px;
    }
    .home-teaser-element:nth-child(2) .widget-static-block h3,
    .home-teaser-element:nth-child(2) .widget-static-block p {
        padding-left: 0;
        padding-right: 0;
    }
}


@media only screen and (max-width: 767px) 
{
    .main-container
    {
        margin-top: 0;
        padding: 0 !important;
    }
    .main-container .welcome {
        min-height: 300px;
        padding: 60px 20px 40px;
        margin-top: 0;
        background-attachment: scroll;
        justify-content: center;
    }
    .main-container .welcome .welcomeText {
        width: 100%;
        max-width: 100%;
    }
    .main-container .welcome .welcomeText a {
        width: 80%;
        max-width: 220px;
        font-size: 14px;
        line-height: 44px;
        height: 44px;
    }
    .main-container .welcome .welcomeText .welcomeContent .hero-logo {
        max-width: 240px;
    }
    .main-container .welcome .welcomeText .welcomeContent .line2 {
        font-size: 16px;
    }
    .main-container .main .home-teaser {
        padding-top: 16px;
    }
    .main-container .main .home-teaser .pages-wrap {
        padding: 20px 12px;
    }
}
/* .cms_shop mobile layout handled in max-width: 767px block above */
@media only screen and (max-width: 639px) {
    /* FD-013 Einheit 10, 18.08.2026: Die Ruecknahme des gap stand hier und
       verpuffte — die Basisregel .footer .footer-columns steht spaeter in der
       Datei, bei gleicher Spezifitaet. 60 px Luecke zwischen Fussspalten, die
       auf dem Telefon untereinander stehen. Der gap ist jetzt dort
       mobile-first gesetzt. */
    .footer .footer-col {
        text-align: center;
    }
    .footer .footer-legal {
        flex-direction: column;
        gap: 4px;
    }
}


/* Back to Top Button */
#back-to-top {
    display: flex;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 150;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 22px;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-subtle);
    transition: background 0.2s ease, transform 0.15s ease, opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}
#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
#back-to-top:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}

.clear
{
    clear: both;
    height: 0 !important;
}
.footer-container {
    background-color: var(--color-primary) !important;
    font-family: var(--font-heading);
    font-size: 14px;
    position: relative;
}
.footer-container .footer {
    margin: 0 auto;
    max-width: 1260px;
    padding: 0 26px;
}
.main-container .main:before {
    display: none;
}
.main-container .main,
.main-container > .main {
    background: #fff !important;
    background-image: none !important;
    height: 100%;
    overflow: visible;
}
/* Mobile: overflow: visible damit position: sticky funktioniert */
@media only screen and (max-width: 767px) {
    .main-container .main,
    .main-container > .main {
        overflow: visible;
        height: auto;
    }
}
/* -------------------------------------------- *
 * Mini-Hero — full-bleed banner with centered heading overlay
 */
.mini-hero,
.home-banner {
    width: calc(100% + 52px);
    margin-left: -26px;
    margin-top: 48px;
    margin-bottom: 0;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
    border-radius: 0;
    position: relative;
}
.mini-hero::after,
.home-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}
.mini-hero h2,
.home-banner h2 {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    margin: 0;
    padding: 0 40px;
    text-transform: none;
}
@media only screen and (max-width: 767px) {
    /* FD-013 Einheit 5: margin/width sind nach css/base-mobile.css umgezogen.
       Die Annahme "20 px Polsterung am Elternelement" stimmte nicht. */
    .mini-hero,
    .home-banner {
        min-height: 160px;
        background-attachment: scroll;
        margin-top: 32px;
    }
    .mini-hero h2,
    .home-banner h2 {
        font-size: 22px;
        padding: 0 24px;
    }
}

/* Homepage banner instance */
.home-banner {
    background-image: url(https://logisch-bio.de/skin/frontend/rwd/logbio/images/bg/home/shutterstock_231564058.jpg);
}

/* USP section — h2 overlays the mini-hero banner above */
.home-usp {
    position: relative;
    z-index: 1;
    margin-top: -220px;
    padding-top: 0;
}
.home-usp > h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    margin: 0 -26px;
    padding: 0 40px;
    color: #fff !important;
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    text-transform: none;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 767px) {
    .home-usp {
        margin-top: -160px;
    }
    /* FD-013 Einheit 5: margin nach css/base-mobile.css, gleiche Ursache wie
       beim Streifen darunter — die Regel rechnete mit 20 px Polsterung. */
    .home-usp > h2 {
        height: 160px;
        padding: 0 24px;
        font-size: 22px;
    }
}
.home-usp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 24px;
}
.home-usp-item {
    background: #f9faf9;
    border-radius: var(--radius-card);
    padding: 24px 28px;
    border: 1px solid #eef2ee;
}
.home-usp-item strong {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 8px;
}
.home-usp-item p {
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}
.home-closing {
    margin-top: 40px;
    text-align: center;
    background: rgba(12, 95, 47, 0.05);
    border-radius: var(--radius-card);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home-closing p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 15px;
    color: #444;
    text-align: center;
}
@media only screen and (max-width: 639px) {
    .home-usp-grid {
        grid-template-columns: 1fr;
    }
}
/* FD-013 Einheit 7, 18.08.2026: .mainCenter entfaellt. Die Klasse trug drei
   Aufgaben zugleich — Containerbreite, weisse Karte und Raster-Elternteil.
   Keine liess sich anfassen, ohne die anderen zu treffen. Jetzt l-container,
   l-card und l-grid in css/layout.css. */

@media only screen and (min-width: 640px) {
  .main-container,
  .footer-container {
    padding: 0;
  }
}
.footer-container {
  bottom: 0;
  margin-top: 0;
  padding-top: 25px;
  width: 100%;
}

/* -------------------------------------------- *
 * Column Layouts
 */
.col-left,
.col-right,
.col-main {
  min-width: 0;
}
.col-right.sidebar {
  display: flex;
  flex-direction: column;
}
.col-right .block-cart { order: 1; }
.col-right .block-reorder { order: 2; }
.col-right .block-viewed { order: 3; }
.col-left img,
.col-right img {
  max-width: 100%;
}

/* FD-013 Einheit 7, 18.08.2026: Die Spaltenlogik der vier Layoutklassen ist
   entfallen — es gibt nur noch eine Huelle. Raster und Spalten stehen in
   css/layout.css. Die klebrigen Seitenleisten bleiben hier: sie sind Optik,
   keine Huelle. */
@media only screen and (min-width: 1024px) {
  .catalog-category-view .col-left,
  .catalog-category-view .col-wrapper,
  .catalog-category-view .col-right {
    position: sticky;
    top: calc(var(--header-height-desktop) + 16px);
    align-self: start;
    max-height: calc(100vh - var(--header-height-desktop) - 32px);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .catalog-category-view .col-left::-webkit-scrollbar,
  .catalog-category-view .col-wrapper::-webkit-scrollbar,
  .catalog-category-view .col-right::-webkit-scrollbar {
    display: none;
  }
}

/* Mobile: natural stacking */
@media only screen and (max-width: 767px) {
  .col-left, .col-right, .col-main { padding: 0; margin-bottom: 0; }
  .col-main .col-left { padding: 0; }
}
/* Content Columns */
.col2-set {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.col2-set .col-1,
.col2-set .col-2 {
  width: 50%;
  padding: 20px;
}
.col2-set .col-1 { padding-left: 0; }
.col2-set .col-2 { padding-right: 0; }
@media only screen and (max-width: 767px) {
  .col2-set .col-1,
  .col2-set .col-2 {
    padding: 10px;
  }
}
@media only screen and (max-width: 639px) {
  .col2-set { flex-direction: column; }
  .col2-set .col-1,
  .col2-set .col-2 {
    width: 100%;
    border: 0;
    padding: 0;
  }
}
.col2-set .narrow {
  width: 33%;
}
.col2-set .wide {
  width: 65%;
}

/* -------------------------------------------- *
 * Top Container
 */
@media only screen and (min-width: 768px) {
  .top-container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 30px;
  }
}
/* -------------------------------------------- *
 * Global Site Notice
 */
.global-site-notice {
  /* background: #676157; */
  color: #e6e6e6;
  font-size: 0;
  height: 37px;
  left: 0;
  position: fixed;
  top: 0;
  /* width: 40%; */
  z-index: 500;
}

.global-site-notice.demo-notice::after
{
    content: 'DEMO';
    position: absolute;
    top: 0;
    left: 0;
    width: 65px;
    height: 30px;
    z-index: 1000;
    background-color: #d00;
    color: green;
    font-size: 20px;
}
.global-site-notice .notice-inner {
  padding-left: 120px;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  line-height: 11px;
  min-height: 40px;
  padding-top: 14.5px;
  padding-bottom: 14.5px;
  background-image: url("https://logisch-bio.de/skin/frontend/rwd/logbio/images/demo-logo.png");
  background-position: left;
  background-repeat: no-repeat;
}
.global-site-notice p {
  margin-bottom: 0;
}

/* -------------------------------------------- *
 * Promotional Message Banner
 */
.promo-msg {
  color: var(--color-primary);
  text-align: center;
  margin: 10px;
  text-transform: uppercase;
  font-family: var(--font-heading);
}

/* -------------------------------------------- *
 * Grid
 */
.grid:after {
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------------------- *
 * Messages
 */
.success {
  color: var(--color-success);
}

.error {
  color: var(--color-error);
  font-weight: bold;
}

.notice {
  color: var(--color-warning);
  font-weight: bold;
}

/* -------------------------------------------- *
 * Messages
 */
.messages {
  margin-bottom: 10px;
}

.messages li li {
  position: relative;
  margin-bottom: 5px;
  padding: 7px 10px 7px 20px;
  background: var(--color-bg-light);
  font-size: 15px;
}

.messages li li:before {
  top: 50%;
  left: 0;
  margin-top: -6px;
}

.messages .error-msg li {
  color: black;
  border-left: 5px solid #df280a;
  background-color: #faebe7;
}

.messages .error-msg li:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #df280a;
  border-right: none;
}

.messages .notice-msg li {
  color: black;
  border-left: 5px solid #e26703;
  background-color: #f9ebe6;
}

.messages .notice-msg li:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #e26703;
  border-right: none;
}

.messages .success-msg li {
  color: black;
  border-left: 5px solid #11b400;
  background-color: #eff5ea;
}

.messages .success-msg li:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #11b400;
  border-right: none;
}

@media only screen and (min-width: 1024px) {
  .order-list-grid .col-1 {
    width: 30%;
  }

  .order-list-grid .col-2 {
    width: 50%;
    padding-right: 20px;
  }

  .order-list-grid .col-3 {
    clear: none;
    width: 20%;
    padding-top: 0;
  }
}
/* -------------------------------------------- *
 * Page Popup
 */
.page-popup {
  padding: 20px;
  background: #fff;
  height: auto;
}

.page-popup h1 {
  margin: 0 0 0.5em;
  font-size: 36px;
}

/* -------------------------------------------- *
 * Payment Methods
 */
.payment-methods {
  margin-bottom: 20px;
}

.payment-methods dt {
  padding: 5px 0;
}

.payment-methods dd {
  padding-top: 10px;
}

.payment-methods .form-list {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 5px 15px 15px;
  padding: 15px;
  border: 1px solid #cccccc;
  background: var(--color-bg-light);
}

.payment-methods .form-list:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #cccccc;
  border-top: none;
  top: -11px;
  left: 30px;
}

.payment-methods .form-list:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #f4f4f4;
  border-top: none;
  top: -10px;
  left: 30px;
}

.payment-methods .form-list li:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------- *
 * Please Wait (Loading Indicator)
 */
.please-wait {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  line-height: 24px;
  height: 24px;
  white-space: nowrap;
  /* Prevent the linebreak in the HTML from causing layout issues */
}
.please-wait img {
  float: left;
  margin-right: 5px;
  width: 24px;
}

/* -------------------------------------------- *
 * Price Box - Standard
 */
.price-box {
  margin: 7px 0;
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
}

.price-box p {
  margin-bottom: 0;
}

.price-notice {
  color: var(--color-text-muted);
}

.price-box .price {
  color: var(--color-primary);
  font-size: 16px;
}

.price-box .price,
.price {
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
}

.price-box .price-label {
  color: var(--color-text-muted);
  white-space: nowrap;
  font-family: var(--font-heading);
}

.price-box .minimal-price-link {
  padding-left: 1em;
  color: var(--color-primary);
  display: block;
  /* We want this to show on its own line, otherwise the layout looks funky */
}
.price-box .minimal-price-link .label {
  color: var(--color-text-muted);
}

/* -------------------------------------------- *
 * Price Box - Special
 */
.price-box .old-price,
.price-box .special-price {
  display: inline-block;
}
.price-box .old-price .price-label,
.price-box .special-price .price-label {
  display: none;
}
.price-box .old-price .price,
.price-box .special-price .price {
  display: inline-block;
}

.price-box .old-price .price {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.price-box .special-price {
  color: var(--color-primary);
  padding-left: 1em;
}
.price-box .special-price .price-label {
  color: #d84d3c;
}

/* -------------------------------------------- *
 * Price Box - Taxes
 */
.price-box .price-excluding-tax,
.price-box .price-including-tax {
  display: block;
}

span.weee {
  display: block;
}

/* -------------------------------------------- *
 * Tier Prices
 */
.product-pricing,
.tier-prices,
.tier-prices-grouped {
  display: inline-block;
  padding: 4px 8px;
  background: #fbf4de;
  border: 1px solid #e2d4c7;
  margin-top: 7px;
}
.product-pricing li,
.tier-prices li,
.tier-prices-grouped li {
  font-size: 12px;
}
.product-pricing .benefit,
.tier-prices .benefit,
.tier-prices-grouped .benefit {
  font-style: italic;
}
.product-pricing .price,
.tier-prices .price,
.tier-prices-grouped .price {
  font-weight: bold;
}

/* ============================================ *
 * Item Options
 * ============================================ */
.item-options {
  font-size: 14px;
  font-family: var(--font-heading);
}
.item-options:after {
  content: '';
  display: table;
  clear: both;
}
.item-options dt {
  float: left;
  clear: left;
  font-weight: 600;
  padding-right: 5px;
  font-style: italic;
}
.item-options dt:after {
  content: ': ';
}
.item-options dd {
  float: left;
  padding-left: 10px;
  margin: 0 0 6px;
}

.truncated,
.truncated a.dots {
  cursor: help;
}

.truncated a.details {
  cursor: help;
  height: 16px;
  line-height: 16px;
}
.truncated a.details:hover {
  text-decoration: none;
}

.truncated .truncated_full_value {
  position: relative;
  z-index: 300;
}

.truncated .truncated_full_value .item-options {
  display: none;
  position: absolute;
  z-index: 300;
  width: 200px;
  padding: 8px;
  border: 1px solid var(--color-primary);
  background-color: #f6f6f6;
  top: 21px;
  left: -100px;
}
.truncated .truncated_full_value .item-options:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid var(--color-primary);
  border-top: none;
  left: 97px;
  top: -7px;
}

.truncated .truncated_full_value .item-options > p {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.truncated .show .item-options {
  display: block;
}

@media only screen and (max-width: 639px) {
  .truncated {
    cursor: inherit;
  }
  .truncated a.details {
    display: none;
  }
  .truncated .truncated_full_value .item-options {
    display: block;
    position: static;
    z-index: 1;
    width: 100%;
    border: none;
    background-color: transparent;
  }
  .truncated .truncated_full_value .item-options p {
    float: none;
  }
  .truncated .truncated_full_value .item-options:after {
    display: none;
  }
}
/* -------------------------------------------- *
 * Printer Friendly Page
 */
.page-print {
  width: 6.5in;
  margin: 20px;
  background: #fff;
}

/* -------------------------------------------- *
 * Add to links
 */
.add-to-links {
  margin: 7px 0;
}
.add-to-links a {
  display: inline-block;
  padding: 0 3px 3px;
}

.add-to-links .separator {
  display: none;
}

/* -------------------------------------------- *
 * Product Image
 */
.product-image,
.no-touch .product-img-box .product-image:not(.zoom-available):hover {
  position: relative;
  display: block;
  border: 1px solid #ededed;
}

@media only screen and (max-width: 767px) {
  body .product-img-box .product-image:hover {
    border-color: #ededed;
  }
}
.no-touch .product-image:hover {
  border-color: var(--color-primary);
}

/* -------------------------------------------- *
 * Ratings
 */
.ratings {
  margin: 7px 0;
}
.ratings .rating-box,
.ratings .rating-links {
  margin: 5px 0;
}
.ratings .rating-box {
  width: 65px;
  height: 13px;
  background-repeat: repeat-x;
  background-position: 0 -615px;
  overflow: hidden;
}
.ratings .rating-box .rating {
  float: left;
  height: 13px;
  background-repeat: repeat-x;
  background-position: 0 -600px;
}
.ratings .amount {
  display: block;
  margin: 5px auto;
}
.ratings .rating-links .separator {
  margin: 0 3px;
}

/* -------------------------------------------- *
 * Standard Formatted Text Block
 */
.std p {
  margin: 0 0 1.5em;
}

.std ol {
  list-style: decimal outside;
  margin-bottom: 1.5em;
}

.std ol li {
  margin-left: 2em;
}

.std ul {
  list-style: disc outside;
  margin-bottom: 1.5em;
}

.std ul li {
  margin-left: 2em;
}

.std .note {
  color: var(--color-text-muted);
  font-size: 13px;
}

.std .wikitable {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  margin: 1em 0;
  overflow-x: auto;
  display: block;
}
.std .wikitable caption {
  font-weight: 600;
  font-family: var(--font-heading);
  text-align: left;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--color-text-dark);
}
.std .wikitable th,
.std .wikitable td {
  border: 1px solid var(--color-border);
  padding: 6px 10px;
  text-align: center;
}
.std .wikitable th {
  background: var(--color-bg-light, #f5f5f5);
  font-weight: 600;
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-text-dark);
}
.std .wikitable td {
  color: var(--color-text);
}

/* CMS page general typography */
.cms-page-view .std {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}
.cms-page-view .std p {
  max-width: 72ch;
}
.cms-markt .std p {
  max-width: 100%;
}
.cms-page-view .std h2 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 8px;
  text-transform: none;
}
.cms-page-view .std h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-dark);
}
.cms-page-view .std a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-lg);
  transition: color var(--transition-fast);
}
.cms-page-view .std a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Timeline card component for CMS */
.bio-card {
  margin-top: 24px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(12, 95, 47, 0.15);
  box-shadow: var(--shadow-subtle);
}
.bio-card-header {
  background: var(--color-primary);
  padding: 16px 24px;
}
.bio-card-header strong {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}
.bio-card-body {
  padding: 24px;
  background: var(--color-bg);
}
.bio-card-body p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}
.bio-card:first-of-type {
  margin-top: 28px;
}

/* Bio-Schedule — Markt table layout */
.bio-schedule .bio-card-header,
.bio-schedule .bio-card-body {
  display: flex;
  gap: 0;
}
.bio-schedule .col-day { width: 25%; }
.bio-schedule .col-market { width: 45%; }
.bio-schedule .col-hours { width: 30%; }

@media only screen and (max-width: 639px) {
  .bio-schedule .bio-card-header,
  .bio-schedule .bio-card-body {
    flex-direction: column;
    gap: 4px;
  }
  .bio-schedule .col-day,
  .bio-schedule .col-market,
  .bio-schedule .col-hours {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .bio-card-body {
    padding: 16px;
  }
  .bio-card-header {
    padding: 12px 16px;
  }
}

/* Hero image for CMS pages */
.cms-hero {
  width: 100%;
  margin: 8px 0 28px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
}
.cms-hero img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  max-width: none !important;
}
@media only screen and (min-width: 640px) {
  .cms-hero img {
    height: 360px;
  }
}
@media only screen and (max-width: 639px) {
  .cms-hero img {
    height: 200px;
  }
}

/* CMS closing paragraph — reusable across CMS pages */
.cms-closing {
  margin-top: 32px;
  text-align: center;
  font-family: var(--font-heading);
}
.cms-closing strong {
  font-size: var(--text-base);
  color: var(--color-text-dark);
}

/* CMS intro quote / blockquote */
.cms-page-view .std blockquote,
.cms-page-view .std > p:first-of-type em {
  font-size: var(--text-lg);
  color: var(--color-primary);
  line-height: 1.5;
}

/* ============================================================
 * Bestellablauf — /bestellung CMS page (guided order steps)
 * Numbered vertical stepper + Sonderwünsche (comment field) callout.
 * ============================================================ */
.bestellablauf {
  max-width: 760px;
  margin: 0 auto;
}
.bestellablauf .bestell-lead {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-text);
}
.bestellablauf a {
  color: var(--color-primary);
  text-decoration: underline;
}
.bestellablauf a:hover {
  color: var(--color-primary-hover);
}

/* Numbered stepper — the real order sequence */
.bestellablauf .bestell-steps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}
.bestellablauf .bestell-steps > li {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 0 0 28px;
}
.bestellablauf .bestell-steps > li:last-child {
  padding-bottom: 0;
}
/* connecting line between the step markers */
.bestellablauf .bestell-steps > li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 0;
  left: 22px;
  width: 2px;
  margin-left: -1px;
  background: rgba(12, 95, 47, 0.18);
}
.bestellablauf .bestell-step-num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 44px;
  text-align: center;
}
.bestellablauf .bestell-step-body {
  padding-top: 4px;
}
.bestellablauf .bestell-step-body h3 {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: none;
}
.bestellablauf .bestell-step-body p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}

/* Sonderwünsche callout — the page's signature element */
.bestellablauf .bestell-hint {
  display: flex;
  gap: 16px;
  margin: 36px 0 0;
  padding: 24px;
  background: rgba(12, 95, 47, 0.06);
  border: 1px solid rgba(12, 95, 47, 0.15);
  border-radius: var(--radius-card);
}
.bestellablauf .bestell-hint-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  color: var(--color-primary);
}
.bestellablauf .bestell-hint h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: none;
}
.bestellablauf .bestell-hint p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}
.bestellablauf .bestell-hint p + p {
  margin-top: 10px;
}

/* Secondary legal note */
.bestellablauf .bestell-legal {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
}

@media only screen and (max-width: 639px) {
  .bestellablauf .bestell-steps > li { gap: 14px; }
  .bestellablauf .bestell-steps > li:not(:last-child)::before { top: 38px; left: 19px; }
  .bestellablauf .bestell-step-num {
    width: 38px; height: 38px; line-height: 38px; font-size: var(--text-lg);
  }
  .bestellablauf .bestell-hint { flex-direction: column; padding: 18px; }
}

/* ============================================================
 * Zahlungsarten — /zahlung CMS page
 * Payment methods as icon cards (matches the Bestellablauf look).
 * ============================================================ */
.zahlungsarten {
  max-width: 760px;
  margin: 0 auto;
}
.zahlungsarten .zahl-lead {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-text);
}

.zahlungsarten .zahl-list {
  margin: 28px 0 0;
}
.zahlungsarten .zahl-item {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(12, 95, 47, 0.15);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
}
.zahlungsarten .zahl-item:first-child {
  margin-top: 0;
}
.zahlungsarten .zahl-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(12, 95, 47, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.zahlungsarten .zahl-icon svg {
  width: 26px;
  height: 26px;
}
.zahlungsarten .zahl-body {
  flex: 1;
  min-width: 0;
}
.zahlungsarten .zahl-body h3 {
  margin: 4px 0 6px;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
  text-transform: none;
}
.zahlungsarten .zahl-body p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}
.zahlungsarten .zahl-body p + p {
  margin-top: 8px;
}
.zahlungsarten .zahl-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(12, 95, 47, 0.10);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
}
.zahlungsarten .zahl-tip {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(12, 95, 47, 0.06);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
}

/* Vorkasse — bank account details */
.zahlungsarten .zahl-konto {
  margin-top: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.zahlungsarten .zahl-konto-row {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.zahlungsarten .zahl-konto-row:first-child {
  border-top: none;
}
.zahlungsarten .zahl-konto-label {
  flex: 0 0 140px;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
}
.zahlungsarten .zahl-konto-value {
  color: var(--color-text-dark);
  font-weight: 600;
  word-break: break-word;
}

@media only screen and (max-width: 639px) {
  .zahlungsarten .zahl-item { flex-direction: column; gap: 12px; padding: 18px; }
  .zahlungsarten .zahl-konto-row { flex-direction: column; gap: 2px; }
  .zahlungsarten .zahl-konto-label { flex-basis: auto; }
}

/* Closing line: keep a clear gap from the last item. Needs two classes to
   beat the global `.std p { margin: 0 0 1.5em }` (which zeroes margin-top). */
.bestellablauf .cms-closing,
.zahlungsarten .cms-closing {
  margin-top: 40px;
}

/* -------------------------------------------- *
 * Contact Form
 */
.contact-intro {
  font-family: var(--font-heading);
  font-size: 15px;
  color: #666;
  margin-bottom: 24px;
}
.contact-form {
  max-width: 640px;
}
.contact-form-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-row-half {
  display: flex;
  gap: 16px;
}
.contact-row-half .contact-field {
  flex: 1;
}
.contact-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}
.contact-field .input-text {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--color-text-dark);
  box-sizing: border-box;
}
.contact-field textarea.input-text {
  resize: vertical;
  min-height: 140px;
  max-width: 100%;
}
.contact-actions {
  margin-top: 24px;
}
.contact-actions .button {
  padding: 12px 32px;
  font-size: 15px;
}
@media only screen and (max-width: 639px) {
  .contact-row-half {
    flex-direction: column;
    gap: 18px;
  }
}

/* -------------------------------------------- *
 * Tabs
 */
.tabs {
  margin-bottom: 10px;
  background: #fff;
}

/* -------------------------------------------- *
 * Toolbar
 */
.toolbar {
  margin-top: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  background: var(--color-bg-light);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: 30px;
  font-size: 12px;
}

/* FD-013 Einheit 5, 18.08.2026: Die klebrige Toolbar stand hier und ein
   zweites Mal weiter unten. Beide Fassungen sind entfallen; sie steht jetzt
   in css/listing.css und ist auf dem Telefon nicht mehr klebrig. */
.pager-no-toolbar {
  margin-bottom: 10px;
}
.pager-no-toolbar ~ .pager-no-toolbar {
  margin-top: 10px;
}

.pager {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: 30px;
  font-size: 12px;
}

.toolbar label,
.pager-no-toolbar label {
  font-weight: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
.toolbar label:after {
  content: ':';
}

/* Row 1: Sorter — view-mode left, sort-by right */
.sorter {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.sorter > .view-mode {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* View mode switcher — Material Design SVG icons */
.sorter > .view-mode .grid,
.sorter > .view-mode .list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  text-indent: 0;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}
.sorter > .view-mode a.grid:hover,
.sorter > .view-mode a.list:hover {
  color: var(--color-primary);
}
.sorter > .view-mode strong.grid,
.sorter > .view-mode strong.list {
  color: var(--color-primary);
}
.icon-viewmode {
  width: 20px;
  height: 20px;
}
.sorter > .sort-by {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sorter > .sort-by .sort-by-switcher {
  width: 30px;
  height: 30px;
  display: inline-block;
}
.sorter > .sort-by .sort-by-switcher--asc {
  background-position: 4px -542px;
}
.sorter > .sort-by .sort-by-switcher--asc:hover {
  background-position: -46px -542px;
}
.sorter > .sort-by .sort-by-switcher--desc {
  background-position: 4px -567px;
}
.sorter > .sort-by .sort-by-switcher--desc:hover {
  background-position: -46px -567px;
}

/* Row 2: Pager — amount + limiter left, pages right */
.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.pager > .count-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pager .amount {
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
  white-space: nowrap;
}
.pager .limiter {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.pager .pages {
  margin-left: auto;
}

.pages {
  display: flex;
  align-items: center;
}
.pages ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pages strong {
  display: none;
}

.pages a,
.pages .current {
  display: inline-block;
  border: 0;
  font-size: 13px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 30px;
  width: 25px;
  height: 30px;
  padding: 0;
  color: var(--color-primary);
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
}

.pages .current,
.pages .current:hover {
  color: var(--color-text);
  border: 1px solid #cccccc;
  width: 30px;
  background-color: #fff;
  cursor: default;
}

.pages .next,
.pages .previous {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: transparent;
  position: relative;
}
.pages .next:hover,
.pages .previous:hover {
  border: 1px solid var(--color-primary);
}

.pages .next:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid var(--color-primary);
  border-right: none;
  top: 50%;
  margin-top: -3px;
  left: 50%;
  margin-left: -2px;
}
.pages .next:hover:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #246b8f;
  border-right: none;
}

.pages .previous:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid var(--color-primary);
  border-left: none;
  top: 50%;
  margin-top: -3px;
  left: 50%;
  margin-left: -2px;
}
.pages .previous:hover:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid #246b8f;
  border-left: none;
}

@media only screen and (max-width: 639px) {
  .limiter label {
    display: none;
  }
}
@media only screen and (max-width: 1279px) {
  .toolbar .view-mode > label {
    display: none;
  }
}
/* ============================================ *
 * TrustedRating - hidden (obsolete widget)
 * ============================================ */
.trustedrating-widget { display: none; }

/* ============================================ *
 * Tax - Full Tax Summary
 * ============================================ */
#checkout-review-table .summary-collapse,
#shopping-cart-totals-table .summary-collapse,
body.customer-account .data-table .summary-collapse {
  position: relative;
  cursor: pointer;
}
#checkout-review-table .summary-collapse:before,
#shopping-cart-totals-table .summary-collapse:before,
body.customer-account .data-table .summary-collapse:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 7px solid var(--color-primary);
  border-bottom: none;
  position: static;
  display: inline-block;
  margin-right: 5px;
}
#checkout-review-table .summary-collapse:hover:before,
#shopping-cart-totals-table .summary-collapse:hover:before,
body.customer-account .data-table .summary-collapse:hover:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 7px solid #246b8f;
  border-bottom: none;
  position: static;
  display: inline-block;
  margin-right: 5px;
}
#checkout-review-table .show-details .summary-collapse:before,
#shopping-cart-totals-table .show-details .summary-collapse:before,
body.customer-account .data-table .show-details .summary-collapse:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid var(--color-primary);
  border-top: none;
  position: static;
  display: inline-block;
  margin-right: 5px;
}
#checkout-review-table .show-details .summary-collapse:hover:before,
#shopping-cart-totals-table .show-details .summary-collapse:hover:before,
body.customer-account .data-table .show-details .summary-collapse:hover:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #246b8f;
  border-top: none;
  position: static;
  display: inline-block;
  margin-right: 5px;
}

#shopping-cart-totals-table tfoot td .summary-collapse:before, #shopping-cart-totals-table tfoot td .summary-collapse:hover:before {
  margin-bottom: 5px;
}

/* ============================================ *
 * Magento Helpers
 * ============================================ */
.a-center {
  text-align: center;
}

.a-right,
.align-right {
  text-align: right;
}

.no-display {
  display: none !important;
}

.nobr,
.nowrap {
  white-space: nowrap;
}

.width-full {
  width: 100%;
}

/* ============================================ *
 * Custom Helpers
 * ============================================ */
.hidden {
  display: none;
}

/* ============================================ *
 * Print Styles
 * ============================================ */
.page-print .print-head {
  margin: 0 0 15px;
}

.page-print .print-head .logo {
  float: none;
  max-height: 50px;
  width: auto;
}

/* ============================================ *
 * FORMS - COMMON
 * ============================================ */
/* -------------------------------------------- *
 * Fieldsets
 */
.fieldset p {
  margin-bottom: 7px;
}
.fieldset p.required {
  margin-bottom: 5px;
  float: right;
  font-size: 12px;
  margin-top: 0;
}

.fieldset + .fieldset {
  margin-top: 5px;
}

form .legend {
  margin: 0;
  margin-bottom: 10px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  margin-bottom: 15px;
  padding-bottom: 7px;
  border-bottom: 1px solid #ededed;
}

/* -------------------------------------------- *
 * Input Box
 */
.input-box {
  padding-top: 2px;
}
.input-box:after {
  content: '';
  display: table;
  clear: both;
}

li.centinel-logos div.input-box img {
  display: inline;
  vertical-align: middle;
}

/* For adjacent select inputs. */
/* Example: credit card expiration month and year. */
.input-box .v-fix {
  float: left;
  margin-right: 5px;
  max-width: 100%;
}

/* -------------------------------------------- *
 * Labels
 */
label {
  display: inline-block;
  font-size: 13px;
  font-family: var(--font-heading);
  font-weight: 600;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;

  user-select: none;
}

label.required:after,
span.required:after {
  content: ' *';
  color: var(--color-error);
  font-weight: normal;
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
  font-size: 12px;
}

label.required em,
span.required em {
  display: none;
}

/* -------------------------------------------- *
 * Hints
 */
.input-hint {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* -------------------------------------------- *
 * Select
 */
select {
  font-size: 14px;
}

select + select {
  margin-left: 5px;
}

select[multiple] {
  width: 270px;
  border: 1px solid silver;
  font-size: 15px;
  padding: 5px;
}

/* -------------------------------------------- *
 * Textarea
 */
textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 639px;
  padding: 5px;
}

/* -------------------------------------------- *
 * Inputs
 */
.input-text,
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--font-heading);
  font-size: 15px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-text:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(12, 95, 47, 0.15);
  outline: none;
}
.input-text:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: var(--focus-ring);
}

.input-text.validation-failed,
textarea.validation-failed,
select.validation-failed {
  border-color: var(--color-error);
  background-color: var(--color-bg-error);
}

.input-text.validation-failed:focus,
textarea.validation-failed:focus,
select.validation-failed:focus {
  box-shadow: var(--focus-ring-error);
  outline: none;
}

input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
  height: 30px;
  padding: 0 8px;
}

input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
  width: 365px;
  max-width: 100%;
}

/* Only show on iPhones (not iPads or any other device) */
@media only screen and (max-width: 639px) {
  input[type=email],
  input[type=search],
  input[type=number],
  input[type=password],
  input[type=tel],
  input[type=text],
  select {
    font-size: 16px;
    /* Prevent from zooming on focus */
  }
}


/* -------------------------------------------- *
 * Inputs - Quantity
 */
input[type=number].qty,
input[type=text].qty {
  width: 3em;
  text-align: center;
  vertical-align: middle;
}

/* -------------------------------------------- *
 * Placeholder
 */
::placeholder {
  color: var(--color-text-muted);
}

/* -------------------------------------------- *
 * Checkbox And Radio
 */
.checkbox,
.radio {
  position: relative;
  top: -1px;
  display: inline-block;
}

.checkbox + label,
.radio + label {
  width: auto;
  max-width: 85%;
  padding: 0 0 0 8px;
  font-size: 14px;
  font-weight: normal;
  vertical-align: top;
}

/* -------------------------------------------- *
 * Validation
 */
p.required,
.validation-advice {
  margin: 5px 0 0;
  color: var(--color-error);
  font-size: 13px;
  line-height: 1.4;
}
/* Valid state feedback */
.input-text.validation-passed,
textarea.validation-passed,
select.validation-passed {
  border-color: var(--color-success);
}

/* ============================================ *
 * Form List
 * ============================================ */
.form-list > li {
  margin-bottom: 10px;
}
.form-list select {
  margin-top: 4px;
  width: 365px;
  max-width: 100%;
}
.form-list .input-range .input-text {
  width: 74px;
}
.form-list .field,
.form-list .wide,
.form-list .control {
  margin-bottom: 10px;
}

/* Turn the label of controls (radio/checkbox) into a button style that wraps the input */
.form-list .control,
.sp-methods dt,
#checkout-shipping-method-load .sp-methods dd,
#co-shipping-method-form .sp-methods dd,
.product-options ul.options-list {
  /* When a label is next to an input that is set to not display, we should style the label in a non-clickable state */
}
.form-list .control div.input-box,
.sp-methods dt div.input-box,
#checkout-shipping-method-load .sp-methods dd div.input-box,
#co-shipping-method-form .sp-methods dd div.input-box,
.product-options ul.options-list div.input-box {
  display: inline;
  float: left;
}
.form-list .control div.input-box:after,
.sp-methods dt div.input-box:after,
#checkout-shipping-method-load .sp-methods dd div.input-box:after,
#co-shipping-method-form .sp-methods dd div.input-box:after,
.product-options ul.options-list div.input-box:after {
  display: none;
}
.form-list .control input.radio,
.form-list .control input.checkbox,
.sp-methods dt input.radio,
.sp-methods dt input.checkbox,
#checkout-shipping-method-load .sp-methods dd input.radio,
#checkout-shipping-method-load .sp-methods dd input.checkbox,
#co-shipping-method-form .sp-methods dd input.radio,
#co-shipping-method-form .sp-methods dd input.checkbox,
.product-options ul.options-list input.radio,
.product-options ul.options-list input.checkbox {
  float: left;
  margin-right: -40px;
  margin-top: 10px;
  margin-left: 15px;
}
.form-list .control label,
.sp-methods dt label,
#checkout-shipping-method-load .sp-methods dd label,
#co-shipping-method-form .sp-methods dd label,
.product-options ul.options-list label {
  color: var(--color-text);
  background-color: var(--color-bg-light);
  display: inline-block;
  width: auto;
  max-width: none;
  /* FD-013 Einheit 10, 18.08.2026: feste 250 px plus 40 px Polsterung plus
     2 x 15 px Containerrand ergaben genau 320 px — die Beschriftung lief bei
     320 px Fensterbreite ueber. Der Selektor trifft nicht nur den Checkout,
     sondern jedes Formular mit Auswahlfeld und jede Produktoption. min()
     nimmt 250 px, wo Platz ist, und sonst die volle Breite. */
  min-width: min(250px, 100%);
  float: none;
  padding: 6px 10px 6px 40px;
}
.form-list .control label:hover,
.sp-methods dt label:hover,
#checkout-shipping-method-load .sp-methods dd label:hover,
#co-shipping-method-form .sp-methods dd label:hover,
.product-options ul.options-list label:hover {
  background-color: #ececec;
}
.form-list .control .no-display + label,
.sp-methods dt .no-display + label,
#checkout-shipping-method-load .sp-methods dd .no-display + label,
#co-shipping-method-form .sp-methods dd .no-display + label,
.product-options ul.options-list .no-display + label {
  padding-left: 10px;
  background-color: transparent;
}
.form-list .control .no-display + label:hover,
.sp-methods dt .no-display + label:hover,
#checkout-shipping-method-load .sp-methods dd .no-display + label:hover,
#co-shipping-method-form .sp-methods dd .no-display + label:hover,
.product-options ul.options-list .no-display + label:hover {
  background-color: transparent;
}

.product-options ul.options-list label,
.col2-set .form-list .control label {
  min-width: inherit;
  width: 250px;
  max-width: 100%;
}

.form-list .control.remember-me-box label {
  width: auto;
  max-width: none;
  min-width: inherit;
}

.form-list .control {
  margin-top: 10px;
}
.form-list .control label {
  float: none;
}
.form-list .control .radio,
.form-list .control .checkbox {
  margin-right: 6px;
}
.form-list .control .input-box {
  clear: none;
  display: inline-block;
  width: auto;
  padding: 0;
}

form .form-instructions {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ============================================ *
 * Table Helpers
 * ============================================ */
.hide-th {
  text-indent: -9999px;
}

/* ============================================ *
 * Data Table
 * ============================================ */
.data-table {
  width: 100%;
}

.data-table td,
.data-table th {
  padding: 10px;
  vertical-align: top;
}

.data-table th {
  background: var(--color-bg-light);
  text-transform: uppercase;
  font-family: var(--font-heading);
  line-height: 1.4;
  white-space: nowrap;
}

.data-table thead th,
.data-table tbody td {
  border-bottom: 1px solid silver;
}

.data-table tbody td,
.data-table tfoot td {
  font-family: var(--font-heading);
}

.data-table tfoot tr {
  background: var(--color-bg-light);
}

.data-table tbody td .item-options {
  margin-left: 20px;
  margin-top: 10px;
}
.data-table tbody td .item-options dt:after {
  content: ':';
}

/* ============================================ *
 * Generic Info Table
 * ============================================ */
.info-box {
  border: 1px solid silver;
  padding: 12px 15px;
  margin: 0 0 15px;
}
.info-box h2 {
  font-weight: bold;
  font-size: 13px;
}

.info-table th,
.info-table td {
  vertical-align: top;
}

.info-table th {
  font-weight: bold;
  padding: 4px 20px 4px 0;
}

.info-table td {
  padding: 4px 0;
}

/* ============================================ *
 * Zebra-Stripe Table
 * ============================================ */
.zebra-table tr:first-child,
.zebra-table th:first-child {
  border-top: 1px solid silver;
}
.zebra-table td,
.zebra-table th {
  border-bottom: 1px solid silver;
  padding: 6px;
  background-color: transparent;
}
.zebra-table tr {
  background-color: #eeeded;
}
.zebra-table tr:nth-child(odd) {
  background-color: #f8f7f5;
}

/* ============================================ *
 * Linearize Table
 * ============================================ */
@media only screen and (max-width: 639px) {
  .linearize-table {
    /* Helpers */
  }
  .linearize-table tr,
  .linearize-table th,
  .linearize-table td {
    display: block;
  }
  .linearize-table thead th {
    border-right: 0;
    border-left: 0;
  }
  .linearize-table thead th.lin-hide {
    display: none;
  }
  .linearize-table thead th:nth-child(1n+2) {
    display: none;
  }
  .linearize-table tbody tr {
    position: relative;
    border-bottom: 1px solid #cccccc;
  }
  .linearize-table tbody td {
    padding: 0 10px 4px;
    border-right: 0;
    border-bottom: 0;
  }
  .linearize-table tbody td.lin-hide {
    display: none;
  }
  .linearize-table tbody td:first-child {
    padding-top: 10px;
  }
  .linearize-table tbody td:first-child,
  .linearize-table tbody td:first-child h3 {
    font-weight: bold;
  }
  .linearize-table tbody td[data-rwd-label] {
    text-align: left;
    padding-left: 30px;
  }
  .linearize-table tbody td[data-rwd-label]:before {
    content: attr(data-rwd-label) ":";
    font-size: 12px;
    font-family: var(--font-heading);
    padding-right: 5px;
    text-transform: uppercase;
  }
  .linearize-table tfoot tr {
    display: block;
    text-align: right;
  }
  .linearize-table tfoot tr:after {
    content: '';
    display: table;
    clear: both;
  }
  .linearize-table tfoot td {
    display: block;
    float: left;
  }
  .linearize-table tfoot td.lin-hide {
    display: none;
  }
  .linearize-table tfoot td:nth-child(odd) {
    clear: left;
    width: 60%;
  }
  .linearize-table tfoot td:nth-child(even) {
    text-align: left;
    width: 40%;
  }
  .linearize-table .linearize-hide {
    display: none;
  }
  .linearize-table .linearize-unpad {
    padding: 0;
  }
  .linearize-table .linearize-show {
    display: block;
  }
}
@media only screen and (max-width: 639px) {
  .linearize-table-large {
    /* Helpers */
  }
  .linearize-table-large tr,
  .linearize-table-large th,
  .linearize-table-large td {
    display: block;
  }
  .linearize-table-large thead th {
    border-right: 0;
    border-left: 0;
  }
  .linearize-table-large thead th.lin-hide {
    display: none;
  }
  .linearize-table-large thead th:nth-child(1n+2) {
    display: none;
  }
  .linearize-table-large tbody tr {
    position: relative;
    border-bottom: 1px solid #cccccc;
  }
  .linearize-table-large tbody td {
    padding: 0 10px 4px;
    border-right: 0;
    border-bottom: 0;
  }
  .linearize-table-large tbody td.lin-hide {
    display: none;
  }
  .linearize-table-large tbody td:first-child {
    padding-top: 10px;
  }
  .linearize-table-large tbody td:first-child,
  .linearize-table-large tbody td:first-child h3 {
    font-weight: bold;
  }
  .linearize-table-large tbody td[data-rwd-label] {
    text-align: left;
    padding-left: 30px;
  }
  .linearize-table-large tbody td[data-rwd-label]:before {
    content: attr(data-rwd-label) ":";
    font-size: 12px;
    font-family: var(--font-heading);
    padding-right: 5px;
    text-transform: uppercase;
  }
  .linearize-table-large tfoot tr {
    display: block;
    text-align: right;
  }
  .linearize-table-large tfoot tr:after {
    content: '';
    display: table;
    clear: both;
  }
  .linearize-table-large tfoot td {
    display: block;
    float: left;
  }
  .linearize-table-large tfoot td.lin-hide {
    display: none;
  }
  .linearize-table-large tfoot td:nth-child(odd) {
    clear: left;
    width: 60%;
  }
  .linearize-table-large tfoot td:nth-child(even) {
    text-align: left;
    width: 40%;
  }
  .linearize-table-large .linearize-hide {
    display: none;
  }
  .linearize-table-large .linearize-unpad {
    padding: 0;
  }
  .linearize-table-large .linearize-show {
    display: block;
  }
}
@media only screen and (min-width: 640px) {
  .linearize-table .linearize-collapse {
    display: none;
  }
}
/* ============================================ *
 * Global
 * ============================================ */
html,
body {
  height: 100%;
}

.wrapper {
  display: flex;
  min-width: 320px;
  min-height: 100%;
  margin: 0 auto;
  background: #fff;
}

.wrapper:after {
  content: '';
  display: table;
  clear: both;
}
.wrapper .page
{
    width: 100%;
}

/* ============================================ *
 * Header
 * ============================================ */

/* Header — Basis (alle Viewports) */
.page-header {
  background-color: #fff;
  width: 100%;
  z-index: 100;
  box-shadow: var(--shadow-subtle);
  position: sticky;
  top: 0;
}

.page-header-container {
  margin: 0 auto;
  max-width: 1260px;
  padding: 8px 12px;
  position: relative;
}

/* Desktop: Header fixed + flex layout */
@media only screen and (min-width: 768px) {
  .page-header {
    position: fixed;
    top: 0;
    padding: 0 26px;
    overflow: visible;
  }
  .page-header-container {
    padding: 10px 0;
    display: flex;
    align-items: center;
  }
}
.header-language-container,
.page-header {
  font-family: var(--font-heading);
}

/* ============================================ *
 * Language switcher + welcome message
 * ============================================ */
.header-language-background {
  padding: 10px;
  background-color: var(--color-primary);
  text-transform: uppercase;
}
.header-language-background .header-language-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.header-language-background:after {
  content: '';
  display: table;
  clear: both;
}
.header-language-background .form-language,
.header-language-background .currency-switcher {
  float: left;
  margin-right: 10px;
}
.header-language-background .welcome-msg {
  float: right;
}

.page-header-container .store-language-container {
  float: right;
  max-width: 35%;
  padding: 13px 15px 10px 10px;
}
.page-header-container .store-language-container label {
  display: none;
}
.page-header-container .store-language-container select {
  max-width: 100%;
}

@media only screen and (max-width: 639px) {
  .page-header-container .store-language-container {
    padding-top: 8px;
  }
  .page-header-container .store-language-container select {
    font-size: 12px;
  }
}
.header-language-background,
.header-language-background a {
  color: #e6e6e6;
}

@media only screen and (max-width: 767px) {
  .header-language-background {
    display: none;
  }
}
/* ============================================ *
 * Logo
 * ============================================ */
.logo {
  display: block;
  float: left;
  width: 65%;
  min-width: 100px;
  min-height: 44px;
  text-align: center;
  padding: 10px;
}
.logo img {
  max-width: 100%;
}
.logo .small {
  display: block;
}
.logo .large {
  display: none;
}

.logo:hover {
  opacity: 0.8;
}

@media only screen and (min-width: 1024px) {
  .logo {
    float: none;
    width: auto;
    flex-shrink: 0;
    min-height: auto;
    padding: 0 20px 0 0;
  }
  .logo img {
    height: 60px;
    max-height: none;
    width: auto;
    max-width: none;
  }
}
/* ============================================ *
 * Skip Links
 * ============================================ */
.skip-links {
  clear: both;
  overflow: hidden;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
}

@media only screen and (min-width: 768px) {
  .skip-links {
    border: 0;
    display: none;
  }
}
/* -------------------------------------------- *
 * Skip - Link
 */
.skip-link {
  position: relative;
  float: left;
  width: 20%;
  height: 44px;
  background: #fff;
  color: var(--color-text);
  line-height: 42px;
  text-align: center;
}

a.skip-link {
  text-decoration: none;
}

.skip-link:not(.skip-active):hover {
  opacity: 0.8;
}

@media only screen and (max-width: 767px) {
  .skip-link {
    border-right: 1px solid #ededed;
  }

  .skip-link:last-child {
    border-right: 0;
  }
}
@media only screen and (min-width: 640px) {
  .skip-link {
    width: 25%;
  }
}
/* -------------------------------------------- *
 * Skip Link - Active
 */
@media only screen and (max-width: 767px) {
  .skip-link.skip-active {
    background: #ededed;
    color: inherit;
  }

  .skip-link.skip-active span {
    color: inherit;
  }
}
/* -------------------------------------------- *
 * Skip Link - Icon (legacy sprite)
 */
.skip-link .icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.skip-link.skip-nav .icon,
.skip-link.skip-cart:not(.no-count) .icon {
  margin-right: 3px;
}

@media only screen and (min-width: 640px) {
  .skip-link .icon {
    margin-right: 3px;
    margin-top: -3px;
  }
}

/* Material Design inline SVG icons (replace sprite) */
.skip-link .icon-md {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 3px;
}
@media only screen and (min-width: 640px) {
  .skip-link .icon-md {
    margin-top: -2px;
  }
}
/* -------------------------------------------- *
 * Skip Link - Label
 */
.skip-link .label {
  display: none;
}

@media only screen and (min-width: 640px) {
  .skip-link .label {
    display: inline;
  }
}
/* ============================================ *
 * Skip Content
 * ============================================ */
.skip-content {
  display: none;
}

.skip-content.skip-active {
  display: block;
  background: #ededed;
}

/* ============================================ *
 * Global Header Navigation
 * ============================================ */
@media only screen and (max-width: 767px) {
  #header-account li a,
  .nav-primary a.level0 {
    padding: 0 15px 0 25px;
    border-bottom: 1px solid #cccccc;
    text-align: left;
    color: rgba(12, 95, 47, 1);
    text-transform: uppercase;
    line-height: 44px;
    min-height: 44px;
  }

  #header-account li:last-child a,
  .nav-primary li.level0:last-child a.level0 {
    border-bottom: 0;
  }

  .no-touch #header-account a:hover,
  .no-touch .nav-primary a:hover {
    background-color: var(--color-bg-light);
    text-decoration: none;
  }
}
/* Account link + wrapper (tablet + desktop) */
.skip-account-desktop {
  display: none;
}
@media only screen and (min-width: 768px) {
  .account-wrapper {
    position: relative;
    flex-shrink: 0;
  }
  .skip-account-desktop {
    display: inline-flex;
    align-items: center;
  }
  .skip-account-mobile {
    display: none;
  }
  /* Minicart as flex item */
  .page-header-container > .header-minicart {
    flex-shrink: 0;
    position: relative;
  }
}
@media only screen and (min-width: 1024px) {
  .account-wrapper {
    margin-left: 15px;
  }
  .page-header-container > .header-minicart {
    margin-left: 8px;
  }
}

/* ============================================ *
 * Nav - Skip Link
 * ============================================ */
.skip-nav {
  width: 40%;
}
.skip-nav:not(.skip-active):hover {
  text-decoration: none;
}
.skip-nav:not(.skip-active):hover .icon {
  background-position: -46px 4px;
}

.skip-nav .label {
  display: inline;
}

.skip-nav .icon {
  background-position: 4px 4px;
}

@media only screen and (min-width: 640px) {
  .skip-nav {
    width: 25%;
  }
}
@media only screen and (min-width: 768px) {
  .skip-nav {
    display: none;
  }
}
/* FD-013 Einheit 2, 18.08.2026: "Categories - Skip Link" ist entfallen — das
 * Raster-Symbol .skip-categories gibt es seit Einheit 1 nicht mehr.
 * "Nav - Skip Content" ist nach css/nav.css umgezogen, mobile-first und ohne
 * max-width. Dort steht auch, warum #header-nav ab 768 px display: contents
 * bekommt. */
/* ============================================ *
 * Nav Primary
 * ============================================ */
@media only screen and (min-width: 1024px) {
  ol.nav-primary {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
  }
}
/* ============================================ *
 * General Navigation Styles
 * ============================================ */
.nav-primary a {
  text-decoration: none;
  position: relative;
  display: block;
  color: rgba(12, 95, 47, 1);
  line-height: 18px;
  font-family: "Lato", var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.nav-primary a:after
{
    border-top-color: var(--color-primary);
    border-top-style: solid;
    border-top-width: 0;
    content: '';
    display: block;
    height: 0;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    width: 100%;
}
.nav-primary .menu-active a:hover:after
{
    border-top-width: 2px;
    margin-top: .2em;
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform .2s ease-out,opacity .2s ease-out;
}
.nav-primary li {
    display: inline-block;
    vertical-align: middle;
    padding: 0 15px;
  position: relative;
}
.nav-primary li.level1 a {
  border-bottom: 1px solid #cccccc;
}

.nav-primary .menu-active > ul.level0,
.nav-primary li.level0 li.sub-menu-active > ul {
  display: block;
}

.nav-primary li.level0 > a {
  text-transform: uppercase;
}

/* ============================================ *
 * Small Viewports - Accordion Style Menu
 * ============================================ */
@media only screen and (max-width: 767px) {
  .nav-primary a.level0,
  .nav-primary a {
    line-height: 44px;
    min-height: 44px;
  }
  .nav-primary li.level0 ul {
    display: none;
  }
  .nav-primary li.level0 li {
    padding: 0 0 0 25px;
  }
  .nav-primary li.level1 a {
    padding: 0 15px 0 25px;
  }
  .nav-primary li.parent > a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #cccccc;
    border-right: none;
    top: 50%;
    left: 10px;
    right: auto;
    margin-top: -5px;
  }
  .nav-primary li.parent.sub-menu-active > a:after,
  .nav-primary li.parent.menu-active > a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid #cccccc;
    border-bottom: none;
    top: 50%;
    left: 10px;
    right: auto;
    margin-top: -5px;
  }
  .nav-primary li.menu-active > a,
  .nav-primary li.sub-menu-active > a {
    color: var(--color-primary);
  }
}
/* ============================================ *
 * Large Viewports - Dropdown Menu (desktop only)
 * ============================================ */
@media only screen and (min-width: 1024px) {
  .nav-primary {
    /* Default styles for 1+ drop-down menus */
    /* Level 2+ */
    /* Class for js to add briefly to evaluate element positioning. */
    /* Correct menus that will hang off the page (class added by js) */
    /* Level 1+ */
  }
  .nav-primary a.level0 {
    padding: 0 25px;
  }
  .nav-primary li.level0,
  .nav-primary a.level0 {
    display: inline-block;
  }
  .nav-primary li:last-child > a {
    border-bottom: none;
  }
  .nav-primary a:hover,
  .nav-primary li:hover > a {
    /*color: var(--color-primary);*/
  }
  .nav-primary .menu-active {
    z-index: 200;
  }
  .nav-primary li.level0 ul {
    background: #ffffff;
    border: none;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-medium);
    position: absolute;
    left: 0;
    top: 100%;
    padding-top: 0;
    /* no gap between link and dropdown */
    z-index: 300;
    min-width: 180px;
    width: auto;
    padding: 8px 0;
    display: none;
    /* Hide until displayed. */
  }
  .nav-primary li.level0.parent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    height: 15px;
    /* invisible hover bridge so dropdown stays open */
  }
  .nav-primary li.level0 ul li.level1 a {
    padding: 8px 20px;
    display: block;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
  }
  .nav-primary li.level0 ul li.level1 a:hover {
    background-color: rgba(12, 95, 47, 0.08);
  }
  .nav-primary li.level1 ul {
    left: 60px;
    top: 15px;
  }
  .nav-primary li.level0 ul.level0.position-test {
    display: block;
  }
  .nav-primary li.level0 ul.level0.spill {
    right: 0;
    left: auto;
  }
  .nav-primary li.level0 ul.level0.spill li.level1 ul {
    left: auto;
    right: 50px;
    top: 20px;
  }
  .nav-primary li.level0 li.parent > a {
    position: relative;
  }
  .nav-primary li.level0 li.parent > a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #cccccc;
    border-right: none;
    right: 5px;
    top: 50%;
    margin-top: -3px;
  }
}
.nav-primary li.menu-active > ul {
  display: block;
}

/* ============================================ *
 * Search - Skip Link
 * ============================================ */
.skip-search:not(.skip-active):hover .icon {
  background-position: -46px -146px;
}
.skip-search .icon {
  background-position: 4px -146px;
}

@media only screen and (min-width: 768px) {
  .skip-search {
    display: none;
  }
}
/* ============================================ *
 * Search - Skip Content
 * ============================================ */
#header-search {
  padding: 20px;
}

@media only screen and (min-width: 1024px) {
  #header-search {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    width: 200px;
    flex-shrink: 0;
    padding: 0;
  }
}
/* ============================================ *
 * Tablet Header (771px – 1100px)
 *
 * Layout: Logo | Nav (2×2 grid) | Search |  ——→  Account | Cart
 *
 * Desktop-only rules (logo size, nav flex:1, margins) now use
 * min-width:1101px, so this block no longer needs !important
 * to override them.  Selectors use .page-header-container > #id
 * (specificity 1,1,0+) which beats base .skip-content (0,1,0).
 * ============================================ */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

  /* Body offset for the fixed header.
     FD-013 Einheit 2, 18.08.2026: fruehere feste 60 px. Seit die Kategorie-
     leiste eine zweite Zeile bildet, ist die Kopfzeile hier hoeher als 60 px
     und der Inhalt lief darunter. alpine-components.js misst die Hoehe zur
     Laufzeit und schreibt sie in --header-height-desktop. */
  .main-container {
    margin-top: var(--header-height-desktop);
  }

  /* ---- Container ---- */
  .page-header-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
  }

  /* ---- 1. Logo ---- */
  .page-header-container > a.logo {
    flex: 0 0 auto;
    width: auto;
    float: none;
    padding: 0;
    min-height: 0;
  }
  .page-header-container > a.logo img {
    height: 40px;
    width: auto;
  }

  /* ---- 2. Skip-links (mobile only — force hidden) ---- */
  .page-header-container > .skip-links {
    display: none;
  }

  /* ---- 3. Nav ----
     FD-013 Einheit 2, 18.08.2026: Die Regeln hingen an
     .page-header-container > #header-nav. Dieser Selektor traegt eine ID und
     eine Klasse und schlaegt damit das einklassige #header-nav aus nav.css.
     Die Huelle blieb hier deshalb eine Box, die Kategorieleiste wuchs auf
     2046 px Inhaltsbreite statt umzubrechen. Anker ist jetzt #nav — die
     Markennavigation selbst, nicht ihre Huelle. */
  #nav {
    display: block;
    flex: 0 0 auto;
    background: none;
    padding: 0;
  }
  #nav ol.nav-primary {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
  }
  #nav .nav-primary > li {
    display: block;
    padding: 0;
    top: auto;
    position: static;
  }
  #nav .nav-primary > li > a {
    padding: 2px 0;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
  }
  /* Hide dropdown submenus in tablet nav grid */
  #nav .nav-primary > li > ul {
    display: none;
  }

  /* ---- 4. Categories ----
     FD-013 Einheit 2: Die Leiste stand hier auf display: none. Seit Einheit 1
     ist sie der einzige Kategoriezugang, also bleibt sie sichtbar. Ihre
     Darstellung steht in nav.css. */

  /* ---- 5. Search ---- */
  /* FD-013 Einheit 2, 18.08.2026: Grundbreite von 180 auf 110 px, gleich der
     min-width. Seit .page-header-container umbrechen darf (nav.css, fuer die
     Kategorieleiste), entscheidet die Grundbreite ueber den Zeilenumbruch —
     geschrumpft wird erst danach. Mit 180 px passte der Warenkorb bei 768 px
     nicht mehr in Zeile 1 und rutschte darunter. flex-grow: 1 fuellt den
     Rest wie vorher. */
  .page-header-container > #header-search {
    display: block;
    position: static;
    top: auto;
    flex: 1 1 110px;
    width: auto;
    min-width: 110px;
    padding: 0;
    background: none;
  }
  .page-header-container > #header-search .advanced-search {
    display: none;
  }

  /* ---- 6. Account (push to right via auto-margin) ---- */
  .page-header-container > .account-wrapper {
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* ---- 7. Cart ---- */
  .page-header-container > .header-minicart {
    flex: 0 0 auto;
    margin-left: 0;
  }
}

/* ============================================ *
 * Search Input
 * ============================================ */
#search_mini_form .input-box {
  position: relative;
  padding-top: 0;
}

#search_mini_form label {
  display: none;
}

#search {
  width: 100%;
  height: 30px;
  padding-right: 40px;
  font-family: var(--font-heading);
}

#search_mini_form .search-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 30px;
  border: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 0;
  border-radius: 0 6px 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#search_mini_form .search-button .icon-md {
  width: 20px;
  height: 20px;
}

#search_mini_form .search-button:before {
  /*content: '';*/
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  background-position: 4px -146px;
}

#search_mini_form .search-button:hover:before {
  opacity: 0.8;
}

#search_mini_form .search-button:active:before {
  margin-top: -13px;
  margin-left: -13px;
}

/* ============================================ *
 * Header - Account
 * ============================================ */
/* -------------------------------------------- *
 * Skip Link - Account
 */
.skip-account:not(.skip-active):hover .icon {
  background-position: -46px -44px;
}
.skip-account .icon {
  background-position: 4px -44px;
}

@media only screen and (min-width: 768px) {
  .skip-account {
    float: none;
    width: auto;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    text-transform: uppercase;
  }

  #header-account.skip-active {
    background: #ffffff;
    border: none;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-medium);
    display: block;
    position: absolute;
    z-index: 300;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    width: 180px;
    padding: 8px 0;
  }

  #header-account a {
    display: block;
    padding: 8px 20px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    white-space: nowrap;
  }

  #header-account a:hover {
    background-color: rgba(12, 95, 47, 0.08);
    color: var(--color-primary);
    text-decoration: none;
  }
}
/* -------------------------------------------- *
 * Account Links
 */
#header-account {
  padding: 0;
}
@media only screen and (max-width: 767px) {
  #header-account a {
    position: relative;
    display: block;
    padding: 5px 10px;
    line-height: 23px;
    text-align: center;
  }
  #header-account a:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
  }
}

/* ============================================ *
 * Header - Cart
 * ============================================ */
/* -------------------------------------------- *
 * Skip Link - Cart
 */
.skip-cart:not(.skip-active):hover .icon {
  background-position: -50px -95px;
}
.skip-cart .icon {
  background-position: 0 -95px;
}

@media only screen and (min-width: 768px) {
  .skip-cart {
    width: auto;
    padding: 0 10px;
  }

  #header-cart.skip-active {
    background: #ffffff;
    border: none;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-medium);
    display: block;
    position: absolute;
    z-index: 300;
    top: 40px;
    right: -10px;
    width: 320px;
    max-width: calc(100vw - 20px);
  }
}
/* -------------------------------------------- *
 * Skip Cart Notifier
 */
.skip-cart .count {
  border-radius: 12px;
  display: inline-block;
  top: -6px;
  position: relative;
  z-index: 5;
  width: 22px;
  height: 22px;
  background: rgba(12, 95, 47, 0.9);
  color: #fff;
  font-size: 11px;
  line-height: 22px;
  text-align: center;
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
}

.skip-link.skip-active .count {
  color: #fff;
}

.skip-cart.no-count .count {
  display: none;
}

@media only screen and (max-width: 639px) {
  .skip-cart .count {
    margin-left: -12px;
  }
}
@media only screen and (min-width: 768px) {
  .skip-cart {
    /*color: var(--color-primary);*/
    text-transform: uppercase;
  }
  .skip-cart:hover {
    text-decoration: none;
  }
  .skip-cart .count {
    border-radius: 0;
    position: static;
    background: none;
    margin-left: 0;
    font-size: 14px;
    width: auto;
  }
  .skip-cart .count:before {
    content: '(';
  }
  .skip-cart .count:after {
    content: ')';
  }

  .skip-cart .count,
  .skip-link.skip-active .count {
    color: var(--color-primary);
  }
}
.skip-cart .count.empty {
  display: none;
}

/* -------------------------------------------- *
 * Mini Cart - Empty
 */
.cart-menu .empty {
  padding: 20px;
  text-align: center;
}

/* -------------------------------------------- *
 * Mini Cart - Full
 */
/* Actions */
.cart-menu .actions {
  overflow: hidden;
  padding: 15px;
}

.cart-menu .actions .button {
  float: left;
  width: 48%;
}

.cart-menu .actions .button + .button {
  margin-left: 4%;
}

/* Subtotal */
.cart-menu .subtotal {
  padding: 0 15px 15px;
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 1.2;
}

/* List */
.mini-cart-list {
  margin-bottom: 5px;
}

.mini-cart-list li {
  position: relative;
  min-height: 90px;
  padding: 15px 15px 15px 90px;
  border-top: 1px solid #cccccc;
  font-size: 13px;
  line-height: 1.35;
}

.mini-cart-list .product-name {
  display: inline-block;
}

.mini-cart-list .product-image {
  position: absolute;
  left: 15px;
  top: 15px;
}

.mini-cart-list .product-image img {
  width: 60px;
  height: 60px;
}

.mini-cart-list .has-options {
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Too full - additional items will be shown in cart */
.cart-menu .last-added {
  padding: 10px 15px 15px;
  border-top: 1px solid #cccccc;
  font-size: 13px;
}

/* ============================================ *
 * Footer
 * ============================================ */
/* -------------------------------------------- *
 * Footer — LogischBIO
 */
.footer {
  clear: both;
  color: #fff;
  padding: 56px 0 24px;
  width: 100%;
  font-family: var(--font-heading);
}

/* Two-column layout — mobile-first: untereinander ohne Luecke, ab 640 px
   nebeneinander mit 60 px. */
.footer .footer-columns {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
@media only screen and (min-width: 640px) {
  .footer .footer-columns {
    flex-direction: row;
    gap: 60px;
  }
}
.footer .footer-col {
  flex: 0 1 auto;
}
.footer .footer-heading {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.footer .footer-col p {
  margin: 0;
  padding: 3px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
}
.footer .footer-col a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.15s ease;
}
.footer .footer-col a:hover {
  border-bottom-color: #fff;
}

/* Footer quick links */
.footer .footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer .footer-links li {
  margin: 0;
  padding: 3px 0;
}
.footer .footer-links a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.15s ease;
  font-size: 14px;
  line-height: 1.6;
}
.footer .footer-links a:hover {
  border-bottom-color: #fff;
}

/* Social icons */
.footer .footer-social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.footer .footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.footer .footer-social a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.footer .footer-social svg {
  width: 18px;
  height: 18px;
}

/* Copyright & legal links */
.footer address.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-style: normal;
  font-family: var(--font-heading);
  margin-top: 24px;
  padding: 20px 0 0;
  text-align: center;
  width: 100%;
}
.footer .footer-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 10px;
  padding-bottom: 25px;
}
.footer .footer-legal a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color 0.15s ease;
}
.footer .footer-legal a:hover {
  color: #fff;
}

/* ================================================= *
 * Advanced Search
 * ================================================= */
.advanced-search-form .advanced-search {
  max-width: 100%;
}
.adv-search-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.adv-search-group legend {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-dark);
  padding: 0 var(--space-sm);
}
.advanced-search-form .form-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.advanced-search-form .form-list > li {
  margin-bottom: 0;
}
.advanced-search-form .form-list label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-text-dark);
}
.advanced-search-form .form-list .input-text {
  width: 100%;
  box-sizing: border-box;
}
.advanced-search-form .form-list select {
  width: 100%;
  max-width: 100%;
}
.advanced-search-form .form-list .input-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
.advanced-search-form .form-list .input-range .input-text {
  flex: 1;
  width: auto;
}
.advanced-search-form .buttons-set {
  margin-top: 20px;
  text-align: right;
}
.btn-search-advanced {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  padding: 10px 30px;
  font-size: 14px;
}
.btn-search-advanced:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* ================================================= *
 * General Product List Styles (not module-specific)
 * ================================================= */
/* -------------------------------------------- *
 * Product List General
 */
.category-title h1,
body.catalogsearch-result-index .page-title h1 {
  border-bottom: none;
}


.category-image {
  margin-bottom: 1.5em;
}

/* -------------------------------------------- *
 * Subcategory List (parent category pages)
 */
.subcategory-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 16px 0 24px;
}
.subcategory-list > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: #fff;
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  /* staggered entrance */
  animation: subcatFadeIn 0.35s ease both;
}
.subcategory-list > a:nth-child(2) { animation-delay: 0.06s; }
.subcategory-list > a:nth-child(3) { animation-delay: 0.12s; }
.subcategory-list > a:nth-child(n+4) { animation-delay: 0.18s; }
@keyframes subcatFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.subcategory-list > a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
  border-color: rgba(12, 95, 47, 0.25);
}
.subcat-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 104px;
  height: 104px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-light);
}
.subcat-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.subcategory-list > a:hover .subcat-preview img {
  transform: scale(1.06);
}
.subcat-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text);
  transition: color 0.15s ease;
}
.subcategory-list > a:hover .subcat-name {
  color: var(--color-primary);
}
/* chevron hint */
.subcat-name::after {
  content: " \203A";
  opacity: 0;
  margin-left: 2px;
  transition: opacity 0.15s ease, margin-left 0.15s ease;
}
.subcategory-list > a:hover .subcat-name::after {
  opacity: 1;
  margin-left: 5px;
}
@media only screen and (max-width: 767px) {
  .subcategory-list {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 0;
  }
  .subcategory-list > a {
    flex-direction: row;
    text-align: left;
    padding: 8px 14px;
    min-height: 68px;
    border-radius: var(--radius-sm);
    animation: none;
  }
  .subcat-preview {
    width: 52px;
    height: 52px;
    margin-bottom: 0;
    margin-right: 14px;
    flex-shrink: 0;
    border-radius: var(--radius-xs);
  }
  .subcat-name {
    font-size: 14px;
  }
  .subcat-name::after {
    content: " \203A";
    opacity: 0.4;
    margin-left: 4px;
  }
}

.products-list .action .button,
.products-grid .actions .button {
  white-space: normal;
}

/* -------------------------------------------- *
 * Product Name
 */
h2.product-name,
h3.product-name,
h4.product-name,
h5.product-name,
p.product-name {
  margin: 0;
  margin-bottom: 0.5em;
  color: var(--color-text);
  font-style: normal;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
  font-size: 13px;
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.4;
}
h2.product-name a,
h3.product-name a,
h4.product-name a,
h5.product-name a,
p.product-name a {
  color: var(--color-text);
}
h2.product-name a:hover,
h3.product-name a:hover,
h4.product-name a:hover,
h5.product-name a:hover,
p.product-name a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.products-grid .product-name,
.products-list .product-name {
  text-transform: none;
  margin-bottom: 6px;
  font-size: 13px;
  font-family: var(--font-heading);
  line-height: 1.35;
}
.products-grid .product-name a,
.products-list .product-name a {
  font-weight: 600;
  color: var(--color-text-dark);
}
.products-grid .product-name a:hover,
.products-list .product-name a:hover {
  color: var(--color-primary);
}

/* ============================================ *
 * Product Grid
 * ============================================ */
/* FD-013 Einheit 3, 18.08.2026: Raster, Toolbar und Kachel stehen jetzt in
   css/listing.css — mobile-first, ohne max-width. Hier bleibt nur, was die
   Kachel innen betrifft. */
.products-grid {
  position: relative;
}

.products-grid > li {
  position: relative;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 12px 12px;
  box-sizing: border-box;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.products-grid > li:hover {
  transform: var(--hover-subtle);
  box-shadow: var(--shadow-subtle);
  border-color: rgba(12, 95, 47, 0.25);
}

.products-grid .product-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Feste Bildzone. Seit keepFrame(false) liefert Magento das natuerliche
     Seitenverhaeltnis: ein Hochformat wird 127x180, ein Quadrat 180x180.
     Ohne feste Hoehe fiel die Box auf die Bildhoehe zusammen, und die Kacheln
     standen unterschiedlich hoch — Preise und Knoepfe verrutschten gegeneinander.
     180px ist keine neue Groesse, sondern die Obergrenze, die das img unten
     ohnehin schon auf jedem Geraet hat (die Regel steht in keinem Media Query). */
  height: 180px;
  border: 0 none !important;
}

.products-grid .product-image img {
  width: auto;
  height: auto;
  max-width: 80%;
  max-height: 180px;
  object-fit: contain;
}

.widget-new-products .products-grid .product-image {
  width: 75%;
  margin-bottom: 15px;
  margin-left: 10%;
}

.products-grid .product-info {
  position: relative;
  padding-bottom: 95px;
}
.products-grid .grid-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.products-grid .actions {
  padding-top: 8px;
  position: absolute;
  bottom: 0;
  min-height: 85px;
  width: 100%;
}

.products-grid .ratings .rating-box {
  margin: 0 auto;
}

.products-grid .ratings .amount {
  display: none;
}

.products-grid .price-box {
  margin: 0 0 4px;
}
.products-grid .price-box .price {
  color: var(--color-text-dark);
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-heading);
}
.products-grid .tax-details {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.products-grid .baseprice {
  font-size: 11px;
  color: var(--color-text-muted);
}

.products-grid .add-to-links {
  margin-bottom: 0;
}

/* Qty input in grid */
.product_list_add_form_grid .product_addtocart_grid_input {
  width: 36px !important;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: var(--radius-xs);
  padding: 4px;
  font-size: 13px;
}

/* Merken link */
.products-grid .favorites_add {
  margin: 4px 0;
}
.products-grid .favorites_add a {
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
}
.products-grid .favorites_add a:hover {
  color: var(--color-primary);
}



.products-grid .product-image {
  margin-bottom: 5px;
}
.products-grid .product-image:before, .products-grid .product-image:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.products-grid .product-image:before {
  background-color: #fff;
  opacity: 0.8;
  z-index: 2;
}
.products-grid .product-image:after {
  background-image: url("https://logisch-bio.de/skin/frontend/rwd/logbio/images/opc-ajax-loader.gif");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}
.products-grid .product-image.loading {
  position: relative;
}
.products-grid .product-image.loading:before, .products-grid .product-image.loading:after {
  display: block;
}

/* ============================================ *
 * Product List
 * ============================================ */
.products-list {
  margin-top: 20px;
  margin-bottom: 20px;
}
.products-list > li {
  display: grid;
  grid-template-columns: 33.33% 1fr;
  gap: 0 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ededed;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}
.products-list > li .product-image {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.products-list > li .product-shop { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
.products-list > li .product-image img {
  max-width: 90%;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.products-list > li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.products-list .product-shop .product-name {
  margin-bottom: 0;
}
.products-list .product-shop .ratings {
  margin: 0;
}
.products-list .product-shop .ratings .rating-box,
.products-list .product-shop .ratings .rating-links {
  display: inline-block;
  margin-right: 7px;
}
.products-list .product-shop .ratings .rating-links {
  margin-top: 4px;
}
.products-list .product-shop .price-box {
  margin-top: 0;
}
.products-list .product-shop .price-box .price {
  font-size: 18px;
}
.products-list .product-shop .action {
  margin: 7px 0;
}
.products-list .product-shop .desc {
  margin-top: 7px;
}
.products-list .product-shop .desc .link-learn {
  display: block;
}
.products-list .product-shop .f-fix {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.products-list .product-shop .f-fix > * {
  width: 100%;
  text-align: right;
}
.products-list .product-shop .product_list_add_form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.products-list .product-shop .favorites_add {
  width: 100%;
}
.products-list .product-shop .btn-cart {
  margin-left: auto;
}

@media only screen and (min-width: 640px) {
  .products-list .product-name a {
    font-size: 18px;
  }
}
@media only screen and (max-width: 639px) {
  .products-list > li { grid-template-columns: 1fr; }
  .products-list > li .product-image,
  .products-list > li .product-shop { grid-column: 1; grid-row: auto; }
  .products-list .product-shop .price-box .special-price {
    padding-left: 0;
  }
  .products-list .product-shop .f-fix > * {
    text-align: left;
  }
}
/* ============================================ *
 * Mini Product List
 * ============================================ */
.mini-products-list li {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}
.mini-products-list .product-image {
  min-width: 50px;
}
.mini-products-list .product-details {
  flex: 1;
  min-width: 0;
}
.mini-products-list .product-details .product-name {
  padding-top: 0;
}

/* ============================================ *
 * Block Cart — Sidebar Redesign
 * ============================================ */
.block-cart .block-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-cart .cart-qty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-heading);
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  padding: 0 6px;
  line-height: 1;
}
.block-cart .summary {
  margin-bottom: 10px;
}
.block-cart .summary .subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  font-family: var(--font-heading);
}
.block-cart .summary .subtotal .label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.block-cart .summary .subtotal .price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
}
.block-cart .actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.block-cart .actions .btn-checkout {
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-cta);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.block-cart .actions .btn-checkout:hover {
  background: var(--color-cta-hover);
  box-shadow: 0 2px 8px rgba(242, 173, 72, 0.4);
}
.block-cart .actions .btn-checkout:active {
  background: var(--color-cta-active);
}
.block-cart .actions .cart-link {
  text-align: center;
  font-size: 12px;
  color: #666;
}
.block-cart .actions .cart-link:hover {
  color: var(--color-primary);
}

/* Cart sidebar items */
.block-cart .mini-products-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.block-cart .mini-products-list li.item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  align-items: flex-start;
}
.block-cart .mini-products-list li.item.last,
.block-cart .mini-products-list li.item:last-child {
  border-bottom: none;
}
.block-cart .mini-products-list .product-image {
  flex-shrink: 0;
  width: 70px;
  min-width: 70px;
}
.block-cart .mini-products-list .product-image img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}
.block-cart .mini-products-list .product-details {
  flex: 1;
  min-width: 0;
  padding-right: 20px;
}
.block-cart .mini-products-list .product-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.block-cart .mini-products-list .product-name a {
  color: var(--color-text);
}
.block-cart .mini-products-list .product-name a:hover {
  color: var(--color-primary);
}
.block-cart .mini-products-list .cart-item-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.block-cart .mini-products-list .cart-item-x {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Mini qty spinner for sidebar — smaller variant */
.qty-spinner-mini {
  gap: 0;
}
.qty-spinner-mini .qty-btn {
  width: 22px;
  height: 22px;
  font-size: 13px;
}
.qty-spinner-mini .input-text.qty {
  width: 28px !important;
  height: 22px;
  font-size: 12px;
  line-height: 22px;
  border: 1px solid #ccc;
  border-left: none;
  border-right: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  -moz-appearance: textfield;
}

.block-cart .mini-products-list .cart-item-qty {
  color: var(--color-text-muted);
  font-weight: 400;
}
.block-cart .mini-products-list .cart-item-price {
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-heading);
}
.block-cart .mini-products-list .cart-item-price-incl {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Remove button — positioned top-right of each item */
.block-cart .mini-products-list .btn-remove-sidebar {
  position: absolute;
  top: 8px;
  right: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
  text-decoration: none;
  line-height: 1;
}
.block-cart .mini-products-list .btn-remove-sidebar:hover {
  color: #c33;
}
.icon-delete {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* Delete button in cart page */
.btn-remove-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.btn-remove-cart:hover {
  color: #c33;
}
.btn-remove-cart .icon-delete {
  width: 20px;
  height: 20px;
}

/* Mini-cart close button — visible only on mobile in header context */
.minicart-close {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease;
}
.minicart-close:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
}
.block-cart {
  position: relative;
}

/* Hide old btn-edit in sidebar (we removed it from template) */
.block-cart .btn-edit {
  display: none;
}

/* ============================================ *
 * Block Reorder — Sidebar Redesign
 * ============================================ */
.block-reorder .block-content {
  padding: 0;
}
.block-reorder .block-subtitle {
  display: none;
}
.block-reorder .reorder-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.block-reorder .reorder-list li.item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
}
.block-reorder .reorder-list li.item:last-child,
.block-reorder .reorder-list li.item.last {
  border-bottom: none;
}
.block-reorder .reorder-list li.item.unavailable {
  opacity: 0.4;
}
.block-reorder .reorder-list .product-image {
  flex-shrink: 0;
  width: 50px;
  min-width: 50px;
}
.block-reorder .reorder-list .product-image img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}
.block-reorder .reorder-list .product-details {
  flex: 1;
  min-width: 0;
}
.block-reorder .reorder-list .product-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.block-reorder .reorder-list .product-name a {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.block-reorder .reorder-list .product-name a:hover {
  color: var(--color-primary);
}
.block-reorder .reorder-list .product-name .checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}
.block-reorder .actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.block-reorder .actions .btn-checkout {
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.block-reorder .actions .btn-checkout:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 2px 8px rgba(12, 95, 47, 0.3);
}
.block-reorder .actions .btn-checkout:active {
  background: rgb(6, 55, 25);
}
.block-reorder .actions .cart-link {
  text-align: center;
  font-size: 12px;
  color: #666;
}
.block-reorder .actions .cart-link:hover {
  color: var(--color-primary);
}

/* ============================================ *
 * Block Viewed — Sidebar Redesign
 * ============================================ */
.block-viewed .mini-products-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.block-viewed .mini-products-list li.item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
}
.block-viewed .mini-products-list li.item:last-child,
.block-viewed .mini-products-list li.item.last {
  border-bottom: none;
}
.block-viewed .mini-products-list .product-image {
  flex-shrink: 0;
  width: 50px;
  min-width: 50px;
}
.block-viewed .mini-products-list .product-image img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}
.block-viewed .mini-products-list .product-details {
  flex: 1;
  min-width: 0;
}
.block-viewed .mini-products-list .product-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.block-viewed .mini-products-list .product-name a {
  color: var(--color-text);
}
.block-viewed .mini-products-list .product-name a:hover {
  color: var(--color-primary);
}

.mini-products-images-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mini-products-images-list li.item {
  margin: 0;
}
.mini-products-images-list li.item .product-image {
  display: block;
}
.mini-products-images-list li.item .product-image img {
  width: 100%;
  max-width: 100%;
}

/* ============================================ *
 * Catalog - List
 * ============================================ */
.category-image {
  border: 1px solid #cccccc;
  padding: 10px;
}
.category-image img {
  width: 100%;
  max-width: 100%;
}
/* ============================================ *
 * Layered Navigation — styled like #sidebar-nav
 * ============================================ */

/* Block wrapper */
.block-layered-nav {
  margin-bottom: 20px;
  border: 0 none;
}

/* Title — green header matching sidebar-nav */
.block-layered-nav .block-title {
  border: 0 none !important;
  background: var(--color-primary) !important;
  padding: 12px 16px !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: 0;
}
.block-layered-nav .block-title strong {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Subtitle filter toggle (hidden on desktop) */
.block-layered-nav .block-subtitle--filter {
  display: none;
}

/* Content container */
.block-layered-nav .block-content {
  background: #fff;
  padding: 0;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.block-layered-nav .block-content .toggle-tabs {
  display: none;
}

/* Filter group headings (dt) */
.block-layered-nav .block-content > dl > dt {
  margin: 0;
  padding: 10px 16px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.4;
  text-transform: uppercase;
  border-bottom: 1px solid #f0f0f0;
  background: none;
  display: block;
  position: relative;
}
.block-layered-nav .block-content > dl > dt:after {
  display: none;
}
.block-layered-nav .block-content > dl > dt:hover {
  background-color: rgba(12, 95, 47, 0.04);
}

/* Filter values (dd) */
.block-layered-nav .block-content > dl > dd {
  padding: 0;
  margin: 0;
  border: none;
  border-bottom: 1px solid #f0f0f0;
}
.block-layered-nav .block-content > dl > dd:last-child {
  border-bottom: none;
}

.block-layered-nav dl dd {
  margin: 0;
}
.block-layered-nav dl dd ol > li > span,
.block-layered-nav dl dd ol > li > a {
  padding: 10px 16px;
  display: block;
  color: #4a4a4a;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.block-layered-nav dl dd ol > li > a:hover {
  color: var(--color-primary);
  background-color: rgba(12, 95, 47, 0.04);
}
.block-layered-nav dl dd ol > li > a .count {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Currently active filters */
.block-layered-nav .currently {
  padding: 12px 16px;
  border-bottom: none;
}

@media only screen and (min-width: 768px) {
  .block-layered-nav .block-content > dl > dt {
    padding-left: 16px;
  }
  .block-layered-nav .block-content > dl > dt:after {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .sidebar .block.block-layered-nav {
    border-bottom: none;
  }

  .block-layered-nav--no-filters .block-title {
    display: none;
  }

  .block-layered-nav .block-content {
    padding-top: 0;
    margin-top: 0;
  }
  .block-layered-nav .block-content > dl > dt {
    cursor: pointer;
    padding: 12px 36px 12px 16px;
  }
  .block-layered-nav .block-content > dl > dt:after {
    content: '';
    display: block;
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 0;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: translateY(-50%) rotate(-45deg);
    transition: transform 0.2s ease;
  }
  .block-layered-nav .block-content > dl > dt:hover {
    color: var(--color-primary);
  }
  .block-layered-nav .block-content > dl > dd {
    display: none;
  }
  .block-layered-nav .block-content.accordion-open > dl > dt.current:after {
    transform: translateY(-50%) rotate(45deg);
  }
  .block-layered-nav .block-content.accordion-open > dl > dd.current {
    display: block;
  }

  .block-layered-nav .block-subtitle--filter {
    background-color: var(--color-primary);
    border: 0;
    margin-bottom: 0;
    display: block;
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    position: relative;
  }
  .block-layered-nav .block-subtitle--filter:after {
    content: '';
    display: block;
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 0;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-50%) rotate(-45deg);
    transition: transform 0.2s ease;
  }
  .block-layered-nav .block-subtitle--filter:hover {
    background-color: var(--color-primary);
    color: #fff;
  }
  .block-layered-nav .block-subtitle--filter.active:after {
    transform: translateY(-50%) rotate(45deg);
  }

  #narrow-by-list,
  #narrow-by-list2 {
    padding: 0;
    border: 1px solid #e0e0e0;
    border-top: 0;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }

  .block-layered-nav dl ol > li > a,
  .block-layered-nav dl ol > li > span {
    padding: 7px;
    margin: 5px;
  }

  .block-layered-nav dl ol > li > a {
    color: var(--color-text);
    background-color: var(--color-bg-light);
    padding: 5px 10px;
  }
  .block-layered-nav dl ol > li > a:hover {
    text-decoration: none;
    background: #ececec;
  }
}
.block-layered-nav .currently .block-subtitle {
  display: none;
  margin: 0;
  margin-bottom: 10px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
}
.block-layered-nav .currently ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.block-layered-nav .currently ol li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-family: var(--font-heading);
  font-size: 13px;
}
.block-layered-nav .currently ol li .label {
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: 11px;
}
.block-layered-nav .currently ol li .value {
  font-weight: 600;
  color: var(--color-text);
}

/* Remove filter: inline SVG trash icon */
.block-layered-nav .currently .btn-remove-filter {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius-sm);
  color: #999;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.block-layered-nav .currently .btn-remove-filter .icon-delete {
  width: 16px;
  height: 16px;
}
.block-layered-nav .currently .btn-remove-filter:hover {
  color: #c62828;
  background-color: #fce4ec;
  border-color: #ef9a9a;
}

/* "Alles entfernen" — clear button */
.block-layered-nav .actions {
  padding: 8px 16px 12px;
  margin: 0;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}
.block-layered-nav .actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #c62828;
  border: 1px solid #ef9a9a;
  border-radius: var(--radius-sm);
  background: #fff;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.block-layered-nav .actions a:hover {
  background: #fce4ec;
  color: #b71c1c;
}

/* ============================================ *
 * Catalog - Product
 * ============================================ */
.product-view .product-essential .extra-info .ratings .rating-box,
.product-view .product-essential .extra-info .ratings .amount {
  float: left;
}
.product-view .product-essential .extra-info .ratings .rating-box {
  margin-top: 8px;
  margin-right: 10px;
}
.product-view .product-essential .extra-info .ratings:after {
  content: '';
  display: table;
  clear: both;
}
@media only screen and (min-width: 768px) {
  .product-view .product-essential {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 0 24px;
    align-items: start;
  }
  .product-view .product-essential > #product_addtocart_form {
    display: contents;
  }
  .product-view .product-essential .product-img-box {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }
  .product-view .product-essential .product-img-box img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .product-view .product-essential .product-info-col {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .product-info-col .product-shop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    width: 100%;
  }
  .product-info-col .product-name {
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
    text-align: right;
  }
}
.product-view .product-shop .product-name .h1,
.product-view .product-img-box .product-name h1 {
  color: var(--color-text-dark);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  margin-bottom: 12px;
  border: 0;
}
.product-view .product-shop .product-name {
  display: block;
}
.product-view .product-shop .product-name .h1 {
  font-size: var(--text-xl);
  margin-bottom: 5px;
}
.product-view .product-shop .extra-info {
  padding-right: 0;
  width: 100%;
}
.product-view .product-shop .price-info {
  padding-left: 0;
  text-align: right;
  margin-top: 12px;
  margin-bottom: 20px;
}
.product-view .product-shop .extra-info {
  max-width: 100%;
  margin-bottom: 14px;
}
.product-view .product-shop .tax-details {
  display: block;
  font-size: 14px;
  color: #777;
  margin-top: 6px;
}
.product-view .product-shop .baseprice-box {
  font-size: 14px;
  color: #777;
  margin-top: 3px;
}
.product-view .product-shop .baseprice-box .price {
  font-size: 14px !important;
  color: #555 !important;
  font-weight: 600;
}
.product-view .product-shop .short-description {
  margin-bottom: 10px;
}
.product-view .product-shop .ratings {
  margin-bottom: 8px;
}
.product-view .product-shop .availability {
  font-size: 16px;
}
.product-view .product-shop .price-box {
  margin-top: 0;
}
.product-view .product-shop .price-box .old-price,
.product-view .product-shop .price-box .special-price,
.product-view .product-shop .price-box .regular-price {
  padding-right: 0;
  line-height: 1.2;
}
.product-view .product-shop .price-box .regular-price .price,
.product-view .product-shop .price-box .special-price .price,
.product-view .product-shop .price-box .full-product-price .price {
  color: var(--color-text-dark);
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font-heading);
}
.product-view .product-shop .price-box .special-price .price-label {
  font-size: 16px;
  text-transform: uppercase;
}
.product-view .product-shop .price-box .special-price span.weee {
  color: var(--color-text);
}
.product-view .product-shop .price-box .special-price span.weee span.price {
  font-size: 16px;
}
.product-view .product-shop .price-box .price-excluding-tax,
.product-view .product-shop .price-box .price-including-tax {
  display: block;
  line-height: 1.2;
  color: var(--color-text);
}
.product-view .product-shop .price-box .price-excluding-tax .label,
.product-view .product-shop .price-box .price-including-tax .label {
  font-size: 16px;
  font-weight: 300;
}
.product-view .product-shop .price-box .price-excluding-tax .price,
.product-view .product-shop .price-box .price-including-tax .price {
  font-size: 20px;
}
.product-view .price-box.map-info a {
  display: inherit;
}
.product-view .old-price .price-label {
  display: none;
}
.product-view .add-to-cart-wrapper {
  padding-top: 4px;
  margin-left: auto;
}
.product-view .block-related {
  padding-top: 4px;
}

@media only screen and (max-width: 1023px) {
  .product-view .product-shop .price-box .price-excluding-tax .label,
  .product-view .product-shop .price-box .price-including-tax .label {
    font-size: 15px;
  }
  .product-view .product-shop .price-box .price-excluding-tax .price,
  .product-view .product-shop .price-box .price-including-tax .price {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .product-view .product-shop .price-box .price-excluding-tax .label,
  .product-view .product-shop .price-box .price-including-tax .label {
    font-size: 16px;
  }
  .product-view .product-shop .price-box .price-excluding-tax .price,
  .product-view .product-shop .price-box .price-including-tax .price {
    font-size: 20px;
  }
}
@media only screen and (max-width: 639px) {
  .product-view .product-shop .price-box .price-excluding-tax,
  .product-view .product-shop .price-box .price-including-tax {
    margin-bottom: 5px;
  }
  .product-view .product-shop .price-box .price-excluding-tax span,
  .product-view .product-shop .price-box .price-including-tax span {
    display: block;
  }
}
.product-img-box .product-name h1 {
  border: 0;
}
.product-img-box .product-image {
  margin-bottom: 10px;
  text-align: center;
  border: 0 none;
}
.product-img-box .product-image img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}
.product-image-gallery {
  position: relative;
}
.product-image-gallery .gallery-image {
  display: none;
}
.product-image-gallery .gallery-image.visible {
  display: block;
}
.product-image-gallery .gallery-image.visible.hidden {
  visibility: hidden;
}
.product-image-gallery:before, .product-image-gallery:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.product-image-gallery:before {
  background-color: #fff;
  opacity: 0.8;
  z-index: 2;
}
.product-image-gallery:after {
  background-image: url("https://logisch-bio.de/skin/frontend/rwd/logbio/images/opc-ajax-loader.gif");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}
.product-image-gallery.loading {
  position: relative;
}
.product-image-gallery.loading:before, .product-image-gallery.loading:after {
  display: block;
}

.product-image-thumbs li {
  display: inline-block;
}
.product-image-thumbs li:first-child {
  margin-left: -1px;
}
.product-image-thumbs a {
  display: inline-block;
  border: 1px solid transparent;
}

.no-touch .product-image-thumbs a:hover {
  border-color: #c7c7c7;
}

.product-view .product-shop,
.product-img-box,
.product-collateral,
.product-view .block-related,
.box-collateral {
  margin-bottom: 10px;
}

.product-view .add-to-box:after,
.product-view .add-to-cart:after {
  content: '';
  display: table;
  clear: both;
}
.add-to-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.product-view .add-to-cart {
  padding: 0;
  margin-bottom: 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.product-view .add-to-cart .qty-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: auto;
  float: none;
  margin: 0;
}
.product-view .add-to-cart .qty-wrapper label {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  font-family: var(--font-heading);
  line-height: 1;
  float: none;
  margin: 0;
}
.product-view .add-to-cart .qty-wrapper .qty {
  float: none;
  height: 36px;
  width: 44px;
  text-align: center;
  border: 1px solid #ccc;
  border-left: none;
  border-right: none;
  border-radius: 0;
  font-size: 16px;
  font-family: var(--font-heading);
  margin: 0;
  padding: 0;
}
/* FD-013 Einheit 6, 18.08.2026: 36 px entfallen — der Mengenwaehler der
   Detailseite steht in css/product.css auf dem Zielmass 44 px. */
.product-view .add-to-cart-buttons,
.product-view .product-options-bottom .price-box {
  min-height: auto;
  float: none;
  margin: 0;
  max-width: 100%;
}
.product-view .add-to-cart-buttons .button,
.product-view .add-to-cart-buttons .paypal-logo {
  margin-bottom: 0;
}
.product-view .add-to-cart-buttons .paypal-logo {
  clear: left;
  text-align: center;
}
.product-view .add-to-cart-buttons .paypal-logo .paypal-button {
  margin: 0 auto;
  display: block;
  width: 170px;
}
.product-view .add-to-cart-buttons .paypal-logo .bml_button {
  display: block;
  width: 174px;
  margin: 0 auto;
}
.product-view .add-to-cart-buttons .paypal-logo .bml_button a {
  text-align: center;
}
.product-view .add-to-cart-buttons .paypal-logo .paypal-or {
  display: block;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  line-height: 1;
  text-align: center;
}
.product-view .add-to-cart-buttons .button {
  min-height: 44px;
  line-height: 44px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-heading);
  background: var(--color-primary);
  color: #fff;
  padding: 0 28px;
  border-radius: var(--radius-sm);
  float: none;
  white-space: nowrap;
}
.product-view .add-to-cart-buttons .button:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 2px 8px rgba(12, 95, 47, 0.3);
}
.product-view .add-to-cart-buttons .button:active,
.product-view .add-to-cart-buttons .button:focus {
  background: rgb(6, 55, 25);
  color: #fff;
}
@media only screen and (max-width: 639px) {
  .product-view .add-to-cart-buttons .paypal-or {
    line-height: 20px;
  }
  .product-view .add-to-cart-buttons .paypal-logo,
  .product-view .add-to-cart-buttons .paypal-or,
  .product-view .add-to-cart-buttons .paypal-button,
  .product-view .add-to-cart-buttons .button {
    text-align: center;
    width: 100%;
    display: block;
    margin-right: 0;
    margin-left: 0;
    float: none;
  }
}
/* This is the "or" that separates the "Add to Cart" and "Add to X" links */
.add-to-box .or {
  display: none;
}

.product-view .add-to-links {
  margin-top: 12px;
  margin-right: 0;
  list-style: none;
  padding: 0;
}
.product-view .add-to-links:after {
  content: '';
  display: table;
  clear: both;
}
.product-view .add-to-links li {
  display: inline-block;
}
.product-view .add-to-links a {
  padding: 0;
  margin: 0;
  border-right: none;
}

.product-view .sharing-links {
  float: left;
}
.product-view .sharing-links:after {
  content: '';
  display: table;
  clear: both;
}
.product-view .sharing-links li {
  float: left;
  padding: 0 7px 7px;
}
.product-view .sharing-links a {
  text-indent: -9999px;
  display: block;
  width: 26px;
  height: 26px;
}
.product-view .sharing-links a:hover {
  opacity: 0.8;
}
.product-view .sharing-links a.link-wishlist {
  background-position: 0 -225px;
}
.product-view .sharing-links a.link-compare {
  background-position: 0 -250px;
}
.product-view .sharing-links a.link-email-friend {
  background-position: 0 -322px;
}
.product-view .sharing-links a.link-facebook {
  background-position: 0 -425px;
}
.product-view .sharing-links a.link-twitter {
  background-position: 0 -372px;
}

@media only screen and (max-width: 639px) {
  .add-to-box .add-to-links a {
    float: none;
    width: auto;
    text-indent: 0;
  }
}
/* FD-013 Einheit 6, 18.08.2026: dd gibt es nicht mehr, die Reiter sind
   <details>. Die Ueberschrift steht jetzt im summary. */
.collateral-tab .tab-container h2 {
  display: none;
}

/* Product specs table (Zusatzinformation tab) */
.product-view .data-table {
  width: 100%;
  border-collapse: collapse;
  border: none !important;
  font-family: var(--font-heading);
  font-size: 14px;
}
.product-view .data-table th.label {
  background-color: #f8f8f8 !important;
  color: #555 !important;
  font-weight: 600;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.product-view .data-table td.data {
  padding: 10px 14px !important;
  color: var(--color-text-dark);
  border-bottom: 1px solid var(--color-border);
}
.product-view .tab-content .std {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  font-family: var(--font-heading);
}

/* Ecoinform product data tab */
.ecoinform-content {
  font-family: var(--font-heading);
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}
.ecoinform-content #prodTitle {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-dark);
  padding: 0;
  margin-bottom: 6px;
  font-family: var(--font-heading);
}
.ecoinform-content #prodSubTitle {
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  color: #666;
  line-height: 1.5;
}
.ecoinform-content .hlCell {
  background-color: transparent;
  color: #888;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 3px 2px;
  margin: 12px 0 0 0;
}
.ecoinform-content .mTitle {
  color: var(--color-text-dark);
  font-size: 14px;
  font-weight: 700;
  padding: 20px 0 8px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}
.ecoinform-content .mTitle b {
  font-weight: 700;
}
.ecoinform-content .product-attribute-specs-table {
  border: none;
  float: left;
  margin: 2px 8px 2px 0;
  font-size: 13px;
}
.ecoinform-content .product-attribute-specs-table th.label {
  background-color: #f5f5f5;
  color: #666;
  font-weight: 600;
  font-size: 12px;
  padding: 6px 10px;
  border: none;
}
.ecoinform-content .product-attribute-specs-table td.data {
  padding: 6px 10px;
  color: var(--color-text-dark);
  border: none;
}
.ecoinform-content .longText {
  line-height: 1.6;
  color: #444;
}
.ecoinform-content .fussnote {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-style: italic;
}
.ecoinform-content img.quality_logo {
  display: inline-block;
  margin: 4px;
  vertical-align: middle;
  max-height: 40px;
}
.ecoinform-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 16px 0;
}
.ecoinform-content .info_source {
  font-style: italic;
  margin-top: 30px;
  font-size: 12px;
  color: #888;
}
.ecoinform-content .info_ean {
  color: #c0c0c0;
  font-size: 8px;
}
.ecoinform-image-box {
  float: right;
  width: 190px;
  text-align: center;
}
.ecoinform-data-date {
  padding-top: 5px;
  font-size: 12px;
  color: #888;
}
.ecoinform-row {
  clear: left;
}
.ecoinform-specs-group {
  padding: 1px 3px;
  margin-left: 3px;
}
.ecoinform-clearfix {
  clear: both;
}

/* Kontrollstellen badge */
.product-view .kontrollstellen {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(12, 95, 47, 0.08);
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  margin-top: 8px;
  letter-spacing: 0.3px;
}

/* More views styling */
.more-views h2 {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin: 12px 0 8px;
}
.more-views ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}
.more-views ul li a {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 2px;
  transition: border-color 0.15s ease;
}
.more-views ul li a:hover {
  border-color: var(--color-primary);
}
/* Hide "Mehr Ansichten" entirely when only one thumbnail */
.more-views ul li:only-child {
  display: none;
}
.more-views:has(li:only-child) {
  display: none;
}

/* Hide old sharing links */
.product-view .sharing-links {
  display: none;
}

/* Merken link styling */
.product-view .add-to-links a {
  font-size: 13px;
  color: #888;
  text-decoration: none;
  border-right: none !important;
  transition: color 0.15s ease;
}
.product-view .add-to-links a:hover {
  color: var(--color-primary);
}

/* Short description */
.product-view .product-shop .short-description .std {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  font-family: var(--font-heading);
}

@media only screen and (min-width: 768px) {
  .product-collateral .toggle-tabs {
    display: block;
    width: 100%;
    position: relative;
    border: none;
    border-bottom: 2px solid #eee;
    background-color: transparent;
  }
  .product-collateral .toggle-tabs li {
    float: left;
    border: none;
  }
  .product-collateral .toggle-tabs li > span {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    user-select: none;
    display: inline-block;
    padding: 0 24px;
    height: 42px;
    line-height: 42px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
    color: #888;
    position: relative;
    bottom: -2px;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .product-collateral .toggle-tabs li.current {
    border: none;
  }
  .product-collateral .toggle-tabs li.current > span {
    background-color: transparent;
    z-index: 5;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
  }
  .product-collateral .toggle-tabs li:hover span {
    color: var(--color-primary);
  }
  .product-collateral .toggle-tabs li:first-child {
    border-left: none;
  }
  .product-collateral .toggle-tabs:after {
    content: '';
    display: table;
    clear: both;
  }
  .product-collateral > dl {
    width: 100%;
  }
  .product-collateral > dl > dt {
    display: none;
  }
  .product-collateral > dl > dd {
    width: 100%;
    display: none;
    padding: 20px 0;
    border: none;
  }
  .product-collateral > dl > dd.current {
    display: block;
    animation: tabFadeIn 0.25s ease-out;
  }
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media only screen and (max-width: 767px) {
  .product-collateral .toggle-tabs {
    display: none;
  }
  .product-collateral > dl > dt {
    margin: 0;
    margin-bottom: 10px;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: bold;
    font-style: normal;
    line-height: 1.4;
    text-rendering: optimizeSpeed;
    text-transform: uppercase;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    user-select: none;
    font-weight: normal;
    margin-bottom: 0;
    padding: 7px 10px 7px 24px;
    border-width: 1px;
    border-style: solid;
    border-color: #cccccc;
    position: relative;
    background-color: var(--color-bg-light);
    display: block;
  }
  .product-collateral > dl > dt:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 4px solid var(--color-primary);
    border-bottom: none;
    left: 10px;
    top: 50%;
    margin-top: -3px;
  }
  .product-collateral > dl > dt:hover {
    background-color: #ececec;
  }
  .product-collateral > dl > dd {
    padding: 10px;
    margin: 0;
    border-width: 0 1px;
    border-style: solid;
    border-color: #cccccc;
  }
  .product-collateral > dl > dd:last-child {
    border-width: 0 1px 1px 1px;
  }
  .product-collateral > dl > dt {
    cursor: pointer;
    border-bottom-width: 0;
  }
  .product-collateral > dl > dt:hover {
    color: var(--color-primary);
  }
  .product-collateral > dl > dt:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid var(--color-primary);
    border-right: none;
  }
  .product-collateral > dl > dt.last {
    border-bottom-width: 1px;
  }
  .product-collateral > dl > dd {
    display: none;
  }
  .product-collateral.accordion-open > dl > dt.current {
    border-bottom-width: 1px;
  }
  .product-collateral.accordion-open > dl > dt.current:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 4px solid var(--color-primary);
    border-bottom: none;
    left: 6px;
    top: 50%;
    margin-top: -3px;
  }
  .product-collateral.accordion-open > dl > dd.current {
    display: block;
    animation: tabFadeIn 0.2s ease-out;
  }
}
@media only screen and (max-width: 767px) {
  .ecoinform-image-box {
    float: none;
    width: 100%;
    margin-bottom: 16px;
  }
  .ecoinform-content .product-attribute-specs-table {
    float: none;
    width: 100%;
    margin: 4px 0;
  }
  .product-view .product-name h1,
  .product-view .product-name .h1 {
    font-size: 22px;
    line-height: 1.3;
  }
  .product-view .product-shop {
    margin-top: 15px;
  }
  .product-img-box {
    text-align: center;
  }
  .product-img-box img {
    max-height: 250px;
    width: auto;
    object-fit: contain;
  }
}
@media only screen and (min-width: 768px) {
  .product-view .product-shop .product-name {
    display: block;
  }

  .product-img-box .product-name {
    display: none;
  }
}
@media only screen and (max-width: 639px) {
  .product-view .product-shop,
  .product-img-box,
  .product-collateral,
  .product-view .block-related,
  .box-collateral {
    margin-bottom: 15px;
  }
}
.product-view .ratings .rating-links {
  clear: left;
  float: left;
  margin-top: 0;
}

#product-attribute-specs-table {
  max-width: 50em;
  border: 1px solid silver;
}
#product-attribute-specs-table th {
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
}

/* -------------------------------------------- *
 * Catalog - Grouped Product List
 */
.grouped-items-table-wrapper {
  border: solid 1px silver;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
}
.grouped-items-table-wrapper tbody tr:last-child td {
  border-bottom: none;
}
@media only screen and (max-width: 639px) {
  .grouped-items-table-wrapper {
    margin-bottom: 15px;
  }
}

.grouped-items-table .name-wrapper {
  color: var(--color-primary);
  font-family: var(--font-heading);
}
.grouped-items-table .qty-wrapper {
  padding-top: 7px;
}
.grouped-items-table .qty-label {
  margin-left: 7px;
}
.grouped-items-table td {
  padding: 4px;
}
.grouped-items-table td:last-child {
  width: 30%;
  text-align: left;
}
.grouped-items-table .price-box {
  text-align: right;
}

/* -------------------------------------------- *
 * Catalog - Product Options
 */
.product-options {
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 15px 15px;
  border: 1px solid #cccccc;
  clear: both;
  position: relative;
}

.product-options p.required {
  position: absolute;
  top: 6px;
  right: 15px;
  text-align: right;
}

@media only screen and (max-width: 1023px) {
  .product-view .product-options .required {
    position: static;
  }
}
.product-options dt {
  margin: 10px 0 3px;
  font-weight: normal;
}

.product-options dt:first-child {
  margin-top: 0;
}

.product-options dd .qty-holder {
  display: block;
  padding: 10px 0 0 0;
}

.product-options dd .qty-holder .qty {
  width: 3em;
}

.product-options dd .qty-holder label {
  vertical-align: middle;
}

.product-options dd .qty-disabled {
  background: none;
  border: 0;
  padding: 0 2px;
}

.product-options dd {
  padding: 0 0 10px 0;
  margin: 0 0 5px;
  border-bottom: 1px solid #ededed;
}

.product-options dl.last dd.last {
  border-bottom: 0;
  padding-bottom: 5px;
  margin-bottom: 0;
}

.product-options dd .input-text {
  width: 98%;
}

.product-options dd .input-box {
  padding-top: 0;
}

.product-options dd input.datetime-picker {
  width: 150px;
}

.product-options dd .time-picker {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  padding: 2px 0;
  vertical-align: middle;
}

.product-options dd textarea {
  width: 98%;
  height: 8em;
}

.product-options dd select {
  width: 330px;
  max-width: 100%;
}

.product-options ul.options-list {
  margin-right: 5px;
}

.product-options ul.options-list li {
  line-height: 1.5;
  margin-bottom: 7px;
}

.product-options ul.options-list li:last-child {
  margin-bottom: 0;
}

.product-options ul.options-list .radio,
.product-options ul.options-list .checkbox {
  float: left;
  margin-top: 5px;
}

.product-options ul.options-list .label {
  display: block;
}

.product-options ul.options-list label {
  font-weight: normal;
}

.product-options p.note {
  margin: 0;
  font-size: 11px;
}

.product-options-bottom {
  background-color: var(--color-bg-light);
  padding: 15px 20px;
  border: 1px solid #cccccc;
  border-top: 0;
  margin-bottom: 10px;
}

.product-options-bottom:after {
  content: '';
  display: table;
  clear: both;
}

.product-options-bottom .product-pricing,
.product-options-bottom .tier-prices {
  float: right;
  margin: 0;
  padding: 0 0 10px;
  border: 0;
  background: 0;
  color: var(--color-text);
}
@media only screen and (max-width: 1279px) {
  .product-options-bottom .product-pricing,
  .product-options-bottom .tier-prices {
    float: none;
    width: 100%;
    text-align: right;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #cccccc;
  }
}

.product-options-bottom .tier-prices li {
  background: 0;
  padding: 2px 0;
}

.product-options-bottom .tier-prices .price,
.product-options-bottom .tier-prices .benefit {
  color: var(--color-text);
}

/* "display: none" should be removed if products on site have a long list of product options and those product options */
/*  affect the price so that the customer can see the updated price close to the "Add to Cart" button */
.product-options-bottom .price-box {
  display: none;
  float: right;
  margin: 0 0 10px;
  padding: 0;
}

@media only screen and (max-width: 639px) {
  .product-options-bottom .price-box .price-as-configured {
    text-align: right;
  }
  .product-options-bottom .price-box .price-as-configured .price-label {
    display: block;
  }
}
.product-options-bottom .price-tax {
  float: left;
}

/* -------------------------------------------- *
 * Related Products
 */
/* Block: Related */
.block-related li {
  margin-bottom: 7px;
}
.block-related .block-title {
  border-bottom: none;
}
.block-related .block-title h2 {
  margin: 0;
  margin-bottom: 0.5em;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
  margin-bottom: 0;
}
.block-related .block-subtitle {
  margin-bottom: 7px;
}
.block-related .product {
  margin-left: 20px;
  position: relative;
}
.block-related .checkbox {
  float: left;
  margin-top: 36px;
}
.block-related .product-details {
  margin-left: 90px;
}
.block-related .product-name {
  margin-bottom: 3px;
}
.block-related .product-details .price-box {
  margin: 2px 0 3px;
}
.block-related .product-details .price-box a,
.block-related .product-details .price-box p,
.block-related .product-details .price-box span {
  float: left;
  margin-left: 3px;
}
.block-related .product-details .price-box a:first-child,
.block-related .product-details .price-box p:first-child,
.block-related .product-details .price-box span:first-child {
  margin-left: 0;
  font-size: 16px;
  padding-right: 5px;
  padding-left: 5px;
}
.block-related .product-details .price-box:after {
  content: '';
  display: table;
  clear: both;
}
.block-related .link-wishlist {
  display: none;
}

/* -------------------------------------------- *
 * Upsell Products
 */
.box-up-sell {
  margin-top: 20px;
}
.box-up-sell .ratings {
  display: none;
}

/* ============================================ *
 * Catalog - MSRP MAP Popup
 * ============================================ */
.cart-msrp-totals {
  color: #d00;
  font-size: 12px !important;
  font-weight: bold;
  margin: 10px 10px 0;
  padding: 10px;
  text-align: right;
  text-transform: uppercase;
}

.map-cart-sidebar-total {
  color: #d00;
  display: block;
  font-size: 10px;
  font-weight: bold;
  text-align: left;
  padding: 2px 5px;
}

.map-popup {
  background: #fff;
  border: 5px solid #cccccc;
  margin: 12px 0 0;
  position: absolute;
  text-align: left;
  width: 450px;
  z-index: 100;
}
@media only screen and (min-width: 768px) {
  .map-popup.map-popup-right {
    left: 10px !important;
  }
  .map-popup.map-popup-left {
    left: auto !important;
    right: 10px !important;
  }
}
@media only screen and (max-width: 767px) {
  .map-popup {
    width: 100%;
    left: 0 !important;
  }
}
.map-popup .map-popup-heading {
  padding: 8px 10px;
  margin-right: 40px;
  width: auto;
}
.map-popup .map-popup-heading h3 {
  font-size: 14px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: break-word;
  text-align: left;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 639px) {
  .map-popup .map-popup-heading h3 {
    text-align: center;
  }
}
.map-popup .map-popup-close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 36px;
  width: 36px;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}
.map-popup .map-popup-content {
  border-top: 1px solid #ededed;
  padding: 10px;
  margin: 0 10px;
  overflow: hidden;
  text-align: left;
}
@media only screen and (max-width: 639px) {
  .map-popup .map-popup-content {
    text-align: center;
  }
}
.map-popup .map-popup-checkout {
  padding: 10px 0;
}
.map-popup .map-popup-checkout form:after {
  content: '';
  display: table;
  clear: both;
}
.map-popup .map-popup-checkout span {
  display: block;
}
.map-popup .map-popup-checkout .button {
  float: left;
  margin: 0 2px;
  clear: left;
}
.map-popup .map-popup-checkout .additional-addtocart-box {
  float: left;
  min-width: 210px;
}
.map-popup .map-popup-checkout .additional-addtocart-box li {
  list-style-type: none;
}
.map-popup .map-popup-checkout .paypal-logo {
  width: auto;
}
.map-popup .map-popup-checkout .paypal-logo a {
  display: inline-block;
  float: left;
  clear: left;
}
.map-popup .map-popup-checkout .paypal-logo .paypal-or {
  float: left;
  text-align: center;
  padding: 5px 15px;
  clear: left;
}
.map-popup .map-popup-checkout .paypal-logo:after {
  content: '';
  display: table;
  clear: both;
}
.map-popup .map-popup-checkout .paypal-logo .bml_button a {
  clear: left;
}
@media only screen and (max-width: 639px) {
  .map-popup .map-popup-checkout {
    text-align: center;
  }
  .map-popup .map-popup-checkout .button,
  .map-popup .map-popup-checkout .additional-addtocart-box,
  .map-popup .map-popup-checkout .paypal-logo a,
  .map-popup .map-popup-checkout .paypal-logo .paypal-or {
    float: none;
  }
  .map-popup .map-popup-checkout .additional-addtocart-box {
    min-width: 0;
  }
  .map-popup .map-popup-checkout .paypal-logo .paypal-or {
    margin: 0;
    margin-bottom: 10px;
  }
}
.map-popup .map-popup-checkout:after {
  content: '';
  display: table;
  clear: both;
}
.map-popup .map-popup-price {
  padding: 10px 0;
}
@media only screen and (max-width: 639px) {
  .map-popup .map-popup-price {
    text-align: center;
    padding-top: 0;
  }
}
.map-popup .map-popup-price .price-box,
.map-popup .map-popup-price .price-box .special-price {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.map-popup .map-popup-price .price-box .minimal-price-link {
  display: inline-block;
}
.map-popup .map-popup-text {
  padding: 10px 0;
  margin: 0 10px;
  word-wrap: break-word;
}
.map-popup .map-popup-text,
.map-popup .map-popup-only-text {
  border-top: 1px solid #ededed;
}

/* ============================================ *
 * Catalog - MSRP Product Listing
 * ============================================ */
.price-box .map-link {
  display: block;
  text-align: center;
}

/* ============================================ *
 * Catalog - Compare
 * ============================================ */
.block-compare .product-name:after {
  content: '';
  display: table;
  clear: both;
}

.compare-table .product-image {
  display: inline-block;
}

.compare-table .product-shop-row.top td {
  padding-bottom: 0;
  border-bottom: 0;
}
.compare-table .product-shop-row.bottom td {
  padding-top: 0;
}

/* ============================================ *
 * Checkout - Cart Page Layout (Flexbox)
 * ============================================ */
.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.cart > .page-title,
.cart > .crosssell {
  flex: 0 0 100%;
}
.cart > form {
  flex: 3;
  min-width: 0;
}
.cart-sidebar {
  flex: 2;
  min-width: 0;
}

.cart .button {
  white-space: normal;
}

.cart-totals,
.cart-forms .discount,
.cart-forms .giftcard,
.cart-forms .shipping {
  padding: 10px;
  background-color: var(--color-bg-light);
  border: 1px solid #cccccc;
  margin-bottom: 20px;
}

.checkout-cart-index #postcode {
  width: 100%;
}

/* Both-prices: cart items need full width (extra columns) */
.display-both-prices > form {
  flex: 0 0 100%;
}
.display-both-prices .cart-sidebar {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.display-both-prices .cart-sidebar > .cart-forms,
.display-both-prices .cart-sidebar > .cart-totals {
  flex: 1;
  min-width: 0;
}

/* Tablet: items full-width, sidebar forms side by side */
@media only screen and (max-width: 1023px) {
  .cart > form {
    flex: 0 0 100%;
  }
  .cart-sidebar {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
  }
  .cart-sidebar > .cart-forms,
  .cart-sidebar > .cart-totals {
    flex: 1;
    min-width: 0;
  }
}

/* Mobile: everything stacked */
@media only screen and (max-width: 639px) {
  .cart-sidebar {
    flex-direction: column;
  }
}

/* ============================================ *
 * Checkout - Cart
 * ============================================ */
.cart .page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ededed;
}
.cart .page-title h1 {
  border-bottom: none;
  margin-bottom: 6px;
}

.checkout-types {
  text-align: right;
  max-width: 100%;
  /* We always want this shipping method to display on its own line */
}
.checkout-types li {
  vertical-align: top;
  margin: 0 0 5px 5px;
}
.checkout-types li img {
  display: inline;
  vertical-align: top;
}
.checkout-types li:first-child {
  margin-left: 0;
}
.checkout-types .method-checkout-cart-methods-multishipping {
  display: block;
}
.checkout-types.top li {
  display: inline-block;
}
.checkout-types.top .bml_button {
  display: inline-block;
  vertical-align: top;
}
.checkout-types.top .bml_button img {
  display: block;
}
.checkout-types.top .paypal-logo .paypal-or {
  margin-top: 5px;
}
.checkout-types.bottom .paypal-logo a, .checkout-types.minicart .paypal-logo a {
  display: block;
}
.checkout-types.bottom .paypal-or, .checkout-types.minicart .paypal-or {
  margin: 0;
  display: block;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .checkout-types.bottom .paypal-or {
    text-align: right;
    padding-right: 70px;
  }
}
.cart-totals .checkout-types .btn-checkout,
.minicart-actions .checkout-button {
  margin-bottom: 7px;
  background: var(--color-cta);
  color: #fff;
}
.cart-totals .checkout-types .btn-checkout:hover,
.minicart-actions .checkout-button:hover {
  background: var(--color-cta-hover);
  box-shadow: 0 2px 6px rgba(242, 173, 72, 0.4);
}
.cart-totals .checkout-types .btn-checkout:active,
.cart-totals .checkout-types .btn-checkout:focus,
.minicart-actions .checkout-button:active,
.minicart-actions .checkout-button:focus {
  background: var(--color-cta-active);
  color: #fff;
}

@media only screen and (max-width: 767px) {
  .checkout-types {
    text-align: center;
    width: 100%;
  }
  .checkout-types li {
    width: 100%;
    margin-left: 0;
  }
}
@media only screen and (max-width: 639px) {
  .btn-checkout {
    width: 100%;
  }
}
/* ============================================ *
 * Cart Items — Flexbox Layout
 * ============================================ */
.cart-table {
  font-family: var(--font-heading);
  margin-bottom: 20px;
}

/* Header row — desktop only */
.cart-header {
  display: none;
}
@media only screen and (min-width: 640px) {
  .cart-header {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 2px solid silver;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }
}

/* Item row */
.cart-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid silver;
}

/* Column widths — shared between header and items */
.cart-col-image { width: 100px; flex-shrink: 0; }
.cart-col-info { flex: 1; min-width: 0; padding: 0 12px; }
.cart-col-price { width: 90px; text-align: center; flex-shrink: 0; }
.cart-col-qty { width: 130px; text-align: center; flex-shrink: 0; }
.cart-col-total { width: 90px; text-align: center; flex-shrink: 0; }
.cart-col-remove { width: 40px; text-align: center; flex-shrink: 0; }

/* Image */
.cart-col-image .product-image img {
  max-width: 100%;
  width: 100%;
  display: block;
}

/* Product info */
.cart-item h2 {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0;
}
.cart-item .product-cart-sku {
  font-family: var(--font-heading);
  font-size: 12px;
  margin: 5px 0 8px;
}
.cart-item .product-cart-sku .label {
  font-weight: 600;
}
.cart-item .item-options {
  padding-left: 15px;
  font-size: 13px;
}

/* Prices */
.cart-col-price .cart-price,
.cart-col-total .cart-price {
  white-space: nowrap;
}

/* WEEE tax toggles */
.cart-item .cart-tax-total {
  position: relative;
  cursor: pointer;
}
.cart-item .cart-tax-total:after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  display: block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid var(--color-primary);
  border-left: none;
  top: 3px; right: -11px;
}
.cart-item .cart-tax-total.cart-tax-total-expanded:after {
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid var(--color-primary);
  border-bottom: none;
  right: -15px; top: 6px;
}

/* Footer actions */
.cart-footer-actions {
  padding: 12px 0;
}
.cart-footer-actions .cart-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.cart-footer-actions .btn-empty {
  margin-right: auto;
}
.cart-default-submit {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- Tablet ---- */
@media only screen and (max-width: 767px) {
  .cart-col-price { width: 70px; }
  .cart-col-qty { width: 110px; }
  .cart-col-total { width: 70px; }
}

/* ---- Mobile: Card Layout ---- */
@media only screen and (max-width: 639px) {
  /* FD-013 Einheit 10, 18.08.2026: Raster statt umbrechender Flex-Reihe.
     Vorher lagen Name, Preis, Menge und Summe in einer Reihe: der Name
     schrumpfte auf die Restbreite und stiess bei 402 px an den Preis, der
     Loeschknopf lag darueber. Gemeldet und nachgemessen am 18.08.2026.

     Aufbau: Zeile 1 traegt den Artikelnamen ueber die volle Breite, darunter
     links das Bild und rechts Preis, Menge und Zwischensumme untereinander.
     Beschriftung links, Wert rechts. */
  .cart-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
    position: relative;
    padding: var(--space-md) 0;
    align-items: center;
  }
  .cart-col-info {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    padding-left: 0;
    padding-right: 44px;
  }
  .cart-col-image {
    grid-column: 1;
    grid-row: 2 / span 3;
    width: 80px;
    align-self: start;
  }
  .cart-col-price,
  .cart-col-qty,
  .cart-col-total {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: auto;
    text-align: right;
  }
  /* Der Knopf liegt in derselben Rasterzeile wie der Name, nicht absolut
     darueber. Sein Trefferfeld ist 44 px hoch, die Namenszeile 19 px — absolut
     gesetzt sass das Symbol deshalb 12 px tiefer als der Name. Im Raster
     zentriert align-items beide in derselben Zeile. */
  .cart-col-remove {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    position: static;
    width: auto;
  }
  /* Auf dem Telefon gilt das Zielmass der Spezifikation auch fuer das
     Symbol, nicht nur fuer den Trefferbereich: 20 px waren im 44er Feld
     kaum zu sehen. */
  .btn-remove-cart .icon-delete {
    width: 28px;
    height: 28px;
  }

  /* Mobile labels */
  [data-rwd-label]:before {
    content: attr(data-rwd-label) ": ";
    font-weight: 600;
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
  }

  .product-cart-sku { display: none; }
  .cart-item h2 { font-size: 13px; }
  .cart-col-price .price,
  .cart-col-total .price {
    font-weight: 500;
    font-size: 15px;
  }
  .cart-item .cart-tax-info {
    font-style: italic;
    padding-left: 15px;
    font-size: 13px;
  }

  .cart-footer-actions .btn-update { display: none; }
  .cart-footer-actions .cart-actions-row {
    justify-content: space-between;
  }
}
/* ============================================ *
 * Checkout - Estimate Shipping and Tax
 * ============================================ */
.shipping h2 {
  font-size: 12px;
  font-weight: bold;
  margin: 0 0 5px;
}
.shipping select {
  max-width: 100%;
  height: 30px;
  display: block;
  border: 1px solid silver;
}
.shipping select.validation-failed {
  border-color: var(--color-error);
}
.shipping .shipping-desc {
  display: none;
}
.shipping .buttons-set {
  border: none;
  margin: 0;
  padding: 0;
}
.shipping .form-list:after {
  content: '';
  display: table;
  clear: both;
}
.shipping .form-list li {
  float: left;
  margin: 5px 2% 10px 0;
}
.shipping .form-list .shipping-country {
  width: 37%;
}
.shipping .form-list .shipping-region {
  width: 41%;
}
.shipping .form-list .shipping-postcode {
  margin-right: 0;
  width: 18%;
}
.shipping .form-list .shipping-postcode input {
  margin-top: 4px;
}
.shipping .form-list .input-box {
  padding-top: 0;
}
.shipping .form-list input {
  height: 30px;
  margin-top: 4px;
}
.shipping .form-list label {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}
.shipping .sp-methods {
  padding: 10px 0 0;
  text-align: left;
}
.shipping .sp-methods dd {
  margin-bottom: 10px;
}
.shipping .sp-methods label {
  font-family: var(--font-heading);
  font-size: 12px;
  min-width: 100px;
}
.shipping .sp-methods label span {
  font-family: var(--font-heading);
  font-weight: bold;
  font-style: normal;
}
.shipping #co-shipping-method-form .buttons-set {
  justify-content: flex-start;
}
.shipping #co-shipping-method-form .sp-methods dd label {
  border: 1px solid #cccccc;
  background-color: #ececec;
  min-width: 220px;
}
.shipping #co-shipping-method-form .sp-methods dd label:hover {
  background-color: #dbdbdb;
}

@media only screen and (max-width: 767px) {
  .shipping .shipping-form .form-list > li {
    width: 100%;
    float: none;
  }
  .shipping .shipping-form .form-list > li label {
    display: block;
  }
  .shipping .shipping-form .form-list > li input,
  .shipping .shipping-form .form-list > li select {
    width: 100%;
  }
}
.cart .cart-totals {
  text-align: right;
}
.cart .cart-totals:after {
  content: '';
  display: table;
  clear: both;
}
.cart .cart-totals table {
  font-family: var(--font-heading);
  font-size: 12px;
  margin-bottom: 20px;
  text-transform: uppercase;
  width: 100%;
}
.cart .cart-totals table td {
  padding: 2px 0;
}
.cart .cart-totals table td:first-child {
  padding-right: 10px;
  min-width: 120px;
}
.cart .cart-totals table tbody tr:last-child td,
.cart .cart-totals table tbody tr:last-child th {
  padding-bottom: 10px;
}
.cart .cart-totals table tfoot {
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}
.cart .cart-totals table tfoot td {
  font-size: 24px;
  padding: 2px 5px;
  vertical-align: top;
}
.cart .cart-totals table tfoot strong span,
.cart .cart-totals table tfoot span.price {
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
}
.cart .cart-totals table tfoot strong {
  font-weight: 400;
}

@media only screen and (max-width: 639px) {
  .cart-totals {
    text-align: right;
  }
}
@media only screen and (max-width: 767px) {
  .cart .cart-totals table tfoot td {
    font-size: 18px;
  }
}

/* ---- Minimum Order Notice ---- */
.minimum-order-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff8e1;
  border: 1px solid #f0c36d;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
  color: #6d4c00;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}
.minimum-order-notice svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #e6a700;
}
.minimum-order-notice p {
  margin: 0;
}
.minimum-order-notice strong {
  color: #b8860b;
}
/* Highlight grand total when below minimum */
.cart-totals--below-minimum table tfoot span.price {
  color: #c62828;
}
/* Disable checkout button when below minimum */
.cart-totals--below-minimum .checkout-types .btn-checkout {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}
/* Sidebar mini-notice */
.minimum-order-notice-mini {
  font-size: 11px;
  color: #6d4c00;
  background: #fff8e1;
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.3;
}
/* Sidebar disabled checkout button */
.btn-checkout--disabled {
  opacity: 0.45 !important;
  cursor: default !important;
  pointer-events: none;
}

.discount-form:after,
#giftcard-form:after {
  content: '';
  display: table;
  clear: both;
}

#discount-coupon-form,
.cart .giftcard {
  width: 100%;
}
#discount-coupon-form h2,
.cart .giftcard h2 {
  display: none;
}
#discount-coupon-form label,
.cart .giftcard label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
  min-width: 105px;
  display: inline-block;
  margin-right: 10px;
}
#discount-coupon-form .field-wrapper,
.cart .giftcard .field-wrapper {
  display: inline-block;
}
#discount-coupon-form .validation-advice,
.cart .giftcard .validation-advice {
  display: inline;
}
#discount-coupon-form .button-wrapper,
.cart .giftcard .button-wrapper {
  display: inline-block;
  vertical-align: bottom;
}
#discount-coupon-form .button-wrapper > button,
.cart .giftcard .button-wrapper > button {
  float: left;
}
#discount-coupon-form .input-text,
.cart .giftcard .input-text {
  border-radius: 0;
  height: 30px;
  margin: 4px 10px 0 0;
  width: 190px;
}

.cart .giftcard p {
  margin-bottom: 7px;
}

.cart .giftcard .check-gc-status {
  float: left;
  padding: 0;
}
.cart .giftcard .check-gc-status > span > span {
  font-size: 14px;
  text-transform: none;
}

/* ============================================ *
 * Checkout - Cart Cross sell
 * ============================================ */
.crosssell h2 {
  color: var(--color-primary);
}
.crosssell .item a.product-image {
  width: auto;
  float: left;
}

/* Crosssell: 2 columns on tablet */
@media only screen and (max-width: 1023px) {
  .crosssell .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 639px) {
  .cart-item .cart-tax-total:after {
    right: -9px;
  }
  .cart-item .cart-tax-total.cart-tax-total-expanded:after {
    right: -13px;
  }
}
@media only screen and (max-width: 639px) {
  .crosssell ul .item {
    padding: 0 0 40px;
  }
  .crosssell ul .product-details .crosssell-actions {
    padding: 0 5px;
  }
}
/* ============================================ *
 * Checkout - One Page
 * ============================================ */
.checkout-onepage-index .col-right,
.checkout-onepage-index .col-left {
  display: none;
}
@media only screen and (min-width: 1024px) {
  /* FD-013 Einheit 7: die eigene Rasterdefinition entfaellt, die Huelle
     traegt sie. Damit faellt auch die tote Spur zwischen 768 und 1023 px weg. */
  .checkout-onepage-index .col-main { padding-right: 20px; }
  .checkout-onepage-index .col-right,
  .checkout-onepage-index .col-left { display: block; padding-left: 0; }
}
.opc select {
  width: 365px;
}

/* -------------------------------------------- *
 * Section Styling - Default
 */
.opc .section .step-title {
  width: 100%;
  border-top: 1px solid #ececec;
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;

  user-select: none;
}
.opc .section .step-title:after {
  content: '';
  display: table;
  clear: both;
}

.opc .section.allow:not(.active) .step-title {
  cursor: pointer;
}

/* Using .no-touch since touch devices emulate hover, thereby making steps look active that are not */
.no-touch .opc .section.allow:not(.active) .step-title:hover {
  background-color: var(--color-bg-light);
}

.opc .section.active .step-title {
  border-bottom: 1px solid #ececec;
}

.opc .section .step-title a {
  display: none;
}

.opc .section.allow:not(.active) .step-title a {
  display: block;
  float: right;
  line-height: 40px;
  height: 40px;
  padding: 0 10px;
}

.no-touch .opc .section .step-title a:hover {
  text-decoration: none;
}

.opc .section .step-title .number,
.opc .section.allow.active .step-title .number,
.no-touch .opc .section.allow:hover .step-title .number {
  width: 26px;
  height: 26px;
  text-align: center;
  color: #fff;
  line-height: 26px;
  background-color: var(--color-primary);
  display: block;
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -13px;
}

.opc .section.allow .step-title .number {
  background-color: rgb(113, 168, 136);
}

.opc .section.allow .step-title h2 {
  color: var(--color-text-muted);
}

.opc .section.allow .step-title:hover h2,
.opc .section.active .step-title h2 {
  color: var(--color-primary);
}

.opc .section .step-title h2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  height: 40px;
  float: left;
  margin: 0 4px 0 45px;
}

.opc .section .step {
  padding: 20px;
}
.opc .section .step:after {
  content: '';
  display: table;
  clear: both;
}
.opc .section .step > form {
  box-sizing: border-box;
  width: 100%;
}
.opc .section .step > form > fieldset {
  min-width: 0;
}
.opc fieldset {
  min-inline-size: 0;
  min-width: 0;
  box-sizing: border-box;
}
@media only screen and (max-width: 1023px) {
  .opc .section .step {
    padding: 10px;
  }
}

.opc select {
  max-width: 365px;
  width: 100%;
}

.opc h3 {
  font-weight: 500;
}

.opc .buttons-set {
  justify-content: flex-start;
}
.opc .buttons-set button.button {
  margin-right: 5px;
  margin-bottom: 0;
}
.opc .buttons-set p.required {
  margin-left: auto;
  margin-bottom: 0;
}
.opc .buttons-set .back-link {
  margin-right: 0;
}
.opc .buttons-set a {
  line-height: 20px;
  padding: 5px 5px 5px 0;
}
.opc #opc-login .step {
  padding: 0;
}
.opc #opc-login .buttons-set {
  border-top: 0;
  padding-top: 5px;
}

@media only screen and (max-width: 767px) {
  .opc #opc-login .description,
  .opc #opc-login p.required {
    display: none;
  }
}
#opc-payment .note {
  padding: 10px;
}

/* -------------------------------------------- *
 * This section hides everything but the "Checkout Method" step of the checkout process and fades in the content
 * once the customer progresses to the next step. The purpose of this is to simplify what the customer has to focus on.
 * It is limited to larger viewports since smaller devices are inherently going to be focused solely on the
 * "Checkout Method" step.
 */
.opc.opc-firststep-login .section:not(#opc-login) .step-title,
.opc-block-progress-step-login {
  transition: opacity 300ms linear 0;
}

.opc.opc-firststep-login .section#opc-login .step-title .number {
  transition: width 80ms linear 0;
}

.opc.opc-firststep-login .section#opc-login .step-title h2 {
  transition: margin-left 80ms linear 0;
}

/* When a user progresses from the "Checkout Method" to "Billing Information" for the first time, the              */
/* "opc-has-progressed-from-login" class gets added to the body. Also, the .opc element will only have the         */
/* "opc-firststep-login" class if the first step of the checkout is the "Checkout Method" (eg, not when logged in) */
body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section:not(#opc-login) .step-title,
body:not(.opc-has-progressed-from-login) .opc-block-progress-step-login {
  opacity: 0;
}

body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section#opc-login .step-title .number {
  width: 0;
  overflow: hidden;
}

body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section#opc-login .step-title h2 {
  margin-left: 0;
}

/* -------------------------------------------- *
 * Shipping and Payment methods
 */
.sp-methods {
  margin: 0 0 8px;
}
.sp-methods dt {
  margin: 13px 0 5px;
  font-weight: bold;
}
.sp-methods dt:first-child {
  margin: 0 0 5px;
}
.sp-methods dd li {
  margin: 5px 0;
}
.sp-methods label img {
  float: left;
}
.sp-methods label a {
  margin-top: 6px;
  float: right;
  margin-left: 10px;
}
.sp-methods .price {
  font-weight: bold;
}
.sp-methods .form-list {
  padding-left: 20px;
}
.sp-methods .form-list li {
  margin: 0 0 8px;
}
.sp-methods select.month {
  width: 120px;
  margin-right: 10px;
}
.sp-methods select.year {
  width: 96px;
}
.sp-methods input.cvv {
  width: 4em !important;
}
.sp-methods #advice-validate-cc-exp-ccsave_expiration {
  max-width: 130px;
}
.sp-methods .checkmo-list li {
  margin: 0 0 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.sp-methods .checkmo-list label {
  width: 165px;
  padding-right: 15px;
  text-align: right;
  float: none;
  flex-shrink: 0;
}
.sp-methods .checkmo-list address {
  float: none;
}
@media only screen and (max-width: 639px) {
  .sp-methods .checkmo-list {
    padding-left: 0;
  }
  .sp-methods .checkmo-list label {
    width: 135px;
  }
}
.sp-methods .release-amounts {
  margin: 0.5em 0;
}
.sp-methods .release-amounts button {
  float: left;
  margin: 5px 10px 0 0;
}

/* One Page Checkout */
.block-progress {
  border: 0;
  margin: 0;
  border-left: 1px solid #cccccc;
  padding-left: 20px;
}
.block-progress .block-content {
  font-size: 13px;
}
.block-progress dt {
  padding-top: 6px;
  margin: 0;
  margin-bottom: 10px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: normal;
  color: var(--color-text-muted);
}
.block-progress dt.complete {
  color: var(--color-text);
}
.block-progress dd {
  padding-left: 15px;
  margin-bottom: 10px;
  font-family: var(--font-heading);
}
.block-progress dd address {
  font-style: italic;
}
.block-progress #payment-progress-opcheckout .subtitle {
  margin-bottom: 3px;
}
.block-progress .payment-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.block-progress .payment-info dt {
  padding: 0;
  margin: 0 0 3px 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  text-transform: none;
  float: none;
  font-size: 13px;
}
.block-progress .payment-info dt:after {
  content: ': ';
}
.block-progress .payment-info dd {
  float: none;
  margin-bottom: 3px;
  font-size: 13px;
}

/* review step */
#checkout-review-table .btn-remove img {
  display: none;
}

#checkout-review-table-wrapper {
  clear: both;
}

#review-buttons-container {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
}
#review-buttons-container .btn-checkout {
  min-width: 220px;
}
#review-buttons-container .please-wait {
  margin-right: 10px;
}
#review-buttons-container .f-left {
  margin-left: auto;
}

@media only screen and (max-width: 639px) {
  .linearize-table-large.checkout-review-table thead tr:nth-child(1n+2) {
    display: none;
  }
}
@media only screen and (max-width: 639px) {
  .linearize-table.checkout-review-table thead tr:nth-child(1n+2) {
    display: none;
  }
}
/* show/hide "change" link for progress step depend on complete status
 * should be placed in .css file */
.opc-block-progress dt.complete a,
.opc-block-progress dt.complete .separator {
  display: inline;
}

.opc-block-progress dt a,
.opc-block-progress dt .separator {
  display: none;
}

/* On small screens, the progress review content will be moved to the review step via JS. Styled via this CSS: */
#checkout-step-review .opc-block-progress {
  border-left: none;
  padding-left: 0;
}
#checkout-step-review .opc-block-progress .block-title {
  display: none;
}
#checkout-step-review .opc-block-progress .block-content {
  display: block !important;
  padding: 0;
}
#checkout-step-review .opc-block-progress .block-content > dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 15px;
}
#checkout-step-review .opc-block-progress .block-content > dl > div {
  float: none;
  width: auto;
}
#checkout-step-review .opc-block-progress .block-content .changelink {
  display: none;
}

@media only screen and (max-width: 639px) {
  #checkout-step-review .opc-block-progress .block-content > dl {
    grid-template-columns: 1fr;
  }
  #checkout-step-review .opc-block-progress .block-content > dl > div {
    float: none;
    width: auto;
  }
  #checkout-review-table thead > tr > th {
    display: none;
  }
  #checkout-review-table thead > tr > th:first-child {
    display: block;
  }

  #checkout-review-table thead > tr > th:first-child {
    display: block;
  }
}
#checkout-step-review .centinel > p {
  margin-bottom: 10px;
}
#checkout-step-review .centinel iframe {
  width: 100%;
  min-height: 400px;
}

/* Gift options */
.gift-messages-form .item {
  content: '';
  display: table;
  clear: both;
  margin-top: 30px;
}
.gift-messages-form .item h5 {
  font-weight: bold;
}
.gift-messages-form .item .product-img-box {
  width: auto;
  float: left;
  padding-right: 15px;
}
.gift-messages-form .item .details {
  float: left;
}

.gift-message-form .inner-box > div {
  content: '';
  display: table;
  clear: both;
  width: 100%;
  margin-top: 15px;
  display: block;
}
.gift-message-form .inner-box > div.extra-options-container p {
  margin-bottom: 15px;
}
.gift-message-form .gift-wrapping-form label {
  margin-right: 10px;
}
.gift-message-form .gift-wrapping-form img {
  float: left;
}
.gift-message-form .gift-wrapping-form .gift-wrapping-design {
  height: 75px;
}
.gift-message-form .gift-wrapping-form .gift-wrapping-design:after {
  content: '';
  display: table;
  clear: both;
}
.gift-message-form .gift-wrapping-form .gift-wrapping-design .image-box {
  margin-right: 5px;
}
.gift-message-form .gift-item {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: solid 1px #ececec;
}
.gift-message-form .gift-item:after {
  content: '';
  display: table;
  clear: both;
}
.gift-message-form .gift-item .product-img-box {
  width: 200px;
}
.gift-message-form .gift-item .product-img-box .product-image {
  width: 75px;
  margin-left: auto;
  margin-right: auto;
}
.gift-message-form .gift-item .product-img-box .product-name {
  display: block;
}
.gift-message-form .gift-item .fieldset {
  margin-left: 200px;
}

@media only screen and (max-width: 767px) {
  .gift-message-form .giftmessage-area {
    max-width: 100%;
  }
  .gift-message-form .gift-item .product-img-box {
    width: 100%;
    float: none;
  }
  .gift-message-form .gift-item .fieldset {
    margin-left: 0;
  }
  .gift-message-form .gift-item .fieldset textarea {
    width: 100%;
  }
}
/* ============================================ *
 * Checkout - Success
 * ============================================ */
.checkout-onepage-success .col-main {
  padding: 0;
  text-align: center;
}
.checkout-onepage-success .buttons-set {
  margin: 10px 0;
  justify-content: center;
}

/* ============================================ *
 * Configurable Swatches
 * ============================================ */
/* Clears */
.clearfix:after,
.configurable-swatch-list:after,
.product-view .product-options .swatch-attr:after {
  content: '';
  display: table;
  clear: both;
}

/* General Swatch Styling */
.swatch-link,
.swatch-label {
  display: block;
  border-radius: var(--radius-xs);
  font-size: 14px;
  text-align: center;
  color: var(--color-text);
  text-decoration: none;
  box-sizing: content-box;
}

.swatch-link {
  border: 1px solid #cccccc;
  margin: 0 0 3px;
}
.swatch-link img {
  border-radius: var(--radius-xs);
}
.swatch-link:hover {
  cursor: pointer;
  text-decoration: none;
}
.swatch-link .x {
  display: none;
  text-indent: -999em;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url(https://logisch-bio.de/skin/frontend/rwd/logbio/images/bg_x.png) center no-repeat transparent;
  z-index: 10;
}
.swatch-link.has-image .swatch-label {
  position: relative;
}
.swatch-link.has-image img {
  position: absolute;
  top: 0;
  left: 0;
}

.swatch-label {
  border: 1px solid #fff;
  margin: 0;
  white-space: nowrap;
  background: var(--color-bg-light);
}

.configurable-swatch-list {
  margin-left: -3px;
  zoom: 1;
  clear: both;
  -webkit-transform: translateZ(0);
}
.configurable-swatch-list li {
  float: left;
  zoom: 1;
  margin: 0 0 0 3px;
}
.products-grid .configurable-swatch-list li {
  display: inline-block;
  float: none;
  margin: 0;
  vertical-align: top;
}
.configurable-swatch-list .not-available .x {
  display: block;
}
.configurable-swatch-list .not-available .swatch-link {
  border-color: #ededed;
  position: relative;
}
.configurable-swatch-list .not-available .swatch-link.has-image img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.configurable-swatch-list .not-available .swatch-label {
  color: #aaa;
  background: #fff;
}
.configurable-swatch-list .wide-swatch .swatch-label {
  padding: 0 6px;
}
.configurable-swatch-list .not-available a:focus {
  outline: 0;
}
.configurable-swatch-list a:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

#narrow-by-list dd .configurable-swatch-list li {
  margin: 0 0 0 3px;
  width: 47%;
}
#narrow-by-list dd .swatch-link {
  border: none;
  line-height: 25px;
  margin-right: 2px;
  text-align: left;
}
#narrow-by-list dd .swatch-link.has-image {
  line-height: inherit;
}
#narrow-by-list dd .swatch-link:hover .swatch-label {
  border-color: var(--color-primary);
}
#narrow-by-list dd .swatch-label {
  background: var(--color-bg-light);
  border: 1px solid #cccccc;
  border-radius: var(--radius-xs);
  display: block;
  float: left;
  line-height: 1.5em;
  margin: 0 5px 0 0;
  padding: 1px 5px;
  white-space: nowrap;
}
#narrow-by-list dd .swatch-label img {
  border: 1px solid #fff;
  border-radius: var(--radius-xs);
  box-sizing: content-box;
}
#narrow-by-list dd .has-image .swatch-label {
  padding: 0;
}

@media only screen and (max-width: 767px) {
  #narrow-by-list dd .configurable-swatch-list li:nth-child(odd) {
    clear: left;
  }
}
.currently .swatch-current {
  position: relative;
}
.currently .swatch-current .btn-remove {
  margin-top: -10px;
  position: absolute;
  right: 0;
  top: 50%;
}
.currently .swatch-current span {
  display: block;
  float: left;
}
.currently .swatch-link {
  display: inline-block;
  margin: 0 0 0 3px;
}
.currently .swatch-link:hover {
  border-color: #cccccc;
  cursor: default;
}

/* Other Swatch States */
.configurable-swatch-list .hover .swatch-link,
.configurable-swatch-list .selected .swatch-link,
.swatch-link:hover {
  border-color: var(--color-primary);
}

.configurable-swatch-box {
  background: none !important;
}
.configurable-swatch-box select.swatch-select {
  display: none;
}
.configurable-swatch-box .validation-advice {
  margin: 0 0 5px;
  background: var(--color-error);
  padding: 2px 5px !important;
  font-weight: bold;
  color: #fff !important;
  float: left;
  display: block;
  border-radius: var(--radius-xs);
}

/* CUSTOM */
.availability.out-of-stock span {
  color: var(--color-text-muted);
}

.product-view .product-options .swatch-attr {
  float: none;
  display: block;
  clear: both;
  border: 0;
}
.product-view .product-options .swatch-attr label,
.product-view .product-options .swatch-attr .select-label {
  font-size: 12px;
}
.product-view .product-options .swatch-attr label {
  display: block;
  line-height: 1.3;
}
.product-view .product-options .swatch-attr .select-label {
  display: inline;
  font-weight: normal;
  color: var(--color-primary);
  padding-left: 5px;
}
.product-view .product-options dd .input-box {
  width: auto;
  height: auto;
}
.product-view .product-options .select-label {
  display: none;
}
.product-view .add-to-cart button.out-of-stock {
  background-position: -80px -362px;
  cursor: default;
}

/* ============================================ *
 * Customer
 * ============================================ */
.customer-account-login .scaffold-form label:first-child {
  width: 115px;
}
.customer-account-login .col2-set .buttons-set {
  justify-content: flex-start;
  border-top: 0;
}
.customer-account-login .col2-set .buttons-set button,
.customer-account-login .col2-set .buttons-set .button {
  min-width: 50%;
}
.customer-account-login .col2-set .col-1 ul {
  list-style: disc;
  padding-left: 20px;
  margin: 10px 0 20px 0;
}
@media only screen and (min-width: 640px) {
  .customer-account-login .col2-set .col-1,
  .customer-account-login .col2-set .col-2 {
    padding-top: 0;
    margin-top: 20px;
  }
  .customer-account-login .col2-set .col-1 {
    padding-right: 20px;
  }
  .customer-account-login .col2-set .col-2 {
    padding-left: 20px;
    border-left: 1px solid #ededed;
  }
}
@media only screen and (min-width: 768px) {
  .customer-account-login .col2-set .col-1 {
    padding-right: 0;
  }
  .customer-account-login .col2-set .col-2 {
    padding-left: 60px;
    border-left: 1px solid #ededed;
  }
}
@media only screen and (max-width: 639px) {
  .customer-account-login .col2-set .col-1 {
    padding-bottom: 30px;
  }
  .customer-account-login .col2-set .col-2 {
    padding-top: 30px;
    border-top: 1px solid #ededed;
  }
}
@media only screen and (max-width: 767px) {
  .customer-account-login .col2-set p.required {
    display: none;
  }
}

.customer-account-create .scaffold-form label:first-child {
  width: 140px;
}

.opc #opc-login p:not(.required) {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-text-muted);
}

.remember-me-box a.hide {
  display: none;
}
.remember-me-box .link-tip {
  font-size: 13px;
  padding-left: 10px;
}

.remember-me-popup {
  display: none;
  border: 1px solid #cccccc;
  padding: 10px;
  position: relative;
}
.remember-me-popup.show {
  display: block;
}
.remember-me-popup p {
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
}
.remember-me-popup .remember-me-popup-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  font-size: 12px;
}
.remember-me-popup .remember-me-popup-close-button {
  display: none;
}

.customer-account-create .buttons-set {
  max-width: 455px;
}
.customer-account-create .fieldset,
.customer-account-create .buttons-set {
  margin-left: 30px;
}
.customer-account-create .fieldset .hidden {
  display: none;
}
.customer-account-create #remember-me-popup {
  max-width: 455px;
}

.customer-account-forgotpassword .fieldset,
.customer-account-forgotpassword .buttons-set {
  margin-left: 30px;
  max-width: 400px;
}
@media only screen and (max-width: 639px) {
  .customer-account-create .fieldset,
  .customer-account-create .buttons-set {
    margin-left: 0;
  }
  .customer-account-forgotpassword .fieldset,
  .customer-account-forgotpassword .buttons-set {
    margin-left: 0;
  }
}
.customer-account-forgotpassword .fieldset .input-box input.input-text {
  width: 100%;
}

/* ============================================ *
 * My Account Global Styles
 * ============================================ */
body.customer-account .my-account .page-title h1 {
  border: 0;
  text-align: left;
}
body.customer-account .my-account .title-buttons {
  position: relative;
  text-align: right;
}
body.customer-account .my-account .title-buttons h1 {
  text-align: left;
}
body.customer-account .my-account .title-buttons .button {
  position: absolute;
  right: 0;
  top: 0;
}
body.customer-account .my-account .title-buttons a,
body.customer-account .my-account .title-buttons span.separator {
  position: relative;
  top: -42px;
}
body.customer-account .my-account .title-buttons .order-view-actions {
  position: absolute;
  right: 0;
  top: 4px;
}
body.customer-account .my-account .title-buttons .order-view-actions a {
  position: static;
  top: auto;
}
body.customer-account .my-account .fieldset h2,
body.customer-account .my-account .addresses-list h2,
body.customer-account .my-account .order-details h2 {
  width: 100%;
  display: inline-block;
}
body.customer-account .my-account .addresses-list h3 {
  font-size: 14px;
  font-weight: 600;
}
body.customer-account .my-account .fieldset {
  margin-top: 30px;
  margin-bottom: 30px;
}
body.customer-account .data-table {
  margin-top: 5px;
  font-family: var(--font-heading);
  font-style: normal;
}
body.customer-account .data-table td a {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-style: normal;
  font-size: 13px;
}
body.customer-account .data-table span.nobr {
  white-space: normal;
}
body.customer-account .data-table span.nobr a {
  white-space: nowrap;
}
body.customer-account .data-table td.view a {
  display: block;
}
body.customer-account .data-table .separator {
  display: none;
}
body.customer-account .sidebar .block ol#compare-items li {
  margin: 10px 0;
}
body.customer-account .sidebar .block .block-content p.block-subtitle {
  margin-bottom: 15px;
}
body.customer-account .sidebar .block .block-content .actions {
  margin-top: 30px;
}
body.customer-account .sidebar ol#cart-sidebar-reorder li {
  margin-top: 10px;
  margin-bottom: 0;
}
body.customer-account .sidebar ol#cart-sidebar-reorder p.product-name {
  display: inline-block;
  margin-bottom: 0;
}
body.customer-account .sidebar .block-cart .summary {
  margin-bottom: 15px;
}
/* Old reorder sidebar styles removed — redesigned in block-reorder section */

.form-list .customer-dob .dob-month,
.form-list .customer-dob .dob-day {
  width: 40px;
  float: left;
  margin-right: 10px;
}
.form-list .customer-dob .dob-year {
  width: 80px;
  float: left;
}

/* ============================================ *
 * Dashboard
 * ============================================ */
.dashboard .box-head {
  margin-top: 30px;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 7px;
}
.dashboard .box-head h2 {
  font-size: 15px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0;
}
.dashboard .box-head a {
  padding: 10px;
}
.dashboard .box-title a,
.dashboard .box-head a {
  text-transform: uppercase;
  font-size: 12px;
}
.dashboard .box-account {
  padding-bottom: 40px;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 45px;
}
.dashboard .box-account p,
.dashboard .box-account address {
  font-family: var(--font-heading);
  font-style: normal;
}
.dashboard .col2-set .col-1,
.dashboard .col2-set .col-2 {
  padding-right: 12.09677%;
  padding-bottom: 0;
}
.dashboard .col2-set .col-1 .box-title,
.dashboard .col2-set .col-2 .box-title {
  position: relative;
  padding-bottom: 10px;
}
.dashboard .col2-set .col-1 .box-title h2,
.dashboard .col2-set .col-1 .box-title h3,
.dashboard .col2-set .col-2 .box-title h2,
.dashboard .col2-set .col-2 .box-title h3 {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 0;
}
.dashboard .col2-set .col-1 .box-title a,
.dashboard .col2-set .col-2 .box-title a {
  line-height: 19.6px;
}
.dashboard .box-reviews.box-account {
  padding-bottom: 0;
}
.dashboard .box-reviews li {
  padding: 10px 0;
  border-top: 1px solid #ededed;
}
.dashboard .box-reviews li:first-child {
  border-top: 0;
}
.dashboard .box-reviews li .number {
  margin-right: -20px;
  float: left;
  line-height: 1.4;
  font-size: 13px;
}
.dashboard .box-reviews li .details {
  margin-left: 20px;
}
.dashboard .box-reviews li .details .ratings {
  content: '';
  display: table;
  clear: both;
  margin-bottom: 0;
}
.dashboard .box-reviews li .details .ratings strong {
  float: left;
  font-family: var(--font-heading);
  font-size: 13px;
  margin-right: 5px;
}
.dashboard .box-reviews li .details .ratings .rating-box {
  float: left;
  margin: 3px 0 0 0;
}

/* ============================================ *
 * Order Actions (dashboard + history tables)
 * ============================================ */
.order-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}
.order-action-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.order-action-link:hover {
  color: var(--color-primary-hover);
}
.icon-view {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
  .icon-view {
    width: 22px;
    height: 22px;
  }
}
.btn-reorder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.btn-reorder:hover {
  color: var(--color-primary-hover);
  text-decoration: none;
}
.icon-reorder {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media only screen and (max-width: 767px) {
  .icon-reorder {
    width: 22px;
    height: 22px;
  }
}

/* ============================================ *
 * Dashboard Greeting
 * ============================================ */
.dashboard-greeting {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0 0 4px;
}

/* ============================================ *
 * Dashboard Quick-Action Cards
 * ============================================ */
.dashboard-quickactions {
  display: flex;
  gap: 20px;
  margin: 24px 0 32px;
}
.qa-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  border-radius: var(--radius-card);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.qa-card:hover {
  transform: var(--hover-prominent);
  box-shadow: var(--shadow-prominent);
  color: var(--color-text);
  text-decoration: none;
}
.qa-card svg {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  color: var(--color-primary);
}
.qa-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
  display: block;
}
.qa-desc {
  font-size: 13px;
  color: #777;
  line-height: 1.5;
  display: block;
}

/* ============================================ *
 * Dashboard Bestellvorlage
 * ============================================ */
.dashboard-vorlage {
  margin-bottom: 32px;
  padding: 28px;
  background: #fafaf7;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
}
.vorlage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.vorlage-header h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-dark);
  text-transform: none;
}
.vorlage-link {
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.vorlage-link:hover {
  text-decoration: underline;
}
.vorlage-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.vorlage-summary-total {
  font-weight: 600;
  color: var(--color-text);
}
.vorlage-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vorlage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}
.vorlage-item:last-child,
.vorlage-item-more {
  border-bottom: none;
}
.vorlage-item-img {
  flex-shrink: 0;
  line-height: 0;
}
.vorlage-item-img img {
  border-radius: var(--radius-sm);
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.vorlage-item-info {
  flex: 1;
  min-width: 0;
}
.vorlage-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-dark);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vorlage-item-name:hover {
  color: var(--color-primary);
}
.vorlage-item-qty {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.vorlage-item-price {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  text-align: right;
  min-width: 60px;
}
.vorlage-item-more {
  padding: 8px 0 0;
  font-size: 13px;
}
.vorlage-item-more a {
  color: var(--color-primary);
  text-decoration: none;
}
.vorlage-item-more a:hover {
  text-decoration: underline;
}
.vorlage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
}
.vorlage-all-link {
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
}
.vorlage-all-link:hover {
  color: var(--color-primary);
}

/* Delivery Date Hints */
.dd-delivery-hint {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.dd-hint-title {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 var(--space-xs);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dd-hint-icon {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.dd-hint-list {
  margin: 0;
  padding: 0 0 0 var(--space-lg);
  color: var(--color-text-muted);
}
.dd-hint-list li {
  margin-bottom: 2px;
}
.dd-hint-list li:last-child {
  margin-bottom: 0;
}
.dd-hint-list strong {
  color: var(--color-primary);
}

.vorlage-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.vorlage-cart-btn:hover {
  background: var(--color-primary-hover, #0e9600);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

/* -- Dashboard Mobile -- */
@media only screen and (max-width: 767px) {
  .dashboard-quickactions {
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 24px;
  }
  .qa-card {
    flex-direction: row;
    padding: 16px 20px;
    text-align: left;
    gap: 14px;
    min-height: 44px;
  }
  .qa-card svg {
    width: 28px;
    height: 28px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .qa-card .qa-info {
    display: flex;
    flex-direction: column;
  }
  .dashboard-vorlage {
    padding: 16px;
    margin-bottom: 24px;
  }
  .vorlage-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
  }
  .vorlage-item-img img {
    width: 40px;
    height: 40px;
  }
  .vorlage-item-price {
    min-width: 50px;
    font-size: 12px;
  }
  .vorlage-actions {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .vorlage-cart-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 14px 20px;
    min-height: 44px;
  }
  .vorlage-all-link {
    text-align: center;
  }
}

/* ============================================ *
 * Address Book
 * ============================================ */
.my-account .addresses-list {
  font-family: var(--font-heading);
}
.my-account .addresses-list .col-1,
.my-account .addresses-list .col-2 {
  padding-bottom: 0;
}
.my-account .addresses-list .item {
  margin: 0 0 30px 0;
}
.my-account .addresses-list .item p {
  margin-top: 10px;
}
@media only screen and (max-width: 767px) {
  .my-account .addresses-list .col-1,
  .my-account .addresses-list .col-2 {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .my-account .addresses-list .col-1 li.empty,
  .my-account .addresses-list .col-2 li.empty {
    width: 100%;
  }
}
@media only screen and (max-width: 639px) {
  .my-account .addresses-list .addresses-additional p a {
    white-space: nowrap;
  }
}

/* ============================================ *
 * Order View
 * ============================================ */
.order-info {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  margin-bottom: 20px;
}
.order-info dt,
.order-info dd,
.order-info ul,
.order-info li {
  display: inline;
}
.order-info dt {
  margin-right: 20px;
}
#order-info-tabs {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
#order-info-tabs li a {
  padding: 6px 14px;
  border-radius: 4px;
  display: block;
}
#order-info-tabs li a:hover {
  background: var(--color-bg-subtle);
}
#order-info-tabs li.current {
  font-weight: 600;
  background: var(--color-bg-subtle);
  border-radius: 4px;
  padding: 6px 14px;
}

.order-date {
  font-family: var(--font-heading);
  color: var(--color-text-muted);
  font-size: 14px;
}

/* Status Badge */
.order-status-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 12px;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 10px;
}
.order-status-pending {
  background: #fff3cd;
  color: #856404;
}
.order-status-processing {
  background: #cce5ff;
  color: #004085;
}
.order-status-complete {
  background: #d4edda;
  color: #155724;
}
.order-status-canceled {
  background: #f8d7da;
  color: #721c24;
}

/* Info Boxes — Grid */
.order-info-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.order-info-box + .order-info-box {
  padding-bottom: 0;
  border-bottom: none;
}
/* Eine Spalte kann mehrere Boxen enthalten: AdjustWare_Deliverydate haengt an
   die Versandbeschreibung eigene .box-Bloecke fuer Wunschtermin und Kommentar
   an (Block/Rewrite/SalesOrderInfo.php). Deshalb Flex-Spalte statt einer
   einzelnen Box mit height:100% — das ergab sonst pro Box die volle
   Zellenhoehe, also dreifachen Ueberhang ueber die Bestelltabelle darunter. */
.order-info-box .col-1,
.order-info-box .col-2 {
  width: auto;
  float: none;
  overflow: visible;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.order-info-box .box {
  background: var(--color-bg-subtle);
  border-radius: 6px;
  padding: 16px 20px;
  /* fuellt die Spalte, wenn nur eine Box da ist, teilt sie sich sonst */
  flex: 1 1 auto;
}
.order-info-box .box-title {
  width: auto;
  float: none;
  padding-right: 0;
  margin-bottom: 8px;
}
.order-info-box .box-title h2 {
  font-size: 13px;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.order-info-box .box-title h2:after {
  content: none;
}
.order-info-box .box-content {
  float: none;
  font-family: var(--font-heading);
  line-height: 1.6;
}
.order-info-box .box-content td,
.order-info-box .box-content th {
  font-family: var(--font-heading);
  line-height: 1.3;
}
.order-info-box .box-content th {
  padding-top: 10px;
}
.order-info-box .box-content td {
  padding-left: 15px;
}
.order-info-box .box-content strong {
  font-family: var(--font-heading);
  font-weight: normal;
  text-transform: uppercase;
}

/* Button Bar */
.order-view-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.order-view-actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background 0.15s;
}
.order-view-actions a:hover {
  background: var(--color-bg-subtle);
  text-decoration: none;
}
.order-view-actions .icon-md {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Order History (Bestellverlauf) */
.order-about {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.order-about dt {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.order-about dd {
  margin-left: 0;
  padding-left: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.order-about dd:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Prevent table from overflowing col-main in grid layouts */
.order-items {
  min-width: 0;
}

#my-orders-table .option-label {
  margin-left: 10px;
  font-weight: 600;
  font-style: italic;
}
#my-orders-table .option-value {
  margin-left: 20px;
}
#my-orders-table tr.bundle:not(:last-child) td {
  border-bottom: none;
  border-top: none;
}

ol#cart-sidebar-reorder li {
  margin-top: 10px;
  margin-bottom: 0;
}
ol#cart-sidebar-reorder li input {
  margin-right: 10px;
}
ol#cart-sidebar-reorder p.product-name {
  display: inline;
}

@media only screen and (max-width: 639px) {
  #my-orders-table .option-label {
    margin-left: 20px;
  }
  #my-orders-table .option-value {
    margin-left: 35px;
  }
  #my-orders-table td[data-rwd-label=Qty] .nobr br {
    display: none;
  }
  #my-orders-table td[data-rwd-label=Qty] .nobr strong {
    margin-right: 10px;
  }
  #my-orders-table tr.bundle {
    border-color: #ededed;
  }
  #my-orders-table tr.bundle.child td[data-rwd-label] {
    padding-left: 60px;
  }
  #my-orders-table tbody:last-child tr:last-child td {
    padding-bottom: 10px;
    border-bottom: 0;
  }
  #my-orders-table tbody:last-child tr:last-child td:last-child {
    padding-bottom: 15px;
  }
  #my-orders-table tfoot tr.shipping {
    margin-top: 0;
  }
}
.order-additional {
  margin: 40px 0;
}

.order-gift-message dd {
  margin-top: 10px;
}

@media only screen and (max-width: 1279px) {
  .dashboard .col2-set .col-1,
  .dashboard .col2-set .col-2 {
    padding-right: 30px;
    padding-bottom: 0;
  }

  body.customer-account .data-table td.view a {
    white-space: normal;
  }
}
@media only screen and (max-width: 1023px) {
  body.customer-account .my-account .title-buttons {
    text-align: left;
  }
  body.customer-account .my-account .title-buttons span.separator,
  body.customer-account .my-account .title-buttons a {
    top: -12px;
  }
  body.customer-account .my-account .title-buttons .order-view-actions {
    position: static;
    margin-bottom: 10px;
  }
  body.customer-account .my-account .title-buttons .order-view-actions a {
    top: auto;
  }
}
@media only screen and (max-width: 767px) {
  body.customer-account .data-table.orders th.ship,
  body.customer-account .data-table.orders td.ship,
  body.customer-account .data-table.orders td.status,
  body.customer-account .data-table.orders th.status {
    display: none;
  }

  .order-info-box {
    grid-template-columns: 1fr;
  }

  .addresses-list .item {
    float: left;
    width: 50%;
    padding-right: 30px;
  }

  .order-info dt {
    display: none;
  }

  .order-view-actions {
    gap: 8px;
  }
  .order-view-actions a {
    font-size: 13px;
    padding: 4px 8px;
  }

  .dashboard .page-title {
    margin-top: 20px;
  }
  .dashboard .page-title h1 {
    margin-top: 0;
  }
  .dashboard .welcome-msg {
    font-family: var(--font-heading);
  }
  .dashboard .welcome-msg .hello {
    font-style: normal;
    font-weight: 600;
  }
  .dashboard .box-account {
    padding-bottom: 15px;
    margin-bottom: 30px;
  }
  .dashboard .col2-set .col-1,
  .dashboard .col2-set .col-2 {
    width: 48%;
    padding-right: 0;
    padding-left: 0;
  }
  .dashboard .col2-set .col-1 {
    float: left;
    margin-right: 4%;
  }
  .dashboard .col2-set .col-2 {
    float: right;
  }
}
/* Bestellvorlagen — mobile */
@media only screen and (max-width: 767px) {
  /* index.phtml — Vorlagen-Liste (Card-Layout) */
  #my-lists-table thead {
    display: none;
  }
  #my-lists-table,
  #my-lists-table tbody {
    display: block;
    width: 100%;
  }
  #my-lists-table .amlist-col-default {
    display: none;
  }
  #my-lists-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 14px 0;
    border-bottom: 1px solid #e0e0e0;
  }
  #my-lists-table td {
    display: block;
    border: none;
    padding: 0 10px;
  }
  #my-lists-table .amlist-col-name {
    flex: 1 1 100%;
    font-weight: 600;
    font-size: 15px;
  }
  #my-lists-table .amlist-col-name a {
    color: var(--color-text);
  }
  .amlist-overview .amlist-col-items,
  .amlist-overview .amlist-col-total {
    display: inline-block;
    font-size: 13px;
    color: var(--color-text-muted);
  }
  .amlist-overview .amlist-col-items::after {
    content: ' · ';
  }
  #my-lists-table .amlist-col-actions {
    flex: 1 1 100%;
    text-align: left !important;
    margin-top: 4px;
  }
  .amlist-icon-actions {
    gap: 10px;
    margin-top: 6px;
  }
  .amlist-preview-img {
    width: 50px;
    height: 50px;
  }
  .amlist-preview-more {
    width: 50px;
    height: 50px;
    font-size: 12px;
  }

  /* items.phtml — Produkte in Vorlage */
  #amlist-table thead {
    display: none;
  }
  #amlist-table colgroup,
  #amlist-table col {
    display: none;
  }
  #amlist-table,
  #amlist-table tbody,
  #amlist-table tr,
  #amlist-table td {
    display: block;
    width: 100%;
  }
  #amlist-table tr {
    position: relative;
    padding: 12px 0 12px 30px;
    border-bottom: 1px solid #e0e0e0;
  }
  #amlist-table td {
    border: none;
    padding: 4px 10px;
  }
  /* Checkbox links oben */
  #amlist-table td:first-child {
    position: absolute;
    left: 0;
    top: 14px;
    width: auto;
    padding: 0;
  }
  /* Bild kleiner */
  #amlist-table td:nth-child(2) img {
    width: 80px;
    height: auto;
  }
  /* Menge + Preis nebeneinander */
  #amlist-table td:nth-child(4),
  #amlist-table td:nth-child(5) {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  #amlist-table td:nth-child(4):before {
    content: 'Menge: ';
    font-family: var(--font-heading);
    font-size: 12px;
    color: var(--color-text-muted);
  }
  #amlist-table td:nth-child(5):before {
    content: 'Preis: ';
    font-family: var(--font-heading);
    font-size: 12px;
    color: var(--color-text-muted);
  }
  /* Gesamt-Zeile */
  #amlist-table tr:last-child td[colspan] {
    display: inline-block;
    width: auto;
    padding-left: 10px;
  }
  /* Buttons-Set unter Tabelle */
  .buttons-set .button.btn-cart {
    width: 100%;
    margin-bottom: 3px;
    text-align: center;
  }
}
@media only screen and (max-width: 639px) {
  body.customer-account .my-account .form-list .control {
    padding-left: 0;
  }
}
@media only screen and (max-width: 639px) {
  body.customer-account .my-account .page-title h1 {
    text-align: center;
  }
  body.customer-account .my-account .title-buttons {
    text-align: center;
  }
  body.customer-account .my-account .title-buttons .button {
    width: 100%;
    position: static;
    margin-bottom: 15px;
  }
  body.customer-account .my-account .title-buttons .button + .button {
    margin-left: 0;
  }
  body.customer-account .my-account .fieldset h2 {
    margin-bottom: 15px;
  }
  body.customer-account .my-account .order-details h2 {
    margin-bottom: 15px;
  }
  body.customer-account .my-account .buttons-set {
    border-top: 0;
  }
  body.customer-account .my-account .addresses-list .item {
    margin-bottom: 15px;
    padding-right: 0;
    float: none;
    width: auto;
  }
  body.customer-account .my-account .addresses-list h2 {
    margin-bottom: 15px;
  }

  .order-info {
    margin-top: 15px;
  }

  .data-table.orders .link-reorder,
  .data-table.orders .date {
    display: none;
  }
  .data-table.orders td.view {
    text-align: right;
  }

  .dashboard .col2-set .col-1,
  .dashboard .col2-set .col-2 {
    width: 100%;
    margin-top: 15px;
  }

  .order-info-box {
    margin: 10px 0;
    gap: 12px;
  }
  .order-info-box .col-1,
  .order-info-box .col-2 {
    gap: 12px;
  }
  .order-info-box .box {
    padding: 12px 14px;
  }

  #my-reviews-table .nobr {
    white-space: normal;
  }
}
/* ============================================ *
 * Newsletter Subscriptions
 * ============================================ */
body.newsletter-manage-index .my-account .fieldset {
  margin-bottom: 20px;
}
body.newsletter-manage-index .my-account .fieldset h2 {
  display: none;
}
body.newsletter-manage-index .my-account .form-list {
  border-top: 1px solid #ededed;
  padding-top: 10px;
}

/* ============================================ *
 * Contacts
 * ============================================ */
.contacts-index-index .buttons-set {
  margin-left: 30px;
  max-width: 435px;
}
.contacts-index-index .buttons-set p.required {
  margin-right: auto;
}
@media only screen and (max-width: 639px) {
  .contacts-index-index .buttons-set {
    max-width: 330px;
    margin-left: 0;
    justify-content: flex-start;
  }
  .contacts-index-index .buttons-set p.required {
    margin-right: 0;
    margin-left: auto;
  }
}

/* ============================================ *
 * PayPal
 * ============================================ */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .paypal-review-order .col2-set .col-1,
  .paypal-review-order .col2-set .col-2 {
    padding: 0;
  }
}
.paypal-review-order .info-set {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ededed;
}
.paypal-review-order .buttons-set {
  margin-top: 0;
  padding-top: 0;
  border: 0;
}
.paypal-review-order .buttons-set button {
  margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
  .paypal-review-order .col-1 {
    padding-bottom: 0;
  }
  .paypal-review-order .field.inactive {
    display: none;
  }
}

.top-container .bml-ad {
  margin-top: 7px;
  margin-bottom: 7px;
  text-align: center;
}
.top-container .bml-ad span {
  display: inline-block;
}
.top-container .bml-ad span a {
  display: block;
}

.bml-ad {
  display: none;
  text-align: center;
  margin-bottom: 5px;
}
.bml-ad span {
  display: block;
  line-height: 0;
}
.bml-ad a {
  display: inline-block;
  max-width: 100%;
}
.bml-ad a:hover {
  opacity: 0.7;
}
.bml-ad img {
  height: auto !important;
  max-width: 100%;
}

.cart-totals-wrapper .bml-ad.large img {
  display: block;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .bml-ad.small {
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  .bml-ad.large {
    display: block;
  }
}
div.paypal-logo {
  text-align: center;
  margin: 15px 0;
  max-width: 100%;
}
div.paypal-logo span {
  display: block;
  width: 100%;
}
div.paypal-logo span a {
  display: inline-block;
  max-width: 100%;
}
div.paypal-logo span a img {
  max-width: 100%;
}
div.paypal-logo span > img {
  display: none;
}

.checkout-types div.paypal-logo {
  text-align: right;
}

.bml-checkout-type {
  list-style-type: none;
}

.sidebar .paypal-logo {
  text-align: center;
  line-height: 0;
}
.sidebar .paypal-logo > a {
  display: inline-block;
  max-width: 100%;
}
.sidebar .paypal-logo > a:hover {
  opacity: 0.8;
}
.sidebar .paypal-logo > a img {
  display: block;
}
.sidebar .paypal-logo .label {
  margin-top: 4px;
}
.sidebar .paypal-logo .label a {
  font-size: 12px;
  line-height: 1.5;
}

/* ============================================ *
 * Review - Customer
 * ============================================ */
#customer-reviews {
  width: auto;
  float: none;
}
#customer-reviews .review-heading {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 10px 0 5px;
}
#customer-reviews .review-heading:after {
  content: '';
  display: table;
  clear: both;
}
#customer-reviews .review-heading h2 {
  float: left;
  display: block;
}
#customer-reviews .review-heading .pager {
  clear: none;
  float: right;
  width: auto;
}
#customer-reviews .review-heading .pager .count-container .limiter {
  margin-bottom: 0;
}
#customer-reviews .review-heading .pager .count-container .limiter label {
  font-family: var(--font-heading);
  font-size: 10px;
  text-transform: uppercase;
}
#customer-reviews .review-heading .pager .amount {
  display: none;
}
#customer-reviews h2 {
  color: var(--color-primary);
  font-size: 12px;
  text-transform: uppercase;
}
#customer-reviews h2 span {
  color: var(--color-text);
}
#customer-reviews h3 {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
}
#customer-reviews h3 span {
  color: var(--color-primary);
}
#customer-reviews .fieldset {
  padding-top: 25px;
  width: 470px;
}
#customer-reviews .fieldset h4 {
  border-bottom: 1px solid #cccccc;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: normal;
  padding-bottom: 5px;
  text-transform: uppercase;
}
#customer-reviews .fieldset h4 em {
  display: none;
}
#customer-reviews .fieldset .form-list {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: normal;
  margin: 10px 0;
  text-transform: uppercase;
  width: 470px;
}
#customer-reviews .fieldset .form-list .inline-label:after {
  content: '';
  display: table;
  clear: both;
}
#customer-reviews .fieldset .form-list label {
  font-size: 12px;
  font-weight: normal;
}
#customer-reviews .fieldset .form-list textarea {
  border: 1px solid #cccccc;
  border-radius: 0;
  min-width: 100%;
  -webkit-appearance: none;
}
#customer-reviews .fieldset .form-list input {
  border: 1px solid #cccccc;
  border-radius: 0;
}
#customer-reviews .fieldset .form-list input[type="text"] {
  width: 100%;
}
#customer-reviews .buttons-set {
  border: none;
  margin: 0;
  width: 470px;
}
#customer-reviews dl {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 10px;
}
#customer-reviews dl dt {
  margin: 10px 0;
  text-transform: uppercase;
}
#customer-reviews dl dd {
  font-family: var(--font-heading);
  font-size: 14px;
  margin: 10px 0;
}
#customer-reviews dl dd .ratings-table {
  font-family: var(--font-heading);
  font-size: 12px;
  width: 100%;
}
#customer-reviews dl dd .ratings-table tr {
  margin-right: 15px;
}
#customer-reviews dl dd .ratings-table .review-label {
  width: 300px;
  max-width: 70%;
}
#customer-reviews dl dd table {
  margin: 15px 0;
}
#customer-reviews dl dd .review-meta {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: normal;
  text-transform: uppercase;
}

.review-summary-table {
  border-bottom: 1px solid #cccccc;
  margin: 0 0 10px;
}
.review-summary-table thead {
  background: transparent;
}
.review-summary-table thead th {
  background: transparent;
  border: none;
  padding: 15px 7px 10px 8px;
}
.review-summary-table tbody th {
  background: #fff;
  font-size: 12px;
}
.review-summary-table tbody td {
  border: none;
  text-align: center;
  padding: 0;
}
.review-summary-table tbody td label {
  width: 100%;
  display: block;
  padding: 11px 0;
}
.review-summary-table .rating-box .rating-number {
  display: none;
}
.review-summary-table .rating-box .rating-number:after {
  content: "";
  display: inline-block;
  background-position: 0 -599px;
  width: 13px;
  height: 14px;
  margin-left: 5px;
  position: relative;
  top: 2px;
}

/* ============================================ *
 * Ratings - Global
 * ============================================ */
.ratings-table {
  font-family: var(--font-heading);
  font-size: 12px;
  text-transform: uppercase;
}
.ratings-table th {
  padding-right: 10px;
}
.ratings-table .rating-box {
  background-position: 0 -615px;
  background-repeat: repeat-x;
  height: 13px;
  overflow: hidden;
  text-indent: -9999px;
  width: 65px;
}
.ratings-table .rating-box .rating {
  background-position: 0 -600px;
  background-repeat: repeat-x;
  float: left;
  height: 13px;
  text-indent: -9999px;
}

@media only screen and (max-width: 767px) {
  body.review-product-list .product-view .product-shop .price-info {
    padding-left: 0;
  }
  body.review-product-list .product-view .product-shop .extra-info {
    padding: 0;
    min-width: 84%;
  }
  body.review-product-list .product-view .product-shop .extra-info .ratings-table {
    margin: 10px 0;
    width: 100%;
  }
  body.review-product-list .product-view .product-shop .extra-info .ratings-table tr {
    margin-right: 15px;
  }
}
@media only screen and (max-width: 639px) {
  body.review-product-list .product-view .product-shop .extra-info {
    min-width: 0;
  }
  body.review-product-list .product-view .product-shop .extra-info .ratings-table tr {
    float: none;
    margin-right: 0;
  }
}
@media only screen and (max-width: 639px) {
  #customer-reviews .fieldset {
    width: 100%;
  }
  #customer-reviews .fieldset .form-list {
    width: 100%;
  }
  #customer-reviews .fieldset .form-list .inline-label label,
  #customer-reviews .fieldset .form-list .inline-label .input-box {
    float: none;
  }
  #customer-reviews .buttons-set {
    width: 100%;
  }
  #customer-reviews .review-summary-table thead th {
    padding-left: 0;
    padding-right: 0;
  }
  #customer-reviews .review-summary-table tbody th {
    padding-left: 0;
    padding-right: 0;
  }
  #customer-reviews .review-summary-table tbody td {
    width: 20%;
    padding: 0;
  }
  #customer-reviews .review-summary-table .rating-box {
    text-indent: 0;
    text-align: center;
    background: none;
    height: 19.6px;
    width: 100%;
  }
  #customer-reviews .review-summary-table .rating-box .rating {
    display: none;
  }
  #customer-reviews .review-summary-table .rating-box .rating-number {
    display: inline-block;
  }
}
@media only screen and (max-width: 639px) {
  #customer-reviews dl dd .ratings-table tr {
    float: none;
  }
}
/* ============================================ *
 * Review View Page
 * ============================================ */
.review-product-view .product-review .product-details h2 {
  border-bottom: none;
}
.review-product-view .product-review .product-img-box {
  width: auto;
  max-width: 50%;
}
.review-product-view .product-review .product-img-box > a {
  width: 100%;
}
.review-product-view .product-review .product-img-box .product-image {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .review-product-view .product-review .product-img-box {
    max-width: 100%;
  }
}
/* ============================================ *
 * Slideshow
 * ============================================ */
.slideshow-container {
  position: relative;
  display: block;
  width: 100%;
  margin: 10px 0;
  border: 1px solid #ededed;
}
.slideshow-container .slideshow {
  width: 100%;
  padding: 0;
  position: relative;
  margin: 0;
  border: 10px solid #fff;
}
.slideshow-container .slideshow > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  display: block;
  margin: 0;
}
.slideshow-container .slideshow > li:first-child {
  position: static;
  z-index: 100;
}
.slideshow-container .slideshow > li img {
  max-width: 100%;
  width: 100%;
}

.slideshow-pager {
  text-align: center;
  width: 100%;
  z-index: 115;
  position: absolute;
  bottom: 0;
  top: auto;
  overflow: hidden;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;

  user-select: none;
}
.slideshow-pager span {
  font-family: arial;
  width: 44px;
  height: 44px;
  display: inline-block;
  color: #ddd;
  cursor: pointer;
}
.slideshow-pager span:before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 1px;
  background-color: #fff;
  position: relative;
}
.slideshow-pager span:hover:before {
  background-color: #2e8ab8;
}
.slideshow-pager span.cycle-pager-active:before {
  background-color: #297aa3;
}
.slideshow-pager > * {
  cursor: pointer;
}

.slideshow-prev,
.slideshow-next {
  position: absolute;
  top: 0;
  width: 15%;
  max-width: 80px;
  height: 100%;
  opacity: 0.6;
  z-index: 110;
  cursor: pointer;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;

  user-select: none;
}
.slideshow-prev:before,
.slideshow-next:before {
  content: '';
  width: 0;
  height: 0;
  font-size: 0;
  position: absolute;
  border-style: solid;
  display: block;
  top: 50%;
  margin-top: -15px;
}
.slideshow-prev:hover,
.slideshow-next:hover {
  opacity: 1;
}
.slideshow-prev.disabled,
.slideshow-next.disabled {
  opacity: 0.5;
  cursor: default;
}

.slideshow-prev {
  left: 8px;
}
.slideshow-prev:before {
  border-width: 15px 15px 15px 0;
  border-color: transparent #fff transparent transparent;
  top: 50%;
  left: 10px;
}
.slideshow-prev:hover:before {
  border-color: transparent #2e8ab8 transparent transparent;
}

.slideshow-next {
  right: 8px;
}
.slideshow-next:before {
  border-width: 15px 0 15px 15px;
  border-color: transparent transparent transparent #fff;
  top: 50%;
  right: 10px;
}
.slideshow-next:hover:before {
  border-color: transparent transparent transparent #2e8ab8;
}

.cycle-caption {
  position: absolute;
  color: #fff;
  bottom: 15px;
  right: 15px;
  z-index: 110;
}

.cycle-overlay {
  font-family: tahoma, arial;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 120;
  background: black;
  color: #fff;
  padding: 15px;
  opacity: .5;
}

/* ============================================ *
 * Wishlist
 * ============================================ */
#wishlist-table th {
  text-align: center;
}
#wishlist-table.clean-table {
  font-family: var(--font-heading);
  font-size: 12px;
  text-transform: uppercase;
  width: 100%;
}
#wishlist-table.clean-table th {
  border-bottom: 1px solid silver;
}
#wishlist-table.clean-table td {
  padding: 15px;
  vertical-align: top;
}
#wishlist-table.clean-table thead th {
  font-family: var(--font-heading);
  font-size: 12px;
  text-transform: uppercase;
}
#wishlist-table .product-name {
  font-size: 16px;
  font-family: var(--font-heading);
  margin-bottom: 0;
  text-transform: uppercase;
}
#wishlist-table .product-name a {
  color: var(--color-primary);
}
#wishlist-table .wishlist-sku {
  font-size: 11px;
  font-family: var(--font-heading);
  margin: 5px 0;
}
#wishlist-table textarea {
  border: 1px solid silver;
  width: 100%;
  height: 45px;
  font-size: 11px;
  font-family: var(--font-heading);
}
#wishlist-table textarea::placeholder {
  text-transform: uppercase;
}
#wishlist-table textarea:focus {
  border: 1px solid var(--color-primary);
}
#wishlist-table .item-manage {
  text-align: right;
  max-width: 639px;
  padding-top: 5px;
}
#wishlist-table .item-manage .button {
  font-size: 11px;
  padding: 3px 5px;
}
#wishlist-table .cart-cell {
  text-align: center;
}
#wishlist-table td.customer-wishlist-item-image {
  width: 113px;
}
#wishlist-table td.customer-wishlist-item-quantity {
  width: 3em;
}
#wishlist-table td.customer-wishlist-item-price {
  width: 120px;
  text-align: center;
}
#wishlist-table td.customer-wishlist-item-cart {
  width: 150px;
}
#wishlist-table td.customer-wishlist-item-cart .button {
  font-size: 12px;
  margin-bottom: 10px;
  padding: 3px 5px;
  width: 100%;
}
#wishlist-table td.customer-wishlist-item-cart .truncated {
  margin-bottom: 10px;
}
#wishlist-table td.customer-wishlist-item-cart > p {
  margin-bottom: 0;
}
#wishlist-table td.customer-wishlist-item-cart .remove-whishlist-item {
  text-align: center;
}
#wishlist-table td.customer-wishlist-item-cart .btn-remove {
  vertical-align: top;
}
#wishlist-table td.customer-wishlist-item-remove {
  width: 20px;
}
#wishlist-table td .button,
#wishlist-table td button {
  white-space: normal;
}
#wishlist-table .price-box {
  font-family: var(--font-heading);
  font-size: 12px;
}
#wishlist-table .price-box .price {
  color: var(--color-text);
}
#wishlist-table .giftregisty-add {
  margin-top: 5px;
}
#wishlist-table .giftregisty-add .change {
  display: none;
}
#wishlist-table .giftregisty-add li {
  cursor: pointer;
  color: var(--color-primary);
  margin-bottom: 3px;
}
#wishlist-table .truncated .details {
  background: none;
  color: var(--color-primary);
}
#wishlist-table td[data-rwd-label]:before {
  font-weight: 600;
}

@media only screen and (max-width: 1279px) {
  #wishlist-table.clean-table td {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media only screen and (max-width: 1023px) {
  #wishlist-table.clean-table td {
    padding-left: 5px;
    padding-right: 5px;
  }
  #wishlist-table.clean-table td textarea {
    height: 100px;
  }
  #wishlist-table.clean-table td.customer-wishlist-item-cart {
    width: 110px;
  }
  #wishlist-table .product-name {
    font-size: 13px;
  }
}
@media only screen and (max-width: 767px) {
  #wishlist-table:after {
    content: '';
    display: table;
    clear: both;
  }
  #wishlist-table .product-name {
    font-size: 16px;
  }
  #wishlist-table textarea {
    height: 68px;
    max-width: 100%;
  }
  #wishlist-table .item-manage {
    max-width: 100%;
  }
  #wishlist-table tr {
    position: relative;
  }
  #wishlist-table tr:after {
    content: '';
    display: table;
    clear: both;
  }
  #wishlist-table td.customer-wishlist-item-image {
    width: 70px;
  }
  #wishlist-table td.customer-wishlist-item-image img {
    width: 70px;
    height: 70px;
  }
  #wishlist-table td.customer-wishlist-item-cart p {
    margin-bottom: 0;
  }
  #wishlist-table td.customer-wishlist-item-cart .remove-whishlist-item {
    margin-right: 0;
    padding-top: 4px;
  }
  #wishlist-table td.customer-wishlist-item-cart {
    padding-right: 15px;
  }
}
@media only screen and (max-width: 639px) {
  #wishlist-table td.customer-wishlist-item-quantity {
    padding-left: 0;
  }
  #wishlist-table td.customer-wishlist-item-image,
  #wishlist-table th.customer-wishlist-item-image {
    display: none;
  }
}
@media only screen and (max-width: 639px) {
  #wishlist-table tr {
    position: relative;
  }
  #wishlist-table th.customer-wishlist-item-image {
    display: block;
  }
  #wishlist-table td.customer-wishlist-item-image, #wishlist-table td.customer-wishlist-item-info, #wishlist-table td.customer-wishlist-item-quantity, #wishlist-table td.customer-wishlist-item-price, #wishlist-table td.customer-wishlist-item-cart {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    empty-cells: hide;
  }
  #wishlist-table td.customer-wishlist-item-image {
    display: block;
    overflow: hidden;
  }
  #wishlist-table td.customer-wishlist-item-image a {
    float: left;
  }
  #wishlist-table td.customer-wishlist-item-image a img {
    width: 113px;
    height: 113px;
  }
  #wishlist-table td.customer-wishlist-item-quantity, #wishlist-table td.customer-wishlist-item-price {
    text-align: left;
  }
  #wishlist-table td.customer-wishlist-item-quantity:before, #wishlist-table td.customer-wishlist-item-price:before {
    float: left;
    margin-right: 15px;
  }
  #wishlist-table td.customer-wishlist-item-quantity .cart-cell, #wishlist-table td.customer-wishlist-item-price .cart-cell {
    text-align: left;
  }
  #wishlist-table td.customer-wishlist-item-quantity .price-box, #wishlist-table td.customer-wishlist-item-price .price-box {
    margin-top: 0;
  }
  #wishlist-table td.customer-wishlist-item-cart .cart-cell {
    float: left;
    width: 48%;
  }
  #wishlist-table td.customer-wishlist-item-cart > p {
    float: right;
    width: 48%;
  }
  #wishlist-table td.customer-wishlist-item-remove {
    position: absolute;
    top: 15px;
    right: 0;
    display: block;
    padding: 0;
    height: 20px;
  }
  #wishlist-table.clean-table td.customer-wishlist-item-cart {
    width: 100%;
  }
}
/* ============================================ *
 * Wishlist Sidebar
 * ============================================ */
.block-wishlist .mini-products-list > li:not(:last-child) {
  padding-bottom: 5px;
}
.block-wishlist .product-details .product-name {
  padding-top: 0;
  margin-bottom: 5px;
}
.block-wishlist .price-box {
  float: left;
  margin: 0;
}
.block-wishlist .price-box,
.block-wishlist .price-box .price,
.block-wishlist .link-cart {
  font-size: 12px;
}
.block-wishlist .link-cart {
  float: left;
  text-transform: uppercase;
  margin-right: 7px;
  padding-right: 7px;
  border-right: 1px solid #ededed;
}

/* ============================================ *
 * Checkout - Mini cart
 * ============================================ */
.header-minicart {
  display: inline-block;
}
@media only screen and (max-width: 767px) {
  .header-minicart {
    position: absolute;
    top: 10px;
    right: 12px;
  }
  .header-minicart .block-cart {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    box-shadow: var(--shadow-medium);
    max-height: 70vh;
    overflow-y: auto;
    padding: 15px;
  }
  .header-minicart .minicart-close {
    display: flex;
  }
}
.header-minicart .minicart-message {
  display: block;
  padding: 10px;
}
.header-minicart .empty {
  padding: 10px;
  text-align: center;
}
.header-minicart .minicart-wrapper {
  clear: both;
  position: relative;
}
.header-minicart .minicart-wrapper:before, .header-minicart .minicart-wrapper:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.header-minicart .minicart-wrapper:before {
  background-color: #fff;
  opacity: 0.8;
  z-index: 2;
}
.header-minicart .minicart-wrapper:after {
  background-image: url("https://logisch-bio.de/skin/frontend/rwd/logbio/images/opc-ajax-loader.gif");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}
.header-minicart .minicart-wrapper.loading {
  position: relative;
}
.header-minicart .minicart-wrapper.loading:before, .header-minicart .minicart-wrapper.loading:after {
  display: block;
}
.header-minicart .block-cart {
  display: none;
}
.header-minicart .block-subtitle {
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: bold;
  line-height: 1.4;
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0;
}
.header-minicart .block-subtitle .close {
  width: 40px;
  float: right;
  display: block;
  color: var(--color-text);
  text-decoration: none;
  font-weight: normal;
  font-size: 30px;
  position: absolute;
  top: -8px;
  right: -3px;
}
.header-minicart .mini-products-list {
  padding: 10px;
  padding-top: 0;
}
.header-minicart .mini-products-list li {
  padding: 8px 5px 8px 11px;
  border-bottom: 1px solid #ddd;
  position: relative;
}
.header-minicart .mini-products-list li.last {
  border: none;
}
.header-minicart .mini-products-list li .product-details {
  position: relative;
}
.header-minicart .product-details .product-name {
  padding-top: 0;
  font-weight: bold;
}
.header-minicart .product-details .product-name a {
  color: var(--color-primary);
}
.header-minicart .info-wrapper {
  margin-bottom: 0.5em;
}
.header-minicart .info-wrapper th {
  text-transform: uppercase;
  padding-right: 10px;
}
.header-minicart .info-wrapper td {
  color: var(--color-primary);
  clear: right;
}
.header-minicart .info-wrapper .qty-wrapper td {
  height: 33px;
  line-height: 33px;
}
.header-minicart .info-wrapper .qty {
  padding-left: 4px;
  padding-right: 4px;
  margin-right: 2px;
  width: 3.2em;
  text-align: center;
  height: 30px;
}
.header-minicart .info-wrapper .quantity-button {
  opacity: 0;
  transition-property: opacity;
  transition-duration: 100ms;
}
.header-minicart .info-wrapper .quantity-button[disabled] {
  cursor: default;
}
.header-minicart .info-wrapper .quantity-button.visible {
  opacity: 1;
}
.header-minicart .subtotal {
  background-color: #ddd;
  text-align: center;
  line-height: 2em;
}
.header-minicart .subtotal .label {
  color: #fff;
  text-transform: uppercase;
}
.header-minicart .subtotal .price {
  color: var(--color-primary);
}
.header-minicart .minicart-actions {
  padding: 10px;
  margin-top: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.header-minicart .minicart-actions .checkout-button {
  min-width: 145px;
}
.header-minicart .minicart-actions .cart-link {
  height: 33px;
  line-height: 39px;
  text-transform: uppercase;
  font-size: 13px;
}
.header-minicart .minicart-actions .paypal-logo .paypal-or {
  line-height: 1.6;
}
.header-minicart #minicart-error-message {
  text-align: center;
  color: #d00;
  display: none;
}
.header-minicart #minicart-success-message {
  text-align: center;
  color: green;
  display: none;
}
.header-minicart .jcarousel-control-prev,
.header-minicart .jcarousel-control-next {
  display: none;
}

.header-minicart.skip-active .block-cart,
.block-cart.skip-active {
  display: block;
}

@media only screen and (min-width: 768px) {
  .checkout-types.minicart {
    float: none;
    text-align: center;
  }
}
@media only screen and (max-width: 639px) {
  .header-minicart a.skip-cart {
    z-index: 1;
  }
}
@media only screen and (max-width: 767px) {
  .header-minicart .subtotal .label {
    color: var(--color-text);
  }
  .header-minicart .minicart-wrapper:before {
    background-color: #ededed;
  }
  .header-minicart .quantity-button {
    float: none;
  }
  .header-minicart .header-minicart .block-cart {
    padding: 15px;
  }
  .header-minicart .header-minicart .block-subtitle {
    padding-top: 59px;
  }
  .header-minicart .minicart-actions {
    padding-bottom: 33px;
  }
  .header-minicart .minicart-actions .cart-link {
    bottom: 0;
    right: 10px;
    position: absolute;
  }
  .header-minicart .minicart-actions .checkout-types.minicart li {
    display: inline-block;
  }
  .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo > a {
    display: inline;
  }
  .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo .bml_button {
    display: inline-block;
    vertical-align: top;
  }
  .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo .paypal-or {
    width: auto;
    float: none;
    display: inline;
    margin: 0 10px 5px 10px;
    line-height: 40px;
  }
  .header-minicart .minicart-actions .cart-link {
    right: auto;
    left: 0;
    text-align: center;
    width: 100%;
  }
  .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo .paypal-or,
  .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo .paypal-button {
    width: 100%;
    display: block;
    margin-left: 0;
  }
  .header-minicart .minicart-actions .checkout-types.minicart li .paypal-logo .paypal-or {
    line-height: 1.6;
  }
}
@media only screen and (max-width: 639px) {
  .header-minicart .minicart-actions .checkout-button {
    width: 100%;
  }
}
/* ============================================ *
 * Search - Auto Suggest
 * ============================================ */
.search-autocomplete {
  left: 0 !important;
  overflow: visible !important;
  position: relative !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 200;
}
.search-autocomplete ul {
  border-radius: var(--radius-xs);
  background-color: #fff;
  border: 1px solid var(--color-primary);
  left: 0;
  padding-left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.search-autocomplete ul li {
  border-bottom: 1px solid #f4f4f4;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 6px;
  text-align: left;
}
.search-autocomplete ul li:hover {
  color: #2e8ab8;
}
.search-autocomplete ul li.selected {
  background-color: var(--color-primary);
  color: #fff;
}
.search-autocomplete ul li .amount {
  float: right;
  font-weight: bold;
}
.search-autocomplete ul li:last-child {
  border-bottom: none;
}
.search-autocomplete:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid var(--color-primary);
  border-top: none;
  left: 50%;
  top: -7px;
}

/* ============================================ *
 * Search - Advanced
 * ============================================ */
.advanced-search {
  /*background: #f4f4f4;
  border: 1px solid #ededed;
  padding: 30px;*/
}
.advanced-search a
{
	font-size: 10px;
}
.advanced-search select.multiselect option {
  border-bottom: 1px solid #ededed;
  padding: 2px 5px;
}

@media only screen and (max-width: 767px) {
  .advanced-search a {
    font-size: 16px;
  }
}
@media only screen and (max-width: 639px) {
  .advanced-search {
    padding: 15px;
  }
}
/* ============================================ *
 * Account - Reviews
 * ============================================ */
.product-review .product-img-box p.label {
  border-bottom: 1px solid #cccccc;
  font-size: 16px;
  font-family: var(--font-heading);
  margin-top: 20px;
  padding-bottom: 10px;
  text-transform: uppercase;
}
.product-review .product-img-box .rating-box {
  margin: 15px 0;
}
.product-review .product-details h2 {
  border-bottom: 1px solid #cccccc;
  color: #3399CC;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-heading);
  padding-bottom: 10px;
}
.product-review .ratings-table {
  font-family: var(--font-heading);
}
.product-review .ratings-table th {
  padding-right: 10px;
}
.product-review .ratings-table tr {
  float: left;
  font-size: 12px;
  margin-right: 10px;
  text-transform: uppercase;
}
.product-review .ratings-description dt {
  border-bottom: 1px solid #cccccc;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-heading);
  margin-top: 20px;
  padding: 10px 0;
  text-transform: uppercase;
}
.product-review .ratings-description dd {
  color: #737373;
  font-family: var(--font-heading);
  font-size: 13px;
}

@media only screen and (min-width: 768px) {
  .product-review .ratings-table tr {
    float: none;
  }
}
@media only screen and (min-width: 1024px) {
  .product-review .ratings-table tr {
    float: left;
    margin-right: 15px;
  }
}
@media only screen and (max-width: 639px) {
  .product-review .ratings-table tr {
    float: none;
  }
}
/* ============================================ *
 * CMS Pages
 * ============================================ */
.cms-page-view .page-title h1,
.cms-page-view .page-title h3,
.cms-page-view .page-head h1,
.cms-page-view .page-head h3,
.cms-no-route .page-title h1,
.cms-no-route .page-title h3,
.cms-no-route .page-head h1,
.cms-no-route .page-head h3 {
  border: none;
}
.cms-page-view .std img,
.cms-no-route .std img {
  max-width: 100%;
}
.cms-page-view .std p,
.cms-no-route .std p {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-style: normal;
  line-height: 1.7;
}
.cms-page-view .std h1,
.cms-no-route .std h1 {
  color: var(--color-text-dark);
  font-family: var(--font-heading);
  font-weight: 700;
}
.cms-page-view .std h2,
.cms-no-route .std h2 {
  color: var(--color-text-dark);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  text-transform: none;
}
.cms-page-view .std li,
.cms-no-route .std li {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-style: normal;
  line-height: 1.7;
}
.cms-page-view .col-left:after,
.cms-no-route .col-left:after {
  content: '';
  display: table;
  clear: both;
}

.cms-no-route .std img {
  width: 100%;
}

.cms-page-view .std .messages,
.cms-home .std .messages,
.cms-no-route .std .messages {
  margin-bottom: 10px;
}
.cms-page-view .std .messages ul,
.cms-home .std .messages ul,
.cms-no-route .std .messages ul {
  margin-bottom: 0;
}
.cms-page-view .std .messages li,
.cms-home .std .messages li,
.cms-no-route .std .messages li {
  list-style: none;
  margin-left: 0;
  font-style: normal;
  font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
}

#accordion .toggle-tabs {
  display: none;
}
#accordion > dl > dt {
  margin: 0;
  margin-bottom: 10px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;

  user-select: none;
  font-weight: normal;
  margin-bottom: 0;
  padding: 7px 10px 7px 24px;
  border-width: 1px;
  border-style: solid;
  border-color: #cccccc;
  position: relative;
  background-color: var(--color-bg-light);
  display: block;
}
#accordion > dl > dt:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 4px solid var(--color-primary);
  border-bottom: none;
  left: 10px;
  top: 50%;
  margin-top: -3px;
}
#accordion > dl > dt:hover {
  background-color: #ececec;
}
#accordion > dl > dd {
  padding: 10px;
  margin: 0;
  border-width: 0 1px;
  border-style: solid;
  border-color: #cccccc;
}
#accordion > dl > dd:last-child {
  border-width: 0 1px 1px 1px;
}
#accordion li {
  position: relative;
  overflow: hidden;
}
#accordion li .plusimage h2 {
  margin-right: 10px;
}

.page-sitemap .links {
  display: block;
  text-align: right;
  margin: 0 20px 0 0;
}
.page-sitemap .links a {
  position: relative;
}
.page-sitemap .sitemap {
  padding: 0 20px;
  margin: 15px 0;
  font-size: 12px;
}
.page-sitemap .sitemap li {
  margin: 3px 0;
}

.contacts-index-index h1 {
  border: none;
}

#contactForm {
  padding-left: 40px;
}
#contactForm h2 {
  display: none;
}
#contactForm:after {
  content: '';
  display: table;
  clear: both;
}
#contactForm .fieldset .legend + .required {
  margin: 0;
}

@media only screen and (max-width: 767px) {
  #contactForm {
    padding-left: 0;
  }
}
/* ============================================ *
 * Pricing Conditions
 * ============================================ */
.price-box .minimal-price-link .label {
  color: #cf5050;
  font-family: var(--font-heading);
  font-size: 12px;
  text-transform: uppercase;
}

.map-info {
  white-space: nowrap;
}

.catalog-product-view .map-info {
  white-space: normal;
}
.catalog-product-view .map-info > span {
  float: right;
  margin-bottom: 5px;
}
.catalog-product-view .map-info .price-box.map-info > a {
  float: right;
  width: 100%;
}

/* ============================================ *
 * Cookies
 * ============================================ */
.notice-cookie .notice-inner {
  padding-bottom: 0;
}
.notice-cookie .notice-inner:after {
  content: '';
  display: table;
  clear: both;
}
.notice-cookie .notice-text {
  float: left;
  max-width: 90%;
  padding-top: 4px;
  text-align: left;
}
.notice-cookie .notice-text p {
  padding-bottom: 14.5px;
  line-height: 1.3;
}
.notice-cookie .actions {
  float: left;
  text-align: right;
  padding-bottom: 14.5px;
}

@media only screen and (max-width: 1023px) {
  .notice-cookie .notice-text {
    max-width: 86%;
  }
}
@media only screen and (max-width: 767px) {
  .notice-cookie {
    padding: 0 20px;
  }
  .notice-cookie .notice-text {
    max-width: 82%;
    padding-top: 0;
  }
}
@media only screen and (max-width: 639px) {
  .notice-cookie {
    padding: 0 20px;
  }
  .notice-cookie .notice-inner {
    background-position: left 10px;
  }
  .notice-cookie .notice-inner:after {
    content: '';
    display: table;
    clear: both;
  }
  .notice-cookie .notice-text {
    float: none;
    max-width: 100%;
    padding-top: 0;
  }
  .notice-cookie .actions {
    text-align: left;
  }
}
/* ============================================ *
 * Tags
 * ============================================ */
#addTagForm button {
  margin-top: 5px;
  margin-bottom: 10px;
}

#addTagForm .form-add {
  margin-top: 10px;
}

.product-tags {
  background-color: var(--color-bg-light);
  border: 1px solid #cccccc;
  float: left;
  margin-bottom: 10px;
  padding: 5px 1% 10px;
  width: 98%;
}

.product-tags li {
  float: left;
  margin-right: 15px;
}

.product-tags li.last {
  margin-right: 0;
}

.tags-list {
  float: left;
  width: 100%;
  margin-bottom: 10px;
}

.tags-list > li {
  float: left;
  margin-right: 10px;
}

.block-tags .actions > a {
  font-size: 12px;
}

.my-tag-edit .button.btn-remove {
  padding: 0;
}
.my-tag-edit .button.btn-remove:after {
  color: #fff;
}

@media only screen and (max-width: 767px) {
  .tags-list > li,
  .tags-list {
    float: none;
  }
}
/* ============================================ *
 * Captcha
 * ============================================ */
.captcha-note {
  clear: left;
  padding-top: 5px;
}

.captcha-image {
  float: left;
  display: inline;
  max-width: 100%;
  position: relative;
  width: 258px;
  margin-bottom: 10px;
}

.captcha-image .captcha-img {
  border: 1px solid #b6b6b6;
  vertical-align: bottom;
  width: 100%;
}

.registered-users .captcha-image {
  margin: 0;
}

.captcha-reload {
  cursor: pointer;
  position: absolute;
  top: 2px;
  right: 2px;
}

.captcha-reload.refreshing {
  animation: rotate 1.5s infinite linear;
  -webkit-animation: rotate 1.5s infinite linear;
  -moz-animation: rotate 1.5s infinite linear;
}

.customer-account-create .scaffold-form .captcha-input-container label:first-child {
  width: 100%;
}

.captcha-reload {
  position: absolute;
  right: 4px;
  top: 4px;
}

.captcha-img {
  border: 20px solid #bbbbbb;
}

.captcha-input-container {
  margin-bottom: 10px;
}

.control.newsletter-box, .captcha-input-container, .captcha-img-container {
  float: none;
  clear: both;
}
.control.newsletter-box:after, .captcha-input-container:after, .captcha-img-container:after {
  content: '';
  content: '';
  display: table;
  clear: both;
}

/* ============================================ *
 * Checkout Billing Fix to place the Captcha properly
 * ============================================ */
#co-billing-form ul.form-list > .control {
  float: none;
  margin: 0 0 5px;
  width: 100%;
}

/* ============================================ *
 * OPC Checkout: Float → Flex/Grid Migration
 * ============================================ */

/* --- .fields two-column layout: Float → CSS Grid --- */
.opc .form-list li.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.opc .form-list li.fields > .field {
  float: none;
  width: auto;
  min-width: 0;
}
/* Name widget wrapper spans full row, own sub-grid */
.opc .form-list li.fields > [class*="customer-name"] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}
.opc .form-list li.fields > [class*="customer-name"] > .field {
  float: none;
  width: auto;
  min-width: 0;
}

/* --- .control radio/checkbox: Float → Flex --- */
.opc .form-list .control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.opc .form-list .control div.input-box {
  float: none;
  display: inline;
}
.opc .form-list .control input.radio,
.opc .form-list .control input.checkbox {
  float: none;
  margin: 0 6px 0 0;
  flex-shrink: 0;
}
.opc .form-list .control label {
  display: inline-block;
  padding: 6px 10px 6px 6px;
  min-width: 0;
}

/* --- Scaffold-form override (logged-in persistent billing) --- */
.opc .scaffold-form label:first-child {
  float: none;
  width: auto;
  padding: 0 0 2px 0;
}
.opc .scaffold-form .input-box {
  float: none;
  max-width: 100%;
}

/* --- Mobile: single column --- */
@media only screen and (max-width: 767px) {
  .opc .form-list li.fields,
  .opc .form-list li.fields > [class*="customer-name"] {
    grid-template-columns: 1fr;
  }
}

/* ============================================ *
 * Account - Orders, Invoices, Credit Memos.
 * ============================================ */
@media only screen and (max-width: 639px) {
  .sales-order-invoice .sub-title,
  .sales-order-creditmemo .sub-title,
  .sales-order-shipment .sub-title {
    float: left;
    font-size: 15px;
    text-align: center;
    width: 100%;
  }
  .sales-order-invoice .order-links,
  .sales-order-creditmemo .order-links,
  .sales-order-shipment .order-links {
    text-align: center;
    width: 100%;
  }
}
/* ============================================ *
 * Recurring Profiles
 * ============================================ */
#recurring_profile_list_view th {
  white-space: normal;
}
#recurring_profile_list_view th span {
  white-space: inherit;
}
.recurring-profiles-title {
  float: left;
}
.recurring-profiles-title h1 {
  margin-bottom: 7px;
}

body.customer-account .my-account .title-buttons.recurring-profiles-title-buttons {
  float: right;
  text-align: right;
  margin-bottom: 30px;
}
@media only screen and (max-width: 639px) {
  #recurring_profile_list_view {
    font-size: 12px;
  }
  #recurring_profile_list_view a {
    font-size: inherit;
  }
  #recurring_profile_list_view th,
  #recurring_profile_list_view td {
    padding: 2px;
  }
  body.customer-account .my-account .title-buttons.recurring-profiles-title-buttons {
    text-align: center;
    float: none;
  }
}
body.customer-account .my-account .title-buttons.recurring-profiles-title-buttons .button {
  position: static;
}

.recurring-profiles-messages:after {
  content: '';
  display: table;
  clear: both;
}

#recurring_start_date_trig {
  display: inline;
}

/* ============================================ *
 * Billing Agreements
 * ============================================ */
.billing-agreements .info-box {
  margin-bottom: 30px;
}
.billing-agreements .info-box:after {
  content: '';
  display: table;
  clear: both;
}
.billing-agreements .info-box .form-list {
  max-width: 400px;
  width: 100%;
}
.billing-agreements .info-box .box-title {
  margin-top: 20px;
  margin-bottom: 7px;
}
.billing-agreements .info-box .button {
  float: right;
  margin-top: 7px;
}
.billing-agreements #payment_method {
  width: 100%;
  margin-top: 7px;
  margin-bottom: 7px;
}

.billing-agreement-view-header-wrapper .heading {
  max-width: 80%;
}
@media only screen and (max-width: 639px) {
  .billing-agreements .info-box .button {
    width: 100%;
    float: none;
  }
  .billing-agreement-view-header-wrapper .heading {
    max-width: 100%;
  }
}

.billing-agreement-details td, .billing-agreement-details th {
  padding: 3.5px;
}

@media only screen and (max-width: 1023px) {
  .billing-agreements .data-table .created-at,
  .billing-agreements .data-table .updated-at {
    display: none;
  }
}
/* ============================================ *
 * Popular Search Terms Cloud
 * ============================================ */
.catalogsearch-term-popular .tags-list {
  float: left;
  width: 100%;
}

.catalogsearch-term-popular .tags-list > li {
  float: left;
  height: 40px;
  margin-right: 25px;
}

/* ============================================ *
 * Widgets
 * ============================================ */
/* -------------------------------------------- *
 * Add to cart by SKU
 */
.sidebar .widget-addbysku .sku-table .input-text:not(.qty) {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .sidebar .widget-addbysku .sku-table .input-text:not(.qty) {
    max-width: 100px;
  }
}

.widget {
  clear: both;
}

.widget .pager {
  float: none;
  width: 100%;
}

/* FD-013 Einheit 7, 18.08.2026: Die Rastervarianten hingen an den vier
   Layoutklassen, die es nicht mehr gibt. Das Widget-Raster folgt jetzt der
   Regel aus css/listing.css und damit der Breite. */
/* ============================================ *
 * Checkout - Multiple Addresses
 * ============================================ */
body[class*="checkout-multishipping-"] .checkout-progress {
  display: flex;
  width: 100%;
  margin-bottom: 25px;
}
body[class*="checkout-multishipping-"] .checkout-progress > li {
  flex: 1;
  text-align: center;
  padding: 8px 1% 6px;
  background: var(--color-bg-light);
  text-transform: uppercase;
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  margin-bottom: 10px;
  font-family: var(--font-heading);
}
body[class*="checkout-multishipping-"] .checkout-progress > li.active {
  background-color: #dddddd;
}
body[class*="checkout-multishipping-"] .checkout-progress > li.last {
  border-right: 0;
}
body[class*="checkout-multishipping-"] .page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 15px;
}
body[class*="checkout-multishipping-"] .page-title h1 {
  border: 0 none;
  margin-top: 2px;
  margin-right: 2%;
}
body[class*="checkout-multishipping-"] .page-title .button {
  margin-left: auto;
}
body[class*="checkout-multishipping-"] .multiple-checkout > h2 {
  text-transform: none;
  font-size: 17px;
  margin-bottom: 15px;
}
body[class*="checkout-multishipping-"] .col-2.col-wide {
  width: 66%;
}
body[class*="checkout-multishipping-"] .col-1.col-narrow {
  width: 30%;
}
body[class*="checkout-multishipping-"] .actions {
  margin-bottom: 10px;
}
body[class*="checkout-multishipping-"] .grand-total {
  text-align: right;
  font-size: 16px;
  font-weight: bold;
}
body[class*="checkout-multishipping-"] #checkout-review-submit {
  margin-left: auto;
}
body[class*="checkout-multishipping-"] #review-buttons-container {
  margin-left: auto;
  text-align: right;
}

.checkout-multishipping-addresses .btn-remove2 {
  text-indent: -5555px;
  display: block;
  width: 22px;
  height: 22px;
}

.checkout-multishipping-shipping .gift-messages {
  margin-top: 20px;
}
.checkout-multishipping-shipping .gift-messages-form {
  margin-top: 15px;
}
.checkout-multishipping-shipping .gift-messages-form h4 {
  margin-top: 15px;
  margin-bottom: 5px;
}
.checkout-multishipping-shipping .gift-messages-form .form-list {
  margin-top: 10px;
  margin-bottom: 25px;
}
.checkout-multishipping-shipping .gift-messages-form .item {
  margin-top: 15px;
}

.checkout-multishipping-shipping .col-1 .box-title h2, .checkout-multishipping-shipping .col-1 .box-title h3, .checkout-multishipping-shipping .col-1 .box-title h4, .checkout-multishipping-shipping .col-2 .box-title h2, .checkout-multishipping-shipping .col-2 .box-title h3, .checkout-multishipping-shipping .col-2 .box-title h4,
.checkout-multishipping-billing .col-1 .box-title h2,
.checkout-multishipping-billing .col-1 .box-title h3,
.checkout-multishipping-billing .col-1 .box-title h4,
.checkout-multishipping-billing .col-2 .box-title h2,
.checkout-multishipping-billing .col-2 .box-title h3,
.checkout-multishipping-billing .col-2 .box-title h4,
.checkout-multishipping-overview .col-1 .box-title h2,
.checkout-multishipping-overview .col-1 .box-title h3,
.checkout-multishipping-overview .col-1 .box-title h4,
.checkout-multishipping-overview .col-2 .box-title h2,
.checkout-multishipping-overview .col-2 .box-title h3,
.checkout-multishipping-overview .col-2 .box-title h4 {
  font-weight: normal;
  width: 100%;
  background: var(--color-bg-light);
  border-bottom: 1px solid #cccccc;
  padding: 10px;
  font-size: 14px;
}
.checkout-multishipping-shipping .col-1 > h4, .checkout-multishipping-shipping .col-2 > h4,
.checkout-multishipping-billing .col-1 > h4,
.checkout-multishipping-billing .col-2 > h4,
.checkout-multishipping-overview .col-1 > h4,
.checkout-multishipping-overview .col-2 > h4 {
  font-weight: normal;
  width: 100%;
  background: var(--color-bg-light);
  border-bottom: 1px solid #cccccc;
  padding: 10px;
  font-size: 14px;
}
.checkout-multishipping-shipping .col-1 .box-content, .checkout-multishipping-shipping .col-2 .box-content,
.checkout-multishipping-billing .col-1 .box-content,
.checkout-multishipping-billing .col-2 .box-content,
.checkout-multishipping-overview .col-1 .box-content,
.checkout-multishipping-overview .col-2 .box-content {
  margin-bottom: 25px;
  padding-left: 10px;
  margin-top: 10px;
}

.checkout-multishipping-billing .sp-methods dt {
  float: left;
  width: 100%;
}

.checkout-multishipping-payment-customerbalance input.checkbox {
  margin-left: 15px;
}

#multiship-addresses-table > tbody > tr > td.a-center.last > a {
  background-image: none;
}

#review-order-form > div:nth-child(3) > div.divider {
  width: 100%;
  clear: both;
}

@media only screen and (max-width: 1023px) {
  body[class*="checkout-multishipping-"] .checkout-progress span {
    word-spacing: 300px;
  }

  #review-order-form .col-1,
  #review-order-form .col-2 {
    float: none;
    width: auto;
    border: 0;
    padding-right: 0;
    padding-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  body[class*="checkout-multishipping-"] .checkout-progress span {
    width: 12px;
  }
  body[class*="checkout-multishipping-"] .checkout-progress {
    flex-direction: column;
  }
  body[class*="checkout-multishipping-"] .checkout-progress li {
    width: 100%;
    margin: 0;
    text-align: left;
    padding-left: 3%;
    border-right: 0;
  }
  body[class*="checkout-multishipping-"] .checkout-progress span {
    word-spacing: 1px;
    width: 12px;
  }
  body[class*="checkout-multishipping-"] .page-title .button {
    margin-left: 0;
    margin-bottom: 10px;
  }
  body[class*="checkout-multishipping-"] .linearize-table tfoot td {
    text-align: right;
  }
  body[class*="checkout-multishipping-"] .linearize-table select {
    width: 100%;
    min-width: 200px;
  }
  body[class*="checkout-multishipping-"] .col-1.col-narrow, body[class*="checkout-multishipping-"] .col-2.col-wide {
    width: 100%;
    padding: 0;
  }
}
@media only screen and (max-width: 639px) {
  .checkout-multishipping-addresses .linearize-table tbody td[data-rwd-label] {
    text-align: left;
    padding-left: 10px;
    margin-top: 12px;
  }
}
@media only screen and (max-width: 639px) {
  body[class*="checkout-multishipping-"] .buttons-set .back-link {
    display: block;
  }
}
/* ============================================ *
 * Calendar styles (restore styles from /js/calendar)
 * ============================================ */
div.calendar table {
  border-collapse: separate;
}
div.calendar table td.button {
  display: table-cell;
  background: inherit;
  color: inherit;
  text-transform: none;
}

#nav
{
    float: right;
}

.bounceIn
{
    -webkit-animation-name:bounceIn;
    animation-name:bounceIn;
    -webkit-animation-duration:.75s;
    animation-duration:.75s;
}
/*
    Key frames
*/

@keyframes bounceIn
{
    0%,100%,20%,40%,60%,80%
    {
        -webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);
        transition-timing-function:cubic-bezier(0.215,.61,.355,1);
    }
    0%
    {
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        -ms-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3);
    }
    20%
    {
        -webkit-transform:scale3d(1.1,1.1,1.1);
        -ms-transform:scale3d(1.1,1.1,1.1);
        transform:scale3d(1.1,1.1,1.1);
    }
    40%
    {
        -webkit-transform:scale3d(.9,.9,.9);
        -ms-transform:scale3d(.9,.9,.9);
        transform:scale3d(.9,.9,.9);
    }
    60%
    {
        opacity:1;
        -webkit-transform:scale3d(1.03,1.03,1.03);
        -ms-transform:scale3d(1.03,1.03,1.03);
        transform:scale3d(1.03,1.03,1.03);
    }
    80%
    {
        -webkit-transform:scale3d(.97,.97,.97);
        -ms-transform:scale3d(.97,.97,.97);
        transform:scale3d(.97,.97,.97);
    }
    100%
    {
        opacity:1;
        -webkit-transform:scale3d(1,1,1);
        -ms-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1);
    }
}
/* Qty spinner: circle +/- buttons around input */
.qty-spinner {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.qty-spinner .product_addtocart_grid_input,
.qty-spinner .input-text.qty,
.qty-spinner input[name^="qty"] {
    width: 36px !important;
    height: 30px;
    text-align: center;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 30px;
    -moz-appearance: textfield;
}
.qty-spinner input::-webkit-outer-spin-button,
.qty-spinner input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #333;
    transition: background-color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.qty-btn:hover {
    background: var(--color-bg-hover);
    border-color: #999;
}
.qty-btn:active {
    background: #e0e0e0;
}
.qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.product_list_add_form .qty-spinner {
    margin: 10px 0;
}
.product_list_add_form_grid .qty-spinner {
    margin: 5px 0;
}
.favorites_add
{
    margin-bottom: 5px;
}
/* (footer social styles moved to main footer section) */
/* paypal express related custom css */
.col-left.sidebar .actions
{
    text-align: center;
}
.col-left.sidebar .paypal-logo
{
    height: 42px;
}
.col-left.sidebar .paypal-logo a
{
    margin: 0 auto;
    width: 100%;
}
.col-left.sidebar .paypal-logo a img
{
    display: inline;
}
.col-left.sidebar .actions > li
{
    list-style: none;
}
.col-left.sidebar .actions > li .paypal-or
{
    font-size: 10px;
}
.col-left.sidebar .actions > button
{
    /*background: #099809;
    color: #fff;*/
    float: none;
    width: 145px;
}
.col-left.sidebar .actions > button:hover
{
    /*background: #117e2d;*/
}
#ppplus
{
    position: relative;
}
#ppplus:before
{
    content: 'by PayPal';
    position: absolute;
    top: 182px;
    font-size: 10px;
    left: 36px;
}
.warningMessage {z-index: 10;position: relative;border-top: solid 1px #c90607;padding-top: 10px;padding-bottom: 10px;border-bottom: solid 1px #c90607;margin: 10px;}
.warningContainer {position: relative;z-index: 10;background-color: #c90607;padding: 10px 20px;color: #ffffff;}
.warningTitle {font-weight: bold;}
.klaroimg {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* ============================================ *
 * EcoInform Product Data Sheet
 * (moved from inline <style> in catalog/product/view.phtml)
 * ============================================ */
.product-attribute-specs-table {
  border: solid 1px #d2d2d2;
  float: left;
  margin: 2px;
}
.product-attribute-specs-table th.label {
  color: #000000;
  font-weight: bold;
}
.product-attribute-specs-table th,
.product-attribute-specs-table td {
  padding: 3px;
}
.product-attribute-specs-table .label {
  background-color: #d2d2d2;
}
.transparent50 {
  opacity: 0.5;
}

/* ===== Bestellvorlagen & Nachbestellen UX ===== */

/* A. Cart: Save as template button */
.btn-save-template,
.btn-save-template-top {
    background: #f5f5f5;
    border: 1px solid #ccc;
    color: var(--color-text-dark);
    padding: 7px 15px;
    cursor: pointer;
    font-size: 13px;
}
.btn-save-template:hover,
.btn-save-template-top:hover {
    background: #e8e8e8;
    border-color: #aaa;
}
.btn-save-template-top {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-size: 14px;
    padding: 8px 18px;
}
.btn-save-template-top:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}
.btn-save-template span span {
    white-space: nowrap;
}
.save-template-hint {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    line-height: 1.3;
}

/* C. Order detail: item selection */
.order-items-select-actions a {
    font-size: 12px;
}
.order-items .item-unavailable {
    opacity: 0.5;
}
.item-unavailable-notice {
    color: #c00;
    font-size: 0.9em;
    margin-top: 4px;
}

/* FD-013 Einheit 2, 18.08.2026: Der Abschnitt "Sidebar-Nav" ist entfallen.
 * Die Regeln auf #sidebar-nav trafen den Baum in der linken Spalte; den gibt
 * es seit Einheit 1 nicht mehr. Die Regeln auf #header-categories stehen
 * jetzt in css/nav.css, mobile-first und ohne !important. */

/* "Mein Konto" block-title: fix white-on-light-gray text */
@media only screen and (max-width: 767px) {
    .block-account .block-title strong span { color: var(--color-text); }
}

/* ============================================ *
 * Mobile Touch Targets (WCAG 2.5.5 / Fitts' Law)
 * All interactive elements >= 44x44px on mobile.
 * Framework-Ref: B.2 (Fitts' Law), I.1 (Touch Targets)
 * ============================================ */
@media only screen and (max-width: 767px) {
  /* Qty spinners: base size to 44px */
  .qty-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  /* Mini sidebar spinners: enlarge from 22px to 36px (space-constrained) with 44px hit area */
  .qty-spinner-mini .qty-btn {
    width: 36px;
    height: 36px;
    font-size: 15px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
  }
  /* Remove/delete buttons: enlarge hit area */
  .btn-remove-sidebar {
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .btn-remove-cart {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-remove,
  .btn-previous {
    min-width: 44px;
    min-height: 44px;
  }
  .icon-delete {
    width: 20px;
    height: 20px;
  }
}

/* ============================================ *
 * Loading States & Feedback
 * Framework-Ref: B.1.1 (System Status), B.6 (Doherty)
 * ============================================ */

/* Spinner keyframes */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Button loading state — applied via JS */
.btn-loading,
.button.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
  cursor: wait;
  transform: none;
  box-shadow: none;
}
.btn-loading span span {
  visibility: hidden;
}
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
/* Dark spinner for non-filled buttons */
.btn-loading.btn-loading-dark::after {
  border-color: rgba(0,0,0,0.15);
  border-top-color: var(--color-text);
}

/* Loading overlay for containers (e.g. mini-cart) */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-overlay::after {
  content: '';
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border-medium);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ============================================ *
 * Custom Confirm Dialog
 * ============================================ */
.confirm-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-dialog {
  background: #fff;
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-prominent);
}
.confirm-message {
  font-size: var(--text-base);
  line-height: 1.5;
  margin: 0 0 var(--space-lg);
  color: var(--color-text);
}
.confirm-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}
.confirm-btn {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 0;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.confirm-btn-cancel {
  background: var(--color-bg-light);
  color: var(--color-text);
}
.confirm-btn-cancel:hover {
  background: var(--color-bg-hover);
}
.confirm-btn-confirm {
  background: var(--color-error);
  color: #fff;
}
.confirm-btn-confirm:hover {
  background: #c52008;
}

/* ============================================ *
 * Screenreader-Only Utility (WCAG)
 * ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================ *
 * Empty States — Consistent Pattern
 * Framework-Ref: H.4 (Microcopy: motivate action)
 * ============================================ */
.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--color-text-muted);
}
.empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.4;
}
.empty-state-title {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}
.empty-state-text {
  font-size: 14px;
  margin-bottom: var(--space-lg);
  line-height: 1.5;
}
.empty-state .button {
  display: inline-block;
}


/* ============================================ *
 * ARIA Live Regions
 * Framework-Ref: C.6 (Assistive Technologies)
 * ============================================ */
[aria-live] {
  /* Ensure live regions are accessible even when visually hidden */
}

/* ============================================ *
 * Checkout Success Page (Peak-End Rule)
 * ============================================ */
.checkout-success {
  text-align: center;
  max-width: 639px;
  margin: 0 auto;
  padding: 20px 0 40px;
}
.checkout-success .success-icon {
  margin-bottom: 16px;
}
.checkout-success .success-title {
  font-size: 28px;
  text-transform: none;
  margin-bottom: 8px;
}
.checkout-success .success-order-id {
  font-size: 16px;
  color: var(--color-text-muted);
  margin-bottom: 30px;
}
.checkout-success .success-order-id a {
  color: var(--color-primary);
}
.checkout-success .success-next-steps {
  text-align: left;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.checkout-success .success-next-steps h2 {
  font-size: 16px;
  text-transform: none;
  margin: 0 0 12px;
}
.checkout-success .success-next-steps ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.checkout-success .success-next-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.5;
}
.checkout-success .success-next-steps li svg {
  flex-shrink: 0;
  color: var(--color-primary);
}
.checkout-success .success-next-steps li a {
  color: var(--color-primary);
}
.checkout-success .success-print {
  margin-bottom: 20px;
}
.checkout-success .success-print a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: 13px;
}
.checkout-success .success-print a:hover {
  color: var(--color-text);
}
.checkout-success .success-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.checkout-success .btn-save-template {
  background: var(--color-primary);
  color: #fff;
}
.checkout-success .btn-save-template:hover {
  background: var(--color-primary-hover, #0e9600);
}

/* ============================================ *
 * IBAN Copy-to-Clipboard Button
 * ============================================ */
.iban-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.iban-value {
  font-family: monospace;
  letter-spacing: 0.5px;
  user-select: all;
  -webkit-user-select: all;
}
.iban-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
  vertical-align: middle;
}
.iban-copy-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-text-muted);
}
.iban-copy-btn.copied {
  background: var(--color-bg-success, #e8f5e9);
  border-color: var(--color-success);
  color: var(--color-success);
  font-size: 11px;
}

/* ============================================ *
 * Sticky Title + Toolbar (Category & Search)
 * ============================================ */
.catalog-category-view .category-title,
body.catalogsearch-result-index .page-title {
  position: sticky;
  top: var(--header-height-desktop);
  z-index: 11;
  background: #fff;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.catalog-category-view .category-title h1,
body.catalogsearch-result-index .page-title h1 {
  font-size: 18px;
  margin: 0;
  padding: 0;
  border-bottom: none;
  line-height: 1.3;
}
.catalog-category-view .category-title .count-container,
body.catalogsearch-result-index .page-title .count-container {
  font-size: 12px;
  color: var(--color-text-light, #888);
  white-space: nowrap;
}

/* FD-013 Einheit 5: zweite Fassung der klebrigen Toolbar entfallen, siehe
   css/listing.css. Der klebrige Titel bleibt. */
@media only screen and (max-width: 767px) {
  .catalog-category-view .category-title,
  body.catalogsearch-result-index .page-title {
    top: var(--header-height-mobile);
  }
}

/* ============================================ *
 * Infinite Scroll
 * ============================================ */
.infinite-scroll-sentinel {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  min-height: 60px;
}
.infinite-scroll-loading::after {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-bg-light, #eee);
  border-top-color: var(--color-primary, #4a7c59);
  border-radius: 50%;
  animation: infiniteSpinner 0.7s linear infinite;
}
@keyframes infiniteSpinner {
  to { transform: rotate(360deg); }
}
.infinite-scroll-new {
  animation: infiniteFadeIn 0.3s ease both;
}
@keyframes infiniteFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.infinite-scroll-active .toolbar-bottom { display: none; }
.infinite-scroll-active .toolbar .pages { display: none; }
.catalog-category-view .limiter,
.catalogsearch-result-index .limiter { display: none !important; }

/* ============================================ *
 * Accessibility: Reduced Motion
 * Respects user preference for less animation.
 * Framework-Ref: C.8 (prefers-reduced-motion)
 * ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================ *
 * Accessibility: Global Focus-Visible Fallback
 * Catches any interactive element not explicitly
 * styled above. Ensures keyboard users always
 * see where they are.
 * ============================================ */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}


/* ============================================
 * Widerruf (§ 356a BGB)
 *
 * Bewusst am Dateiende: `.std p { margin: 0 0 1.5em }` (Zeile 3169) hat
 * 2 Spezifitaet und schlaegt Einzelklassen. Die Regeln hier stehen spaeter
 * in der Kaskade und gewinnen bei gleicher Spezifitaet.
 * ============================================ */

/* --- CTA auf der CMS-Seite /widerruf ---
 *
 * Spezifitaetsfalle: `.cms-page-view .std a` (Zeile ~3257) hat 0,2,1 und faerbt
 * JEDEN Link in CMS-Inhalten mit var(--color-primary) ein. Die Regel `.button`
 * (0,1,0) setzt zwar color:#fff, verliert aber. Ergebnis waere gruene Schrift
 * auf gruenem Button - Kontrast 1:1, also unsichtbar.
 *
 * Bewusst allgemein auf `.std a.button` gefasst: das Problem trifft jeden
 * Button, der je in eine CMS-Seite gesetzt wird, nicht nur diesen.
 */
.cms-page-view .std a.button,
.cms-page-view .std a.button:hover,
.cms-page-view .std a.button:focus,
.cms-page-view .std a.button:visited {
  color: #fff;
  text-decoration: none;
}

.widerruf-cta {
  margin: 28px 0;
}
.cms-page-view .std .widerruf-cta a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 28px;
}

/* --- Muster-Widerrufsformular: kompakte Zeilen statt 1.5em Absatzabstand --- */
.widerruf-formular {
  padding: 20px 24px;
  background: var(--color-bg-subtle);
}
.wrapper .widerruf-formular p {
  margin: 0 0 8px;
  line-height: 1.5;
}
.wrapper .widerruf-formular p:last-child {
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: 13px;
}

.widerruf-page h4 {
  margin-top: 32px;
  text-transform: none;
}
.widerruf-page ul {
  margin: 0 0 1.5em 1.2em;
  list-style: disc;
}
.widerruf-page li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* --- Formular (Schritt 1) --- */
.widerruf-form {
  max-width: 560px;
  margin: 24px 0;
}
.widerruf-field {
  margin-bottom: 20px;
}
.widerruf-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--color-text-dark);
}
.widerruf-field label em {
  color: var(--color-error);
  font-style: normal;
}
.widerruf-field input.input-text,
.widerruf-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--radius-sm);
  font-size: 15px;
}
.wrapper .widerruf-hint {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.widerruf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 24px 0 0;
}
.widerruf-actions .button {
  min-height: 44px;
}
.wrapper .widerruf-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* --- Zusammenfassung (Schritt 2) --- */
.widerruf-summary {
  max-width: 560px;
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--color-bg-subtle);
  border: 1px solid rgba(12, 95, 47, 0.15);
  border-radius: var(--radius-sm);
}
.wrapper .widerruf-summary dt {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.wrapper .widerruf-summary dt:first-child {
  margin-top: 0;
}
.wrapper .widerruf-summary dd {
  margin: 2px 0 0;
  font-size: 16px;
  color: var(--color-text-dark);
}

/* --- Erfolg (Schritt 3) --- */
.widerruf-received {
  max-width: 560px;
  margin: 20px 0;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
}

@media (max-width: 767px) {
  .widerruf-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .widerruf-actions .button,
  .widerruf-actions .button-secondary {
    width: 100%;
    text-align: center;
  }
}

/* --- Footer-Einstieg: weiss auf gruen ---
 * Weiss statt Amber: Kontrast zum gruenen Footer rgb(12,95,47) betraegt
 * 7,85:1 gegen 4,05:1 bei Amber. Amber ist ausserdem "Zur Kasse"
 * vorbehalten und der Footer wird im Checkout mitgerendert.
 */
/* Selektor bewusst mit `.footer-col a`: die generische Regel
 * `.footer .footer-col a` (0,2,1) setzt color:#fff und eine border-bottom.
 * Ohne diese Spezifitaet waere der Button weiss auf weiss. */
.footer .footer-col a.btn-widerruf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  background: #fff;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.footer .footer-col a.btn-widerruf:hover,
.footer .footer-col a.btn-widerruf:focus {
  background: var(--color-bg-light);
  color: var(--color-primary-hover);
  border: none;
  text-decoration: none;
}

@media (max-width: 767px) {
  .footer .footer-col-widerruf {
    margin-top: 18px;
  }
  .footer .footer-col a.btn-widerruf {
    width: 100%;
  }
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * @category  Symmetrics
 * @package   Symmetrics_StockIndicator
 * @author    symmetrics gmbh <info@symmetrics.de>
 * @author    Andreas Timm <at@symmetrics.de>
 * @author    Ngoc Anh Doan <nd@symmetrics.de>
 * @copyright 2010 symmetrics gmbh
 * @license   http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 * @link      http://www.symmetrics.de/
 */
 
/**
 * StockIndicator styles
 *
 * @category  Symmetrics
 * @package   Symmetrics_StockIndicator
 * @author    symmetrics gmbh <info@symmetrics.de>
 * @author    Andreas Timm <at@symmetrics.de>
 * @author    Ngoc Anh Doan <nd@symmetrics.de>
 * @copyright 2010 symmetrics gmbh
 * @license   http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 * @link      http://www.symmetrics.de/
 */
.stock-indicator-wrapper { padding: 5px }

.stock-indicator { margin: 0px }

.stock-indicator.horizontal {
    width: 33px;
    height: 11px;
    background: url(https://logisch-bio.de/skin/frontend/rwd/default/images/stockindicator/sprite_vertical.gif) repeat-x;
}

.stock-indicator.vertical {
    width: 11px;
    height: 33px;
    background: url(https://logisch-bio.de/skin/frontend/rwd/default/images/stockindicator/sprite_horizontal.gif) repeat-y;
}

.yellow.horizontal { background-position: 0 -11px; }
.green.horizontal { background-position: 0 -22px; }

.yellow.vertical { background-position: -11px 0; }
.green.vertical { background-position: -22px 0; }
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * @category  Symmetrics
 * @package   Symmetrics_TweaksGerman
 * @author    symmetrics - a CGI Group brand <info@symmetrics.de>
 * @author    Torsten Walluhn <torsten.walluhn@cgi.com>
 * @copyright 2012 symmetrics - a CGI Group brand
 */
.checkout-onepage-index #checkout-review-submit p.f-left {
    display: none;
}

.checkout-onepage-index .data-table .even ,
.checkout-onepage-index .data-table .odd,
.checkout-multishipping-overview .data-table .even,
.checkout-multishipping-overview .data-table .odd {
    background-color: #DEE5E8;
}


/* ============================================ *
 * Lightbox — modernized
 * ============================================ */

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #000;
  opacity: var(--lb-overlay-opacity, 0.8);
  backdrop-filter: blur(4px);
  /* show/hide + fade via Alpine x-show + x-transition.opacity */
}

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 0;
  /* show/hide + fade+scale via Alpine x-show + x-transition */
}

#lightbox img {
  width: auto;
  height: auto;
}
#lightbox a img {
  border: none;
}

/* Lightbox content wrapper — single shadow + border-radius for seamless look */
#lightboxContent {
  position: relative;
  max-width: 90vw;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  overflow: hidden;
  transition: width 0.3s ease;
}

/* Image wrapper */
#outerImageContainer {
  position: relative;
  background: #fff;
  max-height: 85vh;
  transition: height 0.3s ease;
}

#imageContainer {
  padding: 10px;
  position: relative;
}

#lightboxImage {
  max-width: 85vw;
  max-height: 78vh;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#lightboxImage.lb-visible {
  opacity: 1;
}

/* Loading */
#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Hover navigation */
#hoverNav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
#imageContainer > #hoverNav {
  left: 0;
}
#hoverNav a {
  outline: none;
}

#prevLink,
#nextLink {
  width: 50%;
  height: 100%;
  display: block;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#prevLink {
  float: left;
}
#nextLink {
  float: right;
}

/* CSS arrows instead of GIFs */
#prevLink::after,
#nextLink::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}
#prevLink::after {
  left: 16px;
  transform: translateY(-50%) rotate(45deg);
}
#nextLink::after {
  right: 16px;
  transform: translateY(-50%) rotate(-135deg);
}

#prevLink:hover,
#nextLink:hover {
  opacity: 1;
}

/* Image data / caption */
#imageDataContainer {
  font: 13px/1.5 var(--font-heading, Verdana, Helvetica, sans-serif);
  background: #fff;
  margin: 0 auto;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  width: 100%;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
#imageDataContainer.lb-visible {
  max-height: 80px;
  opacity: 1;
}

#imageData {
  padding: 8px 12px;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#imageData #imageDetails {
  text-align: left;
}
#imageData #caption {
  font-weight: 600;
  color: #333;
}
#imageData #numberDisplay {
  display: block;
  color: #999;
  font-size: 12px;
}

/* Hide old bottom close button */
#bottomNav {
  display: none;
}

/* Close button — top-right corner (on #lightboxContent, outside overflow:hidden) */
#lbCloseBtn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #c00;
  line-height: 1;
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#lbCloseBtn:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}

/* Mobile adjustments */
@media only screen and (max-width: 770px) {
  #lightboxContent {
    max-width: 96vw;
    border-radius: 2px;
  }
  #outerImageContainer {
    max-height: 88vh;
  }
  #lightboxImage {
    max-width: 92vw;
    max-height: 80vh;
  }
  #imageContainer {
    padding: 6px;
  }
  #prevLink::after,
  #nextLink::after {
    width: 14px;
    height: 14px;
    border-width: 2px;
  }
  #prevLink::after {
    left: 8px;
  }
  #nextLink::after {
    right: 8px;
  }
}

/**
 * nav.css — Kopfzeilennavigation, Telefon und Desktop
 *
 * FD-013 Einheit 2 und 9, 18.08.2026. Der eine Kategorieblock aus Einheit 1
 * liegt in #header-nav neben der Markennavigation. Auf dem Telefon eine
 * Ueberlagerung hinter "Menue", ab 768 px eine waagerechte Leiste unter der
 * Kopfzeile.
 *
 * Seit Einheit 9 kommt der Baum als <details>/<summary> aus
 * Logbio_Theme_Block_Sidenav_Navigation. Damit entfaellt jede Sonderregel fuer
 * Bedienarten: kein :hover, kein (hover: none), kein JS-Umschalter. Ein Tipp
 * oder Klick auf das <summary> oeffnet die Ebene, der Browser macht den Rest.
 * Auf dem iPad war das der Fehler — iPadOS meldet im Desktop-Modus
 * hover: hover, simuliert beim Tippen ein hover und folgt trotzdem dem Link.
 *
 * Auflagen: mobile-first, nur min-width, kein !important, 300 Zeilen.
 */

/* == HUELLE: #header-nav traegt skip-content, .skip-nav schaltet es an ==== */
#header-nav {
  background-color: var(--color-divider);
  padding: 0;
}

/* == MARKENNAVIGATION ==================================================== */
#nav {
  float: none;
}
#nav li {
  display: block;
  padding: 0;
}
#nav li a {
  border-bottom: 1px solid var(--color-border-medium);
  color: var(--color-text);
  line-height: 44px;
  min-height: 44px;
  padding: 0 var(--space-md);
}

/* == KATEGORIEN, BASIS = TELEFON ========================================= */
#header-categories {
  background: var(--color-divider);
}

/* Der Behaelter scrollt, nicht #header-categories: sonst waechst die
   Ueberlagerung ueber den Bildschirm hinaus. */
#header-categories .block-content {
  max-height: 70dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#header-categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#header-categories li {
  margin: 0;
}

/* Ein Eintrag ist entweder ein Link (ohne Unterebene) oder ein summary. */
#header-categories a,
#header-categories summary {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border-medium);
  color: var(--color-text);
  line-height: 1.25;
  min-height: 44px;
  padding: 0 var(--space-md);
  text-decoration: none;
}

#header-categories summary {
  cursor: pointer;
  list-style: none;
  gap: var(--space-sm);
}

/* Ohne diese Regel saehen die Eintraege verschieden aus: ein Blatt ist ein
   <a> und erbt Lato und font-weight: bold von der globalen Regel auf a, eine
   Kategorie mit Unterebene ist ein <summary> und erbt Raleway in normaler
   Staerke von der Kopfzeile. */
#header-categories a,
#header-categories summary {
  font-family: Lato, var(--font-heading);
}

#kategorien > li > a,
#kategorien > li > details > summary {
  font-weight: 700;
}

#header-categories .level1 a,
#header-categories .level1 summary,
#header-categories .level2 a,
#header-categories .level2 summary {
  font-weight: 400;
}

/* Das Standarddreieck von WebKit weicht einem eigenen Winkel. */
#header-categories summary::-webkit-details-marker {
  display: none;
}

#header-categories summary::after {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
}

#header-categories details[open] > summary::after {
  transform: rotate(-135deg);
}

#header-categories a:hover,
#header-categories summary:hover {
  background: var(--color-bg-hover);
}

/* Der Pfad der aktuellen Kategorie wird hervorgehoben, aber nicht
   aufgeklappt — sonst stuende die Ebene nach jedem Seitenwechsel offen. */
#header-categories .active > a,
#header-categories .active > details > summary {
  color: var(--color-primary);
  font-weight: 700;
}

/* Stufeneinrueckung. Ebene 1 traegt als ersten Eintrag den Link auf die
   Kategorie selbst ("Alles in X"). */
#header-categories .level1 a,
#header-categories .level1 summary {
  padding-left: var(--space-xl);
}

#header-categories .level2 a,
#header-categories .level2 summary {
  padding-left: var(--space-2xl);
}

#header-categories .alle a {
  font-style: italic;
}

/* == AB 768 PX: WAAGERECHTE LEISTE ======================================= */

@media (min-width: 768px) {
  /* Huelle ohne eigene Box: #nav und #header-categories werden Flex-Elemente
     von .page-header-container. Die Markennavigation bleibt in Zeile 1, die
     Kategorieleiste bekommt mit flex-basis 100 % und order 1 eine eigene
     Zeile darunter. Die Kopfzeilenhoehe misst alpine-components.js zur
     Laufzeit, .main-container zieht ueber --header-height-desktop nach. */
  .page-header-container {
    flex-wrap: wrap;
  }
  #header-nav {
    display: contents;
  }
  #nav {
    flex: 0 0 auto;
  }
  /* Das Raster bei 768-1023 px setzt Polsterung und Schriftgrad selbst
     (styles.css, "Tablet Header"); der Selektor dort ist spezifischer. */
  #nav li a {
    border-bottom: 0;
    line-height: 24px;
    min-height: 0;
    padding: 0 var(--space-md);
  }
  #header-categories {
    order: 1;
    flex: 1 0 100%;
    margin-top: var(--space-sm);
    background: var(--color-primary);
    border-radius: var(--radius-sm);
  }
  #header-categories .block-content {
    max-height: none;
    overflow: visible;
  }
  /* Die Eintraege sind inhaltsbreit und fuellen das Band nie ganz aus — bei
     1280 px blieben rechts 128 px leer. Zentriert wirkt die Reihe auf jeder
     Breite gewollt, ohne dass die Abstaende mit der Zahl der Eintraege
     springen (space-between taete das bei 768 px mit fuenf Eintraegen). */
  #kategorien {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #kategorien > li {
    position: relative;
  }
  /* Oberste Ebene: weisse Schrift auf gruenem Band, eine Zeile. */
  #kategorien > li > a,
  #kategorien > li > details > summary {
    border-bottom: 0;
    color: #fff;
    font-size: var(--text-sm);
    line-height: 40px;
    min-height: 40px;
    padding: 0 var(--space-md);
    white-space: nowrap;
  }
  #kategorien > li > details > summary::after {
    border-right-color: #fff;
    border-bottom-color: #fff;
    margin-left: 0;
  }
  #kategorien > li > a:hover,
  #kategorien > li > details > summary:hover {
    background: var(--color-primary-hover);
  }
  #kategorien > .active > a,
  #kategorien > .active > details > summary {
    color: #fff;
    background: var(--color-primary-hover);
  }
  /* Klappebene als Fenster unter dem Eintrag. */
  #kategorien > li > details[open] > ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    width: max-content;
    min-width: 240px;
    max-width: 340px;
    padding-block: var(--space-sm);
    background: var(--color-bg);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-medium);
  }
  /* Lange Namen wie "Bier, Biermischgetraenke, Malzgetraenke" brechen um,
     statt das Fenster aufzureissen. */
  #header-categories .level1 a,
  #header-categories .level1 summary,
  #header-categories .level2 a,
  #header-categories .level2 summary {
    padding: var(--space-sm) var(--space-md);
    min-height: 36px;
    line-height: 1.35;
    white-space: normal;
  }
  #header-categories .level2 a,
  #header-categories .level2 summary {
    padding-left: var(--space-xl);
  }
  /* Der letzte Eintrag der Leiste darf sein Fenster nicht aus dem Bild
     schieben. */
  #kategorien > li:last-child > details[open] > ul,
  #kategorien > .nav-mehr > details[open] > ul {
    left: auto;
    right: 0;
  }
}

/* == AB 1024 PX: MARKENNAVIGATION MITTIG ================================= */
/* Bis 1023 px steht sie als 2x2-Raster neben dem Logo (styles.css, "Tablet
   Header"). Diese Regel trug vorher #header-nav — das hat ab 768 px keine
   Box mehr. */

@media (min-width: 1024px) {
  #nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
  }
  /* Zuruecknahme der Basisregel #nav li. Sie ist einklassig-mit-ID (1,0,1)
     und schlaegt .nav-primary li.level0 (0,2,1) aus styles.css — ohne diese
     Zeile stehen die Menuepunkte untereinander. Nur die oberste Ebene. */
  #nav .nav-primary > li {
    display: inline-block;
  }
}

/**
 * listing.css — Kategorieliste: Raster, Toolbar, Kachel
 *
 * FD-013 Einheiten 3 bis 5, 18.08.2026.
 *
 * Auflagen: mobile-first, nur min-width, Tailwind-Werte, kein !important,
 * hoechstens 300 Zeilen, Werte aus :root.
 *
 * Ersetzt in styles.css: die Rasterspuren (Basisregel, 640er-Regel, die drei
 * Regeln auf --max-4/5/6-col und die neun Deckel-Selektoren) sowie die
 * zwei Definitionen der klebrigen Toolbar.
 */

/* == RASTER ============================================================== */
/* Die Spaltenzahl folgt der Breite, nicht einem Umbruchpunkt. 180 px ist die
   schmalste Kachel, in der Bild, Name, Preis, Grundpreis und "In den
   Warenkorb" noch lesbar stehen. Unter 640 px sind es feste zwei Spalten:
   auto-fill wuerde bei 320 px auf eine zurueckfallen, und genau eine Spalte
   war der gemessene Fehler (Kachel 360x471 px, 8.837 px Seitenhoehe). */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
  }
}

/* == TOOLBAR ============================================================= */
/* Basis: nicht klebrig. Gemessen 18.08.2026: als sticky verdeckte sie nach
   320 px Scrollweg das erste Produktbild um 56 px. Auf dem Telefon ist die
   Kopfzeile schon klebrig; eine zweite klebrige Leiste frisst die Ansicht. */
.catalog-category-view .category-products > .toolbar,
body.catalogsearch-result-index .category-products > .toolbar {
  position: static;
  background: var(--color-bg);
  padding-block: 6px;
  border-bottom: 1px solid var(--color-divider);
  z-index: 10;
}

@media (min-width: 768px) {
  /* Lueckenlos unter dem klebrigen Kategorietitel. Der Abstand stand auf
     geschaetzten 32 px, der Titel ist 31 px hoch — durch den einen Pixel
     Spalt liefen beim Scrollen die Kachelkanten sichtbar durch. Die Hoehe
     misst alpine-components.js zur Laufzeit; das minus 1px legt Titel und
     Toolbar um einen Pixel uebereinander, damit auch Rundungen keinen Spalt
     lassen. Der Titel liegt mit z-index 11 darueber. */
  .catalog-category-view .category-products > .toolbar,
  body.catalogsearch-result-index .category-products > .toolbar {
    position: sticky;
    top: calc(var(--header-height-desktop) + var(--category-title-height) - 1px);
  }
}

/* == KACHEL ============================================================== */
/* Auf dem Telefon faellt weg, was die Detailseite ohnehin zeigt. */

/* Doppelt: .favorites_add und .add-to-links fuehren beide auf
   "Zur Vorlage hinzufuegen". Der zweite Weg entfaellt auf jeder Breite. */
.products-grid .add-to-links {
  display: none;
}

.products-grid .ratings,
.products-grid .kontrollstellen,
.products-grid .favorites_add {
  display: none;
}

/* Bildzone: 140 px statt 180 px. Gemessen 18.08.2026: die Kachel war 459 px
   hoch, 15 Artikel ergaben 5.261 px Seitenhoehe. */
.products-grid .product-image {
  height: 140px;
}

.products-grid .product-image img {
  max-height: 140px;
}


.products-grid .actions {
  min-height: 80px;
}

/* FD-013 Einheit 8, 18.08.2026: "In den Warenkorb" steht in jeder Kachel
   einer Zeile auf gleicher Hoehe — ohne JavaScript.

   Bisher tat das alignProductGridActions (rwd/default/js/app.js:1057): es
   gruppierte die Kacheln ueber getComputedStyle(li).clear zu Zeilen und gab
   jeder Zeile die Hoehe der hoechsten Kachel als min-height. Seit
   .products-grid ein Grid ist, hat kein li ein clear — alle Kacheln landeten
   in einer einzigen Zeile und bekamen die Hoehe der hoechsten des ganzen
   Rasters. Das erklaerte die 8.837 px Seitenhoehe.

   Ein Raster macht die Kacheln einer Zeile ohnehin gleich hoch. Es fehlte
   nur, dass die Kachel diese Hoehe an ihren Inhalt weitergibt und der
   Aktionsbereich unten haengt. Genau das tun die drei Regeln. Die alte
   Funktion wird in alpine-components.js zurueckgenommen. */
.products-grid > li {
  display: flex;
  flex-direction: column;
  /* Ein Raster- und Flex-Element hat von sich aus min-width: auto und kann
     nicht unter seinen Inhalt schrumpfen. Bei 320 px lief die Kachel damit
     um 20 px ueber die Spur hinaus. Gemessen am 18.08.2026. */
  min-width: 0;
}

.products-grid .product-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 0;
}

.products-grid .actions {
  position: static;
  margin-top: auto;
}

.products-grid .product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zwei Knoepfe von 44 px passen neben ein Feld von 36 px nicht in eine
   180-px-Kachel. 32 px liegt ueber dem Mindestmass 24 px der Spezifikation;
   die Detailseite bekommt in Einheit 6 die vollen 44 px. */
.products-grid .qty-btn {
  width: 32px;
  height: 32px;
}

.products-grid .btn-cart {
  display: block;
  width: 100%;
  min-height: 44px;
}

/* Die schmale Toolbar bricht um. Gemessen bei 320 px: .sort-by war 266 px
   breit und erzeugte 47 px waagerechten Ueberlauf. Bei 375 px und darueber
   nicht — der Fund kam erst mit dem Breitenraster. */
.toolbar {
  flex-wrap: wrap;
}

.toolbar .sort-by {
  flex-wrap: wrap;
  min-width: 0;
}

.toolbar .sort-by select {
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .products-grid .product-image {
    height: 180px;
  }
  .products-grid .product-image img {
    max-height: 180px;
  }
}

/* Erst ab 768 px, nicht ab 640: "vom Telefon entfernt" meint den Bereich
   unter dem Hauptumbruch. Die Zeilenhoehe haelt das Bedienelement auf dem
   Mindestmass 24 px — der Link war 125 x 15 px. */
@media (min-width: 768px) {
  .products-grid .ratings,
  .products-grid .kontrollstellen,
  .products-grid .favorites_add {
    display: block;
  }
  .products-grid .favorites_add a {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
  }
}

/* == SHOPUEBERSICHT (CMS-Seite /shop) ==================================== */
/* FD-013, 18.08.2026: Die Seite steht seit heute auf one_column und hat damit
   die volle Breite. Die feste Dreispaltigkeit aus styles.css liess die Kacheln
   dort auseinanderlaufen; ab 768 px folgt die Spaltenzahl jetzt der Breite.
   Die Zeilenliste auf dem Telefon bleibt unveraendert. */
@media (min-width: 768px) {
  .cms_shop {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/**
 * base-mobile.css — Querschnitt: Bilder, Touchziele, volle Breite
 *
 * FD-013 Einheit 5, 18.08.2026.
 *
 * Auflagen: mobile-first, nur min-width, kein !important, Werte aus :root.
 *
 * Was hier steht, gilt shopweit und haengt an keinem Seitentyp. Alles
 * Seitenbezogene gehoert in listing.css, nav.css oder styles.css.
 */

/* == BILDER ============================================================== */
/* Es gab kein globales max-width auf img. Der Schutz stand nur auf
   .cms-page-view .std img und .cms-no-route .std img (styles.css). Deshalb
   lief /datenschutz bei 375 px um 93 px ueber, und Produktbeschreibung und
   Reitertexte waren ungeschuetzt. */
img {
  max-width: 100%;
  height: auto;
}

/* == VOLLE BREITE OHNE UEBERLAUF ========================================= */
/* Der Streifen soll bis an den Fensterrand reichen. Die alte Fassung rechnete
   mit 20 px Polsterung am Elternelement; gemessen sind es 12 px, also ragte
   er auf jeder mobilen Breite um genau 8 px hinaus. calc(50% - 50vw) kommt
   ohne diese Annahme aus: es zieht den Streifen von der Mitte des Elternteils
   auf die Mitte des Fensters. */
.home-banner,
.mini-hero,
.home-usp > h2 {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

@media (min-width: 768px) {
  /* Ab 768 px sitzt der Inhalt in einer gedeckelten Karte; ein Streifen ueber
     die volle Fensterbreite waere dort falsch. Die Werte stehen in styles.css. */
  .home-banner,
  .mini-hero,
  .home-usp > h2 {
    width: auto;
    margin-inline: -26px;
  }
}

/* == TOUCHZIELE ========================================================== */
/* 24 x 24 px ist das Mindestmass der Spezifikation. Gemessen waren auf der
   Startseite 15 Bedienelemente darunter, ueberwiegend Fusszeilenlinks mit
   18 px Hoehe. Fliesstextlinks sind ausgenommen — sie stehen in Absaetzen und
   fallen unter die WCAG-Ausnahme. */
.footer a,
.widget a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

.skip-link {
  min-width: 24px;
}

/* "Bearbeiten" und "Adresse bearbeiten" in der Kontouebersicht waren
   73 x 15 px und 127 x 15 px. Gemessen am 18.08.2026. */
.box-title a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/**
 * product.css — Produktdetailseite
 *
 * FD-013 Einheit 6, 18.08.2026.
 *
 * Auflagen: mobile-first, nur min-width, kein !important, Werte aus :root.
 */

/* == REITER ============================================================== */
/* Die Reiter sind seit Einheit 6 <details>/<summary> statt dl/dt/dd mit
   JS-Umschalter. Tastatur, Screenreader und Fokusverwaltung kommen vom
   Browser. Der Anfangszustand steht in alpine-components.js: auf dem Telefon
   zu, ab 768 px offen — das war schon vorher so, nur mit anderer Technik. */

.collateral-tab {
  border-top: 1px solid var(--color-border-medium);
}

.collateral-tab > summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: 0 var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-dark);
  cursor: pointer;
  list-style: none;
}

/* Das Standarddreieck von WebKit ersetzen wir durch einen eigenen Winkel. */
.collateral-tab > summary::-webkit-details-marker {
  display: none;
}

.collateral-tab > summary::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
  transition: transform var(--transition-base);
}

.collateral-tab[open] > summary::before {
  transform: rotate(45deg);
}

.collateral-tab > summary:hover {
  color: var(--color-primary);
}

.collateral-tab .tab-container {
  padding: var(--space-sm) 0 var(--space-md);
}

/* == MENGENWAEHLER ======================================================= */
/* Auf der Kachel sind es 32 px, weil zwei 44er neben ein 36-px-Feld nicht in
   eine 180-px-Kachel passen. Hier ist der Platz da, also das Zielmass. */

.product-view .qty-btn {
  width: 44px;
  height: 44px;
}

.product-view .qty-spinner input {
  height: 44px;
  line-height: 44px;
}

/* == REITER AB 768 PX ==================================================== */
@media (min-width: 768px) {
  .collateral-tab > summary {
    font-size: var(--text-lg);
  }
}

/**
 * layout.css — die Seitenhuelle
 *
 * FD-013 Einheit 7, 18.08.2026. Ersetzt fuenf Wurzel-Templates und die
 * Spaltenlogik aus styles.css durch eine Huelle.
 *
 * Neun Auflagen (FD-013, "Leitsatz: dauerhaft editierbar"):
 *   1. hoechstens 300 Zeilen        2. kein max-width in @media
 *   3. kein !important              4. keine Seitentyp-Selektoren
 *   5. keine nackten Zahlen         6. nur die Tailwind-Umbruchpunkte
 *   7. Abschnittsmarken             8. jede Ausnahme mit Grund und Datum
 *   9. ein Selektor, eine Klasse
 *
 * Sechs Regeln (FD-013, "Zielbild der Seitenhuelle"):
 *   1. eine Aufgabe je Klasse: l-container (Breite), l-card (Optik),
 *      l-grid (Raster). Frueher trug .mainCenter alle drei.
 *   2. ein Container, an derselben Stelle in jedem Template.
 *   3. die Spaltenzahl gehoert zum Inhalt. Auf gecachten Aktionen entscheidet
 *      das Layout-XML je Handle, nie eine im Wurzelblock berechnete Body-Klasse.
 *   4. kein leeres Element im Raster — siehe Abschnitt SPALTEN.
 *   5. Bildreihenfolge ueber das Raster, Quelltextreihenfolge Inhalt zuerst.
 *   6. die Huelle gehoert dieser Datei. In styles.css sind die alten Regeln
 *      geloescht, nicht ueberschrieben.
 *
 * Die Startseite bekommt keine l-card und kein l-container: dort laeuft der
 * Hero randlos. Das ist eine Klasse weniger am Container, kein eigenes
 * Template (Pruefstein zu Regel 1). Gesteuert ueber das Layout-XML, Handle
 * cms_index_index.
 */

/* == CONTAINER =========================================================== */

.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* == KARTE =============================================================== */

.l-card {
  margin-block: var(--space-lg);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 11px rgb(0 0 0 / 0.25);
}

/* == RASTER ============================================================== */
/* Basis ist eine Spalte. Der Quelltext fuehrt den Inhalt zuerst; die
   Seitenleisten folgen darunter. Das ist auf dem Telefon die richtige
   Reihenfolge und fuer Screenreader die richtige ohnehin. */

.l-grid {
  display: grid;
  row-gap: var(--space-lg);
}

/* == SPALTEN ============================================================= */
/* Regel 4: Was nichts traegt, verbraucht keine Spur und keine Rinne.
   Zwei Bausteine tragen das:
     - :empty blendet eine leere Seitenleiste aus. Kommentare zaehlen dabei
       nicht als Inhalt, die Platzhalter des Full-Page-Cache stoeren also
       nicht (FD-013, "Der Full-Page-Cache friert die Seitenhuelle ein").
     - Die Rinne steht als padding am Kind, nicht als column-gap am Raster.
       Ein ausgeblendetes Kind nimmt damit auch keine Rinne mit. Ohne diesen
       Kniff bliebe je Seite eine Luecke stehen. */

.col-main {
  min-width: 0;
}

.col-left:empty,
.col-right:empty {
  display: none;
}

@media (min-width: 1024px) {
  .l-grid {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .col-wrapper {
    grid-column: 1;
    grid-row: 1;
    width: var(--sidebar-max);
  }
  .col-main {
    grid-column: 2;
    grid-row: 1;
  }
  .col-right {
    grid-column: 3;
    grid-row: 1;
    width: var(--sidebar-max);
  }
  .col-left {
    padding-inline-end: var(--space-lg);
  }
  .col-right {
    padding-inline-start: var(--space-lg);
  }
}

/* Ein Wrapper mit zwei leeren Seitenleisten ist selbst leer, aber :empty
   greift dort nicht — er hat Kindelemente. :has() erledigt den Fall.
   Ausnahme zu Auflage 9, Grund: ohne sie bliebe auf jeder Seite ohne linke
   Leiste eine Spur von var(--sidebar-max) stehen. 18.08.2026. */
.col-wrapper:not(:has(> :not(:empty))) {
  display: none;
}

/**
 * Der Modulprogrammierer - Vinai Kopp, Rico Neitzel GbR
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * @category   DerModPro
 * @package    DerModPro_BasePrice
 * @copyright  Copyright (c) 2009 Der Modulprogrammierer - Vinai Kopp, Rico Neitzel GbR http://der-modulprogrammierer.de/
 * @copyright  Copyright (c) 2012 Netresearch GmbH 
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */
.baseprice-box {
	clear: both;
}