:root {
  --brand: #3AA76D;
  --brand-2: #0DB8D7;
  --ink: #101010;
  --muted: #666666;
  --bg: #A9A9A9;
  --card: #cbcbcb;
  --radius: 16px;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
  --maxw: 1000px;
}

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body { margin: 0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); }
    a { color: inherit; text-decoration: none; }
    .container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
    .commit-input {max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
    /* Header */
    header { position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(180%) blur(10px); background: rgba(203,203,203,.8); border-bottom: 1px solid #eee; }
    .head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
    main {
      min-height: 100vh;
    }
    .brand { display:flex; align-items:center; gap:10px; font-weight:700; }
    .brand img { width: 46px; height: 46px; border-radius: 6px; }
    .head nav { display:flex; align-items:center; gap: 16px; }
    .head nav a { opacity: .9; }
    .btn { display:inline-block; padding:10px 14px; border-radius: 999px; border: 2px solid var(--brand); background: radial-gradient(80% 60% at 50% 30%, #fff, var(--brand)); }
    .btn-primary { background: var(--ink); color:#fff; border-color: var(--ink); }
	  .btn:focus { outline: 3px solid #0DB8D7; outline-offset: 2px; }
    .btn-ghost { background: transparent; }
   
    /* Hero */
    .hero { padding: 54px 0 36px; background: radial-gradient(80% 60% at 50% 30%, #fff, #A9A9A9); }
    .hero-grid { display:grid; grid-template-columns: 1fr .9fr; gap: 4px; align-items: center; }
    .kicker { color: var(--brand); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: 12px; }
    .title { font-size: clamp(28px, 4.2vw, 48px); line-height: 1.1; margin: 8px 0 12px; }
    .subtitle { color: var(--muted); margin-bottom: 18px; }

    .overlay-card { display:grid; max-width: 400px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; background: radial-gradient(80% 60% at 50% 30%, #fff, #A9A9A9); }
    .overlay-card h3 { margin: 0 0 8px; }
    .overlay-actions { display:flex; gap:12px;  }

    /* Features */
    .section { padding: 36px 0; }
    .feature-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; }
    .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
	.card, .overlay-card { border: 4px solid #3AA76D; }
    .card h3 { margin-top:0; }
  /*Text-Styles inline Text */
  
  .sidebar {
    display: contents;
    width: 200px;
    height: 100vh;
    background: var(--bg);
    padding: 20px;
    border-right: 1px solid #ddd;
    position: fixed;
}
  #searchInput { width: 100%; padding: 8px; margin-bottom: 20px; }

  .important {
    font-size: 17px;
    color: var(--brand);
    font-style: oblique;
  }
  .important1 {
    font-size: 17px;
    color: radial-gradient(80% 60% at 50% 30%, #fff, var(--brand));
    font-style: oblique;
  }
    /* Ad placeholders (nur Public)
    .ad { display:grid; place-items:center; background:#fff; border:2px dashed #cfcfe8; color:#7a79a6; border-radius: var(--radius); padding: 18px; min-height: 120px; } */

    /* Footer */
    footer { border-top:1px solid #eee; background:#cbcbcb; margin-top: 20px; }
    .foot { display:flex; align-items:center; justify-content:space-between; padding: 16px 0; flex-wrap: wrap; gap: 12px; }
    .muted { color: var(--muted); }

    /* Utilities */
    .row { display:flex; gap:12px; flex-wrap:wrap; }
    .tag { font-size: 12px; padding: 6px 10px; border:1px solid #ddd; border-radius:999px; background:#fff; }

    /* Responsive */
    @media (max-width: 1000px) {
      .hero-grid { grid-template-columns: 1fr .9fr; }
    }
    /* Slider (Fade) */
.slider-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 280px; 
  aspect-ratio: 16 / 9;          /* später gern per media query anpassen */
  border: 3px solid var(--brand);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}


.slide.is-active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  
}

.slider-dots {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 14px;
  background: rgba(255,255,255,.35);
}

.slider-dot.is-active {
  background: rgba(255,255,255,.9);
}

.slider-wrap { max-width: none; margin: 0 auto; } /* optional kleiner als Container */

.slider-caption {
  margin-top: 16px;
  color: var(--ink);
  font-size: 18px;
  font-style: oblique;
  line-height: 1.6;
}

/* Artikel */

.article-head {
  display:block;
 
  
  background: var(--bg); 
  border-bottom: 1px solid var(--brand); 
}
.article-footer {
  
  max-width: var(--maxw);
 
  
  background: var(--bg); 
  border-bottom: 1px solid var(--brand);
  margin: 0 auto; 
  padding: 0 16px; 
}
.article-content {
    display:inline-block;

   
  background: var(--bg); 
  border-bottom: 1px solid var(--brand);
}


.hyperlink {
  font-style: oblique;
  color: var(--brand);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px) {
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slider { height: 240px; }
}

@media (max-width: 620px) {
  .cards-grid { grid-template-columns: 1fr; }
  .slider { height: 210px; }
}

.card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tag-soft {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
} 

.faded { opacity: .75; }

.filters {
  display:block;
  max-width: 980px;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
  margin:.5rem 0 1rem 0;
}

.seotext {
  font-size: 16px;
  
  color: var(--ink);
}

.callmemain {
  color: var(--brand);
  font-weight: bold;
}