/*
  Basis-Styles für die Website
  - Typografie mit Poppins
  - Farb-Token und Abstände
  - Kleine UI-Verbesserungen für Bootstrap-Komponenten
*/

:root {
  --brand: #1683c5;             /* Bootstrap primary */
  --brand-600: #0a4061;         /* dunklerer Ton für Hover */
  --text-900: #000000;          /* nahezu schwarz */
  --text-600: #ffffff;          /* Sekundärtext */
  --bg-50: #9c9c9c;             /* helles Grau */
}

html { scroll-behavior: smooth; }
body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--text-900); }

/* Utilities */
.pt-6 { padding-top: 6rem !important; } /* für Hero-Spacing unter fixed Navbar */

/* Navbar */
.navbar .navbar-brand { letter-spacing: .2px; }
.navbar .nav-link { color: var(--text-900); }
.navbar .nav-link:hover { color: var(--brand); }

/* Hero */
.hero { padding-top: 6.5rem; background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(13,110,253,.0)); }
.hero .lead { color: var(--text-600); }
.hero-bg { position: absolute; inset: -20% -10% auto -10%; height: 50%; background: radial-gradient(60% 60% at 30% 20%, rgba(13,110,253,.12), transparent), radial-gradient(50% 50% at 80% 10%, rgba(99,102,241,.10), transparent); z-index: -1; }

/* Cards */
.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.08); }
.card .stretched-link { font-weight: 600; }

/* Buttons */
.btn-primary { background-color: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--brand-600); border-color: var(--brand-600); }
.btn-outline-primary { color:  var(--brand);  border-color:  var(--brand); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--brand); color: #fff; }

/* Sections */
.bg-light-subtle { background-color: var(--bg-50); }

/* Footer */
footer .link-secondary { text-decoration: none; }
footer .link-secondary:hover { text-decoration: underline; }

/* Responsive Feinschliff */
@media (max-width: 991.98px) {
  .pt-6 { padding-top: 4.5rem !important; }
}

/* .mytext {color: #fff;} */
/* .schulverwaltung {color: #000000;} */
/* Kontaktbereich */
#kontakt address {
  font-style: normal;        /* kein Kursiv wie standardmäßig bei <address> */
  line-height: 1.6;          /* angenehmere Zeilenhöhe */
  margin-bottom: 1.5rem;     /* etwas Abstand nach unten */
  
}

#kontakt a {
  
  text-decoration: none;
}
#kontakt a:hover {
  text-decoration: underline;
}

#kontakt .btn {
  margin-top: 0.5rem;     
}
.maillink{color:#1683c5}
.overlay-box {
  max-width: 100%;
}
@media (min-width: 768px) {
  .overlay-box {
    max-width: 720px; 
  }
}
@media (min-width: 1200px) {
  .overlay-box {
    max-width: 1000px; 
  }
}



/* Unterseiten-Hintergrund */
.topic-section {
  position: relative;
  min-height: 80vh;
  padding-top: calc(var(--nav-h, 60px)); /* Abstand unter Navbar */
  /* padding-bottom: 2rem; */
}

/* Bild als Hintergrund */
.topic-bg {
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

/* Dunkler Block nur hinter Text */
.topic-content {
  background: rgba(0,0,0,.55);
  padding: 2rem;
  border-radius: .5rem;
  max-width: 100%;
}

@media (min-width: 768px) {
  .topic-content { max-width: 720px; }
}
@media (min-width: 992px) {
  .topic-content { max-width: 992px; }
}
@media (min-width: 1200px) {
  .topic-content { max-width: 1200px; }
}
@media (min-width: 1400px) {
  .topic-content { max-width: 1400px; }
}

.link-uebermich {
  color: inherit;               
  text-decoration: none;        
  transition: color 0.2s ease;  
}

.link-uebermich:hover {
  color: #1683c5;               
  text-decoration: none;        
}