/* ==========================================================================
   TEE IM NETZ – neues Design (Child-Theme-Ergänzung zu wave / wave_child)
   Stand: Oktober 2026
   Wird nur geladen, wenn das neue Design aktiv ist (siehe base.tpl).
   ========================================================================== */

/* ---------- Schriften (lokal gehostet, DSGVO-konform) ---------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

/* ---------- Farben ---------- */
:root {
  --tin-petrol: #0E5470;
  --tin-petrol-dark: #0A3A4E;
  --tin-petrol-light: #E6EEF1;
  --tin-cream: #F7F3EC;
  --tin-sand: #EDE4D6;
  --tin-line: #E4DACB;
  --tin-amber: #A35A17;
  --tin-text: #23302F;
  --tin-muted: #5B6763;
  --tin-white: #FFFFFF;
  --tin-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --tin-sans: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------- Grundlagen ---------- */
body {
  background: var(--tin-cream) !important;
  color: var(--tin-text);
  font-family: var(--tin-sans);
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--tin-petrol); }
a:hover, a:focus { color: var(--tin-petrol-dark); }
h1, h2, h3, .h1, .h2, .h3, .page-header h1, .page-header h2 {
  font-family: var(--tin-serif);
  font-weight: 600;
  color: var(--tin-petrol-dark);
  letter-spacing: 0;
}
.main-row, #wrapper, .underdog, .content-box { background: transparent; }
#wrapper .underdog { background: transparent; }

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; font-weight: 700; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled) {
  background: var(--tin-petrol); border-color: var(--tin-petrol); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--tin-petrol-dark); border-color: var(--tin-petrol-dark); color: #fff;
}
.btn-outline-dark { border-color: var(--tin-petrol); color: var(--tin-petrol); }
.btn-outline-dark:hover { background: var(--tin-petrol); border-color: var(--tin-petrol); color: #fff; }
.form-control:focus { border-color: var(--tin-petrol); box-shadow: 0 0 0 .2rem rgba(14, 84, 112, .2); }

/* ---------- Versandleiste (CMS „headerbar“) ---------- */
.header_bar {
  background: var(--tin-petrol-dark) !important;
  color: var(--tin-cream);
  font-size: 14px;
  padding: 7px 0;
}
.header_bar .row { justify-content: center; }
.header_bar .header_info { flex: 0 0 100%; max-width: 100%; text-align: center; }
.header_bar a, .header_bar b { color: var(--tin-cream) !important; text-decoration: none; }

/* ---------- Dreiteilige Leiste ganz oben (CMS-Seite "tin_headerbar") ---------- */
.tin-topbar { background: var(--tin-petrol-dark); color: var(--tin-cream); font-size: 14px; }
.tin-topbar-inner { max-width: 1240px; margin: 0 auto; padding: 0 15px; }
.tin-topbar ul, .tin-topbar p { margin: 0; }
.tin-topbar ul {
  list-style: none; padding: 8px 0; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 4px 24px;
}
.tin-topbar strong, .tin-topbar b { font-weight: 700; color: #fff; }
.tin-topbar a { color: var(--tin-cream); text-decoration: none; }
.tin-topbar a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 767.98px) {
  .tin-topbar { font-size: 13px; }
  .tin-topbar ul { justify-content: center; padding: 6px 0; }
  .tin-topbar li:not(:first-child) { display: none; }   /* am Handy nur der Versandhinweis */
}

/* ---------- Header ---------- */
#header, #header .header-box { background: var(--tin-white); }
#header .header-box { border-bottom: 1px solid var(--tin-line); padding: 14px 0; }
#header .logo-img { max-height: 76px !important; }
#searchForm .form-control {
  height: 48px; border: 1px solid #CFC3B0; border-right: 0;
  border-radius: 24px 0 0 24px; background: #FBF9F5; padding-left: 18px; font-size: 16px;
}
#searchForm .input-group-append .btn {
  height: 48px; width: 56px; border-radius: 0 24px 24px 0;
  background: var(--tin-petrol) !important; border-color: var(--tin-petrol) !important; color: #fff;
}
#header .menu-dropdowns .btn { color: var(--tin-text); font-weight: 600; border-radius: 8px; }
#header .minibasket-menu .fa-shopping-cart { color: var(--tin-petrol); }

/* ---------- Hauptnavigation ---------- */
#mainnav { background: var(--tin-petrol) !important; padding: 0; border: 0; }
#mainnav > .container { background: transparent !important; }
#mainnav .nav-link,
#mainnav .navbar-header span,
#mainnav .fixed-header-link { color: #fff !important; font-weight: 600; font-size: 17px; }
#mainnav .nav-link { padding: 14px 18px !important; }
#mainnav .nav-item.active > .nav-link,
#mainnav .nav-item > .nav-link:hover { background: var(--tin-petrol-dark); }
#mainnav .navbar-toggler { border-color: rgba(255,255,255,.6); }
#mainnav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
#mainnav .dropdown-menu {
  border: 0; border-radius: 0 0 12px 12px; box-shadow: 0 12px 28px rgba(10, 58, 78, .18);
  background: var(--tin-white); padding: 18px 20px; margin-top: 0;
}
#mainnav .dropdown-menu a { color: var(--tin-text); }
#mainnav .dropdown-menu a:hover { color: var(--tin-petrol); }
#mainnav .dropdown-menu .sub2 a { font-weight: 700; color: var(--tin-petrol-dark); }

/* ---------- Vertrauensleiste (neu, aus header.tpl) ---------- */
.tin-trustbar { background: var(--tin-white); border-bottom: 1px solid var(--tin-line); }
.tin-trustbar ul {
  list-style: none; margin: 0 auto; padding: 12px 15px; max-width: 1240px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 15px; color: var(--tin-muted);
}
.tin-trustbar li { display: flex; align-items: center; gap: 8px; }
.tin-trustbar strong { color: var(--tin-petrol-dark); font-weight: 700; }
.tin-trustbar .tin-dot {
  width: 30px; height: 30px; border-radius: 50%; background: var(--tin-petrol-light);
  color: var(--tin-petrol); display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--tin-serif); font-weight: 600; font-size: 13px; flex: none;
}

/* ---------- Handy & Tablet: kompakter Kopf ---------- */
@media (max-width: 991.98px) {
  .header_bar { font-size: 12px; padding: 5px 0; }
  #header .header-box { padding: 10px 0 12px; }
  #header .header-box .row { align-items: center; }
  #header .logo-col { flex: 1 1 0; max-width: none; width: auto; text-align: left !important; padding-right: 0; }
  #header .logo-col .logo-link { display: inline-block; }
  #header .logo-img { max-height: 46px !important; max-width: 170px !important; }
  #header .menus-col { flex: 0 0 auto; max-width: none; width: auto; margin: 0 !important; padding-left: 0; }
  #header .menus-col .menu-dropdowns { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; }
  #header .menus-col .menu-dropdowns .btn { padding: 8px 10px; font-size: 14px; }
  #header .minibasket-menu .fa-2x { font-size: 1.5em; }
  #header .search-col { flex: 0 0 100%; max-width: 100%; order: 10; margin-top: 10px; }
  #searchForm .form-control, #searchForm .input-group-append .btn { height: 44px; }
  #mainnav .navbar-header { min-height: 48px; padding: 4px 0; align-items: center; }
  #mainnav .navbar-header span { font-size: 16px; }
  #mainnav .navbar-collapse { background: var(--tin-petrol); }
  #mainnav .dropdown-menu { box-shadow: none; border-radius: 0; }
  .tin-trustbar ul {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    padding: 8px 12px; font-size: 13px; gap: 16px; scrollbar-width: none; white-space: nowrap;
  }
  .tin-trustbar ul::-webkit-scrollbar { display: none; }
  .tin-trustbar .tin-dot { width: 24px; height: 24px; font-size: 11px; }
}

/* ---------- Inhalt / Seitenrahmen ---------- */
#content { background: transparent; }
.content-box { padding-top: 24px; }
.page-header, .list-header { border-bottom: 0; }
.breadcrumb { background: transparent; padding-left: 0; font-size: 14px; }
.breadcrumb a { color: var(--tin-muted); }

/* ---------- Produktkacheln ---------- */
.productBox { margin-bottom: 24px; }
.productBox > form {
  height: 100%; display: flex; flex-direction: column;
  background: var(--tin-white); border: 1px solid var(--tin-line); border-radius: 16px;
  padding: 16px 16px 18px; position: relative; transition: box-shadow .2s, transform .2s;
}
.productBox > form:hover { box-shadow: 0 10px 26px rgba(10, 58, 78, .12); transform: translateY(-2px); }
.productBox .picture { background: #FBF9F5; border-radius: 12px; padding: 8px; height: 226px !important; display: flex; align-items: center; justify-content: center; }
.productBox .picture img { max-height: 210px; object-fit: contain; }
/* Rabatt-Badge: das Modul gibt es doppelt aus -> zweites ausblenden */
.productBox form > div[style*="absolute"] + div[style*="absolute"] { display: none; }
.productBox form > div[style*="absolute"] { top: 14px; left: 14px !important; z-index: 2; }
.productBox .badge-success, .productBox .label-danger {
  background: var(--tin-amber); color: #fff; border-radius: 999px; padding: 5px 10px; font-size: 13px;
}
.productBox .listDetails { flex: 1; display: flex; flex-direction: column; text-align: left !important; padding-top: 12px; }
.productBox .gridtitlediv { min-height: 0; margin-bottom: 6px; }
.productBox .gridtitle { color: var(--tin-text); font-weight: 600; font-size: 16px; line-height: 1.35; }
.productBox .gridtitle:hover { color: var(--tin-petrol); text-decoration: none; }
.productBox .price { text-align: left !important; margin-top: auto; padding-top: 8px; }
.productBox .price .lead { font-size: 22px; font-weight: 700; color: var(--tin-petrol-dark); }
.productBox .price .oldPrice { color: var(--tin-muted) !important; font-size: 14px; }
.productBox .price .oldPrice del { color: var(--tin-muted); }
.productBox .pricePerUnit { color: var(--tin-muted); font-size: 13px; }
.productBox .actions { text-align: left !important; }
.productBox .actions > .content { display: none; }      /* abgeschnittener Beschreibungstext */
.productBox .actions .btn-group { display: flex; width: 100%; margin-top: 12px; gap: 8px; }
.productBox .actions .btn-group .btn { flex: 1; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px !important; }
.productBox .actions .btn-group .btn-outline-dark { flex: 0 0 52px; }

/* Handy: zwei Produkte nebeneinander */
@media (max-width: 575.98px) {
  .grid-view > .productBox { flex: 0 0 50%; max-width: 50%; padding-left: 6px; padding-right: 6px; margin-bottom: 12px; }
  .grid-view { margin-left: -6px; margin-right: -6px; }
  .productBox > form { padding: 10px; border-radius: 12px; }
  .productBox .picture { height: 150px !important; }
  .productBox .picture img { max-height: 134px; }
  .productBox .gridtitle { font-size: 14px; }
  .productBox .price .lead { font-size: 18px; }
  .productBox .actions .btn-group .btn { height: 40px; font-size: 13px; padding: 0 8px; }
  .productBox .actions .btn-group .btn-outline-dark { flex: 0 0 40px; }
  .productBox .tin-tobasket .fa { display: none; }
}
.productBox .tin-tobasket .fa { margin-right: 6px; }

/* ---------- Startseite (Bausteine aus CMS-Seite AGSTART2) ---------- */
.tin-start .row > [class*="col-"] { display: block !important; }   /* Bausteine auch auf dem Handy zeigen */
/* ein Baustein allein in seiner Zeile nimmt immer die volle Breite ein (neue CMS-Widgets sind sonst nur 3/12 breit) */
.tin-start .row > [class*="col-"]:only-child { flex: 0 0 100%; max-width: 100%; }
.tin-section { margin: 40px 0 8px; }
.tin-start .tin-section:last-child { margin-bottom: 0; }
.tin-start .tin-section:last-child .tin-section-head { margin-bottom: 12px; }
.tin-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; margin-bottom: 20px; }
.tin-h2 { font-family: var(--tin-serif); font-weight: 600; font-size: 34px; line-height: 1.15; color: var(--tin-petrol-dark); margin: 0; }
.tin-sub { color: var(--tin-muted); margin: 6px 0 0; font-size: 17px; }
.tin-more { font-weight: 700; color: var(--tin-petrol); white-space: nowrap; }
.tin-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tin-cat {
  display: flex; flex-direction: column; background: var(--tin-white); border: 1px solid var(--tin-line);
  border-radius: 16px; overflow: hidden; text-decoration: none !important; transition: box-shadow .2s, transform .2s;
}
.tin-cat:hover { box-shadow: 0 10px 26px rgba(10, 58, 78, .12); transform: translateY(-2px); }
/* die vorhandenen Kategoriebilder (250x130) haben unten eingebrannten Text -> nur den oberen Teil zeigen */
.tin-cat img { width: 100%; height: auto; aspect-ratio: 250 / 88; object-fit: cover; object-position: center top; background: var(--tin-sand); }
.tin-cat span { padding: 12px 14px; font-family: var(--tin-serif); font-weight: 600; font-size: 18px; color: var(--tin-petrol-dark); }
.tin-brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tin-brand {
  display: flex; align-items: center; justify-content: center; min-height: 110px; padding: 16px;
  background: var(--tin-white); border: 1px solid var(--tin-line); border-radius: 16px;
}
.tin-brand img { max-width: 100%; max-height: 60px; object-fit: contain; }
.tin-brand--text { font-weight: 700; font-size: 19px; color: var(--tin-text) !important; text-decoration: none !important; text-align: center; }
.tin-brand:hover { border-color: var(--tin-petrol); }
.tin-brand--featured { grid-column: span 2; border: 2px solid #D8B84A; flex-direction: column; gap: 8px; }
.tin-brand--featured span { color: var(--tin-muted); font-size: 15px; text-align: center; }
.tin-own { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.tin-own a {
  display: flex; flex-direction: column; gap: 10px; padding: 32px; border-radius: 20px;
  text-decoration: none !important; color: var(--tin-text);
}
.tin-own .tin-own-bioleaf { background: #E5EBDD; }
.tin-own .tin-own-teasfinest { background: #E2ECEF; }
.tin-own img { max-height: 56px; width: auto; align-self: flex-start; mix-blend-mode: multiply; } /* weisser Logo-Hintergrund verschwindet */
.tin-own p { margin: 0; font-size: 17px; }
.tin-own strong { color: var(--tin-petrol); }
.tin-teasers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tin-teaser {
  display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 180px; padding: 32px;
  border-radius: 20px; text-decoration: none !important;
}
.tin-teaser--dark { background: var(--tin-petrol); color: #fff; }
.tin-teaser--dark .tin-teaser-title, .tin-teaser--dark strong { color: #fff; }
.tin-teaser--light { background: var(--tin-sand); color: var(--tin-text); }
.tin-teaser-title { font-family: var(--tin-serif); font-weight: 600; font-size: 28px; line-height: 1.15; color: var(--tin-petrol-dark); }
.tin-teaser strong { color: var(--tin-petrol); }
@media (max-width: 991.98px) {
  .tin-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tin-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .tin-section { margin-top: 28px; }
  .tin-h2 { font-size: 25px; }
  .tin-sub { font-size: 15px; }
  .tin-cats { gap: 10px; }
  .tin-cat span { font-size: 14px; padding: 8px 10px; font-family: var(--tin-sans); font-weight: 700; }
  .tin-brands { gap: 10px; }
  .tin-brand { min-height: 72px; }
  .tin-brand img { max-height: 40px; }
  .tin-own, .tin-teasers { grid-template-columns: 1fr; }
  .tin-own a, .tin-teaser { padding: 22px; }
  .tin-teaser { min-height: 0; }
  .tin-teaser-title { font-size: 22px; }
}

/* ---------- Kategorie-/Listen-Seiten ---------- */
.breadcrumb-item.active, .breadcrumb-item.active a, .breadcrumb-item.active span { color: var(--tin-petrol-dark) !important; font-weight: 600; }
#sidebar .panel-heading.lead { font-family: var(--tin-serif); font-weight: 600; color: var(--tin-petrol-dark); }
#sidebar .sidenav a { color: var(--tin-text); }
#sidebar .sidenav .active > a, #sidebar .sidenav a:hover { color: var(--tin-petrol); font-weight: 600; }
#sidebar .attrhead label, #sidebar label[id^="test_attrfilterTitle"] { color: var(--tin-amber) !important; font-weight: 700; }
#tinSidebarCollapse > div {
  background: var(--tin-white); border: 1px solid var(--tin-line); border-radius: 16px; padding: 16px; margin-bottom: 16px;
}
#tinSidebarCollapse > div:empty { display: none; }
.tin-filter-btn {
  width: 100%; height: 48px; margin-bottom: 16px; background: var(--tin-white);
  border: 1px solid var(--tin-petrol); color: var(--tin-petrol); font-weight: 700;
}
.tin-filter-btn:hover, .tin-filter-btn:focus { background: var(--tin-petrol); color: #fff; }
.list-filter .btn, .listRefine .btn { border-radius: 999px; }
.pagination .page-link { color: var(--tin-petrol); border-radius: 8px; margin: 0 2px; }
.pagination .active .page-link { background: var(--tin-petrol); border-color: var(--tin-petrol); }

/* ---------- Artikelseite ---------- */
.details-title { font-size: 30px; line-height: 1.2; }
.vardrop { flex-wrap: wrap; gap: 8px; }
.vardrop li { margin: 0 !important; }
.vardrop .btn-info {
  background: var(--tin-white); color: var(--tin-petrol); border: 2px solid var(--tin-petrol);
  border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 700; min-height: 44px;
  display: inline-flex; align-items: center;
}
.vardrop .btn-info:hover, .vardrop .btn-info:focus { background: var(--tin-petrol-light); color: var(--tin-petrol-dark); }
.vardrop .btn-info.active, .vardrop li.active .btn-info { background: var(--tin-petrol); color: #fff; border-color: var(--tin-petrol); }
.vardrop li.disabled .btn-info { opacity: .45; }
#productPrice .price { font-size: 32px; font-weight: 700; color: var(--tin-petrol-dark); }
#toBasket { height: 48px; padding: 0 24px; font-size: 16px; }
#toBasket:disabled { background: #B9C6CB; border-color: #B9C6CB; color: #fff; opacity: 1; }
.details-pager { font-size: 14px; }
.details-pager a { color: var(--tin-muted); }
@media (max-width: 767.98px) {
  .details-pager { display: none; }
  .details-title { font-size: 24px; }
}
.nav-tabs { border-bottom-color: var(--tin-line); }
.nav-tabs .nav-link { color: var(--tin-petrol); font-weight: 600; border-radius: 12px 12px 0 0; }
.nav-tabs .nav-link.active { color: var(--tin-petrol-dark); background: var(--tin-white); border-color: var(--tin-line) var(--tin-line) var(--tin-white); }
.tab-content { background: var(--tin-white); border: 1px solid var(--tin-line); border-top: 0; border-radius: 0 0 16px 16px; }

/* ---------- Footer ---------- */
.newsletterfoo:empty, .newsletterfoo { margin: 0; }
#footer {
  background: var(--tin-petrol-dark) !important; color: #D9E6EB; margin-top: 48px;
  padding: 48px 0 16px; border: 0;
}
#footer a { color: #D9E6EB; }
#footer a:hover { color: #fff; }
#footer b { color: #fff; font-size: 16px; }
#footer a[href*="ecs_widerruf"] { color: #fff !important; font-weight: 700; text-decoration: underline; }
#footer img { background: #fff; border-radius: 8px; }
#footer hr { border-color: #24566B; }
#footer .vat-info, #footer .vat-info a { color: #D9E6EB; }
#footer .vat-info { padding: 0 15px; }
.legal { background: var(--tin-petrol-dark); color: #B8CBD3; border-top: 1px solid #24566B; }
.legal-box { padding: 16px 0; font-size: 14px; }

/* ---------- Nach-oben-Pfeil & Trusted-Shops-Badge entzerren ---------- */
#jumptotop {
  color: var(--tin-petrol) !important; opacity: .85; font-size: 44px !important;
  right: 20px !important; left: auto !important; bottom: 110px !important;
}
@media (max-width: 767.98px) {
  #jumptotop { bottom: 96px !important; font-size: 36px !important; }
}

/* ===== Kategorieseiten (Update 3) ===== */
.tin-neu .categoryPicture {
  display: block; width: 100%; height: auto;
  padding: 0; border: 0; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(10,58,78,.12);
  margin-bottom: 18px;
}
.tin-neu #content .page-header { margin: 0 0 10px; padding: 0; }
.tin-neu #content .page-header .h1 { margin: 0; font-size: 2rem; line-height: 1.2; }

/* Unterkategorien als Knöpfe */
.tin-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.tin-chip {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: #fff; border: 1px solid #cfdfe5; color: var(--tin-petrol, #0E5470);
  font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s;
}
.tin-chip:hover, .tin-chip:focus { background: var(--tin-petrol, #0E5470); border-color: var(--tin-petrol, #0E5470); color: #fff; }
.tin-chip--back { background: transparent; border-color: transparent; color: #5b6b72; font-weight: 400; padding-left: 4px; }
.tin-chip--back:hover, .tin-chip--back:focus { background: transparent; border-color: transparent; color: var(--tin-petrol, #0E5470); text-decoration: underline !important; }
/* alte, ohnehin leere Unterkategorie-Liste ausblenden */
.tin-neu .subcatList, .tin-neu .subcatList + hr { display: none; }

/* Kategorietext: linksbündig, normal, eingeklappt */
.tin-catdesc { position: relative; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #e3ddd2; }
.tin-catdesc .categoryDescription { position: relative; max-height: 5.4em; overflow: hidden; margin: 0; }
.tin-catdesc.is-open .categoryDescription { max-height: none; }
.tin-catdesc.is-clamped:not(.is-open) .categoryDescription::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
  background: linear-gradient(rgba(247,243,236,0), #F7F3EC); pointer-events: none;
}
.tin-catdesc .categoryDescription, .tin-catdesc .categoryDescription * {
  text-align: left !important; font-weight: 400 !important; font-size: 1rem !important;
  line-height: 1.6 !important; color: #2b3a40;
}
.tin-catdesc .categoryDescription p { margin: 0 0 .6em; }
.tin-catdesc .categoryDescription h2, .tin-catdesc .categoryDescription h3,
.tin-catdesc .categoryDescription h4 { font-weight: 600 !important; font-size: 1.1rem !important; margin: .8em 0 .3em; }
.tin-catdesc-more {
  background: none; border: 0; padding: 4px 0 0; margin: 0;
  color: var(--tin-petrol, #0E5470); font-weight: 600; cursor: pointer;
}
.tin-catdesc-more:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
  .tin-neu #content .page-header .h1 { font-size: 1.6rem; }
  .tin-neu .categoryPicture { border-radius: 8px; margin-bottom: 12px; }
  .tin-subcats { flex-wrap: nowrap; overflow-x: auto; margin-left: -15px; margin-right: -15px; padding: 0 15px 4px; scrollbar-width: none; }
  .tin-subcats::-webkit-scrollbar { display: none; }
  .tin-chip { white-space: nowrap; }
  .tin-catdesc .categoryDescription { max-height: 4.8em; }
}
/* ===== Artikel-Detailseite (Update 4, schlanke Fassung) ===== */
/* Reihenfolge rechts: Titel - Packungsgroesse - Preis - Grundpreis - Warenkorb */
.tin-neu #detailsMain .details-col-middle { display: flex; flex-direction: column; }
.tin-neu #detailsMain .details-information { display: contents; }
.tin-neu #detailsMain .details-col-middle > .small.text-muted { order: 1; }
.tin-neu #detailsMain .scroll-to-reviews { order: 2; }
.tin-neu #detailsMain #variants { order: 3; margin-top: 18px; }
.tin-neu #detailsMain #variants::before {
  content: "Packungsgröße"; display: block; margin-bottom: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b6b72;
}
.tin-neu #detailsMain .details-information > .clearfix { order: 4; }
.tin-neu #detailsMain .price-wrapper { order: 5; margin-top: 18px; }
.tin-neu #detailsMain .details-additional-information { order: 6; margin: 0 0 4px; font-size: .9rem; color: #5b6b72; }
.tin-neu #detailsMain .details-additional-information::before { content: "Grundpreis: "; }
.tin-neu #detailsMain .tobasket { order: 7; margin-top: 12px; }
/* Mengenfeld und Warenkorb-Button gleich hoch */
.tin-neu #detailsMain .tobasket-input-group { flex-wrap: nowrap; align-items: stretch; }
.tin-neu #detailsMain #amountToBasket { height: 48px; max-width: 70px; text-align: center; border-radius: 999px 0 0 999px; }
.tin-neu #detailsMain #toBasket { height: 48px; }

/* ===== Fusszeile filigraner (Update 6) ===== */
#footer b { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #fff; }
#footer .cmsPage p { line-height: 1.75; font-size: 15px; }
/* Zahlungs- und Bio-Logos kleiner und enger */
#footer a[href*="Zahlung-und-Lieferung"] img,
#footer a[href*="BIOInformation"] img { width: 54px !important; height: auto; border-radius: 5px; display: block; }
#footer .cmsPage div[style*="gap"] { gap: 6px !important; }
#footer .cmsPage p[style*="margin:0 0 8px"] { margin-bottom: 6px !important; }
/* Trusted-Shops-Siegel kleiner */
#footer img[src*="excellent_shop"], #footer img[data-src*="excellent_shop"] { width: 78px; height: auto; padding: 4px; border-radius: 8px; }
/* Hinweis "inkl. MwSt." sauber unter der Linie */
#footer hr { margin: 18px 0 0; }
#footer .vat-info { text-align: right; padding: 8px 15px 18px; font-size: 13px; }
@media (max-width: 767.98px) {
  #footer .cmsPage div[style*="width:77%"], #footer .cmsPage div[style*="width:23%"] { width: 100% !important; margin-bottom: 14px; }
  #footer .vat-info { text-align: left; }
}

/* ===== Online-Widerruf (Update 7) ===== */
.cl-ecs_widerruf #search-button,
.cl-ecs_widerruf .widerruf-form-wrapper button[type="submit"] {
  background: var(--tin-petrol, #0E5470) !important; border-color: var(--tin-petrol, #0E5470) !important; color: #fff !important;
}
.cl-ecs_widerruf #search-button:disabled { background: #B9C6CB !important; border-color: #B9C6CB !important; }
.cl-ecs_widerruf .widerruf-form-wrapper .card-header h5 { font-size: 1rem; font-weight: 700; }
.cl-ecs_widerruf .widerruf-form-wrapper .card-body > p { line-height: 1.6; }
.cl-ecs_widerruf .widerruf-form-wrapper .alert-info {
  background: var(--tin-petrol-light, #E6EEF1); border-color: #cfdfe5; color: var(--tin-petrol-dark, #0A3A4E);
}
.cl-ecs_widerruf .tin-widerruf-help { margin-top: 6px; font-size: .95rem; color: #2b3a40; }