/* ==============================
   Basisfarben & Variablen
   ============================== */
:root {
    font-size: 16px; /* Klare Basis */
}

body {
    font-size: 1rem; /* = 16px */
}

h1 {
    font-size: 2rem; /* = 32px, skaliert mit Basis */
}

h2 {
    font-size: 1.6rem;
}

/* ==============================
   Schrift
   ============================== */
@font-face {
    font-family: 'LausitzKI';
    src:
    url('BlueWinter.woff2') format('woff2'),
    url('BlueWinter.otf') format('opentype');
    font-style: normal;
    font-display: swap;
    }

html {
    font-size: 130%; /* 1,3x der Basisgröße */
}

html, body {
  /* Entfernt Standard-Margin/Padding und setzt klare Basis */
  margin: 0;
  padding: 0;
  /* Stellt sicher, dass Höhe korrekt berechnet wird */
  min-height: 100%;
}


/* ==============================
   Body & Grundlayout
   ============================== */
body {
    min-width: 300px;
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
    letter-spacing: 0.1rem;
    color: #ffffff;
    background: #0B2D3A;
    background: -webkit-linear-gradient(180deg, #0b2d3a 0%, rgba(11, 45, 58, 1) 13%, rgba(34, 140, 73, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(11, 45, 58, 1) 0%, rgba(11, 45, 58, 1) 13%, rgba(34, 140, 73, 1) 100%);
    background: linear-gradient(180deg, rgba(11, 45, 58, 1) 0%, rgba(11, 45, 58, 1) 13%, rgba(34, 140, 73, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0B2D3A", endColorstr="#228C49", GradientType=0);
    line-height: 1.3;
    font-size: 1rem; /* 1rem = 130% der Browser-Default-Größe */
}
.mittig {
    text-align: center;
}

.gelb {
    color: #E3C146;
}

/* ==============================
   Header / Banner
   ============================== */
header {
    width: 100%;
    text-align: center;
    padding: 0;
}

header .banner {
    width: 100%;
    display: block;
    height: auto;
    margin: 0 auto 0;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* ==============================
   Hauptcontainer (.content)
   ============================== */
.content {
    width: 68%;
    margin: 34px auto;
    padding: 16px 8px;
    background-color: rgba(255, 255, 255, 0.21);
    border-radius: 8px;
}


.content_l {
    width: 68%;
    margin: 34px auto 34px 8%;
    padding: 16px 21px;
    background-color: rgba(255, 255, 255, 0.21);
    border-radius: 8px;
    box-sizing: border-box;
}

.content_r {
    width: 68%;
    margin: 34px 8% 34px auto;
    padding: 16px 21px;
    background-color: rgba(255, 255, 255, 0.21);
    border-radius: 8px;
    box-sizing: border-box;
}

/* Schatten für Container */
.content,
.content_l,
.content_r {
    box-shadow: 
        0 -3px 8px #F7F59B,    /* Oben: Gelber Schatten nach oben */
        2px 0 8px #F7F59B,     /* Rechts: Gelber Schatten nach rechts */
        0 8px 21px #0b2d3a,    /* Unten: Dunkelblauer Schatten nach unten */
        -5px 0 13px #0b2d3a;    /* Links: Dunkelblauer Schatten nach links */
}

h1 {
    margin: 13px auto;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #e6e8ea;
    text-rendering: optimizeLegibility;
}

h2 {
    margin: 0 0 12px 55px;
    font-family: 'Blue Winter', Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.13rem;
    color: #e6e8ea;
}

/* alle Inhalte im Container nach Überschrift um 21 px einrücken */
.content h1 ~ *,
.content h2 ~ * {
    margin-left: 21px;
}

/* Anpassung an schmale Bildschirme */
@media all and (max-width: 680px)		{

	.content {
        width: 90%;
    }

    .content_r {
        width: 90%;
        margin-right: 8px;
    }

    .content_l {
        width: 90%;
        margin-left: 8px;
    }
}		



/* ==============================
   Bewerbungsformular
   ============================== */
.apply {
    margin-top: 40px;
    padding: 20px;
    border-radius: 10px;
}

.apply p {
    font-size: 16px;
    margin-bottom: 12px;
}

.apply input[type="text"],
.apply input[type="email"],
.apply textarea {
    width: 100%;
    max-width: 600px;
    padding: 10px;
    margin-bottom: 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 12px;
    box-sizing: border-box;
}

.apply button {
    background-color: #E3C146;
    color: #0e3f4f;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.apply button:hover {
    background-color: #e08b3f;
}

/* ==============================
   Footer
   ============================== */
footer {
    text-align: center;
    padding: 20px 10px;
    background: rgba(0,0,0,0.2);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 14px;
    color: #cccccc;
}

/* ==============================
   Responsive Anpassungen
   ============================== */
@media (max-width: 1024px) {
    h1 { font-size: 34px; }
    h2 { font-size: 26px; }
    .apply h2 { font-size: 26px; }
}

@media (max-width: 768px) {
    h1 { font-size: 26px; }
    h2 { font-size: 24px; }
    p, .apply p { font-size: 15px; }

    .apply input[type="text"],
    .apply input[type="email"],
    .apply textarea {
        max-width: 100%;
    }

    .apply button {
        width: 100%;
        padding: 12px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    h1 { font-size: 22px; }
    h2 { font-size: 20px; }
    p, .apply p { font-size: 14px; }
}