/* Performance Marketing Heim – statische Seite */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary: #e84200;
  --primary-dark: #cf3c00;
  --dark: #333333;
  --medium: #4a4a4a;
  --light: #747474;
  --bg: #ffffff;
  --section-bg: #f8f9fa;
  --border: #e9ecef;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --sp-xs: .5rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2.5rem; --sp-xl: 4rem;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.1), 0 2px 10px rgba(0,0,0,.04);
  --radius-md: 8px; --radius-lg: 12px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  line-height: 1.6;
  color: var(--medium);
  background: var(--bg);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 200; }
.skip-link:focus { left: 8px; top: 8px; }

/* Header / Footer */
.site-header { background: #fff; padding: var(--sp-md) 0; box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--border); position: relative; z-index: 100; }
.site-branding { max-width: 1140px; margin: 0 auto; padding: 0 var(--sp-md); }
.site-title { font-weight: 700; font-size: 1.5rem; }
.site-title a { color: var(--primary); text-decoration: none; transition: color .3s ease; }
.site-title a:hover { color: var(--primary-dark); }

.site-footer { background: var(--section-bg); padding: var(--sp-xl) 0; border-top: 1px solid var(--border); margin-top: var(--sp-xl); }
.footer-nav { max-width: 1140px; margin: 0 auto; padding: 0 var(--sp-md); }
.footer-nav ul { display: flex; list-style: none; justify-content: center; gap: var(--sp-lg); padding: 0; margin: 0; }
.footer-nav li { margin: 0; }
.footer-nav a { color: var(--medium); text-decoration: none; font-weight: 500; font-size: .95rem; }
.footer-nav a:hover { color: var(--primary); text-decoration: underline; }

/* Typografie */
h1, h2, h3, h4, h5, h6 { margin-bottom: var(--sp-md); font-weight: 600; line-height: 1.2; color: var(--dark); letter-spacing: -.01em; }
.h2 { font-size: 2.5rem; margin-bottom: var(--sp-md); letter-spacing: -.02em; }
.h3 { font-size: 2rem; }
.h3.accent { color: var(--primary); }
.h6 { font-size: 1.25rem; font-weight: 600; }
.p2 { font-size: 1.125rem; line-height: 1.7; margin-bottom: var(--sp-md); color: var(--light); }
p { margin-bottom: var(--sp-md); color: var(--medium); }
ul { list-style-position: outside; margin-bottom: var(--sp-md); padding-left: 1.5rem; }
li { margin-bottom: var(--sp-sm); }

/* Buttons */
.btn { display: inline-block; padding: .875rem 1.75rem; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; text-align: center; transition: all .3s ease; font-size: 1rem; letter-spacing: .01em; cursor: pointer; border: none; font-family: inherit; }
.btn-inverse { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-inverse:hover { background: var(--primary-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Container & Sektionen */
.pm-container { max-width: 1140px; margin: 0 auto; padding: 0 var(--sp-md); }

.pm-intro, .pm-problem, .pm-about-section, .pm-approach, .pm-services, .pm-testimonial-section, .pm-faq, .pm-contact {
  margin-bottom: var(--sp-xl);
  padding: var(--sp-lg) 0;
}
.pm-problem, .pm-approach, .pm-contact { background: var(--section-bg); padding: var(--sp-xl) 0; }

.pm-intro { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }
.pm-intro .p2 { margin-bottom: var(--sp-lg); font-size: 1.25rem; }

/* Grids */
.pm-approach-steps, .pm-service-grid, .pm-faq-grid { display: flex; flex-direction: column; gap: var(--sp-lg); }
.pm-step-row, .pm-grid-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }

.pm-step, .pm-service, .pm-faq-item {
  background: #fff; padding: var(--sp-lg); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); border: 1px solid var(--border); height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pm-step:hover, .pm-service:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.pm-step p, .pm-service p, .pm-faq-item p { margin-bottom: 0; }

.pm-step-number {
  display: flex; align-items: center; justify-content: center; width: 50px; height: 50px;
  background: var(--primary); color: #fff; border-radius: 50%; margin-bottom: var(--sp-md);
  font-weight: 700; font-size: 1.25rem; box-shadow: 0 0 0 5px rgba(232,66,0,.1);
}

/* Über mich + Videos */
.pm-about-flex-container, .pm-video-testimonial { display: flex; align-items: center; gap: 40px; max-width: 1000px; margin: 0 auto; }
.pm-about-content { flex: 1.5; min-width: 300px; }
.pm-about-video, .pm-video-testimonial-video { flex: 0 0 280px; max-width: 280px; }
.pm-video-testimonial-content { flex: 1; min-width: 280px; }

.video-frame {
  position: relative; padding-bottom: 177.78%; height: 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.15); background: #1f1f1f;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-consent {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 20px; text-align: center; color: #fff;
}
.video-consent p { color: #e8e8e8; font-size: .85rem; line-height: 1.45; margin: 0; }
.video-consent a { color: #ffb899; }
.video-consent .btn { padding: .7rem 1.2rem; font-size: .95rem; }

.pm-testimonial-highlight {
  background: #fff8f6; border-left: 3px solid #c75b39; padding: 15px 20px; margin: 15px 0;
  border-radius: 0 8px 8px 0; color: #333; font-size: 1.1em; line-height: 1.6;
}
.pm-testimonial-author { margin-top: 25px; }
.pm-testimonial-author strong { display: block; font-size: 1.1em; color: #222; }
.pm-testimonial-author span { color: #666; font-size: .95em; }
.pm-testimonial-author a { color: #c75b39; text-decoration: none; }
.pm-testimonial-author a:hover { text-decoration: underline; }

/* Kontakt */
.pm-contact .pm-container { text-align: center; }
.pm-additional-contact { margin-top: 20px; }
.pm-additional-contact p { margin-bottom: .4rem; }

/* Rechtstexte */
.legal { max-width: 800px; margin: 0 auto; padding: var(--sp-xl) var(--sp-md) 0; }
.legal h1 { font-size: 2.25rem; margin-bottom: var(--sp-lg); }
.legal h2 { font-size: 1.6rem; margin-top: var(--sp-lg); color: var(--primary); }
.legal h3 { font-size: 1.2rem; margin-top: var(--sp-md); margin-bottom: var(--sp-xs); }
.legal address { font-style: normal; margin-bottom: var(--sp-md); }
.legal p, .legal li { overflow-wrap: anywhere; }
.legal .back { display: inline-block; margin-bottom: var(--sp-md); }

/* Tablet */
@media (max-width: 900px) {
  .pm-step-row, .pm-grid-row { grid-template-columns: 1fr; gap: var(--sp-md); }
  .h2 { font-size: 2rem; }
  .h3 { font-size: 1.6rem; }
  .pm-intro .p2 { font-size: 1.1rem; }
}

/* Video-Layouts */
@media (max-width: 767px) {
  .pm-about-flex-container { flex-direction: column; }
  .pm-about-content { width: 100%; margin-bottom: 30px; order: 1; min-width: 0; }
  .pm-about-video { width: 100%; max-width: 300px; margin: 0 auto 30px; order: 2; flex: 0 0 auto; }
}
@media (max-width: 700px) {
  .pm-video-testimonial { flex-direction: column; text-align: center; }
  .pm-video-testimonial-video { flex: 0 0 auto; width: 100%; max-width: 300px; margin: 0 auto; }
  .pm-video-testimonial-content { min-width: 0; }
  .pm-testimonial-highlight { text-align: left; }
}

/* Mobil */
@media (max-width: 600px) {
  .pm-container { padding: 0 var(--sp-sm); }
  .h2 { font-size: 1.6rem; line-height: 1.3; }
  .h3 { font-size: 1.35rem; }
  .h6 { font-size: 1.1rem; }
  .p2, .pm-intro .p2 { font-size: 1rem; }
  .pm-intro, .pm-about-section, .pm-services, .pm-testimonial-section, .pm-faq { padding: var(--sp-md) 0; margin-bottom: var(--sp-lg); }
  .pm-problem, .pm-approach, .pm-contact { padding: var(--sp-lg) 0; margin-bottom: var(--sp-lg); }
  .pm-intro { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
  .pm-intro .p2 { margin-bottom: var(--sp-md); }
  .btn { padding: .75rem 1.25rem; font-size: .95rem; width: 100%; max-width: 320px; }
  .video-consent .btn { width: auto; }
  .pm-step, .pm-service, .pm-faq-item { padding: var(--sp-md); }
  .pm-step-number { width: 40px; height: 40px; font-size: 1.1rem; }
  ul { padding-left: 1.2rem; }
  li { font-size: .95rem; }
  .legal { padding-top: var(--sp-lg); }
  .legal h1 { font-size: 1.8rem; }
  .legal h2 { font-size: 1.35rem; }
  .footer-nav ul { flex-direction: column; align-items: center; gap: 1rem; }
  .site-footer { padding: 2rem 0; }
}
@media (max-width: 400px) {
  .h2 { font-size: 1.4rem; }
  .h3 { font-size: 1.2rem; }
  .pm-container { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}