:root{
      --text:#555555;
      --bg:#f2f2f2;
      --wine:#7b1e2b;
      --olive:#6a7d47;
      --beige:#C19A6B;
      --whatsapp:#25D366;
      --accent:var(--beige);
      --card:#ffffff;
      --muted:#8f8f8f;
      --shadow:0 10px 30px rgba(0,0,0,.08);
      --radius:10px;
      --maxw:1100px;
      --whatsapp:#25D366;
    }

    html{scroll-behavior:smooth}
    body{
      margin:0; background:var(--bg); color:var(--text);
      font-family:"Roboto Flex", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      font-weight:400; line-height:1.6;
    }

    /* ms-madi-regular - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Ms Madi';
      font-style: normal;
      font-weight: 400;
      src: url('fonts/ms-madi-v2-latin-regular.eot'); /* IE9 Compat Modes */
      src: url('fonts/ms-madi-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('fonts/ms-madi-v2-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
          url('fonts/ms-madi-v2-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
          url('fonts/ms-madi-v2-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
          url('fonts/ms-madi-v2-latin-regular.svg#MsMadi') format('svg'); /* Legacy iOS */
    }

/* --- Roboto Flex - Light (300) --- */
    @font-face {
      font-display: swap;
      font-family: 'Roboto Flex';
      font-style: normal;
      font-weight: 300;
      font-stretch: 100%;
      src: url('fonts/roboto-flex-v30-latin-300.eot');
      src: url('fonts/roboto-flex-v30-latin-300.eot?#iefix') format('embedded-opentype'),
          url('fonts/roboto-flex-v30-latin-300.woff2') format('woff2'),
          url('fonts/roboto-flex-v30-latin-300.woff') format('woff'),
          url('fonts/roboto-flex-v30-latin-300.ttf') format('truetype'),
          url('fonts/roboto-flex-v30-latin-300.svg#RobotoFlex') format('svg');
    }

    /* --- Roboto Flex - Regular (400) --- */
    @font-face {
      font-display: swap;
      font-family: 'Roboto Flex';
      font-style: normal;
      font-weight: 400;
      font-stretch: 100%;
      src: url('fonts/roboto-flex-v30-latin-regular.eot');
      src: url('fonts/roboto-flex-v30-latin-regular.eot?#iefix') format('embedded-opentype'),
          url('fonts/roboto-flex-v30-latin-regular.woff2') format('woff2'),
          url('fonts/roboto-flex-v30-latin-regular.woff') format('woff'),
          url('fonts/roboto-flex-v30-latin-regular.ttf') format('truetype'),
          url('fonts/roboto-flex-v30-latin-regular.svg#RobotoFlex') format('svg');
    }

    /* --- Roboto Flex - SemiBold (600) --- */
    @font-face {
      font-display: swap;
      font-family: 'Roboto Flex';
      font-style: normal;
      font-weight: 600;
      font-stretch: 100%;
      src: url('fonts/roboto-flex-v30-latin-600.eot');
      src: url('fonts/roboto-flex-v30-latin-600.eot?#iefix') format('embedded-opentype'),
          url('fonts/roboto-flex-v30-latin-600.woff2') format('woff2'),
          url('fonts/roboto-flex-v30-latin-600.woff') format('woff'),
          url('fonts/roboto-flex-v30-latin-600.ttf') format('truetype'),
          url('fonts/roboto-flex-v30-latin-600.svg#RobotoFlex') format('svg');
    }

    /* --- Roboto Flex - Bold (700) --- */
    @font-face {
      font-display: swap;
      font-family: 'Roboto Flex';
      font-style: normal;
      font-weight: 700;
      font-stretch: 100%;
      src: url('fonts/roboto-flex-v30-latin-700.eot');
      src: url('fonts/roboto-flex-v30-latin-700.eot?#iefix') format('embedded-opentype'),
          url('fonts/roboto-flex-v30-latin-700.woff2') format('woff2'),
          url('fonts/roboto-flex-v30-latin-700.woff') format('woff'),
          url('fonts/roboto-flex-v30-latin-700.ttf') format('truetype'),
          url('fonts/roboto-flex-v30-latin-700.svg#RobotoFlex') format('svg');
    }

      .nav a.imprint-logo {
      margin-left: 0;
      font-family: "Ms Madi", cursive;
      font-size: 46px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: .5px;
      color: var(--accent);
      white-space: nowrap;
    }

    .nav a.imprint-back {
      margin-left: 16px;
      color: var(--text);
      font-size: 15px;
      font-weight: 600;
      white-space: nowrap;
    }

    .nav a.imprint-back:hover {
      color: var(--accent);
    }

    .imprint-main {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 26px 20px;
    }

    .imprint-heading {
      margin-bottom: 26px;
    }

    .imprint-heading h1 {
      margin: 18px 0 10px;
      color: var(--accent);
      font-size: clamp(34px, 4.5vw, 50px);
      line-height: 1.15;
    }

    .imprint-heading p {
      margin: 0;
      font-size: 16px;
      line-height: 1.7;
    }

    .imprint-card {
      box-sizing: border-box;
      max-width: none;
      margin: 0 0 18px;
      padding: 28px 32px;
    }

    .imprint-card h2 {
      font-size: clamp(22px, 2.6vw, 28px);
      margin: 0 0 20px;
    }

    .imprint-facts {
      display: grid;
      grid-template-columns: 225px minmax(0, 1fr);
      margin: 0;
      column-gap: 22px;
    }

    .imprint-facts dt,
    .imprint-facts dd {
      margin: 0;
      padding: 12px 0;
      border-bottom: 1px solid #ededed;
      overflow-wrap: anywhere;
    }

    .imprint-facts dt {
      color: var(--muted);
      font-weight: 600;
    }

    .imprint-facts dd {
      color: var(--text);
    }

    .imprint-facts dt:nth-last-of-type(1),
    .imprint-facts dd:last-child {
      border-bottom: 0;
    }

    .imprint-facts a {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .imprint-facts a:hover {
      color: var(--wine);
    }

    .imprint-placeholder {
      color: var(--wine);
      font-weight: 600;
    }

    @media (max-width: 640px) {
      .nav {
        padding: 14px 16px;
      }

      .nav a.imprint-logo {
        font-size: 30px;
      }

      .nav a.imprint-back {
        font-size: 13px;
        margin-left: 10px;
      }

      .imprint-main {
        padding: 32px 16px 40px;
      }

      .imprint-card {
        padding: 22px 20px;
      }

      .imprint-facts {
        display: block;
      }

      .imprint-facts dt {
        border: 0;
        padding: 12px 0 0;
      }

      .imprint-facts dd {
        padding: 2px 0 12px;
      }

      .imprint-facts dd:last-child {
        border: 0;
      }
    }


    /* Header / Logo */
    .topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(6px); background:rgba(255,248,246,.75); border-bottom:1px solid rgba(0,0,0,.05)}
    .nav{max-width:var(--maxw); margin:auto; display:flex; align-items:center; justify-content:space-between; padding:14px 20px}
    .logo{font-family:"Ms Madi", cursive; font-size:46px; color:var(--accent); letter-spacing:.5px; white-space:nowrap; line-height:1}
    .nav a{color:var(--text); text-decoration:none; margin-left:22px; font-weight:600; font-size:15px}
    .nav a:hover{color:var(--accent)}
    .nav .cta{background:var(--accent); color:#fff; padding:10px 16px; border-radius:999px; box-shadow:var(--shadow); transition:filter .2s ease}
    .nav .cta:hover{background:var(--muted);color:#fff; }

    /* Mobile Nav */
    .burger{display:none; font-size:22px; border:0; background:transparent}
    @media (max-width:860px){
      .navlinks{display:none}
      .burger{display:block}
    }
    .drawer{position:fixed; inset:0 0 0 auto; width:min(86vw,380px); background:#fff; box-shadow:var(--shadow); transform:translateX(105%); transition:transform .3s ease; z-index:60}
    .drawer.open{transform:translateX(0)}
    .drawer header{display:flex; align-items:center; justify-content:space-between; padding:18px 18px; border-bottom:1px solid #eee}
    .drawer a{display:block; padding:16px 20px; color:#333; text-decoration:none; border-bottom:1px dashed #f0f0f0}
    .drawer a:hover{background:#fafafa; color:var(--accent)}

    /* Hero */
    .hero{max-width:var(--maxw); margin:40px auto; padding:20px; display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center}
    .hero h1{font-size:clamp(34px,4.5vw,56px); line-height:1.1; margin:0 0 14px; color:var(--accent)}
    .hero p{font-size:clamp(16px,1.25vw,18px)}
    .hero .tag{display:inline-flex; gap:8px; align-items:center; font-weight:700; letter-spacing:.2px; color:var(--accent); margin-bottom:12px}
    .kicker{display:inline-block; padding:10px 14px; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:999px; box-shadow:var(--shadow); font-weight:600}
    .cta-row{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
    .btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:12px 18px; border-radius:999px; font-weight:700; border:2px solid var(--olive); color:#fff; background:var(--olive); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
    .btn.secondary{background:transparent; color:var(--accent)}
    .btn:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.10); filter:brightness(.97)}

    .bt-wa{display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:12px 18px; border-radius:999px; font-weight:700; border:2px solid var(--whatsapp); color:#fff; background:var(--whatsapp); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease}
    .bt-wa.secondary{background:transparent; color:var(--accent)}
    .bt-wa:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.10); filter:brightness(.97)}

    

    .portrait{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
    .portrait img{width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.03); transition:transform 1.2s ease}
    .portrait:hover img{transform:scale(1.06)}
    .portrait::after{content:""; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(to top, rgba(0,0,0,.2), transparent)}

    


    @media (max-width:980px){
      .hero{grid-template-columns:1fr;}
    }

    /* Sections */
    section{max-width:var(--maxw); margin:0 auto; padding:26px 20px}
    h2{font-size:clamp(26px,3.2vw,36px); color:var(--accent); margin:6px 0 14px}
    .cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
    .card{background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
    .card i{font-size:22px; margin-right:5px; color:var(--accent)}
    .card h3{margin:8px 0 8px; font-size:20px; color:#2a2a2a}
    .card p{margin:0}
    @media (max-width:960px){ .cards{grid-template-columns:1fr 1fr} }
    @media (max-width:640px){ .cards{grid-template-columns:1fr} }

    .quote{background:var(--accent); border:1px solid rgba(0,0,0,.05)}
    blockquote{margin:0; font-size:20px; font-weight:600; color:#fff}

    .offer-list{display:grid; gap:14px}
    .offer{display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #f0f0f0; border-radius:var(--radius); padding:16px}
    .offer i{color:var(--accent); font-size:22px; margin-top:2px}
    .offer a {color:var(--accent); }
    .offer a:hover {text-decoration: underline!important}

    .cta-panel{display:flex; flex-direction:column; gap:12px; align-items:start; background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}

    .contact{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
    @media (max-width:900px){ .contact{grid-template-columns:1fr} }

    /* Warum-Section mit Bild links */
    .why-grid{
      display:grid;
      grid-template-columns:1fr 1.3fr;
      gap:24px;
      align-items:center;
    }
    .why-img{
      position:relative;
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .why-img img{
      width:100%;
      height:auto;
      display:block;
      object-fit:cover;
      transform:scale(1.02);
      transition:transform 1s ease;
    }
    .why-img:hover img{ transform:scale(1.06); }
    .why-text p{ margin-top:0; font-size: 120%}
    @media (max-width:900px){
      .why-grid{ grid-template-columns:1fr; }
    }

    /* Über mich – Bild rechts, Text links */
    .about-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr; /* links mehr Textbreite, rechts Bild */
      gap:24px;
      align-items:center;
    }
    .about-text p{ margin:0 0 12px 0; }
    .about-img{
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }
    .about-img img{
      width:100%;
      height:auto;
      display:block;
      object-fit:cover;
      transform:scale(1.02);
      transition:transform 1s ease;
    }
    .about-img:hover img{ transform:scale(1.06); }
    @media (max-width:900px){
      .about-grid{ grid-template-columns:1fr; }
    }

    /* === Einheitliche Portrait-Größe & Mobile-Randoptimierung === */
    .media-portrait{
      position:relative;
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
      aspect-ratio: 4 / 5;     /* gleiches Seitenverhältnis */
      width: 82%;              /* etwas kleiner am Desktop */
      margin: 0 auto;          /* zentrieren */
      max-height: 720px;       /* optionaler Deckel */
    }
    .media-portrait img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      transform:scale(1.02);
      transition:transform 1s ease;
    }
    .media-portrait:hover img{ transform:scale(1.06); }

    @media (max-width: 900px){
      .hero{ padding: 16px; }
      section{ padding: 22px 16px; }
      .media-portrait{
        width: 100%;
        max-height: none;
        border-radius: 8px;
        margin-left: -6px;   /* etwas näher an den Rand */
        margin-right: -6px;
      }
    }

    /* Footer */
    footer{margin-top:28px; background:#111; color:#d6d6d6}
    .footer-wrap{
      max-width:var(--maxw);
      margin:auto;
      padding:28px 20px;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap:24px;
    }
    .footer-wrap h4{color:#fff; margin:0 0 8px}
    .keywords{font-size:14px; color:#bdbdbd}
    .small{font-size:13px; color:#a5a5a5}

    /* Legal-Zeile schön umbrechen & zentrieren */
    .legal{
      border-top:1px solid rgba(255,255,255,.1);
      padding:14px 20px;
      text-align:center;
      font-size:13px;
      color:#9a9a9a;
      display:flex;
      gap:6px;
      justify-content:center;
      flex-wrap:wrap;
    }
    .legal a{color:inherit; text-decoration:underline}
    .legal a:hover{opacity:.85}

    /* Utilities */
    .container{max-width:var(--maxw); margin:auto; padding:0 20px}
    .muted{color:var(--muted)}
    .sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

    /* Animations */
    @media (prefers-reduced-motion:no-preference){
      .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
      .reveal.in{opacity:1; transform:none}
      .hover-lift{transition:transform .25s ease, box-shadow .25s ease}
      .hover-lift:hover{transform:translateY(-3px); box-shadow:0 12px 34px rgba(0,0,0,.10)}
      .fade-in{opacity:0; animation:fadeIn .9s ease .2s forwards}
    }
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}

 /* === Rezensionen / Stimmen === */

.testimonial-slider{
  position:relative;
}

.testimonial-slides{
  display:grid;
}

.testimonial-slide{
  grid-area:1 / 1;
  position:relative;
  background:var(--card);
  border-radius:var(--radius);
  padding:28px 30px 24px;
  box-shadow:var(--shadow);
  border-left:4px solid var(--accent);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:
    opacity .6s ease,
    visibility .6s ease;
}

.testimonial-slide.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.testimonial-icon{
  font-size:30px;
  color:var(--accent);
  margin-bottom:12px;
  opacity:.75;
}

.testimonial blockquote{
  margin:0;
  padding:0;
  color:var(--text);
  font-size:18px;
  font-weight:400;
  white-space:pre-line;
}

.testimonial-author{
  margin-top:18px;
  font-weight:600;
  color:var(--accent);
}

.testimonial-anonym{
  display:block;
  margin-top:3px;
  font-size:13px;
  font-weight:400;
  color:var(--muted);
}


/* Navigation */

.testimonial-navigation{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:18px;
}

.testimonial-prev,
.testimonial-next{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, opacity .2s ease;
}

.testimonial-prev:hover,
.testimonial-next:hover{
  transform:scale(1.08);
  opacity:.9;
}


/* Punkte */

.testimonial-dots{
  display:flex;
  gap:8px;
  align-items:center;
}

.testimonial-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#ccc;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}

.testimonial-dot.active{
  background:var(--accent);
  transform:scale(1.3);
}


@media (max-width:640px){

  .testimonial-slide{
    padding:22px 20px;
  }

  .testimonial blockquote{
    font-size:16px;
  }

}