.ribeye-marrow-regular {
  font-family: "Ribeye Marrow", serif;
  font-weight: 400;
  font-style: normal;
}
.micro-5-regular {
  font-family: "Micro 5", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    line-height: 20px;
    margin: 20px;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), 
    url("../Bilder/FloCreate-Logo.png") no-repeat center/cover;
    color: #333;
}
/*Titel*/
h1 {
    color: blue;
    text-align: center;
    font-family: "Micro 5", sans-serif;
}
h2 {
    text-align: center;
}
h3 {
    text-align: center;
}
p {
    text-align: center;
}

.Gysin{
    color:#FF0000;
      font-family: "Ribeye Marrow", serif;
      color: #FF0000
}
.pic {
    display: block;
  margin: 20px;  /* Bild als Block */
  margin-left: auto;       /* links automatisch */
  margin-right: auto;      /* rechts automatisch */
  max-width: 400px;        /* optional: maximale Breite */

}
.asa{
    margin:50px !important;  
}
.Links {
    text-align: center;}
/* Navigation */
.main-nav ul {  list-style: none;
                display: flex;
                gap: 20px; }
.main-nav a { color: black;
              text-decoration: none;
              padding: 8px 6px;
              border-radius: 6px;
              background: #0066ff}
.main-nav a:hover, .main-nav a:focus { background: rgba(102, 0, 255,0.08); }


/* Hamburger - hidden checkbox */
.nav-toggle { display: none; }
.nav-toggle-label { display: none;
                    cursor: pointer;
                    width: 40px;
                    height: 36px;
                    align-items: center;
                    justify-content: center; }
.hamburger {  display: block;
              width: 26px;
              height: 2px;
              background: #5200cc;
              position: relative;
              transition: transform 200ms ease; }
.hamburger::before, .hamburger::after { content: "";
                                        position: absolute;
                                        left: 0;
                                        width: 26px;
                                        height: 2px;
                                        background: #5200cc;
                                        transition: transform 200ms ease, top 200ms ease, opacity 200ms ease; }
.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }


/* Mobile styles */
@media (max-width: 720px) {
.site-header .container { height: 56px; }
.main-nav { position: absolute;
    top: 56px;
    left: 20px;
    right: 20px;
    background: #0b1220;
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease; }
.main-nav ul {  flex-direction: column;
                padding: 12px;
                gap: 8px;
                background: #0066ff}
.nav-toggle-label { display: flex; }


/* When checkbox is checked, open menu */
.nav-toggle:checked + .nav-toggle-label .hamburger { transform: rotate(45deg); }
.nav-toggle:checked + .nav-toggle-label .hamburger::before { transform: rotate(90deg); top: 0; }
.nav-toggle:checked + .nav-toggle-label .hamburger::after { opacity: 0; }


/* The + selector above selects the label; to affect the nav we need a different selector. We'll move nav after label in DOM to allow this pattern,
but in this HTML nav is after label already, so we can use :checked ~ .main-nav */
.nav-toggle:checked ~ .main-nav { max-height: 320px; }
}


/* Desktop - ensure nav visible */
@media (min-width: 721px) {
.main-nav { position: static;
            max-height: none; }
}


/* Content + Footer */
.content { padding: 28px 0; }
.site-footer {  padding: 12px 0;
                text-align: center;
                color: #334155;
                font-size: 0.9rem; }


/* Accessibility: focus styles */
a:focus { outline: 3px solid #c7f3ff; outline-offset: 2px; }
.nav-toggle:focus + .nav-toggle-label { outline: 3px solid #c7f3ff;
                                        outline-offset: 2px;
                                        border-radius: 6px; }
.jersey-15-charted-regular {
  font-family: "Jersey 15 Charted", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.Links img{max-width:300px;}
:root{
--bg:#0b2340;
--mid:#185a9d;
--front:#e6e9f0;
--text:#f8f9fb;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial}
.parallax-wrapper{position:relative;min-height:200vh;overflow-x:hidden}
.parallax-layer{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;transform:translate3d(0,0,0);will-change:transform}
.layer-bg{background:linear-gradient(180deg,#05243c 0%, #064a6d 60%);background-repeat:no-repeat;background-position:center bottom;z-index:1;}
.layer-mid{background-image:radial-gradient(circle at 20% 40%, rgba(255,255,255,0.03), rgba(255,255,255,0) 30%),
url('data:image/svg+xml;utf8,<svg xmlns=http://www.w3.org/2000/svg width="1200" height="400"><rect fill="%23185a9d" width="1200" height="400" /><g fill="%2307222b" opacity="0.6"><path d="M0 200 C150 120 300 260 450 200 C600 140 750 280 900 200 C1050 120 1200 260 1350 200"/></g></svg>');
background-size:cover;background-position:center bottom;opacity:0.95;z-index:2;}
.layer-front{background-image:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08)),
url('data:image/svg+xml;utf8,<svg xmlns=http://www.w3.org/2000/svg width="1600" height="600"><g fill="%23e6e9f0"><path d="M0 380 C160 340 320 420 480 380 C640 340 800 420 960 380 C1120 340 1280 420 1440 380"/></g></svg>');
background-repeat:no-repeat;background-position:center bottom;background-size:cover;opacity:1;z-index:3}

/* Content area sits on top of layers */
.content{position:relative;z-index:10;max-width:900px;margin:0 auto;padding:6rem 1rem 8rem}
h1{font-size:clamp(1.8rem, 3.2vw, 3rem);margin:0 0 1rem}
.lead{opacity:0.95;margin-bottom:1.5rem}
.spacer{height:480px}
.spacer.large{height:640px}
.card{background:rgba(255,255,255,0.04);padding:1.25rem;border-radius:10px;margin-bottom:1.5rem;box-shadow:0 6px 18px rgba(0,0,0,0.4)}
.card h2{margin-top:0}
.footer{margin-top:2rem;opacity:0.8}

/* small screens tweak */
@media (max-width:600px){.spacer{height:320px}.spacer.large{height:420px}.content{padding-top:4rem}}

.parallax-layer layer-bg{src:"Bilder/FloCreate-Logo.png"}