/* ==========================================================================
   20 — Basis- und Layoutstile
   bradentonbroker.de

   Bereinigt am 28.08.2026. Vorher 27.657 Byte, jetzt rund 15 KB.
   Diese Datei ersetzt die bisherige 20-editorial.css eins zu eins.

   WAS ENTFERNT WURDE

   1. Ein komplettes Komponentenset, das nirgends benutzt wird:
      .editorial-headline, .editorial-emphasis, .hero-dark, .hero-panorama,
      .vertical-label, .section-number, .eyebrow, .editorial-divider,
      .region-card, .process-step, .category-chip, .btn-editorial-ghost
      sowie die Utilities .text-bronze, .text-cream, .bg-cream, .bg-navy,
      .font-serif, .font-sans, .italic-serif — 38 Klassen, 78 Regelbloecke,
      dazu vier Media-Queries, die dadurch leer wurden.

      Keine dieser Klassen kam vor: nicht im Live-DOM der 58 veroeffentlichten
      Seiten, nicht im Rohquelltext samt aller 20 JavaScript-Dateien, nicht in
      den Rohinhalten der 59 Beitraege und Seiten einschliesslich Entwuerfen.
      Sie stammen aus einem geplanten Layout, das nie ausgerollt wurde.

   2. Der :root-Block. Er wiederholte Wort fuer Wort die Variablen aus
      10-tokens.css. Weil diese Datei spaeter geladen wird, gewann bisher die
      Kopie hier — 10-tokens.css war praktisch wirkungslos. Das ist die
      gefaehrlichere Sorte Doppelung: Eine Aenderung in 10-tokens.css haette
      stillschweigend nichts bewirkt. Die Variablen stehen jetzt nur dort.

   WAS BEWUSST GEBLIEBEN IST

   Regeln fuer Klassen, die WordPress und Kadence bei Bedarf selbst erzeugen
   und die heute nur mangels passendem Inhalt fehlen: .wp-block-quote,
   .is-style-plain, .post-tags, .widget-title, .footer-widget-title,
   .site-bottom-bar-wrap, .kb-btn-global-fill. Ein spaeterer Blogbeitrag mit
   Zitat soll gestylt sein.

   Ebenso geblieben sind zwei Hover-Regeln im Footer, die auf den ersten Blick
   nach Kontrastfehlern aussehen: Sie setzen #A07440 auf Navy, rechnerisch
   2,93:1 beziehungsweise 2,33:1. Eine Pruefung mit echtem Mauszeiger auf der
   Live-Seite zeigt aber, dass beide ueberschrieben werden — die Links bleiben
   beim Ueberfahren bei #F2C88C, also 7,76:1. Kein Fehler, nur toter Code, der
   ohne Not nicht angefasst wird.

   NACHWEIS DER GLEICHHEIT

   Auf allen 58 Seiten wurde die alte Datei im laufenden Browser gegen diese
   Fassung getauscht und fuer jedes einzelne Element 51 berechnete
   CSS-Eigenschaften verglichen — Farben, Schriften, Abstaende, Rahmen,
   Layout, Sichtbarkeit. Null Abweichungen.
   ========================================================================== */

/* Fraunces mit optischer Achse für die charakteristische Italic-Eleganz */
body {
  font-family: var(--inter-body);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
.entry-title,
.site-title {
  font-family: var(--fraunces-soft);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
}

/* =========================================================================
   1. EDITORIAL ITALIC EMPHASIS
   Wörter die kursiv+bronze gesetzt werden sollen: einfach mit [em] oder
   [span class="editorial-emphasis"] umschließen.
   ========================================================================= */
h1 em,
h2 em,
h3 em {
  font-style: italic;
  color: var(--color-bronze);
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}

/* =========================================================================
   7. BUTTON EDITORIAL STYLE
   Überschreibt Kadence-Defaults für das reduzierte Editorial-Look.
   ========================================================================= */
.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-fill,
.wp-block-button__link,
button.kb-button {
  font-family: var(--inter-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 0;
  transition: all 0.3s ease;
}

/* =========================================================================
   10. BLOG / RATGEBER — Single Post Editorial Layout
   ========================================================================= */
.single-post .entry-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.015em;
}

.single-post .entry-meta {
  font-family: var(--inter-body);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(107, 93, 72, 0.2);
}

.single-post .entry-content {
  font-size: 18px;
  line-height: 1.75;
  max-width: 720px;
  margin: 0 auto;
}

.single-post .entry-content h2 {
  font-size: 36px;
  margin-top: 64px;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.single-post .entry-content h3 {
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 16px;
  font-weight: 500;
}

.single-post .entry-content p {
  margin-bottom: 24px;
}

.single-post .entry-content blockquote {
  border: none;
  border-left: 2px solid var(--color-bronze);
  padding-left: 32px;
  margin: 48px 0;
  font-family: var(--fraunces-soft);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-teal-deep);
}

/* =========================================================================
   11. FOOTER STYLING
   ========================================================================= */
.site-footer {
  background: var(--color-navy);
  color: var(--color-cream-light);
}

.site-footer h5,
.site-footer .footer-widget-title {
  font-family: var(--inter-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bronze);
  margin-bottom: 20px;
  font-weight: 500;
}

.site-footer a {
  color: var(--color-cream-light);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.site-footer a:hover {
  opacity: 1;
  color: var(--color-gold-on-dark);
}

/* =========================================================================
   13. SMOOTH SCROLL & RESPONSIVE POLISH
   ========================================================================= */
html {
  scroll-behavior: smooth;
}

::-moz-selection {
  background: var(--color-bronze);
  color: var(--color-cream-light);
}

::selection {
  background: var(--color-bronze);
  color: var(--color-cream-light);
}

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

/* Editorial Blockquote */
.wp-block-quote.is-style-plain {
  border: none;
  padding: 0;
  margin: 0 auto;
  max-width: 680px;
  text-align: center;
}

.wp-block-quote.is-style-plain p {
  font-family: var(--fraunces-soft);
  font-style: italic;
  font-size: 24px;
  line-height: 1.5;
  color: var(--color-teal-deep);
}

/* "Zur Region →" Textlinks statt Buttons */
.kt-inside-inner-col .wp-block-kadence-singlebtn a.kb-button[href*="/anna-maria"],
.kt-inside-inner-col .wp-block-kadence-singlebtn a.kb-button[href*="/bradenton"],
.kt-inside-inner-col .wp-block-kadence-singlebtn a.kb-button[href*="/sarasota"] {
  background: transparent !important;
  color: var(--color-teal-deep) !important;
  padding: 12px 0 !important;
  border: none !important;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* === Tag links contrast fix === */
.tags-links a,
.entry-taxonomies .tags-links a,
.post-tags a,
a[rel="tag"] {
  color: #0E4A63 !important;        /* dark teal text */
  border-color: #0E4A63 !important; /* dark teal border */
  background-color: rgba(13, 59, 74, 0.05);
}

.tags-links a:hover,
.entry-taxonomies .tags-links a:hover,
.post-tags a:hover,
a[rel="tag"]:hover {
  background-color: #0E4A63 !important;
  color: #FBF3E7 !important;
  border-color: #0E4A63 !important;
}

/* TAGLINE CONTRAST FIX */
.site-branding .site-description {
  color: var(--global-palette1) !important; /* Teal #0E4A63 */
  font-weight: 600;
  opacity: 1;
}

.site-branding .site-title {
  color: var(--global-palette1) !important; /* Teal #0E4A63 */
}

.site-branding .site-title a,
.site-branding .site-title a:hover,
.site-branding .site-title a:visited {
  color: var(--global-palette1) !important;
}

/* END TAGLINE CONTRAST FIX */
/* ═══════════════════════════════════════════════════════════════════ */
/* HEADER & FOOTER MENU STYLING                                         */
/* ═══════════════════════════════════════════════════════════════════ */
/* Menü-Typografie */
.header-navigation .menu > li > a,
.primary-menu-container > ul > li > a {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #0E4A63;
  transition: color 0.2s ease;
}

.header-navigation .menu > li > a:hover,
.primary-menu-container > ul > li > a:hover {
  color: #0E4A63;
}

.header-navigation .menu > li.current-menu-item > a,
.header-navigation .menu > li.current_page_item > a,
.primary-menu-container > ul > li.current-menu-item > a {
  color: #A07440;
}

/* Kontakt-Button im Menü hervorheben */
.primary-menu-container li.menu-button > a,
.header-navigation li.menu-button > a,
.main-navigation li.menu-button > a {
  background-color: #A07440;
  color: #0E4A63 !important;
  padding: 10px 22px !important;
  border-radius: 2px;
  margin-left: 16px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.primary-menu-container li.menu-button > a:hover,
.header-navigation li.menu-button > a:hover,
.main-navigation li.menu-button > a:hover {
  background-color: #0E4A63;
  color: #FFFFFF !important;
}

/* Footer Hover-Effekte für Social Icons */
.site-footer a[aria-label]:hover {
  background-color: #A07440;
  border-color: #A07440 !important;
  color: #0E4A63 !important;
  transform: translateY(-2px);
}

/* Footer Links Hover */
.site-footer a:not([aria-label]):hover {
  color: #A07440 !important;
  transition: color 0.2s ease;
}

/* Footer Widget-Ãœberschriften */
.site-footer .widget-title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #A07440 !important;
  margin-bottom: 16px;
}

/* Footer Mobile Fallback */
@media (max-width: 768px) {
	.site-footer-wrap .footer-widget-area {
	    grid-template-columns: 1fr !important;
	    gap: 40px !important;
	  }

	.site-footer-wrap .site-bottom-bar-wrap {
	    flex-direction: column !important;
	    text-align: center !important;
	    gap: 12px !important;
	  }
}

/* END HEADER & FOOTER MENU STYLING */
/* ========== Language Switcher (Flag Icons) ========== */
.main-navigation .primary-menu-container li.lang-switch {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

.main-navigation .primary-menu-container li.lang-de {
  margin-left: 24px;
  padding-left: 16px;
  border-left: 1px solid rgba(13,59,74,0.18);
}

.main-navigation .primary-menu-container li.lang-switch > a {
  font-size: 0 !important;
  width: 20px;
  height: 14px;
  padding: 0 !important;
  border-radius: 2px;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(13,59,74,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
  text-indent: -9999px;
  line-height: 14px;
}

.main-navigation .primary-menu-container li.lang-switch > a:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(13,59,74,0.35), 0 2px 4px rgba(13,59,74,0.15);
}

.main-navigation .primary-menu-container li.lang-de > a {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='1' y='0' fill='%23000'/%3E%3Crect width='5' height='1' y='1' fill='%23DD0000'/%3E%3Crect width='5' height='1' y='2' fill='%23FFCE00'/%3E%3C/svg%3E") !important;
}

.main-navigation .primary-menu-container li.lang-us > a {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'%3E%3Crect width='19' height='10' fill='%23bf0a30'/%3E%3Crect width='19' height='0.77' y='0.77' fill='white'/%3E%3Crect width='19' height='0.77' y='2.31' fill='white'/%3E%3Crect width='19' height='0.77' y='3.85' fill='white'/%3E%3Crect width='19' height='0.77' y='5.38' fill='white'/%3E%3Crect width='19' height='0.77' y='6.92' fill='white'/%3E%3Crect width='19' height='0.77' y='8.46' fill='white'/%3E%3Crect width='7.6' height='5.38' fill='%23002868'/%3E%3C/svg%3E") !important;
}

.main-navigation .primary-menu-container li.lang-switch > a::after,
.main-navigation .primary-menu-container li.lang-switch > a::before { display: none !important; }

/* Mobile menu: flag inline with label */
@media (max-width: 1024px) {
	.mobile-navigation li.lang-switch > a {
	    display: inline-flex;
	    align-items: center;
	    gap: 10px;
	  }

	.mobile-navigation li.lang-switch > a::before {
	    content: '';
	    display: inline-block;
	    width: 20px;
	    height: 14px;
	    border-radius: 2px;
	    background-size: cover;
	    background-position: center;
	    flex-shrink: 0;
	  }

	.mobile-navigation li.lang-de > a::before { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='1' y='0' fill='%23000'/%3E%3Crect width='5' height='1' y='1' fill='%23DD0000'/%3E%3Crect width='5' height='1' y='2' fill='%23FFCE00'/%3E%3C/svg%3E"); }

	.mobile-navigation li.lang-us > a::before { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'%3E%3Crect width='19' height='10' fill='%23bf0a30'/%3E%3Crect width='19' height='0.77' y='0.77' fill='white'/%3E%3Crect width='19' height='0.77' y='2.31' fill='white'/%3E%3Crect width='19' height='0.77' y='3.85' fill='white'/%3E%3Crect width='19' height='0.77' y='5.38' fill='white'/%3E%3Crect width='19' height='0.77' y='6.92' fill='white'/%3E%3Crect width='19' height='0.77' y='8.46' fill='white'/%3E%3Crect width='7.6' height='5.38' fill='%23002868'/%3E%3C/svg%3E"); }
}

/* ========== End Language Switcher ========== */
/* =========================================================================
   14. ACCESSIBILITY / COMPAT — Reduced Motion
   Respektiert System-Einstellung "Bewegung reduzieren" (macOS, iOS, Win, FF/Chrome/Edge/Safari)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
	    animation-duration: 0.01ms !important;
	    animation-iteration-count: 1 !important;
	    transition-duration: 0.01ms !important;
	  }
}

/* =========================================================================
   15. HOMEPAGE — kompakterer Abstand zwischen Header und Hero
   (nur Startseite; andere Seiten behalten ihren Abstand)
   ========================================================================= */
.home .content-area { margin-top: 0; }

.home .entry-content-wrap { padding-top: 0; }

/* =========================================================================
   16. BUTTON-TEXTKONTRAST — helle Schrift auf den Teal-Buttons (WCAG)
   ========================================================================= */
.wp-block-button__link,
.wp-block-kadence-advancedbtn .kb-button.kb-btn-global-fill,
button.kb-button { color: var(--color-cream-light, #FFFFFF); }