@charset "UTF-8";
/* ===== Variablen (Farben, Abstände) ===== */
:root{
  --c-bg: #f0f8ff;
  --c-text: #02184A;
  --c-brand: #02184A;
  --c-accent: #0496E2;
  --c-header: #1a2a6c;
  --c-light: #ffffff;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* ===== Reset & Basics ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.55;
  font-size: clamp(16px, 1.8vw, 19px);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.container { width: min(100% - 2rem, 1100px); margin-inline: auto; }

.brand { color: var(--c-brand); font-weight: 700; }

/* ===== Header & Navigation ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--c-header);
  color: var(--c-light);
}

.logo img{ height: 48px; }

.menu-toggle{
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: var(--c-light);
  border-radius: 10px;
  padding: .4rem .6rem;
  font-size: 1.25rem;
  cursor: pointer;
}

.nav{
  grid-column: 1 / -1;
  display: none;
}
.nav.open{ display: block; }

.nav ul{
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .25rem;
}
.nav a{
  display:block;
  padding: .55rem .75rem;
  border-radius: 10px;
  color: var(--c-accent);
  font-weight: 700;
}
.nav a:hover{ background: rgba(255,255,255,.08); text-decoration: underline; }

/* ===== Bereich 1 (Hero) ===== */
/* Hero als IMG statt Background */
.bereich1.is-img {
  position: relative;
  padding: 0;             /* kein extra Innenabstand nötig */
  background: none;       /* wichtig: kein background-image mehr */
}

.hero-img {
  display: block;
  width: 100%;
  height: auto;           /* behält Seitenverhältnis => kein Beschnitt */
}

/* Overlays liegen oben drüber */
.bereich1.is-img .overlay1,
.bereich1.is-img .cta-row {
  position: absolute;
  inset: 0;               /* füllt den ganzen Bildbereich */
  pointer-events: none;   /* Overlays nicht blockierend (Buttons unten wieder aktivieren) */
  display: grid;
  place-items: center;

  display: grid;
  align-content: end;
  gap: .75rem;
}

/* Textbox mittig */
.bereich1.is-img .overlay1 {
	
  inset: 0;                 /* Overlay füllt weiterhin das Bild */
  padding: 2% 40% 30% 0%;   /* Inhalt weiter "ins Bild" schieben */
  /* display: grid;
  place-items: left;*/
}

.bereich1.is-img .overlay1 .hero-text-box {
  pointer-events: auto;  /* interaktiv */
background: rgba(255,255,255,.5);
	border-radius: var(--radius);
  padding: .9rem 1rem;
  text-align: left;
}


/* CTA-Leiste unten */
.bereich1.is-img .cta-row {
  align-content: end;     /* nach unten */
  padding: 1rem;
  gap: .75rem;

  display: grid;
  align-content: end;
  gap: .75rem;
}
.bereich1.is-img .cta-card { pointer-events: auto; }


.cta-card{
  background: rgba(255,255,255,.9);
  color: var(--c-text);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.15); }
.cta-card h2{
  margin: 0;
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  color: var(--c-brand);
}

/* ===== Bereich 2 ===== */
.bereich2{
  background: #f5f5f5;
  padding: clamp(1rem, 4vw, 3rem) 0;
}
.bereich2 h2{ margin: 0 0 .5rem; }
.bereich2 p{ margin: .5rem 0 0; max-width: 70ch; }

/* ===== Footer ===== */
.site-footer{
  background: var(--c-header);
  color: var(--c-light);
  text-align: center;
  padding: 1rem;
  margin-top: 0;
  font-size: .95em;
}

/* ===== Media Queries ===== */
@media (min-width: 768px){
  .menu-toggle{ display: none; }
  .nav{
    display: block !important;
    grid-column: auto;
  }
  .nav ul{
    display: flex;
    gap: 1rem;
    margin: 0;
  }
  .cta-row{
    grid-template-columns: 1fr 1fr;
    bottom: 2rem;
    padding: 0 2rem;
  }
}

@media (min-width: 1200px){
  .site-header{ padding: 1rem 2rem; }
  .hero-text-box{ padding: 1.25rem 1.5rem; }
}

/* ===== A11y & Feinschliff ===== */
:focus-visible{
  outline: 3px solid #5aa9ff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto; }
}


/* ===== Helper: generische Overlay-Layer ===== */
.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.overlay * { pointer-events: auto; }


/* Optionale Breitenbegrenzung für Inhalte im Overlay */
.overlay-container {
  width: min(100% - 2rem, 1100px);
  margin-inline: auto;
}

.scrollbox {
  max-height: 300px;   /* oder height: 300px */
  overflow-y: auto;    /* Scrollen nur vertikal bei Bedarf */
  overflow-x: hidden;  /* horizontales Scrollen verhindern */
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Container mit 5 Spalten (fällt responsiv auf 3/2/1) */
    .five-grid{
      display: grid;
      grid-template-columns: repeat(5, minmax(140px, 1fr));
      gap: 1rem;
      align-items: stretch;
    }

    /* Kachel: Inhalt zentrieren */
    .tile{
      display: grid;
      place-items: center;
      padding: .5rem;
      border: 1px solid #e6ebf2;
      border-radius: 12px;
      background: #fff;
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .tile:hover{
      transform: translateY(-2px);
      border-color: var(--accent);
      box-shadow: 0 8px 20px rgba(0,0,0,.08);
    }

    /* Link block-level, für bessere Klickfläche */
    .tile a{
      display: inline-grid;
      place-items: center;
      text-decoration: none;
    }

    /* Bild zentriert & skaliert innerhalb einer max-Breite/Höhe */
    .tile img{
      max-width: 120px;   /* passe nach Bedarf an */
      max-height: 120px;  /* passe nach Bedarf an */
      width: 100%;
      height: auto;
      object-fit: contain; /* Bild bleibt vollständig sichtbar */
    }

    /* Responsiv */
    @media (max-width: 1200px){
      .five-grid{ grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 900px){
      .five-grid{ grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 600px){
      .five-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 420px){
      .five-grid{ grid-template-columns: 1fr; }
    }
/*--aus sytle -test---*/
:root {
      --c-brand: #02184A;
      --c-accent: #0496E2;
      --c-text: #02184A;
    }
    .brand { color: var(--c-accent); }
    .hero-slim {
      background: linear-gradient(0deg, rgba(2,24,74,.06), rgba(2,24,74,.06));
      padding: clamp(1rem, 4vw, 3rem) 0;
      text-align: center;
    }
    .hero-slim h1 { margin: 0; color: var(--c-brand); }
    .lead { max-width: 70ch; margin: .5rem auto 0; }
    .grid { display: grid; gap: 1rem; }
    @media (min-width: 768px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
    .card {
      background: #fff;
      border-radius: 12px;
      padding: 1rem;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .kicker { font-size: .9em; color: var(--c-accent); font-weight: 700; letter-spacing: .02em; }
    .list { margin: .5rem 0 0 1rem; }
    .btn {
      display: inline-block; padding: .6rem .9rem; border-radius: 10px; 
      background: var(--c-accent); color: #fff; text-decoration: none; font-weight: 700;
    }
    .btn:hover { filter: brightness(1.05); }
    .container { width: min(100% - 2rem, 1100px); margin-inline: auto; }

/* inline styles merged from test/ */

:root {
      --c-brand: #02184A;
      --c-accent: #0496E2;
      --c-text: #02184A;
    }
    .brand { color: var(--c-accent); }
    .hero-slim {
      background: linear-gradient(0deg, rgba(2,24,74,.06), rgba(2,24,74,.06));
      padding: clamp(1rem, 4vw, 3rem) 0;
      text-align: center;
    }
    .hero-slim h1 { margin: 0; color: var(--c-brand); }
    .lead { max-width: 70ch; margin: .5rem auto 0; }
    .grid { display: grid; gap: 1rem; }
    @media (min-width: 768px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
    .card {
      background: #fff;
      border-radius: 12px;
      padding: 1rem;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .kicker { font-size: .9em; color: var(--c-accent); font-weight: 700; letter-spacing: .02em; }
    .list { margin: .5rem 0 0 1rem; }
    .btn {
      display: inline-block; padding: .6rem .9rem; border-radius: 10px; 
      background: var(--c-accent); color: #fff; text-decoration: none; font-weight: 700;
    }
    .btn:hover { filter: brightness(1.05); }
    .container { width: min(100% - 2rem, 1100px); margin-inline: auto; }

/* ---- */

:root {
      --c-brand: #02184A;
      --c-accent: #0496E2;
      --c-text: #02184A;
    }
    .brand { color: var(--c-accent); }
    .hero-slim {
      background: linear-gradient(0deg, rgba(2,24,74,.06), rgba(2,24,74,.06));
      padding: clamp(1rem, 4vw, 3rem) 0;
      text-align: center;
    }
    .hero-slim h1 { margin: 0; color: var(--c-brand); }
    .lead { max-width: 70ch; margin: .5rem auto 0; }
    .grid { display: grid; gap: 1rem; }
    @media (min-width: 768px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
    .card {
      background: #fff;
      border-radius: 12px;
      padding: 1rem;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .kicker { font-size: .9em; color: var(--c-brand); font-weight: 700; letter-spacing: .02em; }
    .list { margin: .5rem 0 0 1rem; }
    .btn {
      display: inline-block; padding: .6rem .9rem; border-radius: 10px; 
      background: var(--c-accent); color: #fff; text-decoration: none; font-weight: 700;
    }
    .btn:hover { filter: brightness(1.05); }
    .container { width: min(100% - 2rem, 1100px); margin-inline: auto; }

/* ---- */

:root {
      --c-brand: #02184A;
      --c-accent: #0496E2;
      --c-text: #02184A;
    }
    .brand { color: var(--c-accent); }
    .hero-slim {
      background: linear-gradient(0deg, rgba(2,24,74,.06), rgba(2,24,74,.06));
      padding: clamp(1rem, 4vw, 3rem) 0;
      text-align: center;
    }
    .hero-slim h1 { margin: 0; color: var(--c-brand); }
    .lead { max-width: 70ch; margin: .5rem auto 0; }
    .grid { display: grid; gap: 1rem; }
    @media (min-width: 768px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
    .card {
      background: #fff;
      border-radius: 12px;
      padding: 1rem;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .kicker { font-size: .9em; color: var(--c-accent); font-weight: 700; letter-spacing: .02em; }
    .list { margin: .5rem 0 0 1rem; }
    .btn {
      display: inline-block; padding: .6rem .9rem; border-radius: 10px; 
      background: var(--c-accent); color: #fff; text-decoration: none; font-weight: 700;
    }
    .btn:hover { filter: brightness(1.05); }
    .container { width: min(100% - 2rem, 1100px); margin-inline: auto; }
	  
	  /* Farben (optional an euer Branding angepasst) */
    :root{
      --brand:#02184A;     /* dunkelblau */
      --accent:#0496E2;    /* hellblau */
    }