/* Marketing mit Jule – gemeinsames Layout aller Leistungsseiten */

:root {
  --gold: #c0920b;
  --gold-light: #f1b811;
  --green: #00403b;
  --green-dark: #002e2a;
  --cream: #fefaee;
  --cream-dark: #f5eecc;
  --black: #111;
  --gray: #555;
  --gray-light: #f7f5ef;
  --line: #e8e2cc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--black);
  background: #fff;
  line-height: 1.7;
}

a { color: var(--gold); }


/* BROTKRÜMELPFAD – Punkte und gestrichelte Linie wie im Logo */
.breadcrumb { background: var(--green); padding: 0.4rem 5% 0.9rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.5rem; }
.breadcrumb li { display: flex; align-items: center; font-size: 0.85rem; color: var(--cream); }
.breadcrumb li::before {
  content: '';
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  margin-right: 0.55rem;
  flex-shrink: 0;
}
.breadcrumb li + li {
  padding-left: 46px;
  margin-left: 10px;
  background: repeating-linear-gradient(90deg, #5d7a35 0 7px, transparent 7px 12px) left center / 34px 2px no-repeat;
}
.breadcrumb a { color: var(--cream); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb li[aria-current="page"] { color: var(--gold-light); font-weight: 600; }
.breadcrumb li[aria-current="page"]::before {
  width: 11px; height: 11px;
  background: var(--gold-light);
  box-shadow: 0 0 0 3px var(--green), 0 0 0 5px var(--gold-light);
  margin-left: 3px;
  margin-right: 0.7rem;
}

/* ALLGEMEIN */
section { padding: 5rem 5%; }
.inner { max-width: 1100px; margin: 0 auto; }
.section-label { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 0.5rem; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--green); line-height: 1.25; margin-bottom: 1rem; }
.section-intro { color: var(--gray); margin-bottom: 2.5rem; }

.btn { display: inline-block; background: var(--gold); color: var(--cream); padding: 0.8rem 2rem; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: background 0.2s, transform 0.1s; }
.btn:hover { background: var(--gold-light); transform: translateY(-1px); }
.btn-outline { display: inline-block; color: var(--cream); padding: 0.75rem 2rem; border-radius: 4px; border: 2px solid var(--gold); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: all 0.2s; }
.btn-outline:hover { background: var(--gold); }

/* HERO */
.hero { background: var(--green); color: var(--cream); padding: 3rem 5% 5rem; }
.hero .inner { max-width: 1100px; margin: 0 auto; }
.hero-kicker { font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-light); margin-bottom: 0.5rem; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--gold); font-weight: 700; line-height: 1.2; margin-bottom: 1.25rem; }
.hero-lead { font-size: 1.1rem; margin-bottom: 1.5rem; }
.hero-punkte { list-style: none; margin-bottom: 2rem; display: grid; gap: 0.6rem; }
.hero-punkte li { display: flex; gap: 0.6rem; align-items: flex-start; }
.hero-punkte li::before { content: '✓'; color: var(--gold-light); font-weight: 700; flex-shrink: 0; }
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

/* PROBLEM */
.problem { background: var(--cream); }
.problem-liste { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
.problem-liste li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; color: var(--gray); position: relative; padding-top: 2.6rem; }
.problem-liste li::before { content: '“'; position: absolute; top: 0.2rem; left: 1.2rem; font-size: 3rem; line-height: 1; color: var(--gold); font-weight: 700; }
.problem-loesung { font-size: 1.1rem; font-weight: 500; color: var(--green); }

/* LEISTUNGSUMFANG */
.umfang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.umfang-karte { border: 1px solid var(--line); border-radius: 12px; padding: 1.75rem; transition: transform 0.2s, box-shadow 0.2s; }
.umfang-karte:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,64,59,0.1); }
.umfang-karte h3 { font-size: 1.05rem; color: var(--green); margin-bottom: 0.4rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.umfang-karte h3::before { content: '✓'; color: var(--gold); font-weight: 700; }
.umfang-karte p { color: var(--gray); font-size: 0.93rem; }

/* ABLAUF */
.ablauf { background: var(--gray-light); }
.schritte { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: schritt; }
.schritte li { counter-increment: schritt; }
.schritte li::before { content: counter(schritt); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: var(--gold-light); font-weight: 700; font-size: 1.2rem; margin-bottom: 1rem; }
.schritte h3 { font-size: 1.05rem; color: var(--green); margin-bottom: 0.3rem; }
.schritte p { color: var(--gray); font-size: 0.93rem; }

/* ZIELGRUPPEN */
.zielgruppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.zielgruppen span { background: var(--cream-dark); color: var(--green); padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.9rem; font-weight: 500; }
.zielgruppen-hinweis { color: var(--gray); }

/* WARUM ICH */
.warum { background: var(--green); color: var(--cream); }
.warum .section-title { color: var(--gold); }
.warum-grid { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: center; }
.warum-portrait { text-align: center; }
.warum-portrait img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 4px solid var(--gold); display: block; margin: 0 auto 1rem; }
.warum-portrait strong { display: block; color: var(--gold-light); }
.warum-portrait small { font-size: 0.85rem; opacity: 0.85; }
.warum-punkte { display: grid; gap: 1.25rem; }
.warum-punkte h3 { color: var(--gold-light); font-size: 1.05rem; margin-bottom: 0.2rem; }
.warum-punkte p { font-size: 0.95rem; }

/* FAQ */
.faq-liste { width: 100%; }
.faq-liste details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.faq-liste summary { cursor: pointer; font-weight: 600; color: var(--green); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: '+'; color: var(--gold); font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.faq-liste details[open] summary::after { content: '–'; }
.faq-liste details p { color: var(--gray); margin-top: 0.6rem; }

/* VERWANDTE LEISTUNGEN */
.verwandt { background: var(--cream); }
.verwandt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.verwandt-grid a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; text-decoration: none; color: var(--black); transition: transform 0.2s, box-shadow 0.2s; }
.verwandt-grid a:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,64,59,0.1); }
.verwandt-grid strong { display: block; color: var(--green); margin-bottom: 0.3rem; }
.verwandt-grid span { color: var(--gray); font-size: 0.9rem; display: block; }
.verwandt-grid em { font-style: normal; color: var(--gold); font-weight: 600; font-size: 0.9rem; display: inline-block; margin-top: 0.6rem; }

/* ABSCHLUSS-CTA */
.cta { background: var(--green); color: var(--cream); text-align: center; }
.cta .section-title { color: var(--gold); }
.cta p { margin: 0 auto 2rem; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* FOOTER */
footer { background: var(--green-dark); color: var(--cream); padding: 2.5rem 5%; font-size: 0.85rem; }
.footer-unten a { color: var(--gold-light); text-decoration: none; }
.footer-unten a:hover { text-decoration: underline; }
.footer-unten { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-unten a { margin-left: 1.5rem; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .problem-liste, .umfang-grid, .verwandt-grid { grid-template-columns: 1fr 1fr; }
  .schritte { grid-template-columns: 1fr 1fr; }
  .warum-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  section { padding: 3.5rem 5%; }
  .breadcrumb li + li { padding-left: 30px; margin-left: 6px; background-size: 20px 2px; }
  .problem-liste, .umfang-grid, .verwandt-grid, .schritte { grid-template-columns: 1fr; }
  .hero-buttons .btn, .hero-buttons .btn-outline, .cta-buttons .btn, .cta-buttons .btn-outline { width: 100%; text-align: center; }
  .footer-unten a { margin-left: 0; margin-right: 1.5rem; }
}

/* ===== Landingpage Bayreuth ===== */
.landing-nav .nav-cta { font-size: 0.95rem; text-decoration: none; }
.landing-nav .landing-zurueck { color: var(--cream); font-size: 0.85rem; text-decoration: none; margin-right: 1.25rem; opacity: 0.85; }
.landing-nav .landing-zurueck:hover { color: var(--gold-light); opacity: 1; }
.landing-nav-rechts { display: flex; align-items: center; }

.vorteile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.vorteil { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; }
.vorteil h3 { color: var(--green); font-size: 1.02rem; margin-bottom: 0.3rem; }
.vorteil p { color: var(--gray); font-size: 0.92rem; }

.orte { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 1rem; }
.orte span { border: 1.5px solid var(--gold); color: var(--green); border-radius: 999px; padding: 0.35rem 0.95rem; font-size: 0.9rem; font-weight: 500; }

.anfrage-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.anfrage-text p { color: var(--gray); margin-bottom: 1rem; }
.anfrage-form { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 2rem; }
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--gray); margin-bottom: 0.35rem; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 0.75rem 1rem; border: 1px solid #ddd6bb; border-radius: 6px;
  font: inherit; font-size: 0.9rem; color: var(--black); background: #fff; outline: none; transition: border-color 0.2s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192,146,11,0.12); }
.form-group textarea { height: 130px; resize: vertical; }
.btn-submit { background: var(--green); color: var(--cream); border: none; padding: 0.85rem 2.2rem; border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.btn-submit:hover { background: var(--gold); }
.form-hinweis { font-size: 0.8rem; color: var(--gray); margin-top: 0.75rem; }

@media (max-width: 900px) {
  .vorteile-grid { grid-template-columns: 1fr 1fr; }
  .anfrage-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
  .vorteile-grid { grid-template-columns: 1fr; }
  .landing-nav .landing-zurueck { display: none; }
  .landing-nav .nav-cta { padding: 0.45rem 0.7rem; font-size: 0.78rem; white-space: nowrap; }
  .hauptnav.landing-nav .nav-logo img { height: 50px; }
  .hauptnav.landing-nav { padding: 0 4%; }
  .anfrage-form { padding: 1.5rem; }
}