@import url("theme-review.css");
@import url("style-review.css");

/* Farbwerte und Schriften stehen in theme-review.css — hier steht nur Aufbau. */

/*
|--------------------------------------------------------------------------
| Affiliate Review System - Styles
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Zentrale Farben
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Grundlayout
|--------------------------------------------------------------------------
*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-page-bg);
}

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

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(var(--container-max), calc(100% - 2.5rem));
  margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.site-header {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-bottom: 0.0625rem solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.125rem 0;
}

.site-branding {
  min-width: 0;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-on-primary);
  font-size: 1.375rem;
  font-weight: bold;
}

.site-logo:hover {
  text-decoration: none;
}

.site-logo-image {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.site-logo-text {
  display: inline-block;
  line-height: 1.2;
}

.site-description {
  margin: 0.375rem 0 0 3.75rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 0.5rem 0.625rem;
  font-size: 1.125rem;
  color: var(--color-on-primary);
  border-radius: 0.375rem;
}

.site-nav a:hover {
  background: var(--color-box-header-bg);
  color: var(--color-text);
  text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| Hauptbereich
|--------------------------------------------------------------------------
*/

.site-main {
  padding: 2.75rem 0;
}

.content-wrapper {
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: 0.75rem;
  padding: 2.625rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.04);
}


/*
|--------------------------------------------------------------------------
| Typografie
|--------------------------------------------------------------------------
*/

h1,
h2,
h3 {
  line-height: 1.35;
  color: var(--color-heading);
  font-weight: 700;
}

h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

h2 {
  margin: 2.625rem 0 0.875rem;
  font-size: clamp(1.1875rem, 1.8vw, 1.5rem);
}

h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
}

p {
  margin: 0 0 1.5rem;
}

ul,
ol {
  margin: 0 0 1.75rem 1.375rem;
  padding: 0;
}

li {
  margin-bottom: 0.625rem;
}


/*
|--------------------------------------------------------------------------
| Allgemeine Boxen
|--------------------------------------------------------------------------
*/

.info-box,
.review-box,
.rating-box,
.bonus-box,
.newsletter-box,
.author-box,
.pros-cons-box,
.notice-box,
.faq-box {
  margin: 2.875rem 0;
  padding: 1.75rem;
  border-radius: 1.125rem;
  border: 0.0625rem solid var(--color-border-strong);
  background: var(--color-surface-alt);
}

.box-header {
  margin: -1.75rem -1.75rem 1.75rem;
  padding: 1.125rem 1.75rem;
  border-bottom: 0.0625rem solid var(--color-border);
  border-radius: 1.125rem 1.125rem 0 0;
  background: var(--color-box-header-bg);
}

.box-header h2 {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 700;
}

.highlight-box {
  margin: 2.75rem 0;
  padding: 1.75rem;
  border-left: 0.3125rem solid var(--color-primary);
  background: var(--color-box-header-bg);
  border-radius: 0.625rem;
}

.notice-box {
  font-size: 0.875rem;
  color: var(--color-soft-text);
}


/*
|--------------------------------------------------------------------------
| Startseite
|--------------------------------------------------------------------------
*/

.home-hero {
  margin: 0 0 2.875rem;
  padding: 2.125rem;
  border: 0.0625rem solid var(--color-border-strong);
  border-radius: 1.125rem;
  background: var(--color-surface-alt);
  box-shadow: 0 0.875rem 2.1875rem rgba(15, 23, 42, 0.08);
}

.home-kicker {
  display: inline-block;
  margin: 0 0 0.875rem;
  padding: 0.4375rem 0.8125rem;
  border-radius: 62.4375rem;
  color: var(--color-on-accent);
  background: var(--color-primary);
  font-size: 0.8125rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home-hero h1 {
  max-width: 53.125rem;
}

.home-lead {
  max-width: 53.125rem;
  margin-bottom: 0;
  color: var(--color-soft-text);
  font-size: 1.125rem;
  line-height: 1.75;
}

.category-section > p {
  color: var(--color-soft-text);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem;
  margin-top: 1.75rem;
}

.category-card {
  display: block;
  position: relative;
  padding: 1.5rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-surface);
  color: var(--color-heading);
  box-shadow: 0 0.5rem 1.375rem rgba(15, 23, 42, 0.04);
}

.category-card::after {
  content: "→";
  position: absolute;
  right: 1.375rem;
  top: 1.375rem;
  color: var(--color-primary);
  font-weight: bold;
}

.category-card-title {
  display: block;
  padding-right: 1.75rem;
  font-size: 1.125rem;
  font-weight: bold;
}

.category-card-text {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.category-card:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
  text-decoration: none;
}

.category-card:hover .category-card-text,
.category-card:hover::after {
  color: var(--color-on-accent);
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.button,
.cta-button {
  display: inline-block;
  margin-top: 0.625rem;
  padding: 0.9375rem 1.75rem;
  color: var(--color-on-accent);
  background: var(--color-primary);
  border-radius: 0.5rem;
  font-weight: bold;
  text-align: center;
  border: 0;
  cursor: pointer;
}

.button:hover,
.cta-button:hover {
  background: var(--color-primary-dark);
  color: var(--color-on-accent);
  text-decoration: none;
}

.inline-cta {
  margin: 2.125rem 0 5rem;
  text-align: center;
}

.inline-cta .button {
  display: inline-block;
  width: 100%;
  max-width: 28.75rem;
  padding: 1.125rem 2.125rem;
  font-size: 1.125rem;
}

.affiliate-button {
  position: relative;
}


/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin: 2.5rem 0 0.625rem;
}

.pagination a,
.pagination span {
  display: inline-block;
  min-width: 2.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  text-align: center;
  font-weight: bold;
  border: 0.0625rem solid var(--color-border);
  background: var(--color-surface);
}

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

.pagination span {
  color: var(--color-on-accent);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination a:hover {
  color: var(--color-on-accent);
  background: var(--color-primary);
  border-color: var(--color-primary);
  text-decoration: none;
}


/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {
  padding: 1.875rem 0;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.footer-inner {
  text-align: center;
}

.footer-notice {
  max-width: 53.125rem;
  margin: 0 auto 1.125rem;
  font-size: 0.8125rem;
  color: var(--color-on-primary);
}

.footer-notice p::before {
  content: "* ";
}

.footer-links {
  margin-bottom: 0.875rem;
}

.footer-links a {
  display: inline-block;
  margin: 0 0.5rem;
  color: var(--color-on-accent);
}

.footer-copy p {
  margin: 0;
  font-size: 0.8125rem;
}


/*
|--------------------------------------------------------------------------
| Formulare
|--------------------------------------------------------------------------
*/

input,
textarea,
select,
button {
  font-family: inherit;
}

form {
  margin: 0;
}


/*
|--------------------------------------------------------------------------
| Impressum & Datenschutz - Schutz gegen Spam
|--------------------------------------------------------------------------
*/

.reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 50rem) {
  .container {
    width: min(100% - 1.75rem, 70rem);
  }


  .header-inner {
    display: block;
    text-align: center;
  }


  .site-logo {
    justify-content: center;
  }


  .site-description {
    margin: 0.5rem 0 0;
  }


  .site-nav ul {
    justify-content: center;
    margin-top: 1.125rem;
    gap: 0.5rem;
  }


  .site-nav a {
    padding: 0.4375rem 0.5rem;
    font-size: 0.875rem;
  }


  .content-wrapper {
    padding: 1.75rem;
  }


  .home-hero {
    padding: 1.75rem;
  }


  .category-grid {
    grid-template-columns: 1fr 1fr;
  }


  .inline-cta {
    margin: 1.75rem 0 3.75rem;
  }


  .inline-cta .button {
    max-width: none;
  }}

@media (max-width: 30rem) {
  body {
    font-size: 0.9375rem;
    line-height: 1.7;
  }


  .container {
    width: min(100% - 1.25rem, 70rem);
  }


  .site-main {
    padding: 1.25rem 0;
  }


  .content-wrapper {
    padding: 1.125rem;
    border-radius: 0.625rem;
  }


  .site-logo {
    gap: 0.625rem;
    font-size: 1.1875rem;
  }


  .site-logo-image {
    width: 2.625rem;
    height: 2.625rem;
  }


  h1 {
    font-size: 1.4375rem;
  }


  h2 {
    margin-top: 2.125rem;
    font-size: 1.25rem;
  }


  h3 {
    font-size: 1.0625rem;
  }


  p {
    margin-bottom: 1.25rem;
  }


  .home-hero {
    padding: 1.375rem;
    margin-bottom: 2.25rem;
  }


  .home-lead {
    font-size: 1rem;
  }


  .category-grid {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }


  .category-card {
    padding: 1.25rem;
  }


  .box-header h2 {
    font-size: 1.125rem;
  }


  .button,
  .cta-button {
    width: 100%;
    padding: 1rem 1.375rem;
    font-size: 1rem;
  }


  .pagination {
    gap: 0.5rem;
    margin-top: 2rem;
  }


  .pagination a,
  .pagination span {
    min-width: 2.375rem;
    padding: 0.5625rem 0.75rem;
  }}

/*
|--------------------------------------------------------------------------
| Navigation – Dropdown / Flyout (verschachtelte Menüs, beliebige Tiefe)
| Ergänzt für wp2diget-Menüs (Klassen: has-submenu, item-wrapper,
| main-link, arrow, sub-menu). Desktop: Hover/Fokus. Mobil: offen/eingerückt.
|--------------------------------------------------------------------------
*/

/* Oberste Leiste (ul.site-nav selbst – hatte bisher keine Regel) */
ul.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.site-nav > li { position: relative; }

/* Link + Pfeil bei Punkten mit Untermenü */
.site-nav .has-submenu > .item-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
}
.site-nav .main-link { white-space: nowrap; }

/* Pfeil-Button als Caret */
.site-nav .arrow {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0 0.25rem;
  cursor: pointer;
  color: var(--color-on-primary);
  line-height: 1;
}
.site-nav .arrow::before { content: "\25BE"; font-size: 0.75rem; }        /* ▾ */
.site-nav .sub-menu .arrow::before { content: "\25B8"; }               /* ▸ */

/* Untermenü-Panels: per Default verborgen, absolut positioniert */
.site-nav .sub-menu {
  display: block;                 /* überschreibt das geerbte flex */
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 13.75rem;
  margin: 0;
  padding: 0.375rem;
  list-style: none;
  background: var(--color-primary-dark);
  border: 0.0625rem solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.25);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Aufklappen bei Hover oder Tastaturfokus */
.site-nav .has-submenu:hover > .sub-menu,
.site-nav .has-submenu:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Einträge als volle Zeilen */
.site-nav .sub-menu li { width: 100%; position: relative; }
.site-nav .sub-menu .item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-nav .sub-menu a {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  color: var(--color-on-primary);
  border-radius: 0.375rem;
}
.site-nav .sub-menu a:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-on-accent);
}

/* 3. Ebene: seitlich ausklappen */
.site-nav .sub-menu .sub-menu {
  top: -0.4375rem;
  left: 100%;
}

/* Hover-Brücke, damit der Übergang nicht abreißt */
.site-nav .has-submenu > .sub-menu::before {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: 0;
  right: 0;
  height: 0.375rem;
}

/*
|--------------------------------------------------------------------------
| Mobil: Burger-Menü + Akkordeon-Untermenüs (per Klick aufs Dreieck)
|--------------------------------------------------------------------------
*/

/* Burger-Button – nur mobil sichtbar */
.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-on-primary);
}
.nav-toggle .bar,
.nav-toggle .bar::before,
.nav-toggle .bar::after {
  content: "";
  display: block;
  width: 1.625rem;
  height: 0.1875rem;
  border-radius: 0.125rem;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle .bar { position: relative; }
.nav-toggle .bar::before { position: absolute; left: 0; top: -0.5rem; }
.nav-toggle .bar::after  { position: absolute; left: 0; top: 0.5rem; }
/* Burger -> X, wenn geöffnet */
.header-inner.nav-open .nav-toggle .bar { background: transparent; }
.header-inner.nav-open .nav-toggle .bar::before { transform: translateY(0.5rem) rotate(45deg); }
.header-inner.nav-open .nav-toggle .bar::after  { transform: translateY(-0.5rem) rotate(-45deg); }

@media (max-width: 53.75rem) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .header-inner { flex-wrap: wrap; }

  /* Menü hängt unter Logo/Burger und ist standardmäßig zu */
  .header-inner nav { flex-basis: 100%; }
  ul.site-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .header-inner.nav-open ul.site-nav { display: flex; }

  ul.site-nav > li { position: static; }
  .site-nav .item-wrapper { justify-content: space-between; width: 100%; }
  .site-nav > li,
  .site-nav .sub-menu > li { border-top: 0.0625rem solid rgba(255, 255, 255, 0.10); }

  /* Untermenüs zu -> öffnen nur mit .open (Klick aufs Dreieck) */
  .site-nav .sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 0 0.875rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-left: 0.125rem solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    box-shadow: none;
  }
  .site-nav .has-submenu.open > .sub-menu { display: block; }

  /* Dreieck: mobil überall nach unten, dreht sich beim Öffnen */
  .site-nav .arrow {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
  }
  .site-nav .sub-menu .arrow::before { content: "\25BE"; }        /* ▾ statt ▸ */
  .site-nav .has-submenu.open > .item-wrapper > .arrow { transform: rotate(180deg); }
}

/*
|--------------------------------------------------------------------------
| Breadcrumb ("Wo bin ich" – Schnellnavigation über die Ebenen)
| Container liegt im header-Baustein; Inhalt wird per JS gefüllt.
|--------------------------------------------------------------------------
*/

.breadcrumb {
  display: none;                 /* erst sichtbar, wenn JS Krumen einfügt */
  width: 100%;
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.12);
  background: var(--color-primary-dark);
}
.breadcrumb.has-crumbs { display: block; }

.breadcrumb .container { padding-top: 0; padding-bottom: 0; }

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem 0;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  font-size: 0.875rem;
}
.breadcrumb-list li { display: inline-flex; align-items: center; }
.breadcrumb-list li:not(:last-child)::after {
  content: "\203A";              /* › */
  margin: 0 0.5rem;
  color: rgba(240, 247, 244, 0.55);
}
.breadcrumb-list a {
  color: rgba(240, 247, 244, 0.9);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}
.breadcrumb-list a:hover { background: rgba(255, 255, 255, 0.10); color: var(--color-on-accent); }
.breadcrumb-list li:last-child { font-weight: 600; color: var(--color-on-accent); }

/*
|--------------------------------------------------------------------------
| Footer-Menü & Footer-Feinschliff
| footermenu war bisher ohne Regel -> als Aufzählungsliste dargestellt.
|--------------------------------------------------------------------------
*/

/* Footer-Bereiche etwas voneinander absetzen */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

.footer-notice {
  padding-bottom: 0.875rem;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.12);
  margin-bottom: 0.25rem;
}

/* Footer-Menü: horizontale Zeile mit dezenten Trennern */
.footermenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footermenu li {
  display: inline-flex;
  align-items: center;
}

.footermenu li:not(:last-child)::after {
  content: "";
  width: 0.0625rem;
  height: 0.75rem;
  margin: 0 0.375rem;
  background: rgba(255, 255, 255, 0.30);
}

.footermenu a {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.625rem;
  color: var(--color-on-primary);
  border-radius: 0.375rem;
}

.footermenu a:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-on-accent);
  text-decoration: none;
}

.footer-copy {
  font-size: 0.8125rem;
  color: rgba(240, 247, 244, 0.85);
}

/* Mobil: Trenner weglassen, Einträge untereinander zentriert */
@media (max-width: 35rem) {
  .footermenu { flex-direction: column; gap: 0.125rem; }
  .footermenu li:not(:last-child)::after { display: none; }
}

/*
|--------------------------------------------------------------------------
| Vorschlagslisten-Tabellen (einheitliche Spaltenbreiten über alle Tabellen)
| Spalte 1 Produkt = restliche Breite, 2 Empfehlungsartikel + 3 Verkaufsseite
| = feste Breite. table-layout:fixed sorgt für gleiche Optik in allen Tabellen.
|--------------------------------------------------------------------------
*/

.site-main table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 0 1.375rem;
  font-size: 0.9375rem;
  background: var(--color-surface);
}

.site-main table th,
.site-main table td {
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid var(--color-border-strong);
  vertical-align: middle;
  overflow-wrap: anywhere;      /* lange Produktnamen sauber umbrechen */
}

.site-main table thead th {
  background: var(--color-box-header-bg);
  color: var(--color-heading);
  text-align: left;
  font-weight: 600;
}

/* Spalte 1 = Produkt (Rest) · 2 = Empfehlungsartikel · 3 = Verkaufsseite */
.site-main table th:nth-child(2),
.site-main table td:nth-child(2) { width: 12.5rem; text-align: center; }
.site-main table th:nth-child(3),
.site-main table td:nth-child(3) { width: 10rem; text-align: center; }

.site-main table tbody tr:nth-child(even) { background: var(--color-surface-alt); }

/* "Mehr Erfahren" (Link in der letzten Spalte) als Button */
.site-main table td:last-child a {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  background: var(--color-primary);
  color: var(--color-on-accent);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.1;
  border-radius: 0.375rem;
  white-space: nowrap;
}
.site-main table td:last-child a:hover {
  background: var(--color-primary-dark);
  color: var(--color-on-accent);
  text-decoration: none;
}

@media (max-width: 40rem) {
  .site-main table { font-size: 0.8125rem; }
  .site-main table th,
  .site-main table td { padding: 0.4375rem 0.5rem; }
  .site-main table th:nth-child(2),
  .site-main table td:nth-child(2) { width: 5.75rem; }
  .site-main table th:nth-child(3),
  .site-main table td:nth-child(3) { width: 7.375rem; }
  .site-main table td:last-child a { padding: 0.375rem 0.5rem; font-size: 0.8125rem; }
}

/*
|--------------------------------------------------------------------------
| Nach-oben-Button (fliegend, rechts unten, weicht dem Footer aus)
| Markup + Verhalten liefert app.js; hier nur das Aussehen.
|--------------------------------------------------------------------------
*/

#back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 2.875rem;
  height: 2.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-accent);
  cursor: pointer;
  box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.625rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background 0.2s;
  z-index: 900;
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover { background: var(--color-primary-dark); }

#back-to-top svg {
  width: 1.625rem;
  height: 1.625rem;
  display: block;
  fill: currentColor;
}

/*
|--------------------------------------------------------------------------
| Logo-Bild links neben Titel/Untertitel (SVG oder Raster)
| Greift, sobald im Header ein Bild + optionaler Untertitel ergänzt ist.
|--------------------------------------------------------------------------
*/

.site-logo-image {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.site-branding .site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.site-title-group { display: flex; flex-direction: column; line-height: 1.15; }
.site-subtitle {
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(240, 247, 244, 0.8);
}