/* ==========================================================================
Friviko Food · Template im Look des Produktkatalogs · Joomla 5 / 6
========================================================================== */
@font-face { font-family: "Friviko Display"; src: url("../fonts/friviko-display.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("../fonts/carlito-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("../fonts/carlito-700.woff") format("woff"); font-weight: 700; font-display: swap; }
:root {
--fv-blue: #003399; /* Katalog-Reiter */
--fv-blue-dark: #00267a;
--fv-navy: #1f3a8a;
--fv-red: #ff0000; /* TOP HIT, Preisschilder */
--fv-red-text: #d40000; /* Preise im Text (besser lesbar) */
--fv-red-dark: #b00000;
--fv-ice: #d9e2f3; /* Preiszeilen */
--fv-ice-light: #eef2fa;
--fv-ink: #1b1f2a;
--fv-muted: #5a6275;
--fv-line: #c9d3e8;
--fv-display: "Friviko Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
--fv-text: "Carlito", Calibri, "Segoe UI", Arial, sans-serif;
--fv-wrap: 1240px;
--fv-pad: clamp(1rem, 3.5vw, 2rem);
--bs-body-font-family: var(--fv-text);
--bs-link-color-rgb: 0, 51, 153;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
body.site { margin: 0; background: #fff; color: var(--fv-ink); font: 400 1.0625rem/1.55 var(--fv-text); -webkit-font-smoothing: antialiased; }
.site img { max-width: 100%; height: auto; }
.site a { color: var(--fv-blue); }
.site a:hover { color: var(--fv-red-text); }
.site :focus-visible { outline: 3px solid var(--fv-red); outline-offset: 2px; }
.site h1, .site h2, .site h3 { font-family: var(--fv-display); font-weight: 700; line-height: 1.02; letter-spacing: .01em; color: var(--fv-blue); margin: 0 0 .5em; }
.site h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem); text-transform: uppercase; }
.site h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
.site h3 { font-size: 1.35rem; }
.site h4 { font-family: var(--fv-text); font-weight: 700; font-size: 1.1rem; margin: 0 0 .4em; }
.site p { margin: 0 0 1em; }
.fv-wrap { max-width: var(--fv-wrap); margin-inline: auto; padding-inline: var(--fv-pad); }
.fv-skip { position: absolute; left: 1rem; top: -100px; z-index: 99; padding: .6rem 1rem; background: var(--fv-blue); color: #fff !important; }
.fv-skip:focus { top: 1rem; }
/* Knöpfe */
.fv-btn, .site .btn-primary { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .6rem 1.3rem; border: 2px solid var(--fv-blue); border-radius: 0; background: var(--fv-blue); color: #fff !important; font: 700 1.05rem/1.1 var(--fv-text); text-decoration: none !important; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; transition: background-color .2s, transform .2s; }
.fv-btn:hover, .site .btn-primary:hover { background: var(--fv-blue-dark); transform: translateY(-1px); color: #fff !important; }
.fv-btn--red { background: var(--fv-red); border-color: var(--fv-red); }
.fv-btn--red:hover { background: var(--fv-red-dark); border-color: var(--fv-red-dark); }
.fv-btn--ghost { background: transparent; color: var(--fv-blue) !important; }
.fv-btn--ghost:hover { background: var(--fv-ice-light); color: var(--fv-blue) !important; }
.fv-btn--white { background: #fff; border-color: #fff; color: var(--fv-blue) !important; }
/* Infoleiste */
.fv-topbar { background: var(--fv-blue); color: #fff; font-size: .92rem; }
.fv-topbar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.5rem; padding-block: .45rem; }
.fv-topbar a { color: #fff; text-decoration: none; }
.fv-topbar a:hover { color: #ffd5d5; }
.fv-topbar__note, .fv-topbar__links a { display: inline-flex; align-items: center; gap: .4rem; }
.fv-topbar__links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.fv-topbar .fv-icon { width: 1.15em; height: 1.15em; }
@media (max-width: 700px) { .fv-topbar__note { display: none; } .fv-topbar__links { justify-content: center; width: 100%; } }
/* Kopf */
.fv-header { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 4px solid var(--fv-blue); transition: box-shadow .2s; }
.fv-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(0, 38, 122, .5); }
.fv-header__inner { display: flex; align-items: center; gap: 1.2rem; min-height: 84px; }
.fv-logo { flex: none; display: block; line-height: 0; margin-right: auto; }
.fv-logo img { height: 62px; width: auto; transition: height .2s; }
.fv-header.is-scrolled .fv-logo img { height: 50px; }
.fv-nav .mod-menu { display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.fv-nav .mod-menu > li { position: relative; margin: 0; }
.fv-nav .mod-menu > li > a, .fv-nav .mod-menu > li > span { display: block; padding: .55rem .7rem; color: var(--fv-ink); font: 700 1.02rem/1.2 var(--fv-text); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.fv-nav .mod-menu > li > a:hover, .fv-nav .mod-menu > li.active > a { color: var(--fv-blue); border-bottom-color: var(--fv-red); }
.fv-nav .mod-menu > li > button { display: none; }
.fv-nav .mod-menu > li > ul { position: absolute; top: 100%; left: 0; z-index: 5; min-width: 270px; margin: 0; padding: .4rem 0; list-style: none; background: #fff; border-top: 4px solid var(--fv-red); box-shadow: 0 16px 30px -14px rgba(0, 38, 122, .45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.fv-nav .mod-menu > li:hover > ul, .fv-nav .mod-menu > li:focus-within > ul { display: block !important; opacity: 1; visibility: visible; transform: none; }
.fv-nav .mod-menu > li > ul a { display: block; padding: .5rem 1rem; color: var(--fv-ink); text-decoration: none; }
.fv-nav .mod-menu > li > ul a:hover { background: var(--fv-ice-light); color: var(--fv-blue); }
.fv-header__cta { flex: none; }
.fv-menu-btn { display: none; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .8rem; border: 2px solid var(--fv-blue); background: #fff; color: var(--fv-blue); font: 700 1rem var(--fv-text); text-transform: uppercase; cursor: pointer; }
.fv-compact .fv-menu-btn { display: inline-flex; }
.fv-compact .fv-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 120px); overflow-y: auto; background: #fff; border-top: 4px solid var(--fv-red); box-shadow: 0 20px 30px -20px rgba(0, 38, 122, .5); }
.fv-compact .fv-nav.is-open { display: block; }
.fv-compact .fv-nav .mod-menu { flex-direction: column; padding: .5rem var(--fv-pad) 1rem; }
.fv-compact .fv-nav .mod-menu > li > a, .fv-compact .fv-nav .mod-menu > li > span { padding: .8rem .2rem; border-bottom: 1px solid var(--fv-line); white-space: normal; }
.fv-compact .fv-nav .mod-menu > li > ul { display: block !important; position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; box-shadow: none; border: 0; padding: 0 0 .5rem 1rem; }
@media (max-width: 759px) { .fv-compact .fv-header__cta { display: none; } .fv-logo img { height: 48px; } .fv-header__inner { min-height: 68px; } }
/* Katalog-Reiter (blaues Banner mit schräger Kante) */
.site .fv-tab, .site .fv-component .page-header h1, .site .fv-component .page-header h2 {
position: relative; display: inline-block; margin: 0 0 1.6rem calc(var(--fv-pad) * -1); padding: .5rem 3.4rem .45rem var(--fv-pad);
background: var(--fv-blue); color: #fff; font: 700 clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem)/1 var(--fv-display); text-transform: none; letter-spacing: .01em;
clip-path: polygon(0 0, calc(100% - 2.6rem) 0, 100% 100%, 0 100%);
}
.site .fv-tab small { display: block; font-size: .62em; opacity: .9; }
.fv-section.is-red .fv-tab { background: var(--fv-red); }
.fv-component .page-header { margin: 0; padding: 0; border: 0; }
/* Startbild */
.fv-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--fv-ice-light), #fff 70%); }
.fv-hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 5vw, 4rem); }
@media (min-width: 960px) { .fv-hero__grid { grid-template-columns: 1fr 1.05fr; } }
.fv-kicker { display: inline-block; margin: 0 0 1rem !important; padding: .25rem .8rem; background: var(--fv-red); color: #fff; font: 700 1rem/1.3 var(--fv-text); text-transform: uppercase; letter-spacing: .06em; }
.fv-hero h1 { max-width: 14ch; }
.fv-hero__lead { max-width: 36rem; font-size: 1.2rem; color: var(--fv-muted); }
.fv-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1.2rem; }
.fv-hero__offer { display: flex; align-items: center; gap: .5rem; color: var(--fv-red-text); font-weight: 700; }
.fv-hero__media { position: relative; margin: 0; }
.fv-hero__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 18px 18px 0 var(--fv-blue); }
.fv-hero__badge { position: absolute; left: -10px; bottom: 26px; display: flex; align-items: center; gap: .5rem; padding: .55rem 1rem; background: var(--fv-red); color: #fff; font: 700 1.05rem var(--fv-text); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); }
.fv-hero__badge .fv-icon { width: 1.4em; height: 1.4em; }
/* Vorteilsleiste */
.fv-usp { background: var(--fv-blue); color: #fff; }
.fv-usp__grid { display: grid; gap: 1rem 2rem; padding-block: 1.3rem; }
@media (min-width: 760px) { .fv-usp__grid { grid-template-columns: repeat(3, 1fr); } }
.fv-usp p { display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; align-items: start; margin: 0; font-size: 1rem; line-height: 1.35; color: #dfe7fb; }
.fv-usp p strong { display: block; color: #fff; font: 700 1.25rem/1.1 var(--fv-display); letter-spacing: .02em; }
.fv-usp .fv-icon { grid-row: span 2; width: 2.6rem; height: 2.6rem; color: #fff; }
/* Abschnitte */
.fv-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.fv-section.is-tint { background: var(--fv-ice-light); }
.fv-section.is-narrow .fv-wrap { max-width: 900px; }
.fv-section.is-flush { padding-block: 0; }
.fv-intro { max-width: 46rem; font-size: 1.15rem; color: var(--fv-muted); }
/* Eigener Icon-Satz (CSS-Masken): */
.fv-icon { display: inline-block; width: 1.5em; height: 1.5em; flex: none; vertical-align: -0.35em; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.fv-icon--truck { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2zM13 9h4.5L21 12.5V16h-8z'/%3E%3Ccircle cx='6.5' cy='17.5' r='2'/%3E%3Ccircle cx='17' cy='17.5' r='2'/%3E%3C/svg%3E"); }
.fv-icon--snow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M4.5 6.5l15 11M19.5 6.5l-15 11M9.5 3.5 12 6l2.5-2.5M9.5 20.5 12 18l2.5 2.5M3 10l3.3 1.2L5.5 14.5M21 10l-3.3 1.2.8 3.3'/%3E%3C/svg%3E"); }
.fv-icon--door { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E"); }
.fv-icon--chat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h11v7H8l-4 3z'/%3E%3Cpath d='M15 9h5v7l-3-2.5h-6V12'/%3E%3C/svg%3E"); }
.fv-icon--phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.5l1.5 4-2.2 1.5a11 11 0 0 0 7.2 7.2l1.5-2.2 4 1.5V19a2 2 0 0 1-2 2A16.5 16.5 0 0 1 3 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.fv-icon--mobile { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E"); }
.fv-icon--mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 7 8.5-7'/%3E%3C/svg%3E"); }
.fv-icon--map { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6-6.5-11a6.5 6.5 0 0 1 13 0c0 5-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.fv-icon--clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
.fv-icon--pallet { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='6' height='6'/%3E%3Crect x='13' y='4' width='6' height='6'/%3E%3Crect x='9' y='11' width='6' height='5'/%3E%3Cpath d='M2 18h20M4 21v-3M12 21v-3M20 21v-3'/%3E%3C/svg%3E"); }
.fv-icon--star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 16.8l-5.4 2.9 1.1-6.1-4.5-4.2 6.1-.8z'/%3E%3C/svg%3E"); }
.fv-icon--box { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5M12 12v9'/%3E%3C/svg%3E"); }
.fv-icon--bowl { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18a9 9 0 0 1-18 0z'/%3E%3Cpath d='M8 11c0-2 1.5-3 4-3s4 1 4 3M7 7l2-4M15 3l-1 4'/%3E%3C/svg%3E"); }
.fv-icon--shrimp { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 6c-4-2-10-1.5-12.5 3.5C4 14 7 18.5 11 19.5'/%3E%3Cpath d='M19 6c1.5 4-1 7.5-5 8s-6-2-5-4.5M11 19.5l-2 2M11 19.5l2.5 1.5M17 4l3-1M18.5 7.5 22 7'/%3E%3C/svg%3E"); }
.fv-icon--fish { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12c3-5 9-6 13-3l5-3v12l-5-3c-4 3-10 2-13-3z'/%3E%3Ccircle cx='8' cy='11' r='.6'/%3E%3C/svg%3E"); }
.fv-icon--sushi { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='9' rx='8' ry='3.5'/%3E%3Cpath d='M4 9v6c0 2 3.6 3.5 8 3.5s8-1.5 8-3.5V9'/%3E%3Cellipse cx='12' cy='9' rx='3.5' ry='1.4'/%3E%3C/svg%3E"); }
.fv-icon--chili { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 6c3 0 4.5 3 2 7-3 5-9 8-14 8 4-2 6-6 7-10 .8-3 2.5-5 5-5z'/%3E%3Cpath d='M16 6c0-2 1-3.5 3-4'/%3E%3C/svg%3E"); }
.fv-icon--bottle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5h4V7l2 3v10.5a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 8 20.5V10l2-3z'/%3E%3Cpath d='M8 13h8'/%3E%3C/svg%3E"); }
.fv-icon--noodles { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18a9 9 0 0 1-18 0z'/%3E%3Cpath d='M7 12V5M10 12V3M13 12V5M16 12c0-3 2-6 5-8'/%3E%3C/svg%3E"); }
.fv-icon--leaf { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-9 6-14 15-14 0 9-5 15-14 15'/%3E%3Cpath d='M5 19c3-4 6-7 10-9'/%3E%3C/svg%3E"); }
.fv-icon--meat { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3.5a6 6 0 0 1 5 8.5c-1.8 3.5-6.5 5-9.5 3.5l-4.5 4.5a2 2 0 1 1-2.8-2.8l4.5-4.5c-1.5-3 0-7.7 3.5-9.5a6 6 0 0 1 3.8.3z'/%3E%3C/svg%3E"); }
.fv-icon--sack { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l-1.5 3c4 2 6 6 6 10 0 3-2 5-5 5H8.5c-3 0-5-2-5-5 0-4 2-8 6-10z'/%3E%3Cpath d='M9.5 6h5'/%3E%3C/svg%3E"); }
.fv-icon--cup { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l-1.5 17a1.5 1.5 0 0 1-1.5 1.5H9A1.5 1.5 0 0 1 7.5 20z'/%3E%3Cpath d='M6.5 8h11M10 3l2 5'/%3E%3C/svg%3E"); }
.fv-icon--beer { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h10v13a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 6 20z'/%3E%3Cpath d='M16 10h2.5a1.5 1.5 0 0 1 1.5 1.5V16a1.5 1.5 0 0 1-1.5 1.5H16M6 7c0-2 1.5-3.5 3.5-3.5 1 0 1.6.4 2 1 .6-.8 1.5-1.2 2.5-1 1.5.2 2 1.6 2 3.5M9.5 11v6M12.5 11v6'/%3E%3C/svg%3E"); }
.fv-icon--icecream { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10a5 5 0 0 1 10 0z'/%3E%3Cpath d='M7 10l5 12 5-12'/%3E%3C/svg%3E"); }
.fv-icon--spark { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v5M12 17v5M2 12h5M17 12h5M5 5l3.5 3.5M15.5 15.5 19 19M19 5l-3.5 3.5M8.5 15.5 5 19'/%3E%3C/svg%3E"); }
.fv-icon--check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E"); }
.fv-icon--arrow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.fv-icon--search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E"); }
.fv-icon--menu { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E"); }
.fv-icon--close { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5l14 14M19 5 5 19'/%3E%3C/svg%3E"); }
.fv-icon--download { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E"); }
.fv-icon--handshake { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 11l4-4 4 2 3-2 4 1 5 3M2 11l7 7c.8.8 2 .8 2.8 0l.2-.2M22 11l-6.5 6.5c-.8.8-2 .8-2.8 0L9 14'/%3E%3Cpath d='M13 7l-4 4c-.7.7-.3 1.8.6 2 1 .3 2-.1 2.6-.8L14 10'/%3E%3C/svg%3E"); }
.fv-icon--tag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4a1 1 0 0 1 1-1h8l9 9-9 9z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.fv-icon--euro { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6.5A7 7 0 1 0 18 17.5'/%3E%3Cpath d='M4 10.5h9M4 13.5h9'/%3E%3C/svg%3E"); }
/* Produktkarten ---------------------------------------------------------------- */
.fv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0; margin: 0 0 2rem; border-left: 1px solid var(--fv-line); border-top: 1px solid var(--fv-line); }
.fv-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.fv-card { position: relative; display: flex; flex-direction: column; margin: 0; padding: 1rem 1rem 0; border-right: 1px solid var(--fv-line); border-bottom: 1px solid var(--fv-line); background: #fff; transition: box-shadow .2s, transform .2s; }
.fv-card:hover { z-index: 1; box-shadow: 0 14px 30px -16px rgba(0, 38, 122, .45); transform: translateY(-2px); }
.fv-card__hit { margin: -1rem -1rem .8rem; padding: .35rem .5rem; background: var(--fv-red); color: #fff; text-align: center; font: 700 1.6rem/1 var(--fv-display); letter-spacing: .03em; text-transform: uppercase; }
.fv-card__img { position: relative; display: grid; place-items: center; margin: 0 0 .8rem; aspect-ratio: 1; }
.fv-card__img img { width: 100%; height: 100%; object-fit: contain; }
.fv-card__tag { position: absolute; top: 6%; right: -4%; padding: .3rem .7rem; background: var(--fv-red-dark); color: #fff; font: italic 700 1.05rem/1.15 var(--fv-text); text-align: center; transform: rotate(8deg); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); }
.fv-card__name { margin: 0 !important; font: 400 1.05rem/1.3 var(--fv-text) !important; color: var(--fv-ink) !important; text-transform: none !important; }
.fv-card__art { margin: .1rem 0 .3rem !important; font-weight: 700; }
.fv-card__extra { margin: 0 0 .5rem !important; font-size: .92rem; color: var(--fv-muted); }
.fv-card__price { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .15rem .8rem; margin: auto -1rem 0; padding: .55rem 1rem; background: var(--fv-ice); font-size: .98rem; }
.fv-card__price strong { color: var(--fv-red-text); font-weight: 400; white-space: nowrap; }
.fv-card.is-out .fv-card__img img { opacity: .45; filter: grayscale(.6); }
.fv-card.is-out .fv-card__img::after { content: "Derzeit nicht auf Lager"; position: absolute; left: 4%; right: 4%; top: 42%; padding: .45rem .5rem; background: #3a63c8; color: #fff; text-align: center; font: 700 1.1rem/1.1 var(--fv-display); letter-spacing: .02em; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3a63c8; }
.fv-noprices .fv-card__price strong, .fv-noprices .fv-card__tag { font-size: 0; }
.fv-noprices .fv-card__price strong::after { content: "Preis auf Anfrage"; font-size: .95rem; }
.fv-noprices .fv-card__tag { display: none; }
/* Preistabellen (wie im Katalog) */
.fv-table-wrap { overflow-x: auto; margin: 0 0 2rem; }
.fv-table { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.fv-table caption { caption-side: top; text-align: left; padding: 0 0 .6rem; font: 700 1.4rem/1.1 var(--fv-display); color: var(--fv-blue); }
.fv-table th { padding: .55rem .7rem; border: 1px solid var(--fv-line); background: #fff; text-align: center; font-weight: 700; }
.fv-table td { padding: .4rem .7rem; border: 1px solid var(--fv-line); }
.fv-table tbody tr:nth-child(odd) td { background: var(--fv-ice); }
.fv-table td:first-child, .fv-table td:nth-child(3) { text-align: center; white-space: nowrap; }
.fv-table td:nth-child(4) { color: var(--fv-red-text); white-space: nowrap; text-align: center; }
.fv-table tr.is-hit td { color: var(--fv-red-text); font-weight: 700; }
.fv-table .fv-new { display: inline-block; margin-left: .4rem; padding: 0 .4rem; background: var(--fv-red); color: #fff; font-size: .78rem; font-weight: 700; text-transform: uppercase; vertical-align: .1em; }
.fv-noprices .fv-table td:nth-child(4) { font-size: 0; }
.fv-noprices .fv-table td:nth-child(4)::after { content: "auf Anfrage"; font-size: 1rem; }
.fv-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 1.2rem; padding: .7rem 1rem; background: var(--fv-ice-light); border-left: 4px solid var(--fv-blue); font-size: .98rem; }
/* Suchfeld über Listen (setzt das Skript) */
.fv-filter { display: flex; align-items: center; gap: .5rem; max-width: 420px; margin: 0 0 1.2rem; padding: .2rem .8rem; border: 2px solid var(--fv-blue); background: #fff; }
.fv-filter input { flex: 1; min-width: 0; border: 0; padding: .55rem 0; font: inherit; outline: none; }
.fv-filter .fv-icon { color: var(--fv-blue); }
.fv-filter-empty { display: none; padding: 1rem; background: var(--fv-ice-light); }
/* Rubriken-Kacheln */
.fv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 1rem; margin: 0 0 2rem; }
.fv-tile { position: relative; display: flex; flex-direction: column; min-height: 210px; padding: 1.1rem 1.2rem; overflow: hidden; background: var(--fv-blue); color: #fff !important; text-decoration: none !important; transition: transform .2s, box-shadow .2s, background-color .2s; }
.fv-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(0, 38, 122, .7); background: var(--fv-blue-dark); }
.fv-tile .fv-icon { width: 2.6rem; height: 2.6rem; margin-bottom: auto; }
.fv-tile strong { margin-top: 1rem; font: 700 1.6rem/1 var(--fv-display); letter-spacing: .01em; }
.fv-tile small { margin-top: .35rem; font-size: .95rem; line-height: 1.3; color: #dfe7fb; }
.fv-tile img { position: absolute; right: -10px; top: -10px; width: 86px; height: 86px; object-fit: contain; background: #fff; border-radius: 50%; padding: 8px; transform: rotate(6deg); transition: transform .3s; }
.fv-tile:hover img { transform: rotate(0) scale(1.06); }
.fv-tile.is-red { background: var(--fv-red); }
.fv-tile.is-red:hover { background: var(--fv-red-dark); }
/* Palettenknaller */
.fv-pallet { display: grid; gap: 1.5rem; align-items: center; margin: 0 0 1.5rem; }
@media (min-width: 900px) { .fv-pallet { grid-template-columns: 1fr auto; } }
.fv-pallet__title { margin: 0 !important; font: 700 clamp(2.8rem, 2rem + 4vw, 5.2rem)/.9 var(--fv-display) !important; color: var(--fv-red) !important; }
.fv-pallet__title span { display: block; color: #c9ccd3; font-size: .52em; }
.fv-pallet .fv-icon { width: 7rem; height: 7rem; color: var(--fv-blue); }
/* Info-Boxen, Schritte, Kontakt */
.fv-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin: 0 0 2rem; }
.fv-box { padding: 1.3rem 1.4rem; background: var(--fv-ice-light); border-top: 4px solid var(--fv-blue); }
.fv-box .fv-icon { width: 2.4rem; height: 2.4rem; color: var(--fv-red); margin-bottom: .6rem; }
.fv-box h3 { margin-bottom: .3rem; }
.fv-box p:last-child { margin: 0; }
.fv-steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.fv-steps li { counter-increment: s; position: relative; padding: 3.2rem 1.2rem 1.2rem; background: #fff; border: 1px solid var(--fv-line); }
.fv-steps li::before { content: counter(s); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--fv-red); color: #fff; font: 700 1.6rem var(--fv-display); }
.fv-check { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.fv-check li { position: relative; padding-left: 1.9rem; margin-bottom: .5rem; }
.fv-check li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.3em; height: 1.3em; background: var(--fv-red); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E"); }
/* Seiten-Inhalt */
.fv-page { display: grid; gap: 2rem; padding-block: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 992px) { .has-right .fv-page { grid-template-columns: minmax(0, 1fr) 300px; } .has-left .fv-page { grid-template-columns: 260px minmax(0, 1fr); } }
.fv-page__main { min-width: 0; }
.fv-component .com-content-article__body > p, .fv-component .com-content-article__body > ul { max-width: 52rem; }
.site .breadcrumb { margin: 0 0 1.2rem; padding: 0; background: none; font-size: .95rem; }
.site .mod-breadcrumbs__here { display: none; }
.fv-card-box { margin: 0 0 1.5rem; padding: 1.2rem; background: var(--fv-ice-light); }
.site .fv-card-box__title { font-size: 1.4rem; }
/* Bestell-Leiste */
.fv-order { background: var(--fv-red); color: #fff; }
.fv-order__inner { display: grid; gap: 1.2rem 2rem; align-items: center; padding-block: 2rem; }
@media (min-width: 1000px) { .fv-order__inner { grid-template-columns: 1fr auto; } }
.site .fv-order h2 { color: #fff; margin-bottom: .3rem; }
.fv-order p { margin: 0; max-width: 40rem; color: #ffe3e3; }
.fv-order__ways { display: flex; flex-wrap: wrap; gap: .6rem; }
.fv-way { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: #fff; color: var(--fv-ink) !important; text-decoration: none !important; font-weight: 700; transition: transform .2s; }
.fv-way:hover { transform: translateY(-2px); }
.fv-way small { display: block; font-weight: 400; color: var(--fv-muted); font-size: .85rem; }
.fv-way .fv-icon { color: var(--fv-red); width: 1.8rem; height: 1.8rem; }
/* Fußzeile */
.fv-footer { background: var(--fv-blue); color: #dfe7fb; }
.fv-footer__grid { display: grid; gap: 2rem; padding-block: 2.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.fv-footer__brand img { width: 170px; height: auto; background: #fff; padding: 8px; margin-bottom: 1rem; }
.fv-footer a { color: #fff; }
.site .fv-footer__title { color: #fff; font-size: 1.6rem; margin-bottom: .6rem; }
.fv-footer__links a { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; text-decoration: none; }
.fv-footer ul { margin: 0; padding: 0; list-style: none; }
.fv-footer li { margin-bottom: .35rem; }
.fv-footer__bar { background: var(--fv-blue-dark); font-size: .9rem; }
.fv-footer__bar .fv-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.5rem; padding-block: .8rem; }
/* Fehler-/Offline-Seite */
.fv-status { min-height: 100svh; display: grid; place-content: center; padding: var(--fv-pad); text-align: center; }
.fv-status__code { font: 700 clamp(5rem, 16vw, 9rem)/1 var(--fv-display); color: var(--fv-red); margin: 0; }
.fv-status__form { max-width: 360px; margin: 1rem auto 0; text-align: left; }
@media print { .fv-topbar, .fv-header, .fv-order, .fv-filter, .fv-usp { display: none !important; } .fv-card { break-inside: avoid; } }
/* Hilfsklassen und Brotkrumen (auch ohne Bootstrap) */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; padding: 0 !important; margin: -1px !important; }
.site .breadcrumb { display: flex; flex-wrap: wrap; gap: .2rem; list-style: none; }
.site .breadcrumb-item + .breadcrumb-item::before { content: "›"; padding: 0 .45rem; color: var(--fv-muted); }
.site .breadcrumb-item:empty { display: none; }
/* Handy: Produkte zweispaltig, kompaktere Karten */
@media (max-width: 600px) {
.fv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fv-card { padding: .7rem .7rem 0; }
.fv-card__hit { margin: -.7rem -.7rem .6rem; font-size: 1.25rem; }
.fv-card__name { font-size: .95rem !important; }
.fv-card__price { margin-inline: -.7rem; padding: .45rem .7rem; font-size: .86rem; flex-direction: column; align-items: flex-start; }
.fv-card__tag { font-size: .85rem; right: -2%; }
.fv-card.is-out .fv-card__img::after { font-size: .9rem; }
.fv-table { font-size: .92rem; }
}
@media (max-width: 600px) { .fv-hero__media img { box-shadow: 10px 10px 0 var(--fv-blue); } .fv-hero__media { margin-right: 10px; } }
/* Häufige Fragen () */
.site details.fv-faq, .fv-faqs details { margin: 0; border-bottom: 1px solid var(--fv-line); }
.fv-faqs { margin: 0 0 2rem; border-top: 3px solid var(--fv-blue); background: #fff; }
.fv-faqs summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; font: 700 1.12rem/1.3 var(--fv-text); color: var(--fv-ink); cursor: pointer; list-style: none; }
.fv-faqs summary::-webkit-details-marker { display: none; }
.fv-faqs summary::after { content: "+"; display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--fv-blue); color: #fff; font: 700 1.4rem/1 var(--fv-text); transition: transform .25s, background-color .25s; }
.fv-faqs details[open] summary::after { transform: rotate(45deg); background: var(--fv-red); }
.fv-faqs summary:hover { color: var(--fv-blue); }
.fv-faqs details > :not(summary) { margin: 0; padding: 0 1.1rem 1.1rem; max-width: 52rem; color: var(--fv-muted); }
.fv-faqs details > p + p { padding-top: 0; }
.fv-faqs h3 { margin: 1.6rem 0 .6rem; padding-left: .2rem; }
/* Kennzahlen und Marken (Über uns) */
.fv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.fv-facts li { padding: 1rem 1.2rem; background: var(--fv-blue); color: #dfe7fb; }
.fv-facts strong { display: block; color: #fff; font: 700 2.4rem/1 var(--fv-display); }
.fv-brands { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.fv-brands li { padding: .35rem .8rem; border: 2px solid var(--fv-ice); background: var(--fv-ice-light); font-weight: 700; color: var(--fv-blue); }
/* ==========================================================================
Version 1.2 – ruhige Effekte und Mauseffekt »Kühllicht«
========================================================================== */
/* Lesefortschritt (schmaler roter Balken oben) */
.fv-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; background: var(--fv-red); transform-origin: 0 50%; transform: scaleX(var(--fv-scroll, 0)); pointer-events: none; }
/* Einblenden beim Scrollen: einmalig, gestaffelt, dezent */
.fv-fx .fv-reveal { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.fv-fx .fv-reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
/* Produktkarten: rote Linie wächst, Foto zoomt leicht */
.fv-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--fv-red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s ease; }
.fv-card:hover::after, .fv-card:focus-within::after { transform: scaleX(1); }
.fv-card__img img { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.fv-card:hover .fv-card__img img { transform: scale(1.05); }
.fv-card__tag { transition: transform .35s ease; }
.fv-card:hover .fv-card__tag { transform: rotate(4deg) scale(1.05); }
/* Knöpfe: Lichtstreif beim Überfahren */
.fv-btn { position: relative; overflow: hidden; isolation: isolate; }
.fv-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s ease; }
.fv-btn:hover::after { transform: translateX(120%); }
.fv-btn .fv-icon--arrow { transition: transform .25s ease; }
.fv-btn:hover .fv-icon--arrow { transform: translateX(4px); }
/* Lieferwagen fährt an */
@keyframes fv-drive { 0% { transform: translateX(0); } 40% { transform: translateX(5px); } 60% { transform: translateX(3px); } 100% { transform: translateX(0); } }
.fv-topbar__note:hover .fv-icon--truck, .fv-usp p:hover .fv-icon--truck, .fv-box:hover .fv-icon--truck { animation: fv-drive .7s ease; }
/* Mauseffekt »Kühllicht«: weicher Lichtkegel folgt der Maus über blauen Flächen */
.fv-light { position: relative; }
.fv-light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease;
background: radial-gradient(var(--fv-r, 260px) circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, var(--fv-a, .17)), transparent 65%); }
.fv-light.is-lit::before { opacity: 1; }
.fv-light > * { position: relative; z-index: 1; }
.fv-tile.fv-light > img { position: absolute; z-index: 2; }
.fv-usp.fv-light, .fv-footer.fv-light, .fv-order.fv-light { --fv-r: 420px; --fv-a: .1; }
.fv-way.fv-light, .fv-box.fv-light, .fv-card.fv-light { --fv-r: 220px; }
.fv-way.fv-light::before, .fv-box.fv-light::before, .fv-card.fv-light::before { background: radial-gradient(var(--fv-r) circle at var(--mx, 50%) var(--my, 50%), rgba(0, 51, 153, .09), transparent 65%); }
.fv-card.fv-light > .fv-card__price { position: relative; z-index: 1; }
.fv-card.fv-light::after { z-index: 2; }
/* Titelbild neigt sich leicht zur Maus */
.fv-hero__media { perspective: 1000px; }
.fv-hero__media img { transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.fv-hero.is-tilting .fv-hero__media img { box-shadow: calc(18px - var(--sx, 0px)) calc(18px - var(--sy, 0px)) 0 var(--fv-blue); }
/* Nach oben */
.fv-totop { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 40; display: grid; place-items: center; width: 48px; height: 48px; background: var(--fv-blue); color: #fff !important; box-shadow: 0 8px 20px -8px rgba(0, 38, 122, .6); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s, background-color .2s; }
.fv-totop .fv-icon { transform: rotate(-90deg); }
.fv-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.fv-totop:hover { background: var(--fv-red); }
@media (prefers-reduced-motion: reduce) {
.fv-progress, .fv-btn::after { display: none; }
.fv-card:hover .fv-card__img img, .fv-hero__media img { transform: none !important; }
}
@media print { .fv-progress, .fv-totop { display: none !important; } }
/* ==========================================================================
Bestellliste (1.3)
========================================================================== */
.fv-icon--list { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6h.01M4 12h.01M4 18h.01' stroke-width='3'/%3E%3C/svg%3E"); }
.fv-icon--plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.fv-icon--minus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.fv-icon--close { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.fv-icon--trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
.fv-icon--copy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='1'/%3E%3Cpath d='M5 15V5a1 1 0 0 1 1-1h9'/%3E%3C/svg%3E"); }
.fv-icon--share { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='m8.2 10.9 7.6-3.8M8.2 13.1l7.6 3.8'/%3E%3C/svg%3E"); }
.fv-table th.fv-table__add, .fv-table td.fv-table__add { width: 1%; padding: .25rem .4rem; text-align: center; white-space: nowrap; color: var(--fv-ink); }
.fv-table th.fv-table__add { font-size: .85rem; }
.fv-table tr.is-listed td { background: #fff6d6 !important; }
/* Knopf an der Produktkarte */
.fv-add { position: relative; z-index: 2; padding: .6rem 0 1rem; }
.site .fv-card:has(> .fv-add) .fv-card__price { margin-top: auto; margin-bottom: 0; }
.fv-add__btn { display: flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; min-height: 42px; padding: .4rem .6rem; border: 2px solid var(--fv-blue); background: #fff; color: var(--fv-blue); font: 700 .98rem/1.1 var(--fv-text); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; transition: background-color .2s, color .2s; }
.fv-add__btn:hover { background: var(--fv-blue); color: #fff; }
.fv-add__btn .fv-icon { width: 1.2em; height: 1.2em; }
.fv-table .fv-add__btn { width: auto; min-height: 36px; padding: .25rem .55rem; font-size: .85rem; }
.fv-card.is-listed { box-shadow: inset 0 0 0 2px var(--fv-blue); }
.fv-card.is-listed .fv-card__price { background: #cdd9f0; }
/* Mengen-Stepper */
.fv-qty { display: flex; align-items: stretch; min-height: 42px; border: 2px solid var(--fv-blue); background: #fff; }
.fv-qty__btn { flex: none; display: grid; place-items: center; width: 40px; padding: 0; border: 0; background: var(--fv-blue); color: #fff; cursor: pointer; }
.fv-qty__btn:hover { background: var(--fv-red); }
.fv-qty__btn .fv-icon { width: 1.15em; height: 1.15em; }
.fv-qty__field { flex: 1; display: flex; align-items: center; justify-content: center; gap: .25rem; min-width: 0; margin: 0; padding: 0 .3rem; cursor: text; }
.fv-qty__field input { width: 3.2em; min-width: 0; padding: 0; border: 0; background: transparent; text-align: right; font: 700 1.1rem/1 var(--fv-text); color: var(--fv-ink); }
.fv-qty__field input:focus { outline: none; }
.fv-qty__field:focus-within { box-shadow: inset 0 0 0 2px var(--fv-red); }
.fv-qty__unit { overflow: hidden; color: var(--fv-muted); font-size: .9rem; white-space: nowrap; text-overflow: ellipsis; }
.fv-qty__unit:empty { display: none; }
.fv-qty--small { min-height: 36px; min-width: 128px; }
.fv-qty--small .fv-qty__btn { width: 34px; }
.fv-qty--small .fv-qty__field input { width: 2.6em; font-size: 1rem; }
/* Schwebender Knopf */
.fv-listbtn { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 45; display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: .5rem 1rem .5rem .9rem; border: 0; background: var(--fv-blue); color: #fff; font: 700 1rem/1 var(--fv-text); text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 10px 24px -10px rgba(0, 38, 122, .7); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility .25s, background-color .2s; }
.fv-listbtn.is-visible { opacity: 1; visibility: visible; transform: none; }
.fv-listbtn:hover { background: var(--fv-blue-dark); }
.fv-listbtn .fv-icon { width: 1.4em; height: 1.4em; }
.fv-listbtn__n { display: grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .35em; border-radius: 1em; background: #fff; color: var(--fv-blue); font-size: .95rem; }
.fv-listbtn.has-items { background: var(--fv-red); }
.fv-listbtn.has-items:hover { background: var(--fv-red-dark); }
.fv-listbtn.has-items .fv-listbtn__n { color: var(--fv-red); }
.fv-listbtn.is-bump { animation: fv-bump .45s ease; }
@keyframes fv-bump { 40% { transform: scale(1.12); } }
.fv-has-listbtn .fv-totop { bottom: calc(1rem + 64px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 600px) { .fv-add { padding: .45rem 0 .7rem; } .fv-card .fv-qty__unit { display: none; } .fv-add__btn { font-size: .88rem; } .fv-card .fv-qty__btn { width: 34px; } .fv-card .fv-qty__field input { width: 2.4em; } }
@media (max-width: 520px) { .fv-listbtn__label { display: none; } .fv-listbtn { padding-inline: .8rem; } }
/* Kurzer Hinweis nach dem Hinzufügen */
.fv-toast { position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); z-index: 46; display: flex; align-items: center; gap: .6rem; width: min(92vw, 520px); padding: .7rem .8rem .7rem 1rem; background: var(--fv-ink); color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translate(-50%, 14px); transition: opacity .25s, transform .25s, visibility .25s; }
.fv-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.fv-toast > span:nth-child(2) { flex: 1; font-size: .98rem; line-height: 1.3; }
.fv-toast .fv-icon { color: #7fe0a0; }
.fv-toast button { flex: none; padding: .45rem .7rem; border: 2px solid #fff; background: transparent; color: #fff; font: 700 .9rem/1 var(--fv-text); text-transform: uppercase; cursor: pointer; }
.fv-toast button:hover { background: #fff; color: var(--fv-ink); }
/* Seitliche Schublade */
.fv-drawer { width: min(100vw, 560px); max-width: 100vw; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0; background: #fff; color: var(--fv-ink); box-shadow: -20px 0 40px -20px rgba(0, 38, 122, .5); overflow: auto; overscroll-behavior: contain; }
.fv-drawer[open] { animation: fv-slide .3s cubic-bezier(.2, .7, .2, 1); }
.fv-drawer::backdrop { background: rgba(10, 20, 50, .45); }
@keyframes fv-slide { from { transform: translateX(40px); opacity: 0; } }
html.fv-ol-open { overflow: hidden; }
.fv-drawer .fv-ol { min-height: 100%; padding: 0 1.2rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); border: 0; }
.fv-drawer .fv-ol__head { position: sticky; top: 0; z-index: 3; margin: 0 -1.2rem 1rem; padding: .9rem 1.2rem; background: var(--fv-blue); }
.fv-drawer .fv-ol__title { color: #fff !important; }
.fv-drawer .fv-ol__count { color: #fff; }
/* Panel (Schublade und Bestellseite) */
.fv-ol { margin: 0 0 2rem; padding: 1.2rem; border: 2px solid var(--fv-blue); background: #fff; }
.fv-ol__head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.site .fv-ol__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.fv-ol__title:focus { outline: none; }
.fv-ol__title .fv-icon { width: 1em; height: 1em; }
.fv-ol__count { margin-left: auto; font-weight: 700; color: var(--fv-muted); white-space: nowrap; }
.fv-ol__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid #fff; background: transparent; color: #fff; cursor: pointer; }
.fv-ol__close:hover { background: #fff; color: var(--fv-blue); }
.fv-ol__offer { display: flex; align-items: center; gap: .4rem; margin: 0 0 1rem !important; padding: .5rem .7rem; background: var(--fv-ice-light); font-size: .95rem; color: var(--fv-muted); }
.fv-ol__offer .fv-icon { color: var(--fv-red); width: 1.2em; height: 1.2em; }
.fv-ol__empty { display: none; padding: 1rem; margin: 0 0 1rem; background: var(--fv-ice-light); }
.fv-ol.is-empty .fv-ol__empty { display: block; }
.fv-ol__chip { display: inline-block; padding: 0 .4rem; border: 2px solid var(--fv-blue); color: var(--fv-blue); font-weight: 700; font-size: .9em; text-transform: uppercase; white-space: nowrap; }
.fv-ol__items { margin: 0 0 1rem; padding: 0; list-style: none; }
.fv-ol__item { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: .4rem .8rem; padding: .7rem 0; border-bottom: 1px solid var(--fv-line); }
.fv-ol__item:first-child { border-top: 1px solid var(--fv-line); }
.fv-ol__item img, .fv-ol__noimg { width: 56px; height: 56px; object-fit: contain; background: #fff; }
.fv-ol__noimg { display: grid; place-items: center; background: var(--fv-ice-light); color: var(--fv-blue); }
.fv-ol__info { min-width: 0; line-height: 1.25; }
.fv-ol__info strong { display: block; font-weight: 700; }
.fv-ol__art { font-size: .92rem; font-weight: 700; color: var(--fv-blue); }
.fv-ol__info small { display: block; color: var(--fv-muted); font-size: .88rem; }
.fv-ol__variant select { margin: .15rem 0; padding: .2rem .4rem; border: 2px solid var(--fv-blue); background: #fff; font: 700 .92rem var(--fv-text); color: var(--fv-blue); }
.fv-ol__variant select[aria-invalid] { border-color: var(--fv-red); }
.fv-ol__item .fv-qty { width: 168px; }
.fv-ol__del { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--fv-muted); cursor: pointer; }
.fv-ol__del:hover { color: var(--fv-red-text); background: var(--fv-ice-light); }
@media (max-width: 520px) {
.fv-ol__item { grid-template-columns: 48px 1fr auto; }
.fv-ol__item img, .fv-ol__noimg { width: 48px; height: 48px; }
.fv-ol__item .fv-qty { grid-column: 2 / 3; justify-self: start; }
.fv-ol__item .fv-ol__del { grid-column: 3; grid-row: 1; }
}
.fv-ol__form { margin: 0 0 1.2rem; }
.fv-ol__who { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .7rem 1rem; margin: 1rem 0 0; padding: 0; border: 0; }
.fv-ol__who legend { margin: 0 0 .5rem; padding: 0; font: 700 1.35rem/1.1 var(--fv-display); color: var(--fv-blue); }
.fv-ol__field { display: flex; flex-direction: column; gap: .2rem; margin: 0; font-weight: 700; font-size: .95rem; }
.fv-ol__field small { font-weight: 400; color: var(--fv-muted); }
.fv-ol__field b { color: var(--fv-red-text); }
.fv-ol__field--wide { grid-column: 1 / -1; }
.fv-ol__field input, .fv-ol__field textarea { width: 100%; padding: .55rem .65rem; border: 2px solid var(--fv-line); border-radius: 0; background: #fff; font: 400 1rem/1.35 var(--fv-text); color: var(--fv-ink); }
.fv-ol__field input:focus, .fv-ol__field textarea:focus { border-color: var(--fv-blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 51, 153, .15); }
.fv-ol__field [aria-invalid] { border-color: var(--fv-red); background: #fff4f4; }
.fv-ol__check { display: flex; align-items: center; gap: .5rem; grid-column: 1 / -1; margin: .2rem 0; font-size: .95rem; cursor: pointer; }
.fv-ol__check input { width: 1.2rem; height: 1.2rem; accent-color: var(--fv-blue); }
.fv-ol__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.fv-ol__send { padding: 1rem; margin: 0 -1.2rem 1rem; background: var(--fv-ice-light); }
.fv-ol-inline .fv-ol__send { margin-inline: 0; }
.site .fv-ol__send h3 { margin: 0 0 .7rem; }
.fv-ol__ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .6rem; margin: 0 0 .6rem; }
.fv-send { display: flex; align-items: center; gap: .7rem; min-height: 64px; padding: .6rem .9rem; border: 0; background: var(--fv-blue); color: #fff; text-align: left; font: 400 .9rem/1.2 var(--fv-text); cursor: pointer; transition: background-color .2s, transform .2s; }
.fv-send:hover { transform: translateY(-1px); }
.fv-send .fv-icon { width: 1.8rem; height: 1.8rem; }
.fv-send strong { display: block; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em; }
.fv-send small { opacity: .9; }
.fv-send--wa { background: #128c4a; } .fv-send--wa:hover { background: #0d6e3a; }
.fv-send--wc { background: #2a7d2e; } .fv-send--wc:hover { background: #20621f; }
.fv-send--mail:hover { background: var(--fv-blue-dark); }
.fv-send--share { background: #fff; color: var(--fv-blue); box-shadow: inset 0 0 0 2px var(--fv-blue); }
.fv-send[disabled] { opacity: .6; cursor: wait; }
.fv-send.is-busy .fv-icon { animation: fv-pulse 1s ease-in-out infinite; }
@keyframes fv-pulse { 50% { opacity: .3; } }
.fv-ol__status:empty { display: none; }
.fv-ol__status { margin: .6rem 0 0; padding: .7rem .9rem; background: #fff; border-left: 4px solid var(--fv-blue); }
.fv-ol__status.is-ok { border-left-color: #128c4a; }
.fv-ol__status.is-error { border-left-color: var(--fv-red); background: #fff4f4; }
.fv-ol__after { display: block; margin-top: .3rem; }
.fv-ol__link { padding: 0; border: 0; background: none; color: var(--fv-blue); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.fv-ol__link:hover { color: var(--fv-red-text); }
.fv-ol__wechat { margin: .7rem 0 0; padding: .9rem; background: #fff; border: 2px solid #2a7d2e; }
.fv-ol__wechat ol { margin: 0 0 .7rem; padding-left: 1.3rem; }
.fv-ol__qr { margin: 0 0 .7rem; }
.fv-ol__qr img { width: 160px; height: 160px; }
.fv-ol__qr figcaption { font-size: .9rem; color: var(--fv-muted); }
.fv-ol__plain { width: 100%; margin: 0 0 .7rem; padding: .5rem; font: .92rem/1.35 ui-monospace, monospace; }
.fv-ol__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin: 0 !important; font-size: .88rem; color: var(--fv-muted); }
.fv-ol__foot span { flex: 1 1 260px; }
.fv-ol.is-empty .fv-ol__send, .fv-ol.is-empty .fv-ol__foot .fv-ol__link { display: none; }
.fv-ol.is-empty .fv-ol__status:not(:empty) { display: block; }
@media print {
.fv-add, .fv-table__add, .fv-listbtn, .fv-toast, .fv-ol__send, .fv-ol__foot, .fv-ol__del, .fv-qty__btn { display: none !important; }
.fv-ol { border: 0; padding: 0; }
}
/* ==========================================================================
Preise nur für angemeldete Kunden (1.4)
========================================================================== */
.fv-icon--user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); }
.fv-icon--lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='1'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v3'/%3E%3C/svg%3E"); }
.fv-pricelock .fv-card__price strong::after { content: "Preis nach Anmeldung"; }
.fv-pricelock .fv-table td:nth-child(4)::after { content: "nach Anmeldung"; }
.fv-pricelock .fv-card__price strong::after, .fv-pricelock .fv-table td:nth-child(4)::after { color: var(--fv-muted); font-style: italic; }
.fv-topbar__login { font-weight: 700; }
.fv-topbar .fv-topbar__login { padding: .1rem .55rem; border: 1px solid rgba(255, 255, 255, .7); }
.fv-topbar .fv-topbar__login:hover { background: #fff; color: var(--fv-blue); }
/* Hinweis »Preise nach Anmeldung« */
.fv-lock-wrap { margin-top: 1.5rem; }
.fv-lock { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem 1.1rem; margin: 0 0 1.5rem; padding: 1rem 1.2rem; border-left: 6px solid var(--fv-red); background: var(--fv-ice-light); }
.fv-lock > .fv-icon { width: 2.4rem; height: 2.4rem; color: var(--fv-blue); }
.fv-lock p { margin: 0 !important; }
.fv-lock strong { color: var(--fv-blue); }
.fv-lock__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.fv-lock .fv-btn { min-height: 42px; padding: .45rem 1rem; font-size: .95rem; }
@media (max-width: 760px) { .fv-lock { grid-template-columns: auto 1fr; } .fv-lock__actions { grid-column: 1 / -1; } }
/* Anmelde-, Registrier- und Profilseiten (com_users) */
.com-users-login, .com-users-registration, .com-users-reset, .com-users-remind, .com-users-profile, .com-users-logout { max-width: 640px; }
.site .com-users-login .control-group, .site .com-users-registration .control-group, .site .com-users-reset .control-group, .site .com-users-remind .control-group, .site .com-users-profile .control-group { margin: 0 0 1rem; }
.site [class^="com-users"] label, .site [class*=" com-users"] label { font-weight: 700; }
.site [class^="com-users"] input[type="text"], .site [class^="com-users"] input[type="email"], .site [class^="com-users"] input[type="password"], .site [class^="com-users"] input[type="tel"], .site [class^="com-users"] textarea, .site [class^="com-users"] select { width: 100%; max-width: 100%; padding: .6rem .7rem; border: 2px solid var(--fv-line); border-radius: 0; font: 400 1.05rem/1.35 var(--fv-text); }
.site [class^="com-users"] input:focus, .site [class^="com-users"] textarea:focus { border-color: var(--fv-blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 51, 153, .15); }
.site [class^="com-users"] .btn { border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.site [class^="com-users"] fieldset { margin: 0 0 1.2rem; padding: 0; border: 0; }
.site [class^="com-users"] legend { font: 700 1.4rem/1.1 var(--fv-display); color: var(--fv-blue); }
.com-users-login__options { margin-top: 1.2rem; }
.com-users-login__description, .com-users-registration .spacer { padding: .9rem 1rem; margin: 0 0 1.2rem; background: var(--fv-ice-light); }
/* ==========================================================================
Kontaktformular (1.5)
========================================================================== */
.fv-cf { max-width: 860px; margin: 0 0 2rem; padding: clamp(1rem, 3vw, 1.6rem); border: 2px solid var(--fv-blue); border-top-width: 6px; background: #fff; }
.fv-cf__topics { margin: 0 0 1.1rem; padding: 0; border: 0; }
.fv-cf__topics legend { margin: 0 0 .5rem; padding: 0; font: 700 1.35rem/1.1 var(--fv-display); color: var(--fv-blue); }
.fv-cf__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.fv-cf__chip { position: relative; margin: 0; cursor: pointer; }
.fv-cf__chip input { position: absolute; opacity: 0; pointer-events: none; }
.fv-cf__chip span { display: inline-block; padding: .45rem .85rem; border: 2px solid var(--fv-line); background: #fff; font-weight: 700; font-size: .95rem; transition: border-color .15s, background-color .15s, color .15s; }
.fv-cf__chip:hover span { border-color: var(--fv-blue); }
.fv-cf__chip input:checked + span { border-color: var(--fv-blue); background: var(--fv-blue); color: #fff; }
.fv-cf__chip input:focus-visible + span { outline: 3px solid var(--fv-red); outline-offset: 2px; }
.fv-cf__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; }
@media (max-width: 640px) { .fv-cf__grid { grid-template-columns: 1fr; } }
.fv-cf__field { display: flex; flex-direction: column; gap: .25rem; }
.fv-cf__field--wide { grid-column: 1 / -1; }
.fv-cf__field label { margin: 0; font-weight: 700; font-size: .98rem; }
.fv-cf__field small { font-weight: 400; color: var(--fv-muted); }
.fv-cf b { color: var(--fv-red-text); }
.fv-cf input[type="text"], .fv-cf input[type="email"], .fv-cf input[type="tel"], .fv-cf select, .fv-cf textarea { width: 100%; padding: .6rem .7rem; border: 2px solid var(--fv-line); border-radius: 0; background: #fff; font: 400 1.05rem/1.35 var(--fv-text); color: var(--fv-ink); }
.fv-cf textarea { resize: vertical; min-height: 7.5rem; }
.fv-cf input:focus, .fv-cf select:focus, .fv-cf textarea:focus { border-color: var(--fv-blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 51, 153, .15); }
.fv-cf [aria-invalid] { border-color: var(--fv-red) !important; background: #fff4f4 !important; }
.fv-cf__check { display: flex; align-items: flex-start; gap: .55rem; margin: 0; font-size: .98rem; cursor: pointer; }
.fv-cf__check input { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--fv-blue); }
.fv-cf__check input[aria-invalid] { outline: 2px solid var(--fv-red); outline-offset: 2px; }
.fv-cf__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.fv-cf__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: 1.2rem; }
.fv-cf__foot .fv-btn[disabled] { opacity: .6; cursor: wait; }
.fv-cf__note { margin: 0 !important; color: var(--fv-muted); font-size: .92rem; }
.fv-cf__hint { display: flex; gap: .6rem; align-items: center; margin: 1.1rem 0 0 !important; padding: .7rem .9rem; background: var(--fv-ice-light); font-size: .95rem; }
.fv-cf__hint .fv-icon { color: var(--fv-red); width: 1.4em; height: 1.4em; }
.fv-cf__status:empty { display: none; }
.fv-cf__status { margin-top: 1rem; padding: .7rem .9rem; border-left: 4px solid var(--fv-blue); background: var(--fv-ice-light); }
.fv-cf__status.is-error { border-left-color: var(--fv-red); background: #fff4f4; }
.fv-cf__status.is-ok { border-left-color: #128c4a; }
.fv-cf--done { display: flex; gap: 1rem; align-items: flex-start; border-color: #128c4a; }
.fv-cf--done:focus { outline: none; }
.fv-cf--done > .fv-icon { width: 2.6rem; height: 2.6rem; color: #128c4a; }
.site .fv-cf--done h3 { margin: 0 0 .3rem; }
.fv-cf--done p { margin: 0 !important; }
@media print { .fv-cf { display: none !important; } }
/* Frontend-Bearbeitung (angemeldete Redakteure): Bearbeiten-Symbole nehmen keinen Platz im Menü ein,
sonst passt die Navigation nicht mehr in eine Zeile und das Template schaltet auf das Burger-Menü */
.fv-nav .mod-menu > li > a.jmenuedit, .fv-nav .mod-menu li > a.jmenuedit { position: absolute !important; top: -.2rem; right: -.2rem; z-index: 6; display: grid !important; place-items: center; width: 1.4rem; height: 1.4rem; padding: 0 !important; border: 0 !important; border-radius: 50%; background: var(--fv-blue); color: #fff !important; font-size: .7rem; line-height: 1; opacity: 0; transition: opacity .15s; }
.fv-nav .mod-menu li { position: relative; }
.fv-nav .mod-menu li:hover > a.jmenuedit, .fv-nav .mod-menu a.jmenuedit:focus { opacity: 1; }
.fv-compact .fv-nav .mod-menu li > a.jmenuedit { top: .6rem; right: 0; opacity: 1; }
/* Fußzeilen-Menüs untereinander (Joomlas Menü-Liste trägt die Bootstrap-Klasse »nav« = nebeneinander) */
.fv-footer .mod-menu { display: flex !important; flex-direction: column; flex-wrap: nowrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.fv-footer .mod-menu > li { margin: 0; }
.fv-footer .mod-menu a, .fv-footer .mod-menu .nav-link { display: inline-block; padding: 0; color: #fff; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.fv-footer .mod-menu a:hover, .fv-footer .mod-menu .active > a { border-bottom-color: #fff; color: #fff; }
.fv-footer .mod-menu ul { display: none; }
.fv-footer .mod-menu + .fv-footer__title, .fv-footer .mod-menu + h2, .fv-footer .mod-menu + h3, .fv-footer__modules > * + * { margin-top: 1.4rem; }
/* Liefergebiet & Liefertage (1.6) */
.fv-tours { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; margin: 0 0 1.2rem; }
.fv-tour { padding: 1rem 1.1rem 1.1rem; border-top: 5px solid var(--fv-blue); background: var(--fv-ice-light); }
.site .fv-tour h3 { margin: 0 0 .6rem; font-size: 1.35rem; }
.fv-tour ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.fv-tour li { margin: 0; padding: .2rem .55rem; background: #fff; border: 1px solid var(--fv-line); font-size: .95rem; line-height: 1.3; }
.fv-tour p { margin: 0 !important; }
.fv-tour--daily { grid-column: 1 / -1; border-top-color: var(--fv-red); background: #fff; box-shadow: inset 0 0 0 2px var(--fv-ice); }
.fv-ol__wcbtns { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Liefercheck mit Karte (1.7) */
.fv-dc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "form map" "result map" "days map"; grid-template-rows: auto auto 1fr; gap: 1rem 1.6rem; margin: 0 0 1.6rem; padding: clamp(1rem, 3vw, 1.6rem); border: 2px solid var(--fv-blue); border-top-width: 6px; background: #fff; }
html:not(.js) .fv-dc { display: none; }
@media (max-width: 860px) { .fv-dc { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "form" "result" "map" "days"; } }
@media (max-width: 420px) { .fv-dc__row { flex-wrap: wrap; } .fv-dc__row .fv-btn { flex: 1 1 100%; justify-content: center; } }
.fv-dc__form { grid-area: form; }
.fv-dc__form label { display: block; margin: 0 0 .5rem; font: 700 1.35rem/1.15 var(--fv-display); color: var(--fv-blue); }
.fv-dc__row { display: flex; gap: .5rem; }
.fv-dc__input { flex: 1; min-width: 0; padding: .7rem .8rem; border: 2px solid var(--fv-line); border-radius: 0; font: 400 1.1rem/1.3 var(--fv-text); color: var(--fv-ink); }
.fv-dc__input:focus { border-color: var(--fv-blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 51, 153, .15); }
.fv-dc__row .fv-btn { flex: none; }
.fv-dc__result { grid-area: result; }
.fv-dc__result:empty { display: none; }
.fv-dc__result p { margin: 0 0 .5rem !important; }
.fv-dc__yes { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; border-left: 5px solid #128c4a; background: #eef8f1; font-size: 1.08rem; line-height: 1.35; }
.fv-dc__yes .fv-icon { flex: none; width: 1.6rem; height: 1.6rem; color: #128c4a; }
.fv-dc__no { padding: .8rem .9rem; border-left: 5px solid var(--fv-red); background: #fff4f4; font-size: 1.05rem; }
.fv-dc__meta, .fv-dc__alt { color: var(--fv-muted); font-size: .95rem; }
.fv-dc__cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem !important; }
.fv-dc__cta .fv-btn { min-height: 42px; padding: .45rem 1rem; font-size: .95rem; }
.fv-dc__days { grid-area: days; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .92rem; color: var(--fv-muted); }
.fv-dc__days span { margin-right: .2rem; }
.fv-dc__days button { min-width: 2.6rem; padding: .35rem .6rem; border: 2px solid var(--fv-line); background: #fff; font: 700 .92rem/1 var(--fv-text); color: var(--fv-ink); cursor: pointer; }
.fv-dc__days button:hover { border-color: var(--fv-blue); }
.fv-dc__days button[aria-pressed="true"] { border-color: var(--fv-blue); background: var(--fv-blue); color: #fff; }
.fv-dc__map { grid-area: map; position: relative; min-height: 260px; background: var(--fv-ice-light); }
.fv-dc__map svg { display: block; width: 100%; height: auto; }
.fv-dc__ph { margin: 0 !important; padding: 2rem 1rem; text-align: center; color: var(--fv-muted); }
.fv-dc__attr { margin: 0 !important; padding: .3rem .5rem; font-size: .72rem; color: var(--fv-muted); text-align: right; }
.fv-dc__land { fill: #fff; stroke: #b9c6e3; stroke-width: 1.2; }
.fv-dc__dots circle { fill: #b3c1e2; }
.fv-dc__adot { fill: #7f97cf; transition: fill .2s, opacity .2s; }
.has-filter .fv-dc__adot { opacity: .35; }
.has-filter .fv-dc__adot.is-on { opacity: 1; fill: var(--fv-blue); }
.fv-dc__area { fill: rgba(0, 51, 153, .1); stroke: none; transition: fill .2s; }
.fv-dc__rings { opacity: .16; }
.fv-dc__ring { fill: var(--fv-blue); stroke: none; }
.has-filter .fv-dc__rings { opacity: .3; }
.has-filter .fv-dc__ring:not(.is-on) { display: none; }
.fv-dc__daily { fill: rgba(227, 6, 19, .14); stroke: var(--fv-red); stroke-width: 2; stroke-dasharray: 6 4; }
.fv-dc__city circle { fill: var(--fv-blue); stroke: #fff; stroke-width: 2; }
.fv-dc__city text, .fv-dc__depot text, .fv-dc__pin text { font: 700 17px var(--fv-text); fill: var(--fv-ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.fv-dc__city text { font-weight: 400; font-size: 15px; }
.fv-dc__depot circle { fill: var(--fv-red); stroke: #fff; stroke-width: 3; }
.fv-dc__depot text { fill: var(--fv-red-text); font-size: 19px; }
.has-filter .fv-dc__area { opacity: .25; }
.has-filter .fv-dc__area.is-on { opacity: 1; fill: rgba(0, 51, 153, .22); }
.has-filter .fv-dc__city { opacity: .35; }
.has-filter .fv-dc__city.is-on { opacity: 1; }
.has-filter .fv-dc__city.is-on circle { r: 8; }
.fv-dc__pin circle { fill: rgba(18, 140, 74, .25); stroke: #128c4a; stroke-width: 3; }
.fv-dc__pin .fv-dc__pin-dot { fill: #128c4a; stroke: #fff; }
.fv-dc__pin text { fill: #0d6e3a; font-size: 19px; }
.is-loading .fv-dc__map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: fv-shine 1.2s infinite; }
@keyframes fv-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media print { .fv-dc { display: none !important; } }
/* Produktsuche (1.9) */
.fv-search-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 44px; min-height: 44px; padding: .4rem .6rem; border: 2px solid var(--fv-blue); background: #fff; color: var(--fv-blue); font: 700 1rem var(--fv-text); text-transform: uppercase; cursor: pointer; }
.fv-search-btn:hover { background: var(--fv-blue); color: #fff; }
.fv-search-btn .fv-icon { width: 1.3em; height: 1.3em; }
/* Im ausgeklappten Menü nur die Lupe, damit die Navigation in eine Zeile passt; im Kompaktmodus mit Text */
.fv-search-btn__label { display: none; }
.fv-compact .fv-search-btn__label { display: inline; }
@media (max-width: 520px) { .fv-compact .fv-search-btn__label { display: none; } }
.fv-compact .fv-search-btn { margin-left: auto; }
.fv-compact .fv-search-btn + .fv-header__cta, .fv-compact .fv-search-btn ~ .fv-menu-btn { margin-left: 0; }
html.fv-sd-open { overflow: hidden; }
.fv-sd { width: min(760px, 100vw); max-width: 100vw; max-height: min(86vh, 900px); margin: 7vh auto auto; padding: 0; border: 0; background: #fff; color: var(--fv-ink); box-shadow: 0 30px 60px -20px rgba(0, 38, 122, .55); overflow: hidden; }
.fv-sd[open] { display: flex; animation: fv-sd-in .2s ease-out; }
@keyframes fv-sd-in { from { transform: translateY(-10px); opacity: 0; } }
.fv-sd::backdrop { background: rgba(10, 20, 50, .5); }
@media (max-width: 640px) { .fv-sd { width: 100vw; height: 100%; max-height: 100%; margin: 0; } }
.fv-sd__box { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.fv-sd__form { position: relative; display: flex; align-items: center; gap: .5rem; padding: .8rem; border-bottom: 4px solid var(--fv-red); background: var(--fv-blue); }
.fv-sd__form > .fv-icon { position: absolute; left: 1.55rem; width: 1.4rem; height: 1.4rem; color: var(--fv-blue); pointer-events: none; }
.fv-sd__form input { flex: 1; min-width: 0; padding: .8rem .8rem .8rem 2.9rem; border: 0; border-radius: 0; font: 400 1.2rem/1.3 var(--fv-text); color: var(--fv-ink); }
.fv-sd__form input:focus { outline: 3px solid var(--fv-red); outline-offset: 0; }
.fv-sd__close { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid #fff; background: transparent; color: #fff; cursor: pointer; }
.fv-sd__close:hover { background: #fff; color: var(--fv-blue); }
.fv-sd__info { padding: .6rem 1rem 0; color: var(--fv-muted); font-size: .95rem; }
.fv-sd__info p { margin: 0 0 .6rem; }
.fv-sd__hint { color: var(--fv-ink); }
.fv-sd__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fv-sd__chips a { padding: .3rem .7rem; border: 2px solid var(--fv-line); color: var(--fv-blue); font-weight: 700; text-decoration: none; }
.fv-sd__chips a:hover { border-color: var(--fv-blue); }
.fv-sd__list { flex: 1; min-height: 0; margin: 0; padding: 0 .4rem .6rem; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.fv-sr { display: flex; align-items: center; gap: .5rem; margin: 0; border-bottom: 1px solid var(--fv-line); }
.fv-sr__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: .8rem; padding: .55rem .6rem; color: inherit; text-decoration: none; }
.fv-sr__link:hover, .fv-sr__link:focus { background: var(--fv-ice-light); outline: none; }
.fv-sr__link:focus-visible { box-shadow: inset 0 0 0 3px var(--fv-blue); }
.fv-sr__link img, .fv-sr__noimg { flex: none; width: 56px; height: 56px; object-fit: contain; background: #fff; }
.fv-sr__noimg { display: grid; place-items: center; background: var(--fv-ice-light); color: var(--fv-blue); }
.fv-sr__text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.fv-sr__text strong { font-weight: 700; }
.fv-sr__text small { color: var(--fv-muted); font-size: .88rem; }
.fv-sr__text small b { color: var(--fv-blue); }
.fv-sr__text mark { background: #ffe58a; color: inherit; padding: 0 .05em; }
.fv-sr__price { color: var(--fv-red-text); font-weight: 700; font-size: .95rem; }
.fv-sr__lock { color: var(--fv-muted); font-style: italic; font-size: .9rem; }
.fv-sr.is-out .fv-sr__link { opacity: .6; }
.fv-sr__add { flex: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: .3rem .6rem; margin-right: .3rem; border: 2px solid var(--fv-blue); background: #fff; color: var(--fv-blue); font: 700 .85rem var(--fv-text); text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.fv-sr__add:hover { background: var(--fv-blue); color: #fff; }
.fv-sr__add.is-on { border-color: #128c4a; color: #128c4a; }
.fv-sr__add.is-on:hover { background: #128c4a; color: #fff; }
@media (max-width: 520px) { .fv-sr__addlabel { display: none; } .fv-sr__add { padding: .3rem .5rem; } }
.fv-card.is-found, .fv-table tr.is-found td { animation: fv-found 2.4s ease; }
.fv-card.is-found { box-shadow: inset 0 0 0 4px var(--fv-red); }
@keyframes fv-found { 0%, 60% { background: #fff6d6; } 100% { background: inherit; } }
@media print { .fv-search-btn { display: none !important; } }
/* Variante B: eigener Kundenpreis */
.fv-price-own { color: #0d6e3a !important; }
.fv-price-own::before { content: "Ihr Preis: "; font-weight: 400; font-size: .85em; color: var(--fv-muted); }
.fv-price-ask { color: var(--fv-muted) !important; font-style: italic; }
/* Angebotsnummer freischalten (3.1) */
.fv-lock--code { grid-template-columns: auto 1fr; }
.fv-lock--code .fv-code { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.fv-code input { flex: 0 1 220px; min-width: 0; padding: .55rem .7rem; border: 2px solid var(--fv-line); border-radius: 0; font: 400 1.05rem var(--fv-text); }
.fv-code input:focus { border-color: var(--fv-blue); outline: none; }
.fv-code .fv-btn { min-height: 44px; padding: .45rem 1rem; font-size: .95rem; }
.fv-code__msg { flex-basis: 100%; font-size: .95rem; }
.fv-code__msg.is-ok { color: #0d6e3a; font-weight: 700; }
.fv-code__msg.is-error { color: var(--fv-red-text); }
@media (min-width: 761px) { .fv-lock--code { grid-template-columns: auto 1fr auto; } .fv-lock--code .fv-code { grid-column: auto; } .fv-code__msg { flex-basis: auto; } }
/* Hinweis »ohne Gewähr« (3.1.2) */
.fv-price-note { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0 2rem !important; padding: .7rem .9rem; border-left: 4px solid var(--fv-blue); background: var(--fv-ice-light); color: var(--fv-muted); font-size: .95rem; }
.fv-price-note .fv-icon { flex: none; margin-top: .15rem; color: var(--fv-blue); }
.fv-ol__note { display: flex; gap: .5rem; margin: 0 0 .8rem !important; font-size: .92rem; color: var(--fv-ink); }
.fv-ol__note .fv-icon { flex: none; margin-top: .1rem; color: var(--fv-red); }
/* WeChat-Kasten (4.1) */
.fv-wechat { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 1.5rem 0 2rem; padding: 1.2rem; border: 2px solid #2a7d2e; background: #fff; }
.fv-wechat img { width: 200px; height: auto; flex: none; }
.fv-wechat > div { flex: 1 1 260px; }
.site .fv-wechat h3 { margin: 0 0 .4rem; }
.fv-wechat p { margin: 0 0 .6rem !important; }
/* Katalogpreis für Neukunden mit Angebotsnummer */
.fv-price-cat { color: var(--fv-red-text); }
/* Team: Drei Brüder, ein Familienunternehmen (4.2) */
.fv-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin: 0 0 1.2rem; }
.fv-person { display: flex; flex-direction: column; }
.fv-person__initials, .fv-person__photo { display: grid; place-items: center; width: 4rem; height: 4rem; margin-bottom: .8rem; border-radius: 50%; background: var(--fv-blue); color: #fff; font: 700 1.55rem/1 var(--fv-display); letter-spacing: .05em; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--fv-red); }
.fv-person__photo { object-fit: cover; background: var(--fv-ice); }
.fv-person h3 { margin-bottom: .15rem; }
.site .fv-person__role { margin: 0 0 .6rem; color: var(--fv-red-text); font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; }
.site .fv-box .fv-person__tel { margin: auto 0 0; padding-top: .7rem; border-top: 1px solid var(--fv-line); }
.fv-person__tel a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.fv-person__tel .fv-icon { width: 1.25rem; height: 1.25rem; margin: 0; color: var(--fv-red); }
/* Kontaktseite: Knopfreihe und Ansprechpartner-Liste (4.3) */
.site .fv-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.8rem; }
.fv-contacts { display: grid; gap: .6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.fv-contacts li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; padding: .9rem 1.2rem; background: var(--fv-ice-light); border-left: 4px solid var(--fv-blue); }
.fv-contacts__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; color: var(--fv-muted); }
.fv-contacts__name strong { color: var(--fv-blue); font: 700 1.3rem/1.1 var(--fv-display); }
.fv-contacts a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.1rem; text-decoration: none; white-space: nowrap; }
.fv-contacts .fv-icon { width: 1.3rem; height: 1.3rem; color: var(--fv-red); }
/* Hinweis Agentur in der Fußleiste (4.4) */
.fv-footer__credit { color: #aebde6; font-size: .82rem; }
.site .fv-footer__credit a { color: #aebde6; text-decoration: none; border-bottom: 1px solid transparent; }
.site .fv-footer__credit a:hover { color: #fff; border-bottom-color: #fff; }
/* Impressum: dezente Zwischenüberschriften mit Abstand (4.5) */
.site h2.fv-imprint-h { margin: 2.8rem 0 .8rem; padding-top: 1.4rem; border-top: 1px solid var(--fv-line); color: var(--fv-muted); font: 700 .95rem/1.3 var(--fv-text); text-transform: uppercase; letter-spacing: .09em; }
/* 4.6: »Neu«-Kennzeichen auch in Produktkarten, Platzhalter für kommende Artikel */
.fv-card__name .fv-new { display: inline-block; margin-left: .4rem; padding: 0 .4rem; background: var(--fv-red); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.5; text-transform: uppercase; vertical-align: .15em; }
.fv-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 280px; margin: 0; padding: 1.5rem 1rem; border-right: 1px solid var(--fv-line); border-bottom: 1px solid var(--fv-line); background: repeating-linear-gradient(135deg, #fff 0 14px, var(--fv-ice-light) 14px 28px); color: var(--fv-muted); text-align: center; }
.fv-soon .fv-icon { width: 2.6rem; height: 2.6rem; color: var(--fv-blue); opacity: .6; }
.site .fv-soon p { margin: 0; font: 700 1.25rem/1.15 var(--fv-display); color: var(--fv-blue); }
.site .fv-soon small { font-size: .9rem; }
/* 4.7: Sprachumschalter Deutsch/English in der Infoleiste */
.fv-topbar .fv-topbar__lang { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .55rem; border: 1px solid rgba(255, 255, 255, .7); font-weight: 700; letter-spacing: .02em; }
.fv-topbar .fv-topbar__lang:hover { background: #fff; color: var(--fv-blue); }
.fv-topbar .fv-topbar__lang .fv-icon { width: 1em; height: 1em; }
/* Hinweis auf den deutschen Katalog (englische Seiten) */
.fv-langnote { display: flex; gap: .8rem; align-items: flex-start; margin: 0 0 1.6rem; padding: .9rem 1.1rem; background: var(--fv-ice-light); border-left: 4px solid var(--fv-red); }
.fv-langnote .fv-icon { flex: none; width: 1.6rem; height: 1.6rem; color: var(--fv-red); }
.site .fv-langnote p { margin: 0; }
/* 4.8.5: WhatsApp-Knopf im Kontaktformular, einfacher Bildschutz */
.fv-btn--wa { background: #1c9e50; border-color: #1c9e50; color: #fff; }
.fv-btn--wa:hover, .fv-btn--wa:focus-visible { background: #157a3d; border-color: #157a3d; color: #fff; }
.fv-card__img img, .fv-tile img, .fv-hero__media img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
/* 4.8.8: Link »Alle Palettenknaller ansehen«, Sprungmarken auf »Aktionen« */
.fv-more { margin: 1rem 0 0; text-align: right; font-weight: 700; }
.fv-more a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
.fv-more a::after { content: "→"; transition: transform .2s; }
.fv-more a:hover::after { transform: translateX(3px); }
#top-hits, #palettenknaller, #neu-im-sortiment { scroll-margin-top: 120px; }
/* 4.9.3: Login und Registrierung – »Passwort anzeigen« neben dem Feld, Passkey-Knopf in normaler Größe */
.site .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; }
.site .input-group > .form-control, .site .input-group > input { flex: 1 1 auto; min-width: 0; }
.site .input-password-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 0 .75rem; border: 1px solid #c9d3e8; border-left: 0; background: #eef3fb; color: var(--fv-blue); cursor: pointer; }
.site .input-password-toggle:hover { background: #dde7f6; }
.site .plg_system_webauthn_login_button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 46px; margin: .75rem 0; padding: .6rem 1rem; border: 2px solid var(--fv-blue); border-radius: 0; background: #fff; color: var(--fv-blue); font-weight: 700; cursor: pointer; overflow: hidden; }
.site .plg_system_webauthn_login_button:hover { background: #eef3fb; }
.site .plg_system_webauthn_login_button svg, .site .plg_system_webauthn_login_button img { width: 1.5rem !important; height: 1.5rem !important; max-width: 1.5rem; flex: 0 0 1.5rem; }
/* 4.9.5: Nach dem Senden ist die Liste leer – die Bestätigung »Vielen Dank … Bestellnummer« bleibt trotzdem sichtbar */
.fv-ol.is-empty.is-sent .fv-ol__send { display: block; }
.fv-ol.is-empty.is-sent .fv-ol__send > :not(.fv-ol__status) { display: none; }
.fv-ol.is-sent .fv-ol__status.is-ok { font-size: 1.05rem; padding: 1rem 1.1rem; background: #eef8f1; }
/* 4.9.10: Kontaktdaten und Erreichbarkeit als saubere Zeilen (Bezeichnung | Wert) statt Fließtext */
.fv-kv { display: grid; gap: .3rem; margin: 0; }
.fv-kv > div { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); column-gap: .7rem; align-items: baseline; }
.fv-kv dt { margin: 0; font-weight: 400; color: var(--fv-muted); }
.fv-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fv-kv a[href^="tel:"] { white-space: nowrap; }
.fv-kv--stack { gap: 0; }
.fv-kv--stack > div { grid-template-columns: 1fr; padding: .5rem 0; }
.fv-kv--stack > div:first-child { padding-top: 0; }
.fv-kv--stack > div + div { border-top: 1px solid var(--fv-line); }
.fv-kv--stack dt { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }
.fv-kv--stack dd { font-size: 1.05rem; }
.fv-kv__note { margin: .4rem 0 0; font-size: .9rem; color: var(--fv-muted); }
/* 4.9.10: Logo im Impressum */
.fv-imprint-logo { margin: 0 0 1.2rem; }
.fv-imprint-logo img { display: block; width: clamp(160px, 40vw, 240px); height: auto; }
.fv-kv strong { font-weight: 700; color: var(--fv-ink); }
/* 4.10.0: »Häufige Fragen« am Ende jeder Seite */
.fv-pagefaq { margin: 2.5rem 0 1rem; }
.fv-pagefaq > h2 { margin-bottom: .8rem; }
.fv-pagefaq .fv-faqs p { margin: 0; padding: 0 1.1rem 1rem; }
/* 4.10.0: Preis-Hinweis steht jetzt im Inhalt unter der Einleitung */
.fv-component .fv-lock { margin: 1rem 0 1.4rem; }
/* 4.10.0 Handy: Kopfleiste kompakter (zwei statt drei Zeilen), größere Tipp-Flächen */
.fv-topbar__links a, .fv-topbar .fv-topbar__lang { min-height: 28px; }
.fv-footer__links a, .fv-footer__bar a { display: inline-flex; align-items: center; min-height: 28px; }
.fv-cf input[type="checkbox"], .fv-ol input[type="checkbox"], .site input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
@media (max-width: 700px) {
.fv-topbar__inner { justify-content: center; gap: .25rem .9rem; padding-block: .35rem; }
.fv-topbar__links { display: contents; }
.fv-topbar { font-size: .88rem; }
}
@media (max-width: 480px) {
/* E-Mail als Symbol (Adresse bleibt für Vorleseprogramme lesbar und steht im Fuß) */
.fv-topbar__links a[href^="mailto:"] { font-size: 0; gap: 0; padding: 0 .2rem; }
.fv-topbar__links a[href^="mailto:"] .fv-icon { font-size: .88rem; width: 1.3em; height: 1.3em; }
}