/**
 * FS Öffnungszeiten & Status – Plugin-Stylesheet.
 * Wird geladen, wenn das Widget auf der Seite ist.
 *
 * FARBEN passen sich automatisch an die Fläche an: Basis ist currentColor
 * (die geerbte Textfarbe). Auf heller Fläche -> dunkle Schrift, auf dunkler
 * Fläche -> weiße Schrift. Über das Control "Farbschema" auch erzwingbar:
 *   .fs-oh--light  = helle Fläche (dunkle Schrift)
 *   .fs-oh--dark   = dunkle Fläche (helle Schrift)
 * Marken-/Statusfarben laufen über --fp-accent bzw. --fp-status-open.
 */

:root{
  --fp-status-open: #00d084; /* Farbe für den GEÖFFNET-Status (nicht die Marke) */
}

/* Widget stapelt seine Teile selbst (Badge -> Subline -> Tabelle) */
.fs-oh{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fs-oh > .fs-opening-table{ width: 100%; }

/* Farbschema erzwingen (setzt currentColor für alles darunter) */
.fs-oh--light{ color: var(--fp-text, #14121a); }
.fs-oh--dark{ color: #ffffff; }

/* Bekannt dunkle Kontexte (Footer, dunkle Sektionen/Verläufe): Standard =
   weiße Schrift – auch ohne gesetztes Farbschema. Fängt Fälle ab, in denen
   der Container keine helle Umgebungsfarbe vererbt (z. B. Footer). */
.elementor-location-footer .fs-oh--auto,
.elementor-location-footer .fs-opening-table,
.fp-dark-gradient .fs-oh--auto,
.fp-footer-gradient .fs-oh--auto,
.fp-bg-dark .fs-oh--auto,
.dark-section .fs-oh--auto{
  color: var(--fp-text-invert, #fff);
}
/* Explizit "Helle Fläche" gewinnt weiterhin */
.elementor-location-footer .fs-oh--light,
.fp-dark-gradient .fs-oh--light,
.fp-footer-gradient .fs-oh--light,
.fp-bg-dark .fs-oh--light,
.dark-section .fs-oh--light{
  color: var(--fp-text, #14121a);
}

/* =========================================
   Footer-Aufklapper
========================================= */
.fs-hours-content{ max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.fs-hours-toggle.is-open .fs-hours-content{ max-height: 500px; }
.fs-hours-trigger{
  color: var(--fp-accent);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fs-hours-trigger::after{ content: "→"; transition: transform 0.2s ease; }
.fs-hours-toggle.is-open .fs-hours-trigger::after{ transform: rotate(90deg); }

/* =========================================
   Öffnungszeiten-Tabelle – Basis
========================================= */
.fs-opening-table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 4px;
  background: transparent !important;
}
.fs-opening-table,
.fs-opening-table tbody,
.fs-opening-table tr,
.fs-opening-table td{
  border: none !important;
  background-image: none !important;
  box-shadow: none !important;
}
.fs-opening-table tr,
.fs-opening-table tr:nth-child(odd),
.fs-opening-table tr:nth-child(even),
.fs-opening-table tr:nth-child(odd) td,
.fs-opening-table tr:nth-child(even) td{
  background: transparent !important;
}
.fs-opening-table tr{ transition: background .2s ease; }

/* Zellen – Textfarbe folgt der Fläche (currentColor) */
.fs-opening-table td{
  padding: 8px 12px !important;
  color: currentColor !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  vertical-align: middle;
  background: transparent !important;
}
.fs-opening-table td:first-child{
  text-align: left;
  font-weight: 500;
  width: 42%;
}
.fs-opening-table td:last-child{
  text-align: right;
  font-weight: 400;
  white-space: nowrap;
}
.fs-opening-table td:last-child br{ line-height: 1.1; }

.fs-opening-table tr:hover td{ background: transparent !important; }

/* Heute-Zeile */
.fs-opening-table tr.is-today td{
  background: color-mix(in srgb, currentColor 7%, transparent) !important;
}
.fs-opening-table tr.is-today:hover td{
  background: color-mix(in srgb, currentColor 10%, transparent) !important;
}
.fs-opening-table tr.is-today td:first-child{ border-radius: 10px 0 0 10px; vertical-align: top; }
.fs-opening-table tr.is-today td:last-child{ border-radius: 0 10px 10px 0; }

/* HEUTE-Badge (Akzentfarbe) */
.fs-opening-table tr.is-today td:first-child::before{
  content: "HEUTE";
  display: block;
  width: fit-content;
  margin-bottom: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--fp-accent);
  color: var(--fp-text-on-brand, #fff);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
}

/* Footer-Variante (mit Rahmen) – Rahmen folgt der Fläche */
.fs-opening-table.fs-opening-table-footer{ border-spacing: 0 4px !important; }
.fs-opening-table.fs-opening-table-footer td{
  padding: 10px 16px !important;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
}
.fs-opening-table.fs-opening-table-footer td:first-child{
  border-left: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
  border-radius: 10px 0 0 10px !important;
}
.fs-opening-table.fs-opening-table-footer td:last-child{
  border-right: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
  border-radius: 0 10px 10px 0 !important;
}
.fs-opening-table.fs-opening-table-footer tr:hover td{
  background: color-mix(in srgb, currentColor 5%, transparent) !important;
}
.fs-opening-table.fs-opening-table-footer tr:hover td:first-child{ border-radius: 10px 0 0 10px !important; }
.fs-opening-table.fs-opening-table-footer tr:hover td:last-child{ border-radius: 0 10px 10px 0 !important; }
.fs-opening-table.fs-opening-table-footer tr.is-today td{
  background: color-mix(in srgb, currentColor 8%, transparent) !important;
  border-color: color-mix(in srgb, currentColor 22%, transparent) !important;
}

/* Mobile Tagesnamen: Montag -> Mo. (responsive, ohne horizontales Scrollen) */
.fs-day-short{ display: none; }
@media (max-width: 767px){
  .fs-day-full{ display: none; }
  .fs-day-short{ display: inline; }
  .fs-opening-table td:first-child{ width: 46px; }
  .fs-opening-table td{ padding: 10px 10px !important; font-size: 15px; }
  .fs-opening-table td:last-child{ white-space: nowrap; }
}

.fs-opening-note{
  margin-top: 0;
  color: color-mix(in srgb, currentColor 80%, transparent);
  font-size: 14px;
  line-height: 1.5;
}

/* =========================================
   Öffnungsstatus / Badge
========================================= */
.fs-status-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
/* Geöffnet = grün (Status-Token) */
.fs-status-badge.is-open{
  color: var(--fp-status-open);
  background: color-mix(in srgb, var(--fp-status-open) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fp-status-open) 38%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--fp-status-open) 12%, transparent);
}
/* Geschlossen = neutral, folgt der Fläche */
.fs-status-badge.is-closed{
  color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  box-shadow: none;
}
.fs-status-subline{
  margin: 0; /* Abstand kommt aus dem .fs-oh gap */
  font-size: 15px;
  line-height: 1.45;
  color: color-mix(in srgb, currentColor 82%, transparent);
}

/* =========================================
   Standort-Umschalter (Dropdown + Panels)
========================================= */
.fs-oh--switcher{ gap: 16px; }
.fs-oh-panel{ display: flex; flex-direction: column; gap: 12px; }
.fs-oh-panel[hidden]{ display: none !important; }

/* Stylishes Dropdown (natives Select, folgt der Fläche) */
.fs-oh-switch{ position: relative; width: 100%; max-width: 320px; }
.fs-oh-switch-select{
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%;
  padding: 12px 44px 12px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: currentColor;
  font-size: 15px; font-weight: 700; line-height: 1.2;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fs-oh-switch-select:hover{ border-color: color-mix(in srgb, var(--fp-accent) 55%, transparent); }
.fs-oh-switch-select:focus-visible{
  outline: none;
  border-color: var(--fp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-accent) 25%, transparent);
}
.fs-oh-switch-select option{ color: #14121a; } /* native Liste ist hell */
.fs-oh-switch-arrow{
  position: absolute; top: 50%; right: 18px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--fp-accent);
  border-bottom: 2px solid var(--fp-accent);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

/* Adresse / Telefon */
.fs-oh-line{ display: flex; align-items: flex-start; gap: 14px; font-size: 17px; line-height: 1.45; }
.fs-oh-line svg{ width: 26px; height: 26px; color: var(--fp-accent); flex-shrink: 0; margin-top: 1px; }
/* Telefon-Link: Fließtextfarbe fest pinnen, damit die globale Theme-Linkfarbe
   (color: … !important) nicht durchschlägt und je Seite variiert. */
.fs-oh .fs-oh-line a,
.fs-oh .fs-oh-line a:link,
.fs-oh .fs-oh-line a:visited,
.fs-oh .fs-oh-line a:hover,
.fs-oh .fs-oh-line a:focus,
.fs-oh .fs-oh-line a:active,
.fs-oh .fs-oh-line a *{
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: none !important;
}
.fs-oh .fs-oh-line a:hover{ opacity: .7 !important; }

/* Etwas Luft über dem Status-Badge, damit es nicht am Telefon klebt */
.fs-oh-panel .fs-status-badge{ margin-top: 10px; }

/* Route-Button */
.fs-oh-maproute{
  display: inline-flex; align-items: center; justify-content: center;
  width: fit-content; margin-top: 2px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  color: currentColor; font-weight: 700; font-size: 14px; text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.fs-oh-maproute:hover{ border-color: var(--fp-accent); background: color-mix(in srgb, var(--fp-accent) 10%, transparent); }

/* =========================================
   Eyebrow-Headlines im Widget
   ("So findest du uns" / "Öffnungszeiten")
   Nutzen die Theme-Klasse .fp-eyebrow (Font/Farbe/Uppercase) und werden hier
   nur etwas größer gestellt. Größe über --fsoh-eyebrow-scale tunbar.
========================================= */
.fs-oh .fs-oh-eyebrow{
  margin: 0;
  line-height: 1.15;
  font-size: calc(var(--fp-eyebrow-font-size, 1.2em) * var(--fsoh-eyebrow-scale, 1.2)) !important;
}
.fs-oh .fs-oh-eyebrow--hours{ margin-top: 32px !important; }

/* Dark-Kontext: Eyebrow folgt dem Widget-Schema (weiß), wie der restliche Text */
.fs-oh--dark .fs-oh-eyebrow,
.elementor-location-footer .fs-oh--auto .fs-oh-eyebrow,
.fp-dark-gradient .fs-oh--auto .fs-oh-eyebrow,
.fp-footer-gradient .fs-oh--auto .fs-oh-eyebrow,
.fp-bg-dark .fs-oh--auto .fs-oh-eyebrow,
.dark-section .fs-oh--auto .fs-oh-eyebrow{
  color: var(--fp-eyebrow-color-invert, var(--fp-text-invert, #fff)) !important;
}
.fs-oh--light .fs-oh-eyebrow{
  color: var(--fp-eyebrow-color, var(--fp-text, #14121a)) !important;
}

/* =========================================================================
   CONTAINER / LAYOUT (deine Elementor-Boxen)
   Diese Boxen baust du selbst und vergibst die Klassen. Sie liegen bei dir
   auf dunklen Flächen -> Titel/Buttons bleiben hell.
   ========================================================================= */
.fs-opening-status{
  padding: 34px 28px !important;
  display: flex; flex-direction: column;
  justify-content: flex-start !important;
  gap: 16px !important;
}
.fs-opening-status .fs-status-badge{ align-self: flex-start; margin-bottom: 0 !important; }

.fs-location-contact-box{
  padding: 34px 34px !important;
  display: flex; flex-direction: column;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 22px !important;
}
.fs-location-contact-box .fs-box-title{ margin: 0 0 2px 0 !important; color: #fff; font-size: 20px; font-weight: 800; }
.fs-location-contact-box .elementor-icon-list-items{ gap: 20px !important; }
.fs-location-contact-box .elementor-icon-list-item{ display: flex !important; align-items: flex-start !important; flex-wrap: nowrap !important; }
.fs-location-contact-box .elementor-icon-list-icon{ width: 34px !important; margin-right: 18px !important; flex-shrink: 0; }
.fs-location-contact-box .elementor-icon-list-text,
.fs-location-contact-box a{ font-size: 18px !important; line-height: 1.45 !important; }
.fs-location-contact-box .elementor-widget-button{ width: auto !important; display: block !important; align-self: flex-start !important; margin-top: 0 !important; }
.fs-location-contact-box .elementor-button{
  width: 280px !important; max-width: 100% !important; min-width: 0 !important;
  border-radius: 999px !important; padding: 14px 24px !important;
  font-size: clamp(14px, 1.05vw, 17px) !important; font-weight: 800 !important;
  letter-spacing: 0.04em; white-space: nowrap !important; text-align: center !important; justify-content: center !important;
}
.fs-route-button{ margin-top: 8px !important; display: block !important; }

/* Button-Logik nach Öffnungsstatus */
.fs-closed-button{ display: none !important; }
.fs-location-row.is-open .fs-closed-button,
.fs-contact-side.is-open .fs-closed-button{ display: none !important; }
.fs-location-row.is-closed .fs-open-button,
.fs-location-row.is-closed .fs-call-button,
.fs-contact-side.is-closed .fs-open-button,
.fs-contact-side.is-closed .fs-call-button{ display: none !important; }
.fs-location-row.is-closed .fs-closed-button,
.fs-contact-side.is-closed .fs-closed-button{ display: block !important; }
.fs-route-button{ display: block !important; }

@media (max-width: 767px){
  .fs-location-contact-box{ padding: 24px 26px !important; gap: 20px !important; }
  .fs-location-contact-box .elementor-icon-list-items{ gap: 18px !important; }
  .fs-location-contact-box .elementor-icon-list-icon{ width: 28px !important; margin-right: 14px !important; }
  .fs-location-contact-box .elementor-icon-list-text,
  .fs-location-contact-box a{ font-size: 16px !important; line-height: 1.4 !important; }
  .fs-location-contact-box .elementor-button{ width: 240px !important; font-size: 15px !important; padding: 13px 20px !important; }
}

.fs-location-box{
  background: rgba(255,255,255,0.035);
  border: 1px solid color-mix(in srgb, var(--fp-accent) 22%, transparent);
  border-radius: 22px;
  overflow: hidden;
}

/* Standort 3er-Block – responsive */
@media (min-width: 1400px){
  .fs-location-row{ display: grid !important; grid-template-columns: minmax(340px, 1fr) minmax(520px, 1.35fr) minmax(340px, 1fr); gap: 28px; align-items: stretch; }
  .fs-opening-status{ order: 1; justify-content: center !important; }
  .fs-location-image-box{ order: 2; }
  .fs-location-contact-box{ order: 3; justify-content: center !important; }
  .fs-location-image-box img{ width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 1025px) and (max-width: 1399px){
  .fs-location-row{ display: grid !important; grid-template-columns: 1fr 1.15fr 1fr; gap: 24px; align-items: stretch; }
  .fs-opening-status{ order: 1; justify-content: center !important; }
  .fs-location-image-box{ order: 2; }
  .fs-location-contact-box{ order: 3; justify-content: center !important; }
  .fs-location-image-box img{ width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 1024px){
  .fs-location-row{ display: flex !important; flex-direction: column !important; gap: 24px; }
  .fs-location-box{ width: 100% !important; }
  .fs-location-image-box{ order: 1; }
  .fs-opening-status{ order: 2; }
  .fs-location-contact-box{ order: 3; }
}
@media (max-width: 1280px) and (min-width: 768px){
  .fs-location-row{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px !important; align-items: stretch; }
  .fs-location-image-box{ grid-column: 1 / -1; order: 1; }
  .fs-opening-status{ order: 2; }
  .fs-location-contact-box{ order: 3; }
  .fs-location-image-box img{ width: 100%; height: 420px; object-fit: cover; }
  .fs-location-contact-box{ justify-content: center !important; }
  .fs-location-contact-box .elementor-icon-list-text,
  .fs-location-contact-box a{ word-break: keep-all; }
}
.fs-location-contact-box{ justify-content: flex-start !important; }

/* =========================================
   Conversion-Box (kompakt)
========================================= */
.fs-oh--conversion .fs-oh-panel--conversion{ gap: 14px; }
/* Badge steht hier oben im Panel -> kein Zusatzabstand nach oben */
.fs-oh-panel--conversion .fs-status-badge{ margin-top: 0; }

.fs-oh-intro{
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: color-mix(in srgb, currentColor 88%, transparent);
}

/* Primär-CTA "Jetzt anrufen" – gefüllt in Akzentfarbe (hebt sich vom Outline-Route-Button ab) */
.fs-oh-cta{
  display: inline-flex; align-items: center; justify-content: center;
  width: fit-content; gap: 8px; margin-top: 2px;
  padding: 12px 24px; border-radius: 999px;
  background: var(--fp-accent); color: var(--fp-text);
  font-weight: 800; font-size: 15px; letter-spacing: .02em;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
}
/* Farben fest pinnen, damit die globale Theme-Linkfarbe (!important) den Button
   nicht umfärbt. Dunkler Text, weil die Akzentfläche hell ist -> gut lesbar. */
.fs-oh .fs-oh-cta,
.fs-oh .fs-oh-cta:hover,
.fs-oh .fs-oh-cta:focus,
.fs-oh .fs-oh-cta:active{
  background: var(--fp-accent) !important;
  background-image: none !important;
  color: var(--fp-text) !important;
  -webkit-text-fill-color: var(--fp-text) !important;
  text-decoration: none !important;
}
.fs-oh-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--fp-accent) 30%, transparent);
}

/* Einklappbare Öffnungszeiten – dezenter Text-Link statt Theme-Button.
   Aggressiver Reset mit !important, damit globale Button-Styles des Themes
   (Gradient-Buttons etc.) nicht auf unseren <button> durchschlagen.
   Farbe token-basiert über --fp-accent. */
.fs-oh .fs-hours-trigger,
.fs-oh .fs-hours-trigger:hover,
.fs-oh .fs-hours-trigger:focus,
.fs-oh .fs-hours-trigger:active{
  -webkit-appearance: none !important; appearance: none !important;
  background: none !important; background-image: none !important; background-color: transparent !important;
  border: 0 !important; box-shadow: none !important; outline: none !important;
  padding: 0 !important; margin: 0 !important;
  min-width: 0 !important; max-width: none !important; width: fit-content !important;
  border-radius: 0 !important;
  color: inherit !important;              /* Fließtextfarbe (dunkel/hell adaptiv) statt Akzent */
  -webkit-text-fill-color: currentColor !important;
  font: inherit !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
  display: inline-flex !important;
  align-items: center; gap: 6px;
  cursor: pointer;
}
.fs-oh .fs-hours-trigger,
.fs-oh .fs-hours-trigger:hover,
.fs-oh .fs-hours-trigger:focus{ text-decoration: none !important; }
.fs-oh .fs-hours-trigger:hover{ opacity: .7 !important; }
.fs-hours-toggle.is-open .fs-hours-content{ max-height: 680px; }
.fs-hours-content .fs-opening-table{ margin-top: 12px; }

/* 20px Luft über den Öffnungszeiten in der Conversion-Box (einklappbar oder immer sichtbar) */
.fs-oh-panel--conversion .fs-hours-toggle,
.fs-oh-panel--conversion > .fs-opening-table{ margin-top: 20px; }

/* =========================================================
   Hinweis „keine festen Öffnungszeiten" (seit 1.4.0)
   =========================================================
   Ersetzt Tabelle und Auf/Zu-Status, wenn keine Zeiten gepflegt sind.
   Bewusst ruhig gehalten: Es ist eine Information, kein Werbeblock.
========================================================= */
.fs-oh-nohours {
	display: block;
}

/* Die Ueberschrift gehoert zum Text darunter - deshalb Abstand nach OBEN,
   der sie vom Kontaktblock trennt, und wenig nach unten. */
.fs-oh-nohours__heading {
	margin: 22px 0 6px;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
}

.fs-oh-nohours__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Beide Knoepfe gleich breit: ein Raster mit gleichen Spalten.
   Ist zu wenig Platz, rutschen sie untereinander - dann ueber die volle Breite. */
.fs-oh-nohours__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
	margin-top: 16px;
}

/*
 * SPEZIFITAET MIT ANSAGE.
 *
 * Das Theme setzt   .fs-contact-block a { color: var(--fp-bg-white) !important; }
 * und faerbt damit ALLE Links in diesem Block weiss - sinnvoll fuer dunkle Boxen,
 * hier aber genau der Grund, warum der Telefon-Knopf unsichtbar war.
 * Diese Regel steht mit zwei Klassen (0-2-0) ueber jener mit Klasse plus Element
 * (0-1-1); das !important auf beiden Seiten hebt sich auf, entschieden wird ueber
 * die Spezifitaet.
 */
.fs-oh-nohours .fs-oh-btn,
.fs-oh-nohours .fs-oh-btn:visited,
.fs-oh-nohours a.fs-oh-btn,
.fs-oh-nohours a.fs-oh-btn:visited,
.fs-oh-btn,
.fs-oh-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 12px 16px;
	border-radius: 10px;
	border: 1px solid var(--fp-primary, #e2001a);
	background: transparent;
	/* NICHT inherit: In hellen Boxen erbt der Knopf sonst die weisse Schriftfarbe
	   des umgebenden Bereichs und wird unsichtbar. Genau das ist passiert. */
	color: var(--fp-primary, #e2001a) !important;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
}

.fs-oh-nohours .fs-oh-btn span,
.fs-oh-btn span {
	color: inherit !important;
}

.fs-oh-btn svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	fill: currentColor;
}

/* WhatsApp ist der gewuenschte Hauptweg - deshalb gefuellt, das Telefon nur umrandet. */
.fs-oh-nohours .fs-oh-btn--wa,
.fs-oh-nohours .fs-oh-btn--wa:visited,
.fs-oh-nohours a.fs-oh-btn--wa,
.fs-oh-btn--wa,
.fs-oh-btn--wa:visited {
	background: var(--fp-primary, #25d366) !important;
	border-color: var(--fp-primary, #25d366) !important;
	color: var(--fsoh-wa-text-color, #ffffff) !important;
}

/*
 * HOVER BRAUCHT EIGENE REGELN.
 *
 * Das Theme faerbt Links im Kontaktblock auch beim Zeigen um. Eine Pseudoklasse wie
 * :hover zaehlt bei der Spezifitaet wie eine Klasse - die Theme-Regel liegt damit
 * wieder ueber der normalen Knopf-Regel. Deshalb hier ausdruecklich mit Element und
 * drei Klassen (0-3-1), damit die Farbe beim Zeigen erhalten bleibt.
 */
.fs-oh-nohours a.fs-oh-btn:hover,
.fs-oh-nohours a.fs-oh-btn:focus,
.fs-oh-nohours a.fs-oh-btn:focus-visible,
.fs-oh-nohours a.fs-oh-btn:active,
.fs-oh-nohours .fs-oh-btn:hover,
.fs-oh-nohours .fs-oh-btn:focus-visible {
	color: var(--fp-primary, #e2001a) !important;
	filter: brightness(0.96);
}

.fs-oh-nohours a.fs-oh-btn:hover span,
.fs-oh-nohours a.fs-oh-btn:focus span,
.fs-oh-nohours a.fs-oh-btn:focus-visible span,
.fs-oh-nohours a.fs-oh-btn:active span {
	color: inherit !important;
}

/* WhatsApp bleibt auch beim Zeigen weiss auf farbigem Grund. */
.fs-oh-nohours a.fs-oh-btn--wa:hover,
.fs-oh-nohours a.fs-oh-btn--wa:focus,
.fs-oh-nohours a.fs-oh-btn--wa:focus-visible,
.fs-oh-nohours a.fs-oh-btn--wa:active,
.fs-oh-nohours .fs-oh-btn--wa:hover,
.fs-oh-nohours .fs-oh-btn--wa:focus-visible {
	background: var(--fp-primary, #25d366) !important;
	border-color: var(--fp-primary, #25d366) !important;
	color: var(--fsoh-wa-text-color, #ffffff) !important;
}

/* Der Telefon-Knopf fuellt sich beim Zeigen leicht - so ist die Reaktion sichtbar,
   ohne dass die Schriftfarbe wechselt. */
.fs-oh-nohours a.fs-oh-btn--tel:hover,
.fs-oh-nohours .fs-oh-btn--tel:hover {
	background: color-mix(in srgb, var(--fp-primary, #e2001a) 8%, transparent) !important;
}

.fs-oh-btn:focus-visible {
	outline: 3px solid var(--fp-primary, #e2001a);
	outline-offset: 3px;
}

/* Nur fuer Redakteure sichtbar, siehe fsoh_no_hours_html(). */
.fs-oh-nohours__admin {
	margin: 10px 0 0;
	padding: 10px 12px;
	border: 1px dashed #b32d2e;
	border-radius: 8px;
	font-size: 0.85rem;
	line-height: 1.5;
	color: #b32d2e;
}


/* =========================================================
   Ansprechpartner-Avatar im Kontaktblock (v1.4.7)
========================================================= */
.fs-oh-person{ text-align:center; margin:22px 0 16px; }
.fs-oh-person__img{
	width:120px; height:120px;
	/* !important, weil .elementor img { border-radius:0 } spezifischer ist */
	border-radius:50% !important;
	object-fit:cover;
	display:inline-block;
	border:2px solid var(--fp-primary, #e2001a) !important;
	box-shadow:0 4px 14px rgba(0,0,0,.15);
}
/* Beschriftung: gleiche Groesse wie der Fliesstext (0.95rem), nie groesser */
.fs-oh-person__caption{ margin:.6em 0 0; line-height:1.35; font-size:0.95rem; }
.fs-oh-person__label{ display:block; opacity:.75; }  /* Umbruch: Name in neue Zeile */
.fs-oh-person__name{ font-weight:700; }

/* Inline-Variante: Avatar links neben dem Text, Text vertikal zentriert */
.fs-oh-person--inline{ display:flex; align-items:center; gap:14px; text-align:left; }
.fs-oh-person--inline .fs-oh-person__img{ width:60px; height:60px; }
.fs-oh-person--inline .fs-oh-person__caption{ margin:0; }

/* =========================================================
   WhatsApp-Textfarbe robust erzwingen (v1.5.3)
   Hoehere Spezifitaet als .fs-oh-btn -> unabhaengig von Regel-
   Reihenfolge/CSS-Regenerierung immer weiss (bzw. Widget-Farbe).
========================================================= */
.fs-oh .fs-oh-nohours .fs-oh-btn--wa,
.fs-oh .fs-oh-nohours a.fs-oh-btn--wa,
.fs-oh .fs-oh-nohours .fs-oh-btn--wa span,
.fs-oh .fs-oh-panel .fs-oh-btn--wa,
.fs-oh .fs-oh-panel a.fs-oh-btn--wa,
.fs-oh .fs-oh-panel .fs-oh-btn--wa span {
	color: var(--fsoh-wa-text-color, #ffffff) !important;
}

/* Adresse als Maps-Link (v1.5.4): Adressfarbe beibehalten, Hover = Unterstrich */
.fs-oh-address-link,
.fs-oh-address-link:link,
.fs-oh-address-link:visited { color: inherit !important; text-decoration: none; }
.fs-oh-address-link:hover,
.fs-oh-address-link:focus-visible { text-decoration: underline; }