/* ========================================
   LOCAL PREVIEW ONLY
   Diese Datei ist NUR für die lokale
   Vorschau. Nicht nach e-vendo übertragen.
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tillit-gray);
  background-color: var(--tillit-white);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   SHOP-HEADER-REPLIK – Baseline (Werkszustand e-vendo)
   Quelle: styles.css des Template-Pakets (8.0.27.0).
   Absichtlich in :where() gehalten (Spezifitaet 0), damit die
   Overrides aus tillit-shop.css (= Backend-Feld "CSS - Ende")
   lokal IMMER gewinnen – exakt wie im Shop, wo das eigene CSS
   nach den Werksregeln eingefuegt wird.
   Der Header liegt im Fluss (kein body-padding mehr noetig).
   ============================================================ */

:where(#tillit-shop-chrome) {
  display: block;
}

:where(#Header) {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  z-index: 1000;
}

:where(#header_content) {
  position: relative;
  margin: 0 auto;
  height: 0;
  overflow: hidden;
}

@media (min-width: 880px) {
  :where(#header_content) {
    height: 120px; /* Werkskonstante – Header V2 drueckt auf 72px */
    overflow: visible;
  }
}

:where(.desktop_nav) {
  display: none;
}

:where(#mobileSearchNavigation) {
  display: block;
}

@media (min-width: 880px) {
  :where(.desktop_nav) {
    display: block;
  }

  :where(#mobileSearchNavigation) {
    display: none;
  }
}

:where(#topnav) {
  background-color: #ffffff;
}

:where(#topnav_content) {
  margin: 0 auto;
}

:where(.h_menu) {
  display: flex;
  flex-wrap: wrap;
}

/* Werk entfernt Listenoptik auf ALLEN Ebenen (styles.css 588) —
   ohne die verschachtelte Variante tragen die Level-2-Punkte im
   Megamenue-Flyout Bullets, die der Shop nicht zeigt. */
:where(ul.h_menu),
:where(.h_menu ul) {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

:where(.h_menu li.level0) {
  display: block;
}

:where(#topnav .h_menu li.level0 > a) {
  display: block;
  padding: 0.8em 15px; /* Werkswert – Header V2 drueckt auf 0.85em 1.05em */
  line-height: 2em;
  color: #222222;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s;
}

:where(#topnav .h_menu li.level0 > a:hover) {
  color: var(--tillit-primary);
}

:where(#topnav .h_menu > li.active > a),
:where(#topnav .h_menu > li.inpath > a) {
  background-color: #f9f9f9;
  transition-delay: 0.2s;
}

/* ------------------------------------------------------------
   MEGAMENUE – Baseline (Werkszustand, styles.css 606–620/689–692).
   1:1 gespiegelt, damit lokal sichtbar wird, was der Werkszustand
   wirklich tut. Auffaellig und absichtlich mituebernommen:

   - Das Panel oeffnet ohne Blende: ul.level1 schaltet nur
     visibility um, transition-delay .2s ohne transition-duration.
   - Es spannt ueber die volle Breite des .h_menu-Containers
     (left:0; width:100%) — und weil unser CSS-Slot .shop-width auf
     100% stellt (tillit-shop.css), ist das die volle Viewportbreite,
     waehrend #header_content bei 1460px endet. Raster bricht.
   - li.level1 liegt als inline-block mit width:19.5% -> feste
     5 Spalten, ungleiche Spaltenhoehen, versetzte zweite Reihe.
   - Die Spaltenkoepfe stehen in #b59472 (Template-Beige), ebenso
     der CSS-Dreieck-Caret unter dem geoeffneten Punkt.
   - nth-child-Kappung: max. 9 Level-1- und max. 5 Level-2-
     Eintraege je Liste, Rest -> "weitere...".
   ------------------------------------------------------------ */

:where(.h_menu.megamenu) {
  position: relative;
}

:where(.h_menu ul.level1) {
  display: none;
}

:where(.h_menu.megamenu > li > ul) {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 0.8em;
}

/* ACHTUNG Reihenfolge: Im Werk gewinnt die Oeffnen-Regel ueber
   Spezifitaet (.h_menu.megamenu.touch > li.opened > ul schlaegt
   .h_menu.megamenu ul.level1). Hier liegt alles in :where() und
   damit auf Spezifitaet 0 — es entscheidet die Quellreihenfolge.
   Der geschlossene Zustand muss deshalb VOR dem geoeffneten
   stehen, sonst laesst sich der Flyout lokal nie oeffnen. */
:where(.h_menu.megamenu ul.level1) {
  display: block;
  visibility: hidden;
  background-color: #ffffff;
  padding: 1em 2em;
  box-shadow: 0 8px 8px -8px #aaaaaa;
  transition-delay: 0.2s;
}

:where(.h_menu.megamenu:not(.touch) > li:hover),
:where(.h_menu.megamenu.touch > li.opened) {
  overflow: visible;
}

:where(.h_menu.megamenu:not(.touch) > li:hover > ul),
:where(.h_menu.megamenu.touch > li.opened > ul) {
  visibility: visible;
}

:where(.h_menu.megamenu:not(.touch) > li:hover > a),
:where(.h_menu.megamenu.touch > li.opened > a) {
  position: relative;
}

:where(.h_menu.megamenu li.level0.children > a)::after {
  content: "";
  visibility: hidden;
  transition-delay: 0.2s;
}

:where(.h_menu.megamenu:not(.touch) li.level0.children:hover > a)::after,
:where(.h_menu.megamenu.touch li.level0.children.opened > a)::after {
  content: "";
  visibility: visible;
  position: absolute;
  bottom: -1em;
  left: 50%;
  transform: translateX(-50%);
  border-width: 1em 1em 0 1em;
  border-color: var(--tillit-primary, #b59472) transparent transparent;
  border-style: solid;
  z-index: 101;
  transition-delay: 0.2s;
}

:where(.h_menu.megamenu li.level1) {
  display: inline-block;
  vertical-align: top;
  margin-top: 0.5em;
  width: 19.5%;
}

:where(.h_menu.megamenu li.level1 > a) {
  padding: 1em 1em 0;
  color: var(--tillit-primary, #b59472);
  font-weight: bold;
  min-height: 3.5em;
  text-decoration: none;
  display: block;
}

:where(.h_menu.megamenu li.level2) {
  padding: 0.4em 0;
}

:where(.h_menu.megamenu li.level2 > a) {
  padding: 0 1em;
  display: block;
  color: #222222;
  text-decoration: none;
}

:where(.h_menu.megamenu ul.level2 ul) {
  display: none;
}

:where(.h_menu .open-submenu) {
  display: none;
}

/* Kappung des Werks: was hierueber liegt, sieht niemand.
   Aktuell betrifft das genau vier Level-2-Punkte unter
   PARTS > Antrieb & Schaltung (Schaltwerke, Schalthebel,
   Zuege & Huellen, Innenlager). */
:where(.h_menu li.morelink),
:where(.h_menu.megamenu li.morelink) {
  display: none;
}

:where(.h_menu.megamenu li.level1:nth-child(9) ~ li) {
  display: none;
}

:where(.h_menu.megamenu li.level1:nth-child(9) + li ~ .morelink) {
  display: inline-block;
}

:where(.h_menu.megamenu li.level2:nth-child(5) ~ li) {
  display: none;
}

:where(.h_menu.megamenu li.level2:nth-child(5) + li ~ .morelink) {
  display: inline-block;
}

/* Fokusring des Werks (styles.css 369/371). Bewusst MIT !important
   gespiegelt, obwohl sonst alles in dieser Datei auf Spezifitaet 0
   steht: die Werksregel traegt es selbst, und ohne sie zeigte die
   Vorschau Fokusringe, die es im Shop nicht gibt. Genau das war der
   Fall — der Drawer sah lokal richtig aus und trug live den blauen
   Werksring (#059ef8). Wer hier einen eigenen Ring will, braucht
   ebenfalls !important. */
:where(:focus) {
  outline: none;
}

:where(:focus-visible) {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #059ef8;
  border-radius: 3px;
}

/* Sticky-Verhalten: Replik von topnavStayOnTop() (e-vendo.js).
   nav-loader.js setzt .fixed und den Filler genau wie der Shop. */
:where(#topnav.fixed) {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  z-index: 1000;
}

/* ============================================================
   SHOP-FOOTER-REPLIK – Baseline (Werkszustand e-vendo)
   Quelle: styles.css des Live-Shops (Extraktion 2026-08-18).
   Wie die Header-Baseline in :where() gehalten (Spezifitaet 0),
   damit die Overrides aus tillit-shop.css lokal immer gewinnen.
   Markup: assets/components/footer.tpl (injiziert von
   nav-loader.js ans Body-Ende, wie im Shop nach #shop).
   ============================================================ */

/* #shop-Wrapper-Replik: Werk setzt overflow:hidden, der Spiegel
   drueckt auf overflow:clip (kein Scroll-Container, Sticky im
   Content bleibt intakt — siehe tillit-shop.css). */
:where(.oflow_hidden) {
  overflow: hidden;
}

:where(#Footer) {
  display: block;
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;
}

:where(#Footer, #Footer a:not(.button_default)) {
  color: #333333;
}

:where(#Footer a:not(.button_default):hover) {
  color: #b59472;
}

:where(#footer_content) {
  margin: 0 auto;
  overflow: hidden;
}

:where(#footer_content)::after {
  clear: left;
  content: "";
  display: block;
}

/* Equal-Height-Hack des Werks (Spalten gleich hoch via
   Riesen-Padding + Negativ-Margin). Phase 5 ersetzt das
   im Shop per Grid-Override. */
:where(#footer_content > .footercol) {
  padding: 15px 15px 32768px;
  margin-bottom: -32768px;
}

:where(#footer_content .footercol_content) {
  padding-bottom: 15px;
}

:where(#footer_content > .footercol:not(:last-child)) {
  border-bottom: 1px solid #ffffff;
}

@media (min-width: 880px) {
  :where(#footer_content > .footercol) {
    float: left;
  }

  :where(.footercol.col_3) {
    width: 33.33%;
  }

  :where(.footercol.col_4) {
    width: 25%;
  }

  :where(#footer_content > .footercol:not(:last-child)) {
    border-bottom: none;
    border-right: 1px solid #ffffff;
  }

  :where(#Footer.style1 #footer_content) {
    width: 100%;
    max-width: none;
  }
}

:where(.footermenu) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.footermenu li) {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

:where(.footermenu li a) {
  text-decoration: none;
}

:where(#Footer .morelink) {
  display: none;
}

:where(#footer_mwst, #shopversion) {
  padding: 0.8em 15px;
  text-align: center;
  font-size: 0.9em;
  color: #aaaaaa;
}

:where(#footer_mwst a:not(.button_default), #shopversion a:not(.button_default)) {
  color: #aaaaaa;
}

:where(#footer_mwst a:not(.button_default):hover, #shopversion a:not(.button_default):hover) {
  color: #888888;
}

/* Werks-Utilities, soweit der Footer sie braucht (im Shop
   global; hier auf #Footer gescoped, damit die Vorschau-
   Seiten unberuehrt bleiben) */
:where(#Footer .caption-smallest) {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.8em;
}

:where(#Footer address) {
  font-style: normal;
}

:where(#Footer * + .content_block) {
  margin-top: 15px;
}

:where(#Footer .not-empty:empty) {
  display: none;
}

:where(#Footer .simlink) {
  cursor: pointer;
}

:where(#Footer .simlink:hover) {
  color: #b59472;
}

:where(#Footer .hyphens) {
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
}

:where(#Footer .button_default) {
  display: inline-block;
  padding: 0.4em 0.6em;
  background-color: #fbfbfb;
  border: 1px solid #cccccc;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1em;
  color: #333333;
  text-decoration: none;
}

:where(#Footer .flex) {
  display: flex;
}

:where(#Footer .flex-baseline) {
  align-items: baseline;
}

:where(#Footer .flex-wrap) {
  flex-wrap: wrap;
}

:where(#Footer .gutter--s) {
  gap: 0.5em;
}

:where(#Footer .block) {
  display: block;
}

:where(#Footer .no-deco) {
  text-decoration: none;
}

:where(#Footer .nowrap) {
  white-space: nowrap;
}

:where(#Footer .m-t--m-r) {
  margin-top: 1rem;
}

:where(#Footer .m-t--s-r) {
  margin-top: 0.5rem;
}

:where(#Footer table.address) {
  border-collapse: collapse;
}

:where(#Footer table.address td) {
  padding: 0.15em 0;
  vertical-align: middle;
}

:where(#Footer table.address td.label) {
  padding-right: 0.6em;
}

/* Telefon/Mail-Icons: im Shop kommen sie aus der Icon-Font
   ("fa"-Klassen). Lokal als Mask-Replik in currentColor. */
:where(#Footer .fa)::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--tpv-fa-icon) center / contain no-repeat;
  mask: var(--tpv-fa-icon) center / contain no-repeat;
}

:where(#Footer .phone_icon) {
  --tpv-fa-icon: 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='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

:where(#Footer .envelope_icon) {
  --tpv-fa-icon: 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 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

/* ============================================================
   USP-BAND – Replik des Specialarea-Felds "Header"
   Im Shop liegen diese Styles selbstenthaltend im Feld
   ("Inhalte fuer verschiedene Bereiche" -> Header), deshalb
   stehen sie NICHT im Spiegel tillit-shop.css. 1:1 vom
   Live-Stand uebernommen. Bei Band-Redesign (Phase 2) beide
   Orte aktualisieren: dieses File + Backend-Feld.
   ============================================================ */

#special_header {
  padding: 0 !important;
}

.announcement-bar {
  background: linear-gradient(135deg, #b59472 0%, #a0835d 100%);
  color: #fff;
  width: 100%;
  position: relative;
  z-index: 1000;
  overflow: hidden;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.announcement-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 56px 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 48px;
}

.announcement-slider {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-slide {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(10px);
  transition: all .4s ease-out;
}

.announcement-slide.active {
  opacity: 1;
  transform: translateX(0);
}

.announcement-icon {
  margin-right: 12px;
  flex-shrink: 0;
  display: flex;
}

.announcement-content {
  text-align: center;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announcement-content strong {
  font-weight: 700;
  letter-spacing: .05em;
}

.announcement-progress {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
}

.progress-bar {
  width: 48px;
  height: 2px;
  background: rgba(255, 255, 255, .3);
  border-radius: 1px;
  overflow: hidden;
  cursor: pointer;
}

.progress-fill {
  height: 100%;
  background: rgba(255, 255, 255, .9);
  border-radius: 1px;
  transform-origin: left;
  transform: scaleX(0);
}

.progress-fill.active {
  animation: progressFill 4s linear forwards;
}

.progress-fill.completed {
  transform: scaleX(1);
}

@keyframes progressFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 767px) {
  .announcement-container {
    flex-direction: column;
    padding: 10px 12px;
    align-items: center;
  }

  .announcement-icon {
    display: none;
  }

  .announcement-content {
    font-size: 12px;
    letter-spacing: 0;
    overflow: visible;
    text-overflow: unset;
  }

  .announcement-progress {
    width: 100%;
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 2px;
  }

  .progress-bar {
    width: 40px;
  }
}

@media (max-width: 480px) {
  .announcement-content {
    font-size: 11px;
  }

  .progress-bar {
    width: 32px;
  }
}

/* ============================================================
   VORSCHAU-KLEBSTOFF (.tpv-*) – Innenlayout der Headerzeile.
   Im Shop macht das die Werks-CSS mit Floats/Absolutes; hier
   emulieren wir das visuelle Ergebnis mit Flex. Kein Transfer.
   ============================================================ */

.tpv-headrow {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 24px;
}

.tpv-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

#logo {
  display: inline-flex;
  align-items: center;
  color: var(--tillit-black);
  text-decoration: none;
}

.tillit-nav__logo-svg {
  display: block;
  height: 34px;
  width: auto;
}

.tillit-nav__logo-ink {
  fill: var(--tillit-black);
}

.tillit-nav__logo-accent {
  fill: var(--tillit-primary);
}

.tillit-nav__label {
  position: relative;
  padding-left: 0.65rem;
  color: var(--tillit-gray-light);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}

/* Feiner Trenner: markiert "intern" als Kontext, nicht als Teil der Wortmarke. */
.tillit-nav__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 15px;
  background: rgba(34, 34, 34, 0.16);
  transform: translateY(-50%);
}

.tpv-search {
  position: relative;
  flex: 1;
  max-width: 460px;
  margin: 0 auto;
}

.tpv-search input {
  width: 100%;
  padding: 0.65em 2.6em 0.65em 1.1em;
  font: inherit;
  font-size: 0.95rem;
  color: var(--tillit-gray);
  background: #f4f4f4;
  border: none;
  border-radius: 999px;
}

.tpv-search input::placeholder {
  color: var(--tillit-gray-light);
}

.tpv-search__icon {
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tillit-primary);
  pointer-events: none;
}

.tpv-side {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: none;
}

.tpv-side__links {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--tillit-gray);
}

.tpv-cart {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--tillit-black);
}

.tpv-cart__text {
  font-size: 0.85rem;
}

@media (max-width: 1200px) {
  .tpv-side__links,
  .tpv-cart__text {
    display: none;
  }
}

/* Mobile Headerzeile (unter 880px) */
.tpv-mobilerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 52px;
  padding: 0.35rem 1rem;
}

.tpv-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(34, 34, 34, 0.16);
  border-radius: 4px;
}

.tpv-burger span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--tillit-black);
}

.tpv-mobilelogo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

.tpv-mobilelogo .tillit-nav__logo-svg {
  height: 26px;
}

.tpv-mobileicons {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--tillit-black);
}

/* ============================================================
   TWEAK: KURATIERTE NAVIGATION (html[data-tw-nav="curated"])
   Simuliert die Ziel-Navigation mit 6 Punkten: Home raus
   (Logo ist Home), die vier Marken buendeln sich unter
   "Marken". Im Shop entspricht das einer Themen-Baumpflege
   im ERP plus einer CSS-Zeile fuer das hartkodierte li#Home.
   ============================================================ */

[data-nav="marken-gruppe"] {
  display: none;
}

html[data-tw-nav="curated"] #topnav li#Home,
html[data-tw-nav="curated"] #topnav li[data-nav="marke"] {
  display: none;
}

html[data-tw-nav="curated"] [data-nav="marken-gruppe"] {
  display: block;
}

/* ============================================================
   SUCHE ALS ICON — entschieden 2026-08-21, kein Tweak mehr.
   Das Suchfeld kollabiert zum Icon und expandiert bei Hover
   oder Fokus.

   ACHTUNG, Transfer: diese Regeln greifen auf .tpv-*, also auf
   Klassen der VORSCHAU-Replik. Shop-seitig ist das Verhalten
   noch NICHT gebaut. Die echte Suche liegt dort als
     #search.header_option_overlay (position:absolute)
       > form#searchi > div.input-field > input#SearchStr
     + div.searchicon als Absender
   (am Live-Shop nachgesehen, 2026-08-21). Der Shop-Block gehoert
   in tillit-shop-header-v2.css und wird zusammen mit der Frage
   "Nav-Punkte in die Kopfzeile" gebaut — beide formen dieselbe
   Zeile, getrennt umgesetzt waere es doppelte Arbeit.
   ============================================================ */

.tpv-headrow {
  gap: 1.25rem;
}

.tpv-brand {
  margin-right: auto;
}

.tpv-search {
  flex: none;
  display: flex;
  align-items: center;
  margin: 0;
}

/* #Header im Selektor haelt die Spezifitaet ueber den
   V2-Eingabefeld-Regeln (#Header input[type="text"]). */
#Header .tpv-search input {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s, padding 0.45s;
}

#Header .tpv-search:hover input,
#Header .tpv-search:focus-within input {
  width: 200px;
  padding-right: 0.5em;
  opacity: 1;
}

.tpv-search__icon {
  position: static;
  transform: none;
  pointer-events: auto;
  cursor: pointer;
}

/* ============================================================
   TWEAKS-PANEL – Vorschau-Werkzeug zum Umschalten von
   Design-Varianten (Schrift, Mono-Stimme, Nav, Suche, Scroll).
   Header und Footer stehen nicht mehr drin: beide sind auf V2
   entschieden und liegen als Standard vor.
   Nur lokale Vorschau, kein Transfer.
   ============================================================ */

#tillit-tweaks {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9000;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.tillit-tweaks__chip {
  padding: 0.55em 1.1em;
  background: #0f0f0f;
  color: rgba(255, 255, 255, 0.85);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.tillit-tweaks__chip:hover {
  color: #ffffff;
}

.tillit-tweaks__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 240px;
  padding: 0.9rem 1rem;
  background: #ffffff;
  border: 1px solid rgba(15, 15, 15, 0.13);
  border-radius: 0.5rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  /* Das Panel waechst mit den Tweak-Gruppen — oberhalb der
     Viewport-Kante intern scrollen statt abschneiden.
     (Chip 16px + ~34px + 10px Abstand + 16px Luft oben) */
  max-height: calc(100vh - 92px);
  max-height: calc(100dvh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tillit-tweaks__caption {
  margin-bottom: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a6a6a;
}

.tillit-tweaks__group + .tillit-tweaks__group {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(15, 15, 15, 0.13);
}

.tillit-tweaks__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #0f0f0f;
  cursor: pointer;
}

.tillit-tweaks__option input {
  accent-color: #0f0f0f;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .announcement-slide,
  .progress-fill.active {
    transition: none;
    animation: none;
  }
}