:root{
      --accent:#79ac2a;   /* Grün */
      --ink:#0f172a;      /* Text */
      --muted:#475569;    /* Sekundärtext */
      --paper:#ffffff;    /* Heller Hintergrund */
      --bg:#ebfcd6;       /* Zarter Footer-Hintergrund */
    }
    *{ box-sizing:border-box }
    html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink); font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }
    img{ max-width:100%; height:auto; display:block; }
    a{ color:inherit; text-decoration:none }
    .container{ width:min(1120px, 92vw); margin-inline:auto; }

    /* Header */
    header{ position:sticky; top:0; z-index:100; backdrop-filter:saturate(120%) blur(6px); background:color-mix(in srgb, var(--paper) 85%, transparent); border-bottom:1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
    header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; }
    .brand{ font-weight:800; letter-spacing:.2px; }
    nav a{ opacity:.85; font-weight:600; margin-left:1.25rem; }
    nav a:hover{ opacity:1; color: var(--accent); }

/* DOT */
.green-dot{
  color:#79ac2a !important;
  -webkit-text-fill-color:#79ac2a !important;
}
    /* Buttons & Pills */
    a.button{ display:inline-block; padding:.9rem 1.2rem; border-radius:.9rem; background:var(--accent); color:#fff; font-weight:600; letter-spacing:.2px; box-shadow:0 6px 18px rgba(2,8,23,.15); }
    a.button:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(2,8,23,.2); filter:saturate(110%); }
    .pill{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(22,163,74,.12); color:var(--accent); padding:.5rem .7rem; border-radius:999px; font-weight:600; font-size:.84rem }

    /* Stripe Hero */
    .stripe{ padding:0; position:relative; }
.stripe img{
  width:100%;
  height: clamp(440px, 68vh, 720px); /* vorher: clamp(320px, 52vw, 720px) */
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 14px 30px rgba(2,8,23,.18);
}
    .hero-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:2rem; background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.58) 70%, rgba(0,0,0,0.72) 100%); color:white; }
    .kicker{ color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; margin-bottom:.6rem }
    h1{ font-size:clamp(2rem, 4.6vw, 3.4rem); line-height:1.1; margin:0 0 1rem; }
    .lead{ font-size:clamp(1.05rem, 1.6vw, 1.25rem); color:var(--muted); margin:0 0 1.4rem }

/* Zusätzlicher Feinschliff für sehr kleine Screens */
@media (max-width: 420px){
  .hero-overlay{ padding: 1.4rem; }
  .hero-overlay .lead{ margin-bottom: 1rem; }
}

    /* Intro (Wer ich bin) */
    section{ padding: clamp(2.2rem, 5.5vw, 4.5rem) 0; border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
    .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap: clamp(1.6rem, 3vw, 2.4rem); align-items:center; }
    .hero-photo{ display:flex; align-items:center; justify-content:flex-end; }
    .hero-photo img{  width: clamp(200px, 36vw, 420px);
  height: auto;          /* statt max-height */
  border-radius: .75rem;
  box-shadow: 0 18px 40px rgba(2,8,23,.18);
  margin:0; }
  
  @media (min-width:1200px){
  .hero-photo img{
    max-width:380px;
  }
}

    /* Sections */
    h2{ font-size:clamp(1.5rem, 2.8vw, 2.1rem); margin:0 0 1rem; line-height:1.15; color: var(--accent); }
    .grid{ display:grid; gap:1.2rem }
    .cols-2{ grid-template-columns: repeat(2, 1fr); }
    .card{ border:1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius:1rem; padding:1.2rem; background:color-mix(in srgb, var(--paper) 94%, white 6%); box-shadow: 0 6px 20px rgba(2,8,23,.06); }
    .card h3{ margin:.2rem 0 .4rem; }
    .muted{ color:var(--muted) }

    /* Gallery */
    .gallery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:stretch; }
    .tile{ border-radius:1rem; overflow:hidden; border:1px solid color-mix(in srgb, var(--ink) 12%, transparent); background:color-mix(in srgb, var(--paper) 94%, white 6%); box-shadow:0 10px 24px rgba(2,8,23,.10); transition: transform .18s ease, box-shadow .18s ease; }
    .tile:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(2,8,23,.14); }
    .tile img{ width:100%; height: clamp(340px, 42vw, 560px); object-fit:cover; display:block; }
    @media (max-width:880px){ .gallery-grid{ grid-template-columns:1fr; } }

    /* Footer */
    footer{ background:var(--bg); color:#334155; padding:2rem 0; border-top:1px solid rgba(148,163,184,.18); text-align:center; }
    footer a{ color:inherit; font-weight:600; }
    footer a:hover{ color:var(--accent); }

    /* Modal Impressum */
    .modal-overlay{ position:fixed; inset:0; background:rgba(2,8,23,.55); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:1000; }
    .modal-overlay[hidden]{ display:none !important; }
    .modal{ background:#ffffff; color:#0f172a; width:min(720px, 92vw); border-radius:1rem; box-shadow:0 30px 80px rgba(2,8,23,.35); cursor:auto; }
    .modal header{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem .4rem; border-bottom:1px solid rgba(2,8,23,.08); }
    .modal header h2{ margin:0; font-size:1.1rem; color:var(--ink); }
    .modal .content{ padding:1rem; max-height:min(60vh, 540px); overflow:auto; }
    .modal .close{ border:none; background:transparent; cursor:pointer; font-size:1.6rem; line-height:1; color:#334155; }

    /* Responsive */
    @media (max-width:880px){
      nav{ display:none }
      .hero-grid{ grid-template-columns:1fr; text-align:center; }
      .hero-photo{ justify-content:center; }
    }

      /* Footer alignment fix (final) */
    .footer-links{ display:flex; justify-content:center; align-items:center; gap:1rem; }
    .footer-links a, .footer-links .sep{ display:inline-flex; align-items:center; justify-content:center; height:24px; line-height:24px; font-weight:600; }
    .footer-links .sep{ font-weight:400; opacity:.6; }
    .footer-links .icon-link svg{ width:20px; height:20px; display:block; }

.footer-links a[aria-label="XING"] svg{
  margin-top:6px;
}

/* Mobile-Fix für die zwei Karten nebeneinander */
@media (max-width: 820px){
  .grid.cols-2{            /* macht aus 2 Spalten -> 1 Spalte */
    grid-template-columns: 1fr !important;
  }
  .card{                   /* mehr Luft unten */
    margin-bottom: 1.4rem;
    border-radius: 1.1rem; /* optional: mobil etwas weicher */
  }
  /* optional: Text in den Karten etwas entspannen */
  .card p{ line-height: 1.6; }
}