@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/playfair-400.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/playfair-500.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/playfair-600.woff2') format('woff2')}


:root{
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --cream:#eeeee4;--cream-2:#efe5d4;--paper:#fbf7f0;--ink:#2a241d;--ink-soft:#5c5346;
  --brown:#8a5635;--brown-dark:#6d4326;--olive:#5f6a45;--gold:#c68a3e;
  --line:rgba(42,36,29,.12);--shadow:0 18px 50px -22px rgba(42,36,29,.45);--r:18px;
  --menu:#1e81b0;--menu-hov:#76b5c5;
  --col-link-text:#ffffff;--col-link-bg:#1e81b0;--col-link-hov:#76b5c5;--col-foo-bg:#1e81b0;--col-pal4:#76b5c5;--col-pal5:#21130d;--col-pal6:#873e23;--col-pal7:#abdbe3;--col-pal8:#063970;--col-pal9:#154c79;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.65;font-size: 20px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:500;line-height:1.14;letter-spacing:-.01em}

header{
    background:#ffffff;
    color:white;
    padding-top: 10px;
    text-align:center;
}

header p{
    font-size:1.2rem;
}

/* Page hero */
.page-hero{position:relative;min-height:340px;display:flex;align-items:flex-end;color:#063970;;overflow:hidden}
.page-hero .wrap{padding-bottom:2rem;padding-top:6rem}
.page-hero .eyebrow{color:#f3e3c8;margin-bottom:.6rem}.page-hero .eyebrow::before{background:#f3e3c8}
.page-hero h2{font-size:clamp(1.9rem,3.4vw,2.9rem);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.page-hero h3{font-size:1.6rem;color: var(--olive);}

/* Navigation */
.container{
    background-color: var(--col-link-bg);
}

/* A simple, css only, (some-what) responsive menu */

.wrap {
  display: inline-block;
  color: var(--col-link-text);
  margin-top: 0;
}

.nav a {
  text-decoration: none;
  display: block;
}

ul {
  list-style: none;
  position: relative;
  text-align: left;
}

li {
  float: left;
}

/* clear'n floats */
ul:after {
  clear: both;
}

ul:before,
ul:after {
    content: " ";
    display: table;
}

nav {
  position: relative;
  background-color: var(--menu);
  text-align: center;
  letter-spacing: 1px;
}

/* prime */
ul.primary li a {
  display: block;
  color: var(--col-link-text);
  padding: 20px 30px;
  border-right: 1px solid #3D3D3D;
}

ul.primary li:last-child a {
  border-right: none;
}

ul.primary li a:hover {
  
  color: #000;
}

/* subs */
ul.sub {
  position: absolute;
  z-index: 200;
  box-shadow: 2px 2px 0 #BEBEBE;
  width: 35%;
  display:none;
}

ul.sub li {
  float: none;
  margin: 0;
}

ul.sub li a {
  border-bottom: 1px dotted #ccc;
  border-right: none;
  color: #000;
  padding: 15px 30px;
}

ul.sub li:last-child a {
  border-bottom: none;
}

ul.sub li a:hover {
  color: #000;
  background: #eeeeee;
}

/* sub display*/
ul.primary li:hover ul {
  display: block;
  background: #fff;
}

/* keeps the tab background white */
ul.primary li:hover a {
  background: #fff;
  color: #666;
  text-shadow: none;
}

ul.primary li:hover > a{
  color: #000;
} 

@media only screen and (max-width: 600px) {
  .decor {
    padding: 3px;
  }
  
  .wrap {
    width: 100%;
    margin-top: 0px;
  }
  
   li {
    float: none;
  }
  
  ul.primary li:hover a {
    background: none;
    color: #8B8B8B;
    text-shadow: 1px 1px #000;
  }

  ul.primary li:hover ul {
    display: block;
    background: #272727;
    color: #fff;
  }
  
  ul.sub {
    display: block;  
    position: static;
    box-shadow: none;
    width: 100%;
  }
  
  ul.sub li a {
    background: #272727;
  	border: none;
    color: #8B8B8B;
  }
  
  ul.sub li a:hover {
    color: #ccc;
    background: none;
  }
}
main{
    max-width:1000px;
    margin:40px auto;
    padding:20px;
    background:white;
    border-radius:8px;
    box-shadow:0 0 10px rgba(0,0,0,.15);
}

.hero{
    background:url('https://images.unsplash.com/photo-1580281657527-47f249e8f4df?auto=format&fit=crop&w=1600&q=80') center/cover;
    height:450px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero div{
    background:rgba(255,255,255,0.85);
    padding:40px;
    border-radius:12px;
    text-align:center;
}

section{
    max-width:1100px;
    margin:auto;
    padding:70px 20px;
}

h2{
    color:#063970;
    margin-bottom:20px;
    text-align:center;
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
    margin-top:35px;
}

.card{
    background:white;
    padding:30px;
    border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.3s;
}

.card:hover{
    transform:translateY(-5px);
}

.card h3{
    color:#2d6a4f;
    margin-bottom:15px;
}

.info{
    background:#d8f3dc;
    border-radius:10px;
}

footer{
    background:#1b4332;
    color:white;
    text-align:center;
    padding:40px 20px;
}

button{
    background:#1e81b0;
    color:white;
    border:none;
    padding:14px 30px;
    border-radius:30px;
    font-size:16
    px;
    cursor:pointer;
    margin-top:20px;
}

button:hover{
    background:#76b5c5;
}

.contact{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.table{
    width:100%;
    max-width:1000px;
    margin:auto;
    display:flex;
    flex-direction:column;
    border:1px solid #ccc;
    border-radius:8px;
    overflow:hidden;
}

.row{
    display:flex;
    border-bottom:1px solid #ddd;
}

.row:last-child{
    border-bottom:none;
}

.header{
    background:#0078d7;
    color:#fff;
    font-weight:bold;
}

.cell{
    flex:1;
    padding:15px;
    border-right:1px solid #ddd;
}

.cell:last-child{
    border-right:none;
}

/* Responsive */
@media (max-width:768px){

    .header{
        display:none;
    }

    .row{
        display:block;
        margin-bottom:15px;
        border:1px solid #ccc;
        border-radius:8px;
        background:#fff;
    }

    .cell{
        display:flex;
        justify-content:space-between;
        border:none;
        border-bottom:1px solid #eee;
        padding:12px 15px;
    }

    .cell:last-child{
        border-bottom:none;
    }

    .cell::before{
        content:attr(data-title);
        font-weight:bold;
        color:#0078d7;
        margin-right:20px;
    }
}

.news-container{

width:95%;
max-width:1100px;
margin:auto;

}

.news{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;
margin:30px 0;

}

.box{

background:#fff;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,.15);
overflow:hidden;

}

.header{

background:#1565C0;
color:white;
padding:15px;
font-size:22px;

}

.content{

padding:20px;
line-height:1.6;

}

.footer{

background-color: var(--col-foo-bg);
padding:12px;
font-size:14px;

}
.footer h2{
	font-family: var(--sans);
	color: var(--col-link-text);
}

.footer a{
	font-family: var(--sans);
	color: var(--col-link-text);
}

@media(max-width:600px){

.header{

font-size:18px;

}

}
/* Kontaktformular */
.kontakt-container{
    max-width:600px;
    margin:auto;
    background:#fff;
    padding:30px;
    border-radius:10px;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
}

h2{
    text-align:center;
    margin-bottom:20px;
    color:#333;
}

.form-group{
    margin-bottom:18px;
}

label{
    display:block;
    margin-bottom:6px;
    font-weight:bold;
}

input,
textarea{
    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:6px;
    font-size:16px;
}

textarea{
    resize:vertical;
    min-height:140px;
}

.checkbox{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.checkbox input{
    width:auto;
    margin-top:4px;
}

button{
    width:100%;
    padding:14px;
    background:#0077cc;
    color:#fff;
    border:none;
    border-radius:6px;
    font-size:18px;
    cursor:pointer;
    transition:.3s;
}

button:hover{
    background:#005fa3;
}

.captcha{
    font-size:18px;
    font-weight:bold;
    margin-bottom:10px;
}

@media(max-width:600px){

.container{
    padding:20px;
}

button{
    font-size:16px;
}

}/* Team */
        .team{
            max-width:1200px;
            margin:50px auto;
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
            gap:25px;
            padding:20px;
        }

        .card{
            background:white;
            border-radius:15px;
            overflow:hidden;
            box-shadow:0 8px 20px rgba(0,0,0,0.15);
            transition:0.3s;
        }

        .card:hover{
            transform:translateY(-8px);
        }

        .card img{
            width:100%;
            height:280px;
            object-fit:cover;
        }

        .card-content{
            padding:20px;
            text-align:center;
        }

        .card h2{
            margin-bottom:5px;
        }

        .role{
            color:#0077ff;
            font-weight:bold;
            margin-bottom:15px;
        }

        .card p{
            line-height:1.6;
        }