/* 4buz -> 4digEt Kompatibilitaet
 *
 * Der Menu-NodeHandler rendert <nav><ul class="..."> ; die urspruengliche
 * 4buz-CSS zielte auf .site-nav ul / .footer-links a. Diese Bruecke bildet
 * die Original-Optik auf das Engine-Markup ab.
 *
 * Stand 22.08.2026: Seit 4buz auf der gemeinsamen style.css der
 * Review-Familie laeuft, deckt die das meiste hiervon selbst ab. Gemessen
 * bleibt ein Unterschied von acht Pixeln im Menueabstand und wenigen Pixeln
 * in der Fusszeile — 4buz steht etwas luftiger als der Rest der Familie.
 *
 * Die Datei bleibt deshalb erhalten: Sie kostet 1 KB und haelt 4buz genau so,
 * wie es aussah. Wer 4buz vollstaendig angleichen will, loescht sie und ihren
 * Verweis aus den 34 Seiten — mehr passiert dabei nicht. */

/* Hauptnavigation */
nav > ul.site-nav {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: 0.875rem; margin: 0; padding: 0; list-style: none;
}
nav > ul.site-nav a {
  display: inline-block; padding: 0.5rem 0.625rem; font-size: 1.125rem;
  color: var(--color-on-primary); border-radius: 0.375rem;
}
nav > ul.site-nav a:hover {
  background: var(--color-box-header-bg); color: var(--color-text); text-decoration: none;
}

/* Footer-Navigation */
.footer-links nav ul.footermenu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem;
}
.footer-links nav a {
  display: inline-block; margin: 0 0.5rem; color: var(--color-on-accent);
}

@media (max-width: 48rem) {
  nav > ul.site-nav { justify-content: center; gap: 0.5rem; }
  nav > ul.site-nav a { font-size: 1rem; }
}


/* ======================================================================
 * Look & Feel der 4digEt-Familie (17.09.2026)
 *
 * 4buz.de soll aussehen wie 4diget.de, produkte.4diget.de und
 * intern.4diget.de: flacher Seitengrund statt weißer Hauptkarte,
 * Systemschrift (theme-4buz.css), abgesetzte Kästen in hellem Mint,
 * orange Handlungsknöpfe. Die Review-Bausteine bleiben, wie sie sind —
 * nur ihre Flächen folgen der Familie.
 * ====================================================================== */

/* Keine weiße Hauptkarte: Der Inhalt steht direkt auf dem Seitengrund */
.content-wrapper {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.container {
  max-width: var(--container-max);
}

/* Kästen wie der FAQ-Kasten auf produkte.4diget.de */
.info-box,
.category-section,
.home-hero,
.review-overview-box,
.rating-box,
.pros-cons-box,
.bonus-box,
.faq-box,
.author-box,
.newsletter-box {
  background: var(--color-surface-alt);
  border: 0.0625rem solid var(--color-border-strong);
  border-radius: 1.125rem;
  box-shadow: none;
}

.box-header {
  background: var(--color-box-header-bg);
}

/* Karten innerhalb der Kästen: weiß, feine Linie, ohne Schatten */
.category-card,
.review-list-item,
.overview-item,
.pros-box,
.cons-box,
.faq-list details {
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border-strong);
  box-shadow: none;
}

.category-card:hover {
  box-shadow: none;
  border-color: var(--color-accent);
}

/* Handlungsknöpfe wie .button-link auf 4diget.de */
.button,
a.button,
button.button,
.affiliate-button {
  background-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: bold;
  border: none;
}

.button:hover,
.button:focus-visible,
.affiliate-button:hover,
.affiliate-button:focus-visible {
  background-color: var(--color-accent-dark);
  color: var(--color-primary-dark);
}

.button:focus-visible,
.affiliate-button:focus-visible {
  outline: 0.1875rem solid currentColor;
  outline-offset: 0.125rem;
}

h1, h2, h3 {
  color: var(--color-heading);
  font-family: var(--font-heading);
}

/* Formulare wie auf produkte.4diget.de (Kontakt, Bonus anfordern) */
.contactform {
  max-width: 40rem;
  margin: 1.25rem 0;
  padding: 0.9375rem 1.25rem;
  background-color: var(--color-surface);
  border: 0.0625rem solid var(--color-border-strong);
  border-radius: 0.5rem;
  font-family: var(--font-body);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}

.contactform label {
  margin-top: 0.9375rem;
  margin-bottom: 0.3125rem;
  font-weight: bold;
}

.contactform input,
.contactform select,
.contactform textarea {
  padding: 0.5rem 0.625rem;
  font-size: 1rem;
  border: 0.0625rem solid var(--color-border-strong);
  border-radius: 0.25rem;
  width: 100%;
  box-sizing: border-box;
}

.contactform button[type="submit"] {
  align-self: flex-start;
  margin-top: 1.5625rem;
  padding: 0.75rem 1.25rem;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: var(--color-accent);
  color: var(--color-primary);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contactform button[type="submit"]:hover,
.contactform button[type="submit"]:focus-visible {
  background-color: var(--color-accent-dark);
  color: var(--color-primary-dark);
}

.contactform button[type="submit"]:focus-visible {
  outline: 0.1875rem solid currentColor;
  outline-offset: 0.125rem;
}

.form-error,
.form-success {
  font-weight: bold;
}