/* =====================================================================
   Custom-Design für Cassiopeia – aziendapedretti.ch (Azienda Pedretti / Viano)
   Joomla 6.1.3 · zum Hochladen als:
   templates/cassiopeia/css/user.css
   ---------------------------------------------------------------------
   Diese Datei wird von Cassiopeia AUTOMATISCH geladen, wenn sie
   "user.css" heisst und im css-Ordner des Templates liegt.
   Sie überschreibt nichts fest – du kannst sie jederzeit anpassen
   oder wieder entfernen. Alle Farben lassen sich oben zentral ändern.

   FARBEN: abgestimmt auf das Logo "AZIENDA PEDRETTI"
   (Oliv-/Salbeigrün #8E8F5A, aus Logo + DB-Konfiguration bestätigt).
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. FARBEN & GRUNDWERTE – hier alles zentral anpassbar               */
/* ------------------------------------------------------------------ */
:root {
  /* Corporate-Farbwelt Azienda Pedretti (exakt aus Logo gemessen: #8F8F5B) */
  --v-primary:        #8f8f5b;   /* Logo-Oliv – Hauptfarbe (exakt wie Logo) */
  --v-primary-dark:   #6f7043;   /* dunkleres Oliv für Hover/Footer */
  --v-accent:         #a7a86e;   /* helleres Oliv – Akzent */
  --v-earth:          #7c6a4a;   /* warmer Erd-/Holzton (botan. Motiv) */
  --v-bg:             #f6f5ee;   /* warmer heller Hintergrund (Naturpapier) */
  --v-surface:        #ffffff;   /* Karten/Boxen */
  --v-text:           #2f2f28;   /* Fliesstext (warmes Dunkelgrau) */
  --v-text-muted:     #6b6c58;   /* gedämpfter Text (oliv-grau) */
  --v-border:         #e4e3d6;   /* dezente Linien */

  /* Typografie */
  --v-font-base: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --v-font-head: "Segoe UI Semibold", Georgia, "Times New Roman", serif;

  /* Form */
  --v-radius: 12px;
  --v-radius-sm: 8px;
  --v-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  --v-shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
  --v-maxwidth: 1140px;

  /* ----------------------------------------------------------------
     CASSIOPEIA-EIGENE FARBVARIABLEN ÜBERSCHREIBEN
     Cassiopeia faerbt Header/Navigation/Links ueber seine eigenen
     Variablen (Standard = Blau). Diese hier auf euer Oliv umbiegen,
     damit auch der OBERE Bereich (Kopf/Menue) gruen wird.
     ---------------------------------------------------------------- */
  --cassiopeia-color-primary:       #8f8f5b;  /* Hauptfarbe (exakt wie Logo) */
  --cassiopeia-color-hover:         #6f7043;  /* Hover */
  --cassiopeia-color-link:          #6f7043;  /* Links */
  --cassiopeia-color-link-hover:    #8f8f5b;
  --cassiopeia-color-primary-rgb:   143, 143, 91;

  /* Bootstrap-Variablen, die Cassiopeia ebenfalls nutzt */
  --bs-primary:      #8f8f5b;
  --bs-primary-rgb:  143, 143, 91;
  --bs-link-color:   #6f7043;
  --bs-link-color-rgb: 111, 112, 67;
  --bs-link-hover-color: #8f8f5b;
}

/* ------------------------------------------------------------------ */
/* 2. GRUNDLAYOUT & TYPOGRAFIE                                          */
/* ------------------------------------------------------------------ */
body {
  font-family: var(--v-font-base);
  color: var(--v-text);
  background-color: var(--v-bg);
  line-height: 1.65;
  font-size: 1.02rem;
}

.container,
.container-fluid > .row,
main .container {
  max-width: var(--v-maxwidth);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--v-font-head);
  color: var(--v-primary-dark);
  line-height: 1.25;
  letter-spacing: .2px;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .5em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

a {
  color: var(--v-accent);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--v-primary); text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* 3. KOPFBEREICH / NAVIGATION                                         */
/* ------------------------------------------------------------------ */
.header,
.grid-child.header {
  background: var(--v-surface);
  box-shadow: var(--v-shadow-sm);
  padding-block: .5rem;
}

/* Cassiopeia-Header: nutzt einen background-image-VERLAUF, der die
   background-color ueberdeckt. Deshalb hier BEIDE ueberschreiben,
   damit der Kopfbereich wirklich oliv wird (nicht mehr blau). */
.container-header,
header.container-header,
.header .container-header {
  /* Einfarbig exakt in Logo-Oliv, damit Header und Logo-Kasten identisch
     wirken (kein Verlauf mehr -> kein sichtbarer Farbunterschied). */
  background-color: #8f8f5b !important;
  background-image: none !important;
  color: #fff;
}
.container-header a,
.container-banner a,
div.banner a { color: #fff; }

/* Blaue Standard-Navigationsleiste (Cassiopeia Metismenu) -> Oliv */
.navbar,
.navbar-expand-lg,
.container-nav {
  background-color: transparent;
}
ul.mod-menu.metismenu > li.active > a,
ul.mod-menu.metismenu > li > a:hover {
  background: var(--v-primary) !important;
  color: #fff !important;
}

.navbar,
.navbar-nav {
  gap: .25rem;
}

/* Menüpunkte moderner */
.navbar-nav .nav-item .nav-link,
ul.mod-menu .nav-link {
  color: var(--v-text) !important;
  font-weight: 600;
  padding: .55rem .9rem;
  border-radius: var(--v-radius-sm);
  transition: background-color .15s ease, color .15s ease;
}
.navbar-nav .nav-item .nav-link:hover,
ul.mod-menu .nav-link:hover,
ul.mod-menu .current > .nav-link {
  background: var(--v-primary);
  color: #fff !important;
  text-decoration: none;
}

/* Logo/Titel */
.site-title,
.brand a {
  font-family: var(--v-font-head);
  color: var(--v-primary-dark);
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* 4. HERO / WILLKOMMENSBEREICH                                         */
/*    Greift auf die Startseiten-Begrüssung zu (Modul/Beitrag).        */
/*    Tipp: Beitrag/Modul die Klasse "viano-hero" geben.               */
/* ------------------------------------------------------------------ */
.viano-hero {
  position: relative;
  background: linear-gradient(135deg, var(--v-primary) 0%, var(--v-accent) 100%);
  color: #fff;
  border-radius: var(--v-radius);
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.2rem, 5vw, 3rem);
  text-align: center;
  box-shadow: var(--v-shadow);
  margin-block: 1.5rem;
  overflow: hidden;
}
.viano-hero h1,
.viano-hero h2,
.viano-hero p {
  color: #fff;
  position: relative;
  z-index: 1;
}
.viano-hero p { font-size: 1.15rem; opacity: .95; }

/* Optional: Hintergrundbild in den Hero legen
   (Bildpfad anpassen und Zeilen einkommentieren) */
/*
.viano-hero {
  background-image: linear-gradient(rgba(35,79,59,.55), rgba(74,144,184,.55)),
                    url("../images/viano-panorama.jpg");
  background-size: cover;
  background-position: center;
}
*/

/* ------------------------------------------------------------------ */
/* 5. INHALTE / ARTIKEL                                                */
/* ------------------------------------------------------------------ */
.com-content-article,
.item-page,
article {
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius);
  padding: clamp(1.2rem, 3vw, 2.2rem);
  box-shadow: var(--v-shadow-sm);
  margin-block: 1.2rem;
}

/* Breadcrumbs dezenter */
.breadcrumb {
  background: transparent;
  font-size: .9rem;
  color: var(--v-text-muted);
  padding-left: 0;
}
.breadcrumb a { color: var(--v-text-muted); }
.breadcrumb a:hover { color: var(--v-primary); }

/* ------------------------------------------------------------------ */
/* 6. BUTTONS                                                          */
/* ------------------------------------------------------------------ */
.btn,
.btn-primary,
button[type="submit"] {
  border-radius: 999px;
  padding: .6rem 1.4rem;
  font-weight: 600;
  border: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.btn-primary,
button[type="submit"] {
  background: var(--v-primary);
  color: #fff;
}
.btn-primary:hover,
button[type="submit"]:hover {
  background: var(--v-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--v-shadow-sm);
}
.btn-secondary {
  background: var(--v-earth);
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* 7. BILDERGALERIE (Phoca Gallery / Simple Image Gallery)             */
/*    Sorgt für gleichmässiges, modernes Raster mit Hover-Zoom.        */
/* ------------------------------------------------------------------ */
.pg-images,
.sige_thumb_wrapper,
.viano-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .9rem;
  margin-block: 1.2rem;
}
.pg-images a,
.sige_thumb_wrapper a,
.viano-gallery a {
  display: block;
  overflow: hidden;
  border-radius: var(--v-radius-sm);
  box-shadow: var(--v-shadow-sm);
}
.pg-images img,
.sige_thumb_wrapper img,
.viano-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform .3s ease;
  display: block;
}
.pg-images a:hover img,
.sige_thumb_wrapper a:hover img,
.viano-gallery a:hover img {
  transform: scale(1.06);
}

/* ------------------------------------------------------------------ */
/* 7b. SEITENLEISTE RECHTS – Partner-/Zertifizierungs-Logos           */
/*     (Bio Suisse, Natura-Beef, Valposchiavo ...)                    */
/*     Vereinheitlicht Groesse, Abstaende und gibt jedem Logo eine    */
/*     dezente weisse Karte. Greift auf Bilder in sidebar-right.      */
/* ------------------------------------------------------------------ */
/* Partner-/Zertifizierungs-Logos = Joomla-BANNER (mod_banners).
   HTML: div.mod-banners__item.banneritem > a > img
   Vereinheitlicht Groesse + gibt jedem Logo eine dezente weisse Karte.
   Trifft NUR Banner, nicht Logo/Header/Artikelbilder. */
.mod-banners__item {
  background: #fff;
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  padding: .9rem;
  margin: 0 0 .8rem 0;
  text-align: center;
  box-shadow: var(--v-shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mod-banners__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--v-shadow);
}
.mod-banners__item a { display: inline-block; line-height: 0; }
.mod-banners__item img {
  width: auto;
  max-width: 100%;
  max-height: 80px;      /* einheitliche Hoehe -> ruhiges Bild */
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  display: inline-block;
}

/* ------------------------------------------------------------------ */
/* 8. FORMULARE (Kontakt / Gästebuch)                                  */
/* ------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select,
.form-control {
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-sm);
  padding: .65rem .85rem;
  background: #fff;
  color: var(--v-text);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
  max-width: 100%;
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  outline: none;
  border-color: var(--v-accent);
  box-shadow: 0 0 0 3px rgba(74, 144, 184, .18);
}
label { font-weight: 600; color: var(--v-text-muted); margin-bottom: .25rem; }

/* ------------------------------------------------------------------ */
/* 9. GÄSTEBUCH-EINTRÄGE (generisch, greift bei vielen Extensions)     */
/* ------------------------------------------------------------------ */
.easyguestbook-entry,
.guestbook-entry,
.viano-guestbook-entry {
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-left: 4px solid var(--v-accent);
  border-radius: var(--v-radius-sm);
  padding: 1rem 1.2rem;
  margin-block: .8rem;
  box-shadow: var(--v-shadow-sm);
}
.easyguestbook-entry .author,
.guestbook-entry .author {
  font-weight: 700;
  color: var(--v-primary-dark);
}

/* ------------------------------------------------------------------ */
/* 10. SPRACHUMSCHALTER (Variante A: Flaggen, aktive Sprache = Oliv)   */
/*    HTML-Struktur (Joomla 6):                                        */
/*      ul.mod-languages__list > li[.lang-active] > a > img            */
/* ------------------------------------------------------------------ */
.mod-languages__list {
  display: flex;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
}
.mod-languages__list li { margin: 0; }

/* WICHTIG: Das Joomla-Sprachmodul (media/mod_languages/css/template.css)
   faerbt das aktive <li> eckig grau:
       div.mod-languages ul li.lang-active { background-color:#f0f0f0 }
   Das ist das "eckige Viereck". Hier neutralisieren wir es und setzen
   stattdessen den runden Oliv-Look direkt auf das <li>. */
div.mod-languages ul li.lang-active,
.mod-languages__list li.lang-active {
  background-color: transparent !important;
  background: transparent !important;
}

/* Der Link ist der runde "Button" um die Flagge. */
div.mod-languages .mod-languages__list a,
.mod-languages__list a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;   /* kein Viereck-Rahmen */
  background: transparent !important;          /* kein weisser Kasten */
  text-decoration: none !important;
  line-height: 0;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}

/* Flaggen einheitlich rund & gleich gross. */
.mod-languages__list img {
  width: 22px !important;
  height: 22px !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  vertical-align: middle;
}

/* AKTIVE Sprache: runder, dunkler Oliv-Kreis mit weissem Ring.
   Hohe Spezifitaet (div.mod-languages ul ...), damit die graue
   Modul-Regel sicher ueberschrieben wird. */
div.mod-languages ul li.lang-active a,
div.mod-languages .mod-languages__list li.lang-active a,
.mod-languages__list li.lang-active a {
  background: var(--v-primary-dark) !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* INAKTIVE Sprache: dezent, leicht gedimmt, wird beim Hover lebendig. */
.mod-languages__list li:not(.lang-active) a { opacity: .8; }
.mod-languages__list li:not(.lang-active) a:hover {
  opacity: 1;
  border-color: rgba(255,255,255,.7);
  transform: scale(1.1);
}

/* ------------------------------------------------------------------ */
/* 11. FUSSZEILE                                                       */
/* ------------------------------------------------------------------ */
.footer,
.container-footer {
  background: var(--v-primary-dark);
  color: #e9efe9;
  padding-block: 1.8rem;
  margin-top: 2.5rem;
}
.footer a,
.container-footer a { color: #cfe3d6; }
.footer a:hover { color: #fff; }

/* ------------------------------------------------------------------ */
/* 12. RESPONSIVE FEINSCHLIFF (Mobile)                                 */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  body { font-size: 1rem; }
  .viano-hero { padding: 2rem 1.2rem; margin-inline: .5rem; }
  .navbar-nav .nav-item .nav-link { padding: .5rem .75rem; }
  .pg-images,
  .sige_thumb_wrapper,
  .viano-gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* Sanftes Scrollverhalten & Bild-Grundstil */
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }