@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Staatliches&display=swap");
#top1, #top2, .mainnav, .footer {
  padding-left: 5vw !important;
  padding-right: 5vw !important;
}
#top1 .navbar-collapse, #top2 .navbar-collapse, .mainnav .navbar-collapse, .footer .navbar-collapse {
  margin-top: 10px;
}
#top1 .navbar-collapse ul, #top2 .navbar-collapse ul, .mainnav .navbar-collapse ul, .footer .navbar-collapse ul {
  font-size: 1.2rem;
  display: block;
}
#top1 .navbar-collapse ul li, #top2 .navbar-collapse ul li, .mainnav .navbar-collapse ul li, .footer .navbar-collapse ul li {
  border-right: 0px solid #dee2e6 !important;
}
#top1 .navbar-collapse ul a, #top2 .navbar-collapse ul a, .mainnav .navbar-collapse ul a, .footer .navbar-collapse ul a {
  width: auto;
  max-width: 100%;
  padding: 5 auto !important;
}

.footer {
  border-top: 1px solid black;
  background-color: #241d5a !important;
  padding: 20px 0px 20px 0px;
}

/* ====== Design-Variablen ====== */
:root {
  --pri:#241d5a;
  --acc:#3A8FBB;
  --acc-d:#216f9b;
}

/* ====== Deko / Hintergrundglow ====== */
html {
  scroll-behavior: smooth;
}

.glow::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  filter: blur(80px);
  background: radial-gradient(50% 50% at 30% 20%, rgba(36, 29, 90, 0.25), transparent 60%), radial-gradient(50% 50% at 80% 70%, rgba(58, 143, 187, 0.25), transparent 60%);
}

/* ====== Icons / Badges ====== */
.icon-badge, .icon-badge-sm {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(58, 143, 187, 0.12), rgba(36, 29, 90, 0.08));
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.icon-badge {
  width: 42px;
  height: 42px;
}

.icon-badge-sm {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.icon, .icon-sm {
  stroke: var(--acc);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 22px;
  height: 22px;
}

.icon-sm {
  width: 18px;
  height: 18px;
}

/* ====== Logo ====== */
#logo_landing {
  max-width: 200px;
  height: auto;
  padding-top: 30px;
  margin-left: -20px;
}

/* ====== Footer ====== */
.me-footer {
  border-top: 1px solid rgba(15, 23, 42, 0.15);
}

.me-footer .me-footer-link {
  text-decoration: none;
}

.me-footer h3 {
  color: inherit;
}

.me-footer .mx-auto p, .me-footer nav a {
  color: inherit;
}

.me-footer--brand {
  background: var(--pri);
  color: #fff;
}

.me-footer--brand .me-footer-link {
  color: #cbd5e1;
}

.me-footer--brand .me-footer-link:hover {
  color: #fff;
}

.me-footer--brand .me-footer-copy {
  background: #2b3340;
  color: #e5e7eb;
}

.me-footer--light {
  background: #fff;
  color: #e2e8f0;
} /* für dünne Top-Border */
.me-footer--light .mx-auto * {
  color: #0f172a;
} /* eigentlicher Text dunkel */
.me-footer--light .me-footer-link {
  color: #475569;
}

.me-footer--light .me-footer-link:hover {
  color: var(--pri);
}

.me-footer-copy {
  text-align: center;
  font-size: 0.78rem;
  padding: 0.6rem 0;
  background: #f1f5f9;
  color: #475569;
}

/* ====== Headline: Handschrift + Unterstreichung ====== */
.headline-hand {
  line-height: 0.95;
  letter-spacing: 0;
  font-family: "Caveat", ui-sans-serif, system-ui;
  font-weight: 700;
}

/* Alternativen (einfach Klasse zusätzlich an das Span hängen) */
.hand-kalam {
  font-family: "Kalam", ui-sans-serif, system-ui;
  font-weight: 700;
}

.hand-patrick {
  font-family: "Patrick Hand", ui-sans-serif;
  font-weight: 400;
}

.hand-satisfy {
  font-family: "Satisfy", ui-sans-serif;
  font-weight: 400;
}

.ink-wrap {
  position: relative;
  display: inline-block;
}

.ink-wrap .ink-text {
  position: relative;
  z-index: 1;
}

.ink-wrap .ink-svg {
  position: absolute;
  left: -4%;
  right: -2%;
  bottom: -0.28em;
  width: 106%;
  height: 0.48em;
  pointer-events: none;
}

@media (max-width: 480px) {
  .ink-wrap .ink-svg {
    height: 0.44em;
    bottom: -0.24em;
    left: -3%;
    right: -1%;
    width: 104%;
  }
}
/* Einfache, elegante Unterstreichung (Single) */
.ink-single path {
  fill: none;
  stroke: var(--acc);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.9;
}

/* Optional: „Marker doppellagig“ */
.ink-marker .a {
  fill: none;
  stroke: var(--acc-d);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.95;
}

.ink-marker .b {
  fill: none;
  stroke: var(--acc);
  stroke-width: 4.2;
  stroke-linecap: round;
  opacity: 0.92;
}

/* --- HERO: Weiß links, Foto rechts, Content garantiert oben --- */
.hero-photo {
  position: relative;
  overflow: hidden;
}

/* Content über allen Overlays */
.hero-photo .hero-content {
  position: relative;
  z-index: 10;
}

/* Bild-Layer unter dem Content */
.hero-photo > .photo {
  position: absolute;
  inset: 0;
  z-index: 0; /* darunter */
  pointer-events: none;
}

/* Foto selbst */
.hero-photo > .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/Images/happy-student.jpg"); /* Pfad ggf. anpassen */
  background-size: cover;
  background-position: 82% 40%;
  opacity: 0.42; /* .35–.50 je nach Geschmack */
  filter: saturate(0.9) contrast(1.05);
}

/* Weißer Verlauf von links -> rechts (keine Blend-Mode-Spielereien) */
.hero-photo > .photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 34%, rgba(255, 255, 255, 0.92) 48%, rgba(255, 255, 255, 0.4) 62%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, 0) 88%);
  mix-blend-mode: normal;
  z-index: 1;
}

/* Der Glow-Hintergrund noch weiter nach hinten, damit er nichts überlagert */
.glow::before {
  z-index: -2;
}

/* Mobil: Bild weg für maximale Lesbarkeit */
@media (max-width: 768px) {
  .hero-photo > .photo {
    display: none;
  }
}/*# sourceMappingURL=abi26.min.css.map */