/*
 * ai‑edu Website Stylesheet
 *
 * This stylesheet defines the core look and feel for the ai‑edu
 * training company website. The visual language combines Swiss
 * precision with modern SaaS design: clean layouts, generous
 * whitespace and a restrained colour palette built around our
 * signature blue. Wherever possible the stylesheet uses CSS
 * custom properties to simplify maintenance and ensure that dark
 * text on light backgrounds remains easily readable. The layout
 * adapts gracefully to a variety of screen sizes without
 * sacrificing clarity or conversion focus.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* Root variables make it easy to tweak the colour palette or
   typography in one place. */
:root {
  --primary-color: #2563eb; /* brand blue */
  --primary-color-dark: #1e40af; /* darker shade for hover states */
  --text-color: #111827; /* near‑black for high contrast */
  --muted-text-color: #6b7280; /* medium grey for secondary text */
  --background-color: #ffffff; /* neutral backdrop */
  --surface-color: #f9fafb; /* light grey panels */
  --border-color: #e5e7eb; /* subtle borders */
  --font-family-sans: 'Inter', 'Poppins', sans-serif;
  --max-width: 1200px;

  /* Modern gradient palette for 2025 design trends */
  --gradient-start: #6366F1; /* violet */
  --gradient-end: #3B82F6;   /* blue */
  --button-gradient-start: #6366F1;
  --button-gradient-end: #3B82F6;
  --surface-shadow: rgba(0, 0, 0, 0.05);
  --hero-text-color: #ffffff;

  /* New neutral page background inspired by the competitor design.  The
     body of the site now sits on a very light grey backdrop which
     helps the white card-like sections stand out. */
  --page-background: #f5f7fa;

  /* Additional colour values for the updated light hero design. These
     variables allow the home page to present a lighter, more airy
     appearance inspired by modern SaaS websites. */
  --hero-light-bg: #f9fbff;
  --hero-light-text: #111827;
  --accent-blue: #2563eb;
  --accent-blue-dark: #1e40af;
}

/* Base resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-sans);
  color: var(--text-color);
  /* Use the new light page background to more closely mirror the airy
     feel of the provided reference screenshot. */
  background-color: var(--page-background);
  line-height: 1.6;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--primary-color-dark);
  text-decoration: underline;
}

header {
  width: 100%;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Navigation container */
.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 1rem;
  /* A softer elevation to evoke a card floating over a light
     background – similar to the competitor site. */
  box-shadow: 0 4px 12px var(--surface-shadow);
}

/* Logo styling uses text and a coloured dot to avoid
   embedding an external image file. */
.logo {
  font-weight: 600;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  color: var(--text-color);
}

.logo .dot {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.25rem;
  background-color: var(--primary-color);
  border-radius: 2px;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

nav ul li {
  font-weight: 500;
}

nav ul li a {
  color: var(--text-color);
}

nav ul li a:hover {
  color: var(--primary-color);
}

/* Language toggle buttons */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lang-toggle button {
  background: none;
  border: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-color);
}
.lang-toggle button.active {
  font-weight: 600;
  color: var(--primary-color);
}

/* Hero section */
.hero {
  position: relative;
  /* Modern gradient background replaces the static image for a fresh look.
     Using a diagonal gradient from violet to blue adds depth and aligns with
     contemporary design trends that emphasise subtle movement and colour
     transitions【900280621932249†L247-L265】. */
  background-image: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: var(--hero-text-color);
  padding: 6rem 1.5rem 4rem;
  text-align: left;
}

.hero::after {
  /* semi-transparent dark overlay to improve contrast of white text on gradient */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.35) 100%);
  z-index: 0;
}

.hero-content {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  z-index: 1;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2rem;
  max-width: 600px;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary {
  /* Use a gradient background for primary actions to draw attention and
     align with modern UI trends【900280621932249†L247-L265】. */
  background-image: linear-gradient(135deg, var(--button-gradient-start), var(--button-gradient-end));
  color: #fff;
}
.btn-primary:hover {
  background-image: linear-gradient(135deg, var(--button-gradient-end), var(--button-gradient-start));
}
.btn-secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}
.btn-secondary:hover {
  background-color: var(--primary-color);
  color: #fff;
}

/* Section base styling */
section {
  padding: 4rem 1.5rem;
}
.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Card‑style sections
 *
 * To mirror the competitor’s visual hierarchy, key sections are placed
 * inside card containers: white background, rounded corners and a
 * generous shadow.  Applying the `section-card` class to a
 * <section> element creates a floating panel that stands out
 * against the light page background. */
.section-card {
  background-color: var(--background-color);
  border-radius: 1.25rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
  padding: 4rem 2rem;
  margin: 3rem 1rem;
}

.section-card .section-inner {
  /* Ensure inner content stays within the card’s rounded corners */
  max-width: var(--max-width);
  margin: 0 auto;
}

section h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
}

/* Course overview cards */
.courses {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.course-card {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1.75rem;
  flex: 1 1 260px;
  min-width: 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Apply a larger, softer shadow for depth */
  box-shadow: 0 8px 16px var(--surface-shadow);
}

/* Pricing cards alignment
 *
 * On the pricing page we have cards with varying amounts of content. To
 * ensure they align horizontally and vertically, we give them a
 * minimum height. This avoids one card being significantly shorter
 * than the others, which can look unbalanced. The value was chosen
 * experimentally to accommodate up to five bullet points and a call to
 * action button. On smaller screens the height will adjust naturally
 * as the cards stack. */
.pricing-grid .course-card {
  min-height: 480px;
}

/* Optional image at the top of course cards */
.course-card img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  object-fit: cover;
}

.course-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.course-card p {
  margin-bottom: 1rem;
  color: var(--muted-text-color);
  flex-grow: 1;
}
.course-card .price {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-color);
}

/* Why section with two columns */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.why-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.why-item .icon {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-top: 0.25rem;
}
.why-item h4 {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.why-item p {
  color: var(--muted-text-color);
}

/* Generic section for forms and content */
.content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Forms */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}
form input,
form select,
form textarea {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  font-family: var(--font-family-sans);
  font-size: 1rem;
}
form input:focus,
form select:focus,
form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}
form label {
  font-weight: 500;
}
form .form-group {
  display: flex;
  flex-direction: column;
}
form button {
  align-self: flex-start;
}

/* Table styling for resources page */
.table-container {
  overflow-x: auto;
  margin-top: 2rem;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
}
th {
  background-color: var(--surface-color);
  font-weight: 600;
}
caption {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Footer */
footer {
  background-color: var(--surface-color);
  border-top: 1px solid var(--border-color);
  padding: 2rem 1.5rem;
}
footer .footer-content {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
footer p {
  color: var(--muted-text-color);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .hero {
    padding: 4rem 1.5rem 3rem;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}

/* Smaller hero variant used on secondary pages
   This class reduces the vertical padding of the hero section to
   prevent it from dominating less content‑heavy pages like
   resources or contact. It inherits the background image and
   overlay from the default hero style. */
.smaller-hero {
  padding-top: 4rem;
  padding-bottom: 3rem;
}

/*
 * Light hero variant for the home page
 *
 * This design uses a split layout: copy on the left and a
 * network‑pattern illustration on the right. The background is a
 * gentle off‑white to convey openness. Bulleted benefits are
 * displayed below the main call to action. An accompanying image
 * provides visual interest without overpowering the text.
 */
.hero-network {
  /* Place the hero content on a white card with a generous shadow and
     rounded corners.  This styling echoes the card layout seen on
     beyonder.ch and the provided mockup image. */
  background-color: var(--background-color);
  color: var(--hero-light-text);
  padding: 4rem 2rem 4rem;
  border-radius: 1.25rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}
.hero-network .hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 2rem;
}
.hero-network .hero-text {
  flex: 1 1 300px;
}
.hero-network .hero-text h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--hero-light-text);
}
.hero-network .hero-text p {
  font-size: 1.1rem;
  color: var(--muted-text-color);
  margin-bottom: 2rem;
  max-width: 480px;
}
.hero-network .hero-bullets {
  list-style: none;
  margin-top: 0;
  margin-bottom: 2rem;
  padding-left: 0;
}
.hero-network .hero-bullets li {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  color: var(--hero-light-text);
}
.hero-network .hero-bullets li::before {
  content: '\2022';
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent-blue);
}
.hero-network .hero-image {
  flex: 1 1 300px;
  max-width: 50%;
}
.hero-network .hero-image img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

@media (max-width: 768px) {
  .hero-network {
    padding: 3rem 1rem;
  }
  .hero-network .hero-inner {
    flex-direction: column;
    text-align: left;
  }
  .hero-network .hero-image {
    max-width: 100%;
  }
  .hero-network .hero-text h1 {
    font-size: 2rem;
  }
  .hero-network .hero-text p {
    font-size: 1rem;
  }
}

/*
 * Styles for the new Beispiele (Examples) page
 *
 * The examples page introduces visitors to generative and agentic AI through
 * concrete demonstrations. Cards with sample prompts and outputs are styled
 * consistently with the rest of the site. A simple chat demo showcases how
 * users can interact with ChatGPT directly on the page (an API key must be
 * provided by the site administrator). Additional helper classes for the
 * chat interface live here so that they benefit from the site's colour
 * palette and typography.
 */

/* Grid container for example cards */
.examples-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 2rem;
}

/* Individual example card */
.example-card {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.example-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.example-card pre {
  background-color: #f3f4f6;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  padding: 0.75rem;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 0.75rem;
}

.example-card .prompt-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Chat demo styles */
.chat-container {
  margin-top: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: var(--surface-color);
}

.chat-messages {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chat-message {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  line-height: 1.4;
}

.chat-message.user {
  align-self: flex-end;
  background-color: #e0f2fe;
  color: #0c4a6e;
}

.chat-message.assistant {
  align-self: flex-start;
  background-color: #f3f4f6;
}

/*
 * Blog formatting enhancements
 *
 * Blog articles use the `.content` class inside their main section. To
 * improve readability, we constrain the maximum width on large
 * displays, increase line spacing, and add generous margins between
 * paragraphs and headings. Lists are indented and spaced so that
 * bullet points stand out clearly. These tweaks give long-form
 * articles a more polished, magazine-like feel without affecting
 * other pages.
 */
.content {
  max-width: 780px;
  margin: 0 auto;
}

.content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: 600;
}

.content p {
  margin-top: 1rem;
  line-height: 1.8;
}

.content ul {
  margin: 1rem 0 1rem 1.5rem;
  padding-left: 1rem;
  list-style: disc;
}

.content li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.chat-input-wrapper {
  display: flex;
  gap: 0.5rem;
}

.chat-input-wrapper input[type="text"] {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  font-size: 1rem;
}

.chat-input-wrapper button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
}

.chat-input-wrapper button:hover {
  background-color: var(--primary-color-dark);
}