/* =========================================
   AMGIL GmbH – Global Styles
   Modernisierte Version (2025)
   ========================================= */

/* ---------- Farb- & Schriftdefinitionen ---------- */
:root {
  --color-bg: #041635;              /* Dunkles Nachtblau – Haupt-Hintergrundfarbe der Website, sorgt für ruhigen, professionellen Look */
  --color-accent: #CBB26A;          /* Edles Gold – Haupt-Akzentfarbe für Navigation, Buttons, Linien und wichtige Hervorhebungen */
  --color-accent-hover: #E0C98C;    /* Helles Gold – Hover-/Aktivfarbe, bringt Bewegung und Leichtigkeit ins Design */
  --color-footer-bg: #333;          /* Dunkles Grau – Hintergrundfarbe im Footer, neutraler Kontrast zum Gold */
  --color-footer-text: #fff;        /* Reines Weiss – Textfarbe im Footer, hohe Lesbarkeit auf dunklem Grund */
  --color-content1: #6495ED;        /* Kornblumenblau – kann für Icons, Sekundärlinks oder visuelle Highlights genutzt werden */
  --color-content2: #B0C4DE;        /* Hellblau-Grau – dezente Zwischenfarbe für Hintergründe oder Boxen */
  --color-content3: #4682B4;        /* Stahlblau – kräftigere Variante für Akzente oder Diagrammfarben */
  --font-main: Helvetica, Arial, sans-serif; /* Hauptschriftfamilie – klar, neutral, auf allen Geräten verfügbar */
  --page-gutter: clamp(20px, 4vw, 40px);     /* Dynamischer Seitenabstand – sorgt für gleichmässige Ränder auf Desktop und Mobile */
}


/* ---------- Basislayout ---------- */
html,
body {
  margin: 0;                                 /* Entfernt Standardabstände des Browsers – wichtig für konsistentes Layout */
  padding: 0;                                /* Entfernt Innenabstand des Body – saubere Kanten ohne ungewollten Versatz */
  font-family: var(--font-main);             /* Setzt globale Schriftart gemäss Branding – Helvetica, Arial, sans-serif */
  background-color: var(--color-bg);         /* Legt das dunkle Haupt-Hintergrundblau der Website fest */
  color: var(--color-footer-text);           /* Setzt die Standard-Textfarbe auf weiss – sorgt für hohen Kontrast auf Dunkelblau */
}

#body {
  margin: 0 auto;                            /* Zentriert das Haupt-Layout (wenn eine feste Breite definiert ist) */
  background-color: var(--color-bg);         /* Sicherheitshalber erneut der gleiche dunkle Hintergrund – falls vom Wrapper überschrieben */
}

/* ---------- Header ---------- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px var(--page-gutter);
  background-color: var(--color-bg);
}

.header-logo {
  flex: 0 0 auto;
  margin-right: 20px;
}

.logo {
  max-width: 180px;
  height: auto;
  display: block;
}


.header div {
  padding: 0 25px 20px 0;                     /* Innenabstand innerhalb eines div-Elements im Header (z. B. für Sprachumschalter oder Zusatzinfos) */
  font-weight: bold;                          /* Hebt Text in diesen divs (falls vorhanden) hervor – z. B. „DE“, „EN“ etc. */
}

/* Aktive Seite markieren */
.header a.active,
.header [aria-current="page"] {
  border-bottom: 2px solid var(--color-accent);  /* Unterstreicht aktiven Link mit Gold – visuelle Rückmeldung für Benutzer */
  color: var(--color-accent);                    /* Setzt Schriftfarbe des aktiven Links ebenfalls auf Gold – betont aktuelle Position */
}

/* ---------- Header Navigation: Link-Styling & Hover ---------- */
.header a {
  color: var(--color-accent);              /* Standard-Linkfarbe im Header (Gold) */
  text-decoration: none;                   /* Kein Unterstreichen – wirkt moderner und ruhiger */
  padding: 4px 0;                          /* Etwas vertikaler Abstand für bessere Klickfläche */
  font-weight: 500;                        /* Etwas stärker als normal – bessere Lesbarkeit im Header */
  transition: color 0.2s ease;             /* Sanfter Farbübergang bei Hover – wirkt hochwertig */
}

/* Hover-Effekt (Mausüberfahren), aber kein Fokus-Unterstrich */
.header a:hover {
  color: var(--color-accent-hover);        /* Farbe wechselt auf helleres Gold (Hover-Ton) */
  cursor: pointer;                         /* Mauszeiger zeigt klar: klickbar */
}


/* ---------- Breadcrumb-Navigation ---------- */
.breadcrumbs {
  font-size: 1rem;
  color: var(--color-footer-text);       /* Standard weiss */
  margin: 0 var(--page-gutter);
  padding-top: 10px;
  padding-bottom: 10px;
}

.breadcrumbs a {
  color: var(--color-accent);            /* Gold – CI-konform */
  text-decoration: none;
  font-weight: 500;
}

.breadcrumbs a:hover {
  color: var(--color-accent-hover);      /* Helleres Gold beim Hover */
  text-decoration: underline;
}

.breadcrumbs-separator {
  margin: 0 8px;
  color: var(--color-footer-text);       /* Weiss für › Zeichen */
}


/* ---------- Footer ---------- */
.footer {
  display: flex;                               /* Aktiviert Flexbox für horizontale oder gestapelte Struktur */
  flex-wrap: wrap;                             /* Erlaubt Umbruch bei kleineren Viewports (z. B. auf Mobile) */
  justify-content: flex-start;                 /* Linksbündige Ausrichtung der Footer-Elemente */
  background-color: var(--color-footer-bg);    /* Setzt dunklen Hintergrund (z. B. #333) für klare Abgrenzung vom Content */
  color: var(--color-footer-text);             /* Setzt Textfarbe auf hell (z. B. Weiss) – sorgt für guten Kontrast */
  text-align: left;                            /* Links ausgerichteter Text innerhalb der Spalten */
  padding: 15px 20px;                          /* Innenabstand für Luft innerhalb des Footer-Blocks */
  position: static;                            /* Keine besondere Positionierung – Footer folgt normal im Dokumentfluss */
  width: 100%;                                 /* Deckt gesamte Breite des Viewports ab */
}

/* Footer-Spalten/Blöcke */
.footer div {
  padding-right: 50px;                         /* Abstand zwischen den Spalten/Blöcken im Footer */
  font-weight: bold;                           /* Macht Überschriften/Labels im Footer stärker sichtbar */
}

/* Links im Footer */
.footer a {
  color: var(--color-accent);                  /* Verwendet Gold (#CBB26A) für Links im Footer – lesbar und CI-konform */
  text-decoration: none;                       /* Kein Unterstreichen – reduziert visuelle Unruhe */
  font-weight: 500;                            /* Hebt Links leicht hervor, ohne zu dominant zu wirken */
  transition: color 0.2s ease;                 /* Sanfter Farbübergang bei Hover für moderne UX */
}

.footer a:hover {
  color: var(--color-accent-hover);            /* Wechselt auf helleres Gold beim Überfahren mit Maus */
}


/* ---------- Überschriften & Text ---------- */

/* Hauptüberschrift – z. B. Titel auf der Startseite oder in Sektionen */
h1 {
  padding-top: 10px;                           /* Abstand nach oben – verhindert zu enge Platzierung direkt am vorherigen Element */
  color: var(--color-accent);                  /* Nutzt Gold für visuelle Gewichtung – klare CI-Führung */
  font-size: 2rem;                             /* Gut sichtbare Grösse für Haupttitel, wirkt nicht überdimensioniert */
}

/* Unterüberschrift – z. B. innerhalb von Boxen oder Sektionen */
h2 {
  padding-top: 10px;                           /* Einheitlicher Abstand wie bei h1 */
  color: var(--color-footer-text);             /* Verwendet Weiss – sorgt für Kontrast auf dunklem Hintergrund */
  font-size: 1.5rem;                           /* (Optional ergänzen) – klare visuelle Hierarchie unterhalb von h1 */
  font-weight: 600;                            /* (Optional ergänzen) – wirkt fokussierter als normal */
}

/* Standard-Absatztext */
p {
  font-size: 1.25rem;                          /* Grösser als Browser-Standard (~16px) – angenehm lesbar auf grossen Screens */
  max-width: 765px;                            /* Begrenzte Zeilenbreite – verhindert zu lange Lesestrecken (Typografie-Standard) */
  line-height: 1.5;                            /* Gut lesbare Zeilenhöhe – verhindert visuelle Dichte */
  margin-bottom: 1rem;                         /* (Optional ergänzen) – schafft Luft zwischen Absätzen */
}

/* Kleinere Absätze – z. B. Fussnoten, untergeordnete Hinweise */
p.small {
  font-size: 1rem;                             /* Kleiner als Fliesstext, aber gut lesbar */
  line-height: 1.4;                            /* (Optional ergänzen) – kompaktere Zeilenhöhe */
}

/* Listenpunkte – z. B. in Feature-Listen, Textmodulen */
li {
  font-size: 1.25rem;                          /* Gleiche Grösse wie Fliesstext – wirkt harmonisch */
  line-height: 1.5;                            /* (Optional ergänzen) – für bessere Leserlichkeit bei mehrzeiligen Listeneinträgen */
  margin-bottom: 0.5rem;                       /* (Optional ergänzen) – Abstand zwischen Listenelementen */
}


/* ---------- Content ---------- */

/* Gemeinsame Basis für Titelbereich und Inhaltsbereich */
#content_title,
#content {
  padding-left: var(--page-gutter);           /* Linker Randabstand – dynamisch je nach Bildschirmgrösse */
  padding-right: var(--page-gutter);          /* Rechter Randabstand – gleich wie links für symmetrisches Layout */
  background-repeat: no-repeat;               /* Hintergrundbild wird nicht gekachelt – wird einmal dargestellt */
  color: var(--color-footer-text);            /* Setzt Standardtextfarbe im Bereich auf weiss – gut sichtbar auf dunklen Bildern/Hintergründen */
}

/* Hero-Bereich mit Titel (z. B. Startseite, Unterseiten) */
#content_title {
  background-image: url("images/Berge.png");  /* Setzt stimmungsvolles Bergmotiv als visuelle Einleitung */
  background-size: cover;                     /* Bild skaliert, sodass es die Fläche vollständig bedeckt (ohne Verzerrung) */
  min-height: 180px;                          /* Mindesthöhe für ausreichenden Raum (z. B. für Titeltext über dem Bild) */
}

/* Optionaler visueller Trenner oder Bildbereich unterhalb des Inhalts */
#content {
  background-image: url("images/Alpen.png");  /* Setzt optional weiteres Bildmotiv – z. B. als Abschluss oder Trenner */
  background-size: cover;                     /* Bild deckt Fläche vollständig ab */
  min-height: 92px;                           /* Geringere Höhe – wirkt wie ein horizontaler visueller Block */
}


/* ---------- Content Container ---------- */

/* Aussencontainer für mehrere Inhaltsblöcke – z. B. die 3 Kacheln auf der Startseite */
.content_container {
  display: flex;                               /* Aktiviert horizontale Anordnung mit Flexbox */
  justify-content: space-between;              /* Verteilt Kacheln mit gleichmässigem Abstand zwischen ihnen */
  flex-wrap: wrap;                             /* Erlaubt Umbruch bei kleineren Bildschirmgrössen */
  padding: 10px;                               /* Innenabstand rund um die Containerfläche */
  max-width: 1200px;                           /* Begrenzt maximale Breite auf grossen Bildschirmen – verhindert zu weite Streckung */
  margin: 0 auto 80px auto;                    /* Zentriert Container horizontal, 80px Platz nach unten (z. B. für Abstand zum Footer) */
}

/* Einzelne Inhaltsbox (z. B. eine Kompetenz-Kachel) */
.content_block {
  flex: 0 0 calc(33.33% - 30px);               /* Jede Box belegt ~1/3 Breite minus Zwischenraum */
  background-color: #888;                      /* Fallback-Farbe, wird durch ID-spezifische Farbvarianten überschrieben */
  padding: 10px;                               /* Innenabstand innerhalb der Box */
  box-sizing: border-box;                      /* Padding wird zur Gesamtgrösse hinzugerechnet */
  border-radius: 20px;                         /* Abgerundete Ecken – moderner Look */
  margin: 10px;                                /* Abstand zu anderen Boxen */
  min-height: 300px;                           /* Mindesthöhe für gleichmässige Kacheln */
  transition: transform 0.2s ease;             /* Sanfte Animation bei Hover – visuelles Feedback */
}

/* Hover-Effekt für Kachel */
.content_block:hover {
  transform: scale(1.02);                      /* Leichtes „Herausheben“ beim Überfahren mit Maus */
}

/* Farbvarianten für Kacheln – wird durch ID gesetzt */
#content_block1 { background-color: var(--color-content1); }  /* Kornblumenblau */
#content_block2 { background-color: var(--color-content2); }  /* Hellblau/Grau */
#content_block3 { background-color: var(--color-content3); }  /* Stahlblau */


/* Textinhalt innerhalb der Kachel */
.content_text {
  margin: 10px;                                /* Innenabstand um den Text herum */
  color: var(--color-footer-text);             /* Setzt Textfarbe auf weiss für gute Lesbarkeit in dunklen Kachelhintergründen */
}

/* ---------- Button-Link in Kachel ---------- */
.content_block .kachel-link {
  display: inline-block;                          /* Macht den Link wie ein Button */
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background-color: var(--color-accent);          /* Gold-Farbe als Hintergrund */
  color: #fff;                                     /* Weiss für Text im Button */
  font-weight: 600;
  border-radius: 6px;                              /* Leichte Rundung – wirkt modern */
  text-decoration: none;                           /* Kein Unterstrich */
  transition: all 0.2s ease;                       /* Sanfter Hover-Effekt */
}

/* Hover-Effekt */
.content_block .kachel-link:hover {
  background-color: var(--color-accent-hover);     /* Helleres Gold beim Hover */
  transform: translateY(-2px);                     /* Hebt Button leicht an */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);         /* Leichter Schatten für 3D-Effekt */
  cursor: pointer;
}

#content_block0 {
  background-color: var(--color-content3);  /* Stahlblau – kräftig, aber CI-konform */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#content_block0 h2 {
  color: var(--color-accent-hover);         /* helles Gold als Akzent */
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

#content_block0 p {
  color: #fff;
  max-width: 85%;
  margin-bottom: 1.2rem;
}
/* ---------- Globale CTA-Buttons (zentrale Call-to-Action-Elemente) ---------- */
/* Diese Buttons werden für Kontakt, Erstgespräch, Workshop-Anmeldung usw. verwendet.
   Sie sind bewusst eigenständig vom Kachel-Link getrennt, um flexibler in CTA-Blöcken eingesetzt zu werden. */

.cta_button {
  display: inline-block;
  background-color: var(--color-accent);       /* Gold – Haupt-CTA-Farbe */
  color: #fff;                                 /* Weiss für Text */
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cta_button:hover {
  background-color: var(--color-accent-hover); /* Helleres Gold beim Hover */
  transform: translateY(-2px);                 /* Leichtes Anheben beim Überfahren */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);    /* Sanfter Schatten für Tiefe */
  cursor: pointer;
}

.cta_button:active {
  transform: translateY(0);                    /* Zurücksetzen bei Klick */
  box-shadow: none;
}

/* Variante für helle CTA auf dunklem Hintergrund (z. B. Hero-Bereich) */
.cta_button--light {
  background-color: #fff;                      /* Weiss als Grundfarbe */
  color: var(--color-bg);                      /* Dunkelblau für Text */
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cta_button--light:hover {
  background-color: var(--color-accent-hover); /* Gold-Ton beim Hover */
  color: #fff;                                 /* Weiss auf Gold */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* =========================================
   Responsive Anpassungen – Tablet & Mobile
   ========================================= */

/* ---------- Tablets (bis 992px) – Kacheln auf 2 Spalten ---------- */
  
@media (max-width: 992px) {
   
  .content_container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding: 10px var(--page-gutter);
  }

  .content_block {
    flex: 1 1 calc(50% - 10px);
    margin: 0;
  }

/* Header-Layout: flexibler, kompaktes Logo, vertikale Navigation */
.header {
  flex-direction: column;                        /* Navigation unter Logo anordnen */
  align-items: flex-start;                       /* linksbündig statt zentriert */
  height: auto;                                  /* Höhe passt sich automatisch an den Inhalt an */
  padding: 20px var(--page-gutter) 20px var(--page-gutter);  /* gleichmässiger Innenabstand */
  background-position: left top;                 /* Logo bleibt oben links positioniert */
  background-size: contain;                      /* Logo skaliert proportional, bleibt vollständig sichtbar */
  background-repeat: no-repeat;                  /* Logo wird nur einmal angezeigt */
  background-origin: content-box;                /* Berücksichtigt Padding beim Hintergrundbild */
}

  .header nav {
    display: flex;
    flex-wrap: wrap;                               /* Navigation bricht bei Bedarf um */
    gap: 12px;                                     /* Abstand zwischen Links */
    margin-top: 1rem;
  }

  .header a {
    font-size: 1rem;                               /* kleinere Schriftgrösse */
    padding: 6px 0;                                /* mehr Touchfläche */
  }

  /* Footer-Layout: Blöcke untereinander */
  .footer {
    flex-direction: column;                        /* Spalten werden untereinander dargestellt */
    gap: 1rem;                                     /* vertikaler Abstand zwischen den Bereichen */
  }

  .footer div {
    padding-right: 0;
    margin-bottom: 1rem;
  }
   
} /*Media Tablets End */


/* ---------- Für kleine Bildschirme – Smartphones (bis 768px) ---------- */


@media (max-width: 768px) {
   
  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .logo {
    max-width: 140px;
    margin-bottom: 1rem;
  }

  .header-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }



  /* Kachel-Layout: einspaltig statt 3-spaltig */
  .content_block {
    flex: 0 0 100%;                                /* volle Breite je Kachel */
    margin-left: 0;
    margin-right: 0;
  }

  /* Kachel-Buttons: zentriert unter Inhalt */
  .content_block .kachel-link {
    display: block;
    width: fit-content;
    margin: 1rem auto 0 auto;                      /* zentriert im Block */
  }

  /* Textgrössen leicht reduzieren für bessere mobile Lesbarkeit */
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  p {
    font-size: 1.1rem;
  }

  li {
    font-size: 1.1rem;
  }

  /* Container: gleich wie Hero-Header – mit Rand, aber keine feste max-width */
  .content_container {
    padding: 10px 5vw;                             /* dynamischer Abstand links/rechts */
    box-sizing: border-box;                        /* verhindert, dass Padding die Gesamtbreite sprengt */
  }

  /* Optional: zentrierte Buttons im Footer */
  .footer a {
    text-align: center;
  }
   
}