/* =====================================================================
   Design gastroexpert.de - Designschema der WAWI (~/DESIGN-WAWI.md)
   24.09.2026. Halid: "Pass das Design fuer gastroexpert.de genauso an
   wie fuer 24. Schoen und ordentlich."
   Abgeleitet aus mu-plugins/ge-design-shop.css von Shop 24 (Abschnitt 12),
   ohne die Teile fuer Warenkorb und Kasse - hier gibt es keinen Laden.
   Die Grundfarben stehen zusaetzlich in den Theme-Einstellungen.
   ===================================================================== */

body {
  --ge-blau: #1f5f9e;
  --ge-blau-dunkel: #17497a;
  --ge-blau-hell: #eef4fa;
  --ge-rand: #e1e5ea;
  --ge-linie: #edf0f3;
  --ge-text: #23303f;
  --ge-grau: #5a6472;
  --ge-rundung: 8px;
  --ge-verlauf-blau: linear-gradient(135deg, #3a82c9 0%, #1f5f9e 55%, #17497a 100%);
  --ge-verlauf-blau-hover: linear-gradient(135deg, #2f75b8 0%, #17497a 60%, #123a61 100%);
  --ge-verlauf-zart: linear-gradient(180deg, #eef4fa 0%, #f8fbfd 100%);
}

/* --- 1. EIN BLAU ---------------------------------------------------- */
body .header-main,
body .header-bg-color,
body .header-wrapper .header-bg-container .header-bg-color {
  background: var(--ge-verlauf-blau) !important;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body .heading-font { color: var(--ge-blau); }
body .dark h1, body .dark h2, body .dark h3, body .dark h4 { color: inherit; }
body a { color: var(--ge-blau); }
body a:hover { color: var(--ge-blau-dunkel); }
body .header-main a, body .nav-dark a, body .dark a,
body .button, body .ge-svc__knopf { color: inherit; }
body .widget a { color: var(--ge-text); }
body .widget a:hover { color: var(--ge-blau); }
body .icon-box .icon-inner, body .icon-box svg { color: var(--ge-blau); }

body .button.primary:not(.is-outline),
body .button.secondary:not(.is-outline),
body .button.alt:not(.is-outline),
body button[type="submit"].button,
body input[type="submit"].button,
body .wpcf7 input[type="submit"],
body .submit-button,
body .ge-svc__knopf--blau {
  background: var(--ge-verlauf-blau) !important;
  border-color: var(--ge-blau) !important;
  color: #fff !important;
}
body .button.primary:not(.is-outline):hover,
body .button.secondary:not(.is-outline):hover,
body .button.alt:not(.is-outline):hover,
body .wpcf7 input[type="submit"]:hover,
body .submit-button:hover,
body .ge-svc__knopf--blau:hover {
  background: var(--ge-verlauf-blau-hover) !important;
  border-color: var(--ge-blau-dunkel) !important;
  filter: none;
}
body .button.is-outline {
  color: var(--ge-blau) !important;
  border-color: var(--ge-blau) !important;
}

/* --- 2. RUNDUNG 8 --------------------------------------------------- */
body .button:not(.circle),
body button:not(.circle):not(.mfp-close):not(.toggle),
body input[type="submit"],
body input[type="text"], body input[type="email"], body input[type="tel"],
body input[type="search"], body input[type="password"], body input[type="number"],
body select, body textarea,
body .ge-svc__knopf,
body .badge-inner { border-radius: var(--ge-rundung) !important; }
body .searchform input[type="search"] { border-radius: var(--ge-rundung) 0 0 var(--ge-rundung) !important; }
body .searchform .submit-button { border-radius: 0 var(--ge-rundung) var(--ge-rundung) 0 !important; }
body .box-image img, body .box-image > div { border-radius: var(--ge-rundung) !important; }

/* --- 3. KARTEN STATT DICKER RAHMEN ---------------------------------- */
body .box-normal,
body .row-box-shadow-3 .col-inner,
body .row-box-shadow-3-hover .col-inner {
  border: 1px solid var(--ge-rand) !important;
  border-radius: var(--ge-rundung) !important;
  background: #fff;
  box-shadow: 0 2px 10px rgba(20, 30, 50, .06) !important;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
body a:hover > .box-normal,
body .box-normal:hover,
body .row-box-shadow-3 .col-inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(31, 95, 158, .16) !important;
}
body .col-inner > .is-border { display: none !important; }
body .box-normal .box-text {
  background: var(--ge-verlauf-zart) !important;
  border-top: 1px solid var(--ge-rand);
}

/* --- 4. MARKEN (Pillen wie Design 2) -------------------------------- */
body .ge-pille {
  display: inline-block; height: 22px; line-height: 22px; padding: 0 10px;
  border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap;
  vertical-align: middle;
}
body .ge-pille-gut { background: #e8f5ec !important; color: #1e7a3c !important; }
body .ge-pille-still { background: #eef1f5 !important; color: #4b5563 !important; }

/* --- 5. RUHIGE TABELLEN --------------------------------------------- */
body table:not(.mytable) {
  border: 1px solid var(--ge-rand);
  border-radius: var(--ge-rundung);
  border-collapse: separate !important;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
}
body table:not(.mytable) th {
  background: #fafbfc; color: var(--ge-grau); font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
body table:not(.mytable) td, body table:not(.mytable) th {
  border: 0 !important; border-bottom: 1px solid var(--ge-linie) !important;
  padding: 10px 12px !important;
}

/* --- 6. DIE ZWEI SHOP-KNOEPFE IM KOPF -------------------------------
   Halid, 24.09.2026: "Shop und Rent werden da verlinkt, aber die sind dort
   nicht im Vordergrund." Vorher zwei grosse gefuellte Knoepfe direkt unter
   dem Logo. Jetzt schlanke Umrissknoepfe - sichtbar, aber ruhig. */
body .header-nav .menu-item > a.button.primary,
body .header-nav .menu-item > a.button.is-shade,
body .header-nav .header-button > a.button,
body .header-button > a.button.primary,
body .header-button > a.button.is-shade {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 30px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: var(--ge-rundung) !important;
  margin: 0 0 0 8px !important;
}
body .header-nav .menu-item > a.button.primary:hover,
body .header-nav .menu-item > a.button.is-shade:hover,
body .header-nav .header-button > a.button:hover,
body .header-button > a.button.primary:hover,
body .header-button > a.button.is-shade:hover {
  background: rgba(255, 255, 255, .16) !important;
  border-color: #fff !important;
}

/* Am Telefon und Tablett rutschen die beiden Knoepfe in die helle untere
   Kopfleiste (.header-bottom-nav). Weiss auf Hellgrau waere unlesbar -
   dort stehen sie in Hausblau auf Weiss. GEMESSEN bei 570 Punkten. */
body .header-bottom-nav .header-button > a.button,
body .header-bottom .header-button > a.button {
  background: #fff !important;
  background-image: none !important;
  border: 1px solid var(--ge-blau) !important;
  color: var(--ge-blau) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 30px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: var(--ge-rundung) !important;
}
body .header-bottom-nav .header-button > a.button:hover,
body .header-bottom .header-button > a.button:hover {
  background: var(--ge-blau) !important;
  color: #fff !important;
}

/* Die Markenleiste im Fuss ist ein Karussell. Seine beiden Pfeile standen
   ausserhalb der Seite (rechter Rand 1316 bei 1280 Punkten) und erzeugten
   einen waagerechten Balken. Sie stehen jetzt innen. GEMESSEN 24.09.2026 */
body .slider .flickity-prev-next-button.next {
  right: 0 !important;
  left: auto !important;
  transform: none !important;
}
body .slider .flickity-prev-next-button.previous {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

/* Die Menuepunkte im Kopf standen in #777 Grau auf dem blauen Verlauf - zu dunkel
   (Halid, 24.09.2026: "die einzelnen Menuepunkte viel zu dunkel"). Nur der aktive
   Punkt war weiss. Jetzt alle weiss; das Aufklappmenue bleibt dunkel auf Weiss. */
body .header-main .header-nav-main > li > a,
body .header-main .header-nav-main > li > a.nav-top-link,
body .header-main .header-nav-main > li > a .nav-top-link-text {
  color: #fff !important;
}
body .header-main .header-nav-main > li > a:hover,
body .header-main .header-nav-main > li.active > a { color: #fff !important; }
body .header-main .header-nav-main > li:not(.active) > a:hover { opacity: .82; }
body .header-main .header-nav-main > li.active > a { text-decoration: none; }
/* Das aufgeklappte Untermenue steht auf Weiss - dort Hausblau, nicht Weiss. */
body .header-main .nav-dropdown a,
body .nav-dropdown-default .nav-dropdown a { color: var(--ge-text) !important; }
body .header-main .nav-dropdown a:hover,
body .nav-dropdown-default .nav-dropdown a:hover { color: var(--ge-blau) !important; }