/* Base */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { width: 100%; height: 100%; }
body {
  margin:0;
  font-family:Arial,sans-serif;
  color:#222;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  line-height:1.8;
}

/* Header */
header {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid #ddd;
  padding:10px 20px;
  z-index:1000;
}
header img { max-height:50px; display:block; }

/* Sidebar Navigation */
.sidebar {
  position:fixed;
  top:20%;
  left:5%;
  width:200px;
  display:flex;
  flex-direction:column;
  gap:40px;
  opacity:0;
  pointer-events:none;
  transform:translateY(20px);
  transition:all .5s ease;
}
.sidebar.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.sidebar a{
  text-decoration:none;
  color:#bbb;
  padding-left:40px;
  transition:all .3s ease;
  white-space:nowrap;
  position:relative;
  display:block;
}
.sidebar a::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:12px;height:12px;
  border-radius:50%;
  border:2px solid #bbb;
  background:#bbb;
}
.sidebar a::after{
  content:"";
  position:absolute;
  left:16px;
  top:calc(50% + 12px);
  width:2px;height:40px;
  background:#ddd;
}
.sidebar a:last-child::after{display:none;}
.sidebar a.active,.sidebar a:hover{color:#000;font-weight:bold;}
.sidebar a.active::before,.sidebar a:hover::before{border-color:#000;background:#000;}

/* Hero */
#hero img{width:100%;display:block;margin-top:70px;}

/* Content */
.content{margin-left:20%;margin-top:0;padding:0;flex:1;display:flex;justify-content:center;}
.inner-content{max-width:1100px;width:100%;}
section{margin-bottom:100px;scroll-margin-top:120px;}
h2,h3{color:#00AE41;}

/* Galerie (allgemein) */
.image-gallery{display:flex;gap:20px;margin-top:30px;}
.image-gallery img{
  flex:1;height:200px;object-fit:cover;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.1);
}

/* ==============================================
   Ansiedlung – Galerie mit Beschriftung
============================================== */
.ansiedlung-gallery{
  display:flex;gap:20px;margin-top:20px;justify-content:space-between;flex-wrap:wrap;
}
.ansiedlung-gallery figure{flex:1;margin:0;text-align:left;}
.ansiedlung-gallery img{
  width:100%;height:220px;object-fit:cover;border-radius:6px;cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
}
.ansiedlung-gallery img:hover{transform:scale(1.02);box-shadow:0 6px 18px rgba(0,0,0,.15);}
.ansiedlung-gallery figcaption{
  font-size:.9em;color:#444;font-weight:600;margin-top:6px;text-align:left;line-height:1.2;
}

/* Zwei Spalten (wird für andere Bereiche genutzt) */
.two-column{display:flex;gap:40px;align-items:stretch;}
.two-column .text{flex:1;display:flex;flex-direction:column;justify-content:space-between;}
.two-column .image{flex:1;}
.two-column .image img{width:100%;height:100%;object-fit:cover;}

/* Kacheln (Gemeinde) */
.kachel-row{display:flex;gap:30px;margin-top:40px;}
.kachel-row.three{justify-content:space-between;}
.kachel-row.two{justify-content:center;}
.kachel{
  flex:1;max-width:320px;background:#f8f8f8;padding:20px;border-radius:8px;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s;
}
.kachel:hover{transform:translateY(-5px);box-shadow:0 4px 15px rgba(0,0,0,.15);}
.kachel .icon{display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:10px;color:#00AE41;}
.kachel h3{margin-bottom:8px;text-align:center;}
.kachel p{font-size:.9em;line-height:1.3;margin:0;text-align:justify;}

/* ===== TIMELINE – Desktop ===== */
.timeline{position:relative;margin:20px 0;padding:10px 0;}
.timeline::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#bbb;transform:translateX(-50%);z-index:0;
}
.timeline-item{position:relative;width:50%;padding:5px 30px;box-sizing:border-box;margin-bottom:24px;}
.timeline-item.left{left:0;text-align:right;}
.timeline-item.right{left:50%;text-align:left;}
.timeline-item .dot{
  position:absolute;top:15px;width:14px;height:14px;border-radius:50%;background:#bbb;border:2px solid #fff;
  box-shadow:0 0 0 2px #bbb;z-index:1;transform:translate(-50%,-50%);
}
.timeline-item.left .dot{left:100%;}
.timeline-item.right .dot{left:0;}
.timeline-item .card{background:none;box-shadow:none;border:none;padding:0;max-width:480px;}
.timeline-item .card h3{margin:0 0 3px;font-size:1em;}
.timeline-item .card p{margin:0 0 6px;font-size:.9em;line-height:1.3;text-align:justify;}
.timeline-item:nth-child(-n+7) .card h3,
.timeline-item:nth-child(-n+7) .card p{color:#aaa;}
.timeline-item:nth-child(n+8) .card h3,
.timeline-item:nth-child(n+8) .card p{color:#000;}

/* ---------------------------
   Nachhaltigkeit
----------------------------*/
.sustainability-intro{
  display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:40px;
}
.sustainability-intro .text{flex:2;}
.sustainability-intro .image{flex:1;display:flex;justify-content:center;}
.sustainability-intro .image img{max-width:120px;height:auto;}

/* Raster 1 */
.sustainability-grid{display:flex;gap:20px;width:100%;margin-top:20px;align-items:stretch;}
.sustainability-left{flex:0 0 33.3%;}
.sustainability-right{flex:0 0 66.6%;display:flex;flex-direction:column;gap:20px;}
.sustainability-grid .kachel{
  max-width:none;display:flex;flex-direction:column;justify-content:flex-start;
  box-shadow:0 2px 8px rgba(0,0,0,.1);transition:none;padding:20px;text-align:left;
}
.sustainability-right .kachel{flex:1;}
.sustainability-left .kachel{height:90%;}

/* Raster 2 (gespiegelt) */
.sustainability-grid.reverse{margin-top:20px;}
.sustainability-left-2{flex:0 0 66.6%;display:flex;flex-direction:column;gap:20px;}
.sustainability-right-2{flex:0 0 33.3%;}
.sustainability-right-2 .kachel{height:90%;}

/* Farbvarianten Nachhaltigkeit (Pastell) */
.kachel.light-grey{background:#f5f5f5;color:#333;}
.kachel.light-blue{background:#d9ecff;color:#003366;}
.kachel.dark-blue{background:#336699;color:#fff;}
.kachel.dark-blue h3,.kachel.dark-blue p{color:#fff;}
.kachel.yellow{background:#fff7cc;color:#444;}
.kachel.orange{background:#ffe5cc;color:#333;}
.kachel.green{background:#66b38f;color:#fff;}
.kachel.green h3,.kachel.green p{color:#fff;}

/* Überschriften in Nachhaltigkeits-Kacheln = Textfarbe */
#nachhaltigkeit .kachel h3{color:inherit;margin:0 0 10px;}

/* Inhalte in Nachhaltigkeits-Kacheln vertikal mittig */
#nachhaltigkeit .kachel{justify-content:center;}

/* ---------------------------
   Globale Fade-In
----------------------------*/
.fade-in,
.image-gallery img,
.ansiedlung-gallery img,
.two-column .image img,
.kachel,
.timeline-item{
  opacity:0;transform:translateY(20px);transition:all 1s ease;
}
.fade-in.visible,
.image-gallery img.visible,
.ansiedlung-gallery img.visible,
.two-column .image img.visible,
.kachel.visible,
.timeline-item.visible{
  opacity:1;transform:translateY(0);
}

/* Footer */
footer{background:#000;color:#fff;text-align:center;padding:20px;width:100%;font-size:.9em;line-height:1.6;}
footer a{color:#fff;text-decoration:none;font-weight:bold;}
footer a:hover{text-decoration:underline;}
.footer-contact{margin-top:5px;font-weight:normal;}

/* Text-Link im Fließtext */
.text-link{ text-decoration:underline; color:inherit; }
.text-link:hover{ color:#00AE41; }

/* ============================
   Warum Ammelshain – Bild rechts, Text links
============================ */
#ammelshain{margin-bottom:100px;}
#ammelshain h2{margin-bottom:40px;}
#ammelshain .text-wrap{position:relative;max-width:1100px;margin:0 auto;}
#ammelshain .text-wrap::after{content:"";display:block;clear:both;}
/* rechteckiges Bild rechts */
#ammelshain .circle-image{
  float:right;width:600px;height:auto;margin:0 0 10px 10px;border-radius:0;shape-outside:none;clip-path:none;border:none;
}
#ammelshain .text-wrap p{text-align:justify;line-height:1.8;margin-bottom:16px;}

/* ==============================
   RESPONSIVE – Tablet & Handy
============================== */
@media (max-width: 1200px){
  .content{margin-left:16%;padding:0 16px;}
}

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

  /* keine seitlichen Überläufe */
  html, body { overflow-x: hidden; }

  /* Sidebar aus */
  .sidebar{display:none;}

  /* Content mit einheitlichem Innenabstand */
  .content{margin-left:0;padding:0 16px;}
  .inner-content{max-width:100%;}

  /* Header/Logo zentriert – ohne seitliche Padding-Ränder */
  header{
    padding:10px 0;               /* entfernt 20px Seiten-Padding */
    display:flex;
    justify-content:center;
    align-items:center;
  }
  header img{
    margin:0 auto;
    max-width:85%;
    height:auto;
  }

  section{margin-bottom:70px;}

  /* Über-Wreesmann Galerie */
  .image-gallery{flex-direction:column;gap:15px;}
  .image-gallery img{width:100%;height:auto;}

  /* Ansiedlung-Galerie */
  .ansiedlung-gallery{flex-direction:column;gap:16px;}
  .ansiedlung-gallery figure{width:100%;}
  .ansiedlung-gallery img{width:100%;height:auto;}

  /* Ammelshain: Bild unter Text */
  #ammelshain .circle-image{
    float:none;display:block;margin:0 auto 20px auto;width:100%;max-width:600px;height:auto;
  }

  /* Nachhaltigkeit: H2 + Icon */
  #nachhaltigkeit h2{
    display:flex;align-items:center;gap:10px;
  }
  #nachhaltigkeit .sustainability-intro .image{display:none;}
  #nachhaltigkeit h2::after{
    content:"";display:inline-block;background:url('img/nachhaltig.jpg') no-repeat center/contain;
    width:32px;height:32px;
  }

  /* Nachhaltigkeit: Grids untereinander */
  .sustainability-grid,
  .sustainability-grid.reverse{flex-direction:column;}
  .sustainability-left,
  .sustainability-right,
  .sustainability-left-2,
  .sustainability-right-2{flex:0 0 100%;width:100%;}
  .sustainability-grid .kachel{width:100%;max-width:100%;}
  /* etwas schmaler & mittig */
  .sustainability-grid .kachel{max-width:90%;margin:0 auto 20px;}

  /* Gemeinde-Kacheln untereinander, volle Breite ohne Überstand */
  .kachel-row{flex-direction:column;align-items:stretch;gap:20px;}
  .kachel{max-width:100%;width:100%;padding:16px;margin:0;}

  /* Timeline einspaltig + Punkte exakt auf der Linie */
  .timeline::before{left:20px;transform:none;}
  .timeline-item,
  .timeline-item.left,
  .timeline-item.right{
    width:100%;left:0;text-align:left;padding-left:56px;padding-right:0;
  }
  .timeline-item .dot,
  .timeline-item.left .dot,
  .timeline-item.right .dot{
    left:20px;transform:translate(-50%,-50%);
  }
}

/* Kleine Phones */
@media (max-width: 480px){
  header img{max-height:42px;}
  h2{font-size:1.25rem;}
}