.rubik-dirt-regular {
    font-family: "Rubik Dirt", system-ui;
    font-weight: 400;
    font-style: normal;
  }

body {
font-family: Arial, Helvetica, sansserif;
line-height: 1.6;
margin: 20px;
background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8)),
url("../bilder/asa.jpg") no-repeat center/cover;
color: #333;
}
/* title */
h1 {
color: darkblue;
text-align: center;
}
.Leon{
color: #FF0000;
font-family: "Rubik Dirt", system-ui;
}

.pic {
    display: block;          /* Bild als Block */
    margin-left: auto;       /* links automatisch */
    margin-right: auto;      /* rechts automatisch */
    max-width: 400px;        /* optional: maximale Breite */
    border: 3px solid #333;  /* optional: Rahmen, nur zur Demo */
}

.zwei{
  margin: 50px;
}

.eins {
  margin: 50px;
  border-bottom: 1px #000;
  border-bottom-style: solid;
}

.drei{
  margin: 50px;
  border-bottom: 1px #000;
  border-bottom-style: solid;
}
/* 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; }