/* === Noto Sans – Basis (normal) === */
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-Thin.woff2') format('woff2');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-ExtraLight.woff2') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* === Noto Sans – Italic-Schnitte === */
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-ThinItalic.woff2') format('woff2');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-LightItalic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-MediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-BoldItalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'Noto Sans';
  src: url('../fonts/noto/NotoSans-BlackItalic.woff2') format('woff2');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* === Standard-Font für die Seite === */
/* Basis-Setup */
:root{
  --brand:#0c6dfc;
  --brand-700:#0a5bd4;
  --brand-50:#e8f0ff;
  --ok:#34a853;
  --warn:#f6c343;
  --violet:#8e24aa;
}
html{ -webkit-text-size-adjust: 100%; }
body{
  background:#d8eafc;
  font-family:'Noto Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#111827;
}

/* Branding */
.navbar-brand{font-weight:700; letter-spacing:.2px;}
.brand-gradient{background:linear-gradient(90deg,var(--brand) 0%,var(--brand-700) 100%);}

/* Navbar-Button (hell, unabhängig vom blauen Hintergrund) */
.navbar .btn.btn-nav{
  /* Größe */
  --bs-btn-padding-y:.25rem;
  --bs-btn-padding-x:.5rem;
  --bs-btn-font-size:.875rem;
  --bs-btn-border-radius:.5rem;

  /* feste Farben */
  color:#111827!important;
  background-color:#f8f9fa!important;
  border:1px solid #e9ecef!important;

  /* Layout */
  --btn-avatar:24px;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  line-height:1;
}

.navbar .btn.btn-nav:hover,
.navbar .btn.btn-nav:active{
  color:#111827!important;
  background-color:#e9ecef!important;
  border-color:#dee2e6!important;
}

.navbar .btn.btn-nav:focus-visible{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(13,110,253,.25)!important;
}

/* Avatar: Bild + Initialen identische Fläche (kein Reflow) */
.navbar .btn.btn-nav .nav-avatar-img,
.navbar .btn.btn-nav .nav-avatar{
  width:var(--btn-avatar);
  height:var(--btn-avatar);
  flex:0 0 var(--btn-avatar);
  display:block;
  border-radius:.375rem;
  object-fit:cover;
}

.navbar .btn.btn-nav .nav-avatar{
  background:#e9ecef;
  color:#111827;
  font-weight:600;
  font-size:.75rem;
  text-align:center;
  line-height:var(--btn-avatar);
}

/* Label: initial hidden (FOUC vermeiden), erst ab sm zeigen */
.nav-user-label{display:none; white-space:nowrap;}
@media (min-width:576px){ .nav-user-label{display:inline;} }




/* Filter-Toolbar */
.filter-card{border:1px solid #e5e7eb; border-radius:12px;}
.filter-card .form-label{font-size:.8rem; color:#6b7280;}
.filter-actions .btn{min-width:110px}

/* Tabelle & Thumbs */
.table thead th{position:sticky; top:0; background:#fff; box-shadow: inset 0 -1px 0 #e5e7eb;}
.table tbody tr:hover{background:#f9fbff;}
.thumb{width:72px; height:72px; object-fit:cover; border-radius:8px; background:#e5e7eb;}
.thumb-wrap{position:relative; display:inline-block;}
.thumb-badge{
  position:absolute; right:-6px; top:-6px;
  min-width:22px; height:22px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; background:#111827; color:#fff;
}
.text-muted-sm{color:#6b7280; font-size:.875rem}

/* Top-Flags (linker Farbstreifen) */
tr.top-cat  { box-shadow: inset 4px 0 var(--warn); }
tr.top-sub  { box-shadow: inset 4px 0 var(--ok); }
tr.top-both { box-shadow: inset 4px 0 var(--violet); }

/* Anbieter-Hervorhebung */
tr.seller-privat     { background-image: linear-gradient(to right, rgba(0,0,0,.02), transparent); }
tr.seller-gewerblich { background-image: linear-gradient(to right, rgba(12,109,252,.06), transparent); }

/* Chips / Badges */
.chip{
  display:inline-block;
  padding:.2rem .5rem;
  border-radius:999px;
  font-size:.75rem;
  line-height:1;
  color:#fff;
  box-shadow:0 0 0 1px rgba(17,24,39,.06) inset;
}
.chip-priv{ background:#64748b; }       /* neutral */
.chip-gew { background:#0a5bd4; }       /* brand */
.chip-angebot{ background:hwb(32 0% 27%); }    /* cyan/blau */
.chip-gesuch { background:#ea580c; }    /* orange */
.chip-top-k{ background:#f6c343; color:#111; }
.chip-top-s{ background:#22c55e; }
.chip-filter{ text-decoration:none; cursor:pointer; }
.chip-active{ box-shadow:0 0 0 2px rgba(12,109,252,.25), inset 0 0 0 1px rgba(17,24,39,.06); }

/* Grundklasse */
.clamp{
  /* Standard */
  line-clamp: var(--lines, 2);

  /* WebKit-Fallback */
  display: -webkit-box;
  -webkit-line-clamp: var(--lines, 2);
  -webkit-box-orient: vertical;

  overflow: hidden;
}

/* Hilfsklassen */
.clamp-2{ --lines: 2; }
.clamp-3{ --lines: 3; }
.clamp-4{ --lines: 4; }



/* Pagination */
.pagination .page-link{border-radius:8px}

/* Datum-Chips */
.date-chip{
  display:inline-block; padding:.15rem .45rem; border-radius:6px;
  font-size:.75rem; font-weight:600; line-height:1;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.08);
}
.date-chip.today{ background:var(--brand-50); color:var(--brand-700); }
.date-chip.yesterday{ background:rgba(246,195,67,.18); color:#7a5a00; }
.date-chip .t{ margin-left:.35rem; font-weight:600; opacity:.85; }

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Media / Gallery */
.media-wrap{ max-width:600px; }

.hero{
  width:100%;
  height:auto;          /* proportional skalieren */
  max-height:600px;
  border-radius:12px;
  display:block;
  object-fit:contain;   /* falls sehr hoch/schmal */
  background:#e5e7eb;   /* Placeholder-Farbe */
}

/* Thumbnails (CLS-sicher, klickbar) */
.thumb{
  width:90px;                  /* fix gegen CLS */
  aspect-ratio:1/1;            /* quadratisch */
  object-fit:cover;
  border-radius:8px;
  background:#e5e7eb;
  display:block;
  cursor:pointer;              /* falls nicht klickbar -> entfernen */
}
.thumb.is-active{ outline:2px solid var(--brand); }

/* Falls du Badges am Thumb nutzt – bestehend lassen */
.thumb-wrap{ position:relative; display:inline-block; }
.thumb-badge{
  position:absolute; right:-6px; top:-6px;
  min-width:22px; height:22px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; background:#111827; color:#fff;
}

/* Preis-Hervorhebung */
.price-badge{ font-weight:700; }

.nav-avatar-img{
  width:24px; height:24px; border-radius:5px; object-fit:cover; display:inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.4);
}
.nav-avatar{
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:#0b5ed7; color:#fff; font-weight:700; font-size:.8rem;
  box-shadow: 0 0 0 2px rgba(255,255,255,.4);
}

/* Avatar-Remove klarer hervorheben */
.form-check-input.avatar-remove{ width:1.2rem; height:1.2rem; border:2px solid #ef4444; }
.form-check-input.avatar-remove:checked{ background-color:#ef4444; border-color:#ef4444; }
.form-check-label.avatar-remove{ font-weight:600; color:#ef4444; }