:root{
--orange:#ff9f1a;
--orange2:#ffb347;
--dark:#0a0a0a;
--dark2:#111;
--text:#f2f2f2;
--muted:#bdbdbd;
--link:#f2f2f2;
--logs:#f2f2f2;}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI, Arial, sans-serif;
}

body{
background:#000;
color:var(--text);
}

/* HERO */
.hero{
background:
linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.95)),
url("/images/background.jpg");
background-size:cover;
background-position:center;
min-height:100vh;
display:flex;
flex-direction:column;
}

/* NAVIGATION */
nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 50px;
}

nav .brand{
font-weight:bold;
font-size:20px;
letter-spacing:2px;
color:var(--orange);
}

nav ul{
display:flex;
list-style:none;
align-items:center;
}

nav li{
margin-left:25px;
}

nav a{
text-decoration:none;
color:white;
opacity:.8;
}

nav a:hover{
opacity:1;
color:var(--orange);
}

.btn-nav{
background:var(--orange);
padding:10px 18px;
border-radius:6px;
color:black !important;
font-weight:bold;
}

/* HERO CONTENT */
.hero-content{
flex:1;
display:flex;
align-items:center;
padding:0 50px;
margin-bottom:200px;
}

.hero-left{
max-width:600px;
}

.hero-left img{
width:200px;
margin-bottom:10px;
}

.hero-left h1{
font-size:48px;
margin-bottom:20px;
}

.hero-left p{
color:var(--muted);
margin-bottom:30px;
line-height:1.6;
}

.buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.btn{
padding:14px 26px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
transition:.3s;
}

.btn-primary{
background:var(--orange);
color:black;
}

.btn-primary:hover{
background:var(--orange2);
}

.btn-outline{
border:1px solid var(--orange);
color:var(--orange);
}

.btn-outline:hover{
background:var(--orange);
color:black;
}

/* SECTION */
.section{
background:var(--dark);
padding:80px 50px;
}

.section h2{
text-align:center;
font-size:32px;
margin-bottom:40px;
}

/* CARDS */
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
padding:100px 0px;
}

.card{
background:var(--dark2);
padding:50px;
border-radius:10px;
border:1px solid #222;
transition:.3s;
}

.card:hover{
border-color:var(--orange);
transform:translateY(-5px);
}

.card h3{
color:var(--orange);
margin-bottom:10px;
}

.card p{
color:var(--muted);
margin-bottom:15px;
}

.card a{
color:var(--orange);
text-decoration:none;
font-weight:bold;
}

.txt{
background:var(--dark2);
padding:20px;
border-radius:20px;
transition:.3s;
}

.txt h3{
color:var(--orange);
margin-bottom:10px;
}

.txt p{
color:var(--muted);
margin-bottom:15px;
}

.txt a{
color:var(--orange);
text-decoration:none;
font-weight:bold;
}

/* FOOTER */
footer{
text-decoration:none;
text-align:center;
padding:30px;
color:#888;
}

footer ul{
display:flex;
list-style:none;
align-items:center;
}

footer li{
margin-left:25px;
}

footer a{
text-decoration:none;
color:white;
opacity:.8;
}

footer a:hover{
opacity:1;
color:var(--orange);
}

.logtxt{
background:var(--logs);
padding:10px;
border-radius:20px;
transition:.3s;
}

.contact-container {
            max-width: 800px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
        }
        .contact-info {
            background: var(--dark2);
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #222;
            transition: 0.3s;
        }

        .contact-info h3 {
            color: var(--orange);
            margin-bottom: 10px;
        }
        .contact-info p {
            color: var(--muted);
            margin-bottom: 15px;
            line-height: 1.6;
        }
        .form-card {
            background: var(--dark2);
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #222;
            transition: 0.3s;
        }

        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            color: var(--text);
            margin-bottom: 8px;
            font-weight: bold;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            background: var(--dark);
            border: 1px solid #333;
            border-radius: 6px;
            color: var(--text);
            font-family: inherit;
            transition: 0.3s;
        }
        .form-group input:focus,
        .form-group textarea:focus {
            border-color: var(--orange);
            outline: none;
        }
        .form-group textarea {
            height: 120px;
            resize: vertical;
        }
    .map-container {
      margin-top: 20px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    iframe {
      width: 80%;
      height: 400px;
      border: 0;
    }

     .contact-section {
            background: var(--dark);
            min-height: 100vh;
            padding: 80px 20px;
        }

        .contact-wrapper {
            max-width: 900px;
            margin: 0 auto;
        }

        .contact-title {
            text-align: center;
            font-size: 32px;
            margin-bottom: 40px;
            color: var(--text);
        }

        .status-message {
            margin-bottom: 20px;
            padding: 15px 20px;
            border-radius: 10px;
            font-weight: bold;
            border: 1px solid #222;
        }

        .status-success {
            background: rgba(0, 180, 90, 0.12);
            color: #7dffb0;
            border-color: #1d5;
        }

        .status-error {
            background: rgba(255, 80, 80, 0.12);
            color: #ff9b9b;
            border-color: #933;
        }

        .submit-btn {
            background: var(--orange);
            color: black;
            border: none;
            padding: 14px 26px;
            border-radius: 8px;
            font-weight: bold;
            cursor: pointer;
            transition: .3s;
        }

        .submit-btn:hover {
            background: var(--orange2);
        }

        .honeypot {
            position: absolute;
            left: -9999px;
            opacity: 0;
            pointer-events: none;
            height: 0;
            width: 0;
            overflow: hidden;
        }

        .spam-note {
            color: var(--muted);
            font-size: 14px;
            margin-top: 6px;
        }

/* =========================
   TIMELINE LEFT
   ========================= */

.timeline {
    position: relative;
    max-width: 800px;
    margin: 80px auto;
    padding-left: 40px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--orange);
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 5px;
    width: 18px;
    height: 18px;
    background: var(--orange);
    border-radius: 50%;
}

.timeline-content {
    background: var(--dark2);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #222;
}

.timeline-date {
    color: var(--orange);
    font-weight: bold;
    margin-bottom: 8px;
}

.timeline-text {
    color: var(--muted);
    margin-bottom: 15px;
}

/* =========================
   IMAGE CLICK ZOOM
   ========================= */

.timeline-images{
    display:flex;
    gap:10px;
}

.timeline-images a{
    display:block;
}

/* kleine Bilder */
.timeline-images img{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:6px;
    cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease;
}

/* Mouse Over */
.timeline-images img:hover{
    transform:scale(3.5);
    z-index:10;
    position:relative;
    box-shadow:0 10px 25px rgba(0,0,0,.6);
}

/* dunkler Hintergrund */
.timeline-images a:target::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    z-index:9998;
}

/* großes Bild */
.timeline-images a:target img{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(3);
    z-index:9999;
    border-radius:10px;
    box-shadow:0 0 50px rgba(0,0,0,.9);
}

/* =========================
   IMAGE CLICK ZOOM (CSS ONLY)
   ========================= */

.timeline-images{
    display:flex;
    gap:10px;
}

/* kleine Bilder */
.timeline-images img{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:6px;
    cursor:pointer;
    transition:.25s;
}

/* Overlay */
.timeline-images a:target::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    z-index:9998;
}

/* großes Bild */
.timeline-images a:target img{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(3);
    z-index:9999;
    border-radius:10px;
    box-shadow:0 0 50px rgba(0,0,0,.9);
}

/* =========================
   LINKSSAMMLUNG
   ========================= */

.link-collection {
    max-width: 800px;
    margin: 50px auto;
    display: grid;
    gap: 15px;
    padding: 20px;
}

.link-collection a {
    display: block;
    background: var(--dark2);
    color: var(--orange);
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 10px;
    border: 1px solid #222;
    transition: 0.3s;
    font-weight: bold;
    font-size: 16px;
}

.link-collection a:hover {
    background: var(--orange);
    color: black;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(255,159,26,0.4);
}

#profil .card p strong {
  color: var(--orange);
}

#profil .txt {
  border: 1px solid #222;
}

#profil .txt p {
  line-height: 1.8;
}

#profil .card h3,
#profil .txt h3 {
  letter-spacing: 0.5px;
}

#funkprofil .txt {
  max-width: 950px;
  margin: 0 auto;
  background: var(--dark2);
  border: 1px solid #222;
  border-radius: 20px;
  padding: 25px;
}

.table-wrap {
  overflow-x: auto;
}

.profile-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: transparent;
}

.profile-table th,
.profile-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #222;
  text-align: left;
  vertical-align: top;
}

.profile-table th {
  width: 280px;
  color: var(--orange);
  font-weight: bold;
  background: rgba(255, 159, 26, 0.05);
}

.profile-table td {
  color: var(--muted);
  line-height: 1.7;
}

.profile-table tr:hover th,
.profile-table tr:hover td {
  background: rgba(255, 159, 26, 0.06);
}

@media (max-width: 768px) {
  .profile-table th,
  .profile-table td {
    padding: 12px;
    font-size: 14px;
  }

  .profile-table th {
    width: 180px;
  }
}

.qso-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 500px;
    font-family: Arial, sans-serif;
}

.qso-table th {
    text-align: left;
    background: #f4f4f4;
    padding: 8px;
    width: 40%;
}

.qso-table td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.qso-table tr:hover td {
    background: #f9f9f9;
}


  /* =========================
   TABLET
   ========================= */
@media (max-width: 1024px){

nav{
padding:20px 30px;
}

.hero-content{
padding:0 30px;
margin-bottom:120px;
}

.hero-left h1{
font-size:38px;
}

.section{
padding:60px 30px;
}

.cards{
padding:60px 0;
}

.card{
padding:30px;
}

iframe{
width:100%;
height:350px;
}

}

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

nav{
flex-direction:column;
gap:15px;
padding:20px;
}

nav ul{
flex-wrap:wrap;
justify-content:center;
}

nav li{
margin:5px 10px;
}

.hero{
text-align:center;
}

.hero-content{
flex-direction:column;
padding:0 20px;
margin-bottom:80px;
}

.hero-left{
max-width:100%;
}

.hero-left h1{
font-size:30px;
}

.hero-left img{
width:160px;
}

.buttons{
justify-content:center;
}

.section{
padding:50px 20px;
}

.section h2{
font-size:26px;
}

.cards{
grid-template-columns:1fr;
padding:40px 0;
}

.card{
padding:25px;
}

.contact-container{
grid-template-columns:1fr;
}

iframe{
width:100%;
height:300px;
}

footer ul{
flex-direction:column;
gap:10px;
}

}

/* =========================
   SMALL PHONES
   ========================= */
@media (max-width: 480px){

.hero-left h1{
font-size:24px;
}

.btn{
padding:12px 18px;
font-size:14px;
}

nav .brand{
font-size:18px;
}