/* maile.responsive.dark-light.css
   Dunkles Design mit automatischer Anpassung per prefers-color-scheme
   (schaltet sich je nach Systemeinstellung zwischen hell/dunkel um)
*/

:root{
  --radius:1rem;
  --shadow:0 4px 12px rgba(0,0,0,0.3);
  --font-sans:'Open Sans', system-ui, sans-serif;
}

/* Default: Light Mode */
:root{
  --bg:#ffffff;
  --panel:#f9f9f9;
  --text:#333333;
  --muted:#555555;
  --accent:#ff6600;
  --accent-hover:#e65c00;
}

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  font-size:14px;
  line-height:1.4;
}

h1,h2,h3{margin:0.5em 0;color:var(--text)}
a{text-decoration:none;color:var(--accent)}
a:hover{color:var(--accent-hover)}

/* Hero */
.hero{
  background:url('images/maile_background.jpg') no-repeat center center/cover;
  height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--text);
}
.hero .overlay{
  background:rgba(255,102,0,0.7);
  padding:1.5rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero .logo{width:140px;margin-bottom:1rem}
.hero h1{font-size:2rem;font-weight:700}
.hero p{margin-bottom:1rem;color:var(--muted)}

.btn{
  background:var(--accent);
  color:#fff;
  padding:0.6rem 1.2rem;
  border-radius:2rem;
  font-weight:bold;
  transition:0.3s;
  display:inline-block;
}
.btn:hover{background:var(--accent-hover)}

/* Über mich */
.about{padding:3rem 1.5rem}
.about-container{
  display:flex;
/*  flex-wrap:wrap; */
  gap:1.5rem;
  max-width:1000px;
  margin:auto;
  align-items:center;
}
.portrait{width:250px;border-radius:var(--radius);box-shadow:var(--shadow)}

.columns{display:flex;gap:1.5rem;flex-wrap:wrap}

/* Fähigkeiten */
.skills{background:var(--panel);padding:3rem 1.5rem}
.skills-container{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}
.skills .images img{width:120px; border-radius:120px; margin-bottom:1rem;box-shadow:var(--shadow)}

._timeline{border-left:3px solid var(--accent);padding-left:1rem}
.timeline{padding-left:1rem;border-left:3px solid var(--accent)}
.knoten{margin:1rem 0;font-weight:bold;position:relative}
.knoten::before{
  content:"";
  position:absolute;
  left:-1.5rem;
  top:0.2rem;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--accent);
}

/* Galerie */
.gallery{padding:3rem 1.5rem}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.gallery-grid img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);transition:0.3s}
.gallery-grid img:hover{transform:scale(1.05)}


/* Stationen */
.stations{background:var(--panel);padding:3rem 1.5rem}


/* Presse */
.presse{padding:3rem 1.5rem}

.press-grid{text-align: center;}
.press-grid img{width:70%;border-radius:var(--radius);box-shadow:var(--shadow);transition:0.3s}
.press-grid img:hover{transform:scale(1.05)}


/* Footer */
footer{background:var(--panel);color:var(--muted);text-align:center;padding:1rem;font-size:12px}

.about-text p{margin-bottom:1rem;line-height:1.5;color:var(--muted)}
.skills .intro{max-width:800px;margin:0 auto 2rem;text-align:center;font-style:italic;color:var(--muted)}

/* Dark Mode */
@media(prefers-color-scheme: dark){
  :root{
    --bg:#0b0d0f;
    --panel:#131517;
    --text:#e6eef6;
    --muted:#9ba1a7;
    --accent:#ff6600;
    --accent-hover:#e65c00;
    --shadow:0 4px 12px rgba(0,0,0,0.6);
  }
  .hero .overlay{background:rgba(11,13,15,0.8)}
  footer{background:#0f1113;color:var(--muted)}
}

/* Responsive Anpassungen */
@media(max-width:900px){
  .hero h1{font-size:1.8rem}
  .about-container{flex-direction:column;align-items:flex-start}
  .columns{flex-direction:column}

  .portrait {margin: auto;}
}
@media(max-width:600px){
  body{font-size:13px}
  .hero .logo{width:110px}
  .hero h1{font-size:1.5rem}
  .btn{padding:0.5rem 1rem}
}
@media(max-width:400px){
  body{font-size:12px}
  .hero{height:80vh}
}


/* Ende */