/* =========================================================
   Tennisschule Vogel – Design System
   Hinweis: bewusst System-Font-Stack statt Google Fonts CDN,
   um das DSGVO-Risiko durch direktes Nachladen von Google Fonts
   zu vermeiden (LG München I, Urteil v. 20.01.2022).
   ========================================================= */

:root{
  --color-primary:        #1f6f4a;   /* Tennisplatz-Grün, dunkel */
  --color-primary-dark:   #154d33;
  --color-accent:         #84cc26;   /* Akzentgrün aus dem Logo */
  --color-accent-dark:    #65a30d;
  --color-ink:            #16232c;   /* Fließtext / Überschriften */
  --color-ink-soft:       #4a5760;
  --color-bg:             #ffffff;
  --color-bg-soft:        #f6f7f2;
  --color-bg-tint:        #eef6ee;
  --color-border:         #e1e5e0;
  --color-white:          #ffffff;

  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --container-width: 1160px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(22,35,44,0.08);
  --shadow-md: 0 8px 24px rgba(22,35,44,0.12);
  --transition: 0.2s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--color-primary); text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ line-height:1.2; margin:0 0 0.5em; font-weight:700; }
h2, h3 { margin-top: 1.5em; }
h1:first-child, h2:first-child, h3:first-child, h4:first-child,
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3,
.breadcrumb + h1,
.team-photo + h3,
.photo-placeholder-block + h3 { margin-top: 0; }
p{ margin:0 0 1em; }
button{ font-family:inherit; cursor:pointer; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--color-primary); color:#fff;
  padding:0.75em 1em; z-index:1000; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

.container{
  width:100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

section{ padding: 64px 0; }
section.tight{ padding: 40px 0; }
.bg-soft{ background: var(--color-bg-soft); }
.bg-tint{ background: var(--color-bg-tint); }
.bg-primary{ background: var(--color-primary); color:#fff; }
.bg-primary h2, .bg-primary h3{ color:#fff; }

.section-head{ max-width: 720px; margin: 0 auto 40px; text-align:center; }
.eyebrow{
  display:inline-block; color: var(--color-primary-dark); background: var(--color-bg-tint);
  font-weight:700; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:4px 12px; border-radius: 999px; margin-bottom:12px;
}
h1{ font-size: clamp(2rem, 4vw, 3rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3{ font-size: 1.25rem; }
.lead{ font-size:1.15rem; color: var(--color-ink-soft); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding: 12px 26px; border-radius: 999px; font-weight:700; border:2px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  cursor:pointer;
}
.btn-primary{ background: var(--color-primary); color:#fff; }
.btn-primary:hover{ background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-accent{ background: var(--color-accent); color: var(--color-ink); }
.btn-accent:hover{ background: var(--color-accent-dark); transform: translateY(-1px); }
.btn-outline{ background:transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover{ background: var(--color-primary); color:#fff; }
.btn-lg{ padding:16px 34px; font-size:1.05rem; }
.btn-nav{ padding:10px 18px; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky; top:0; z-index:100; background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px); border-bottom:1px solid var(--color-border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.logo{ display:flex; align-items:center; font-weight:800; font-size:1.3rem; color: var(--color-ink); letter-spacing:-0.02em; }
.logo img{ height:90px; width:auto; margin-top:-20px; }
.logo span{ color: var(--color-primary); }
.logo-footer{ color:#fff; margin-bottom:12px; }
.logo-footer span{ color: var(--color-accent); }

.main-nav ul{ display:flex; align-items:center; gap:6px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:block; padding:10px 14px; color: var(--color-ink); font-weight:600; border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a.active{ color: var(--color-primary); background: var(--color-bg-tint); }
.main-nav .btn-nav{ background: var(--color-accent); color: var(--color-ink); border-radius: 999px; }
.main-nav .btn-nav:hover,
.main-nav .btn-nav.active{ background: var(--color-accent-dark); color: var(--color-ink); }

.has-dropdown{ position:relative; }
.main-nav ul.dropdown{
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  position:absolute; top:100%; right:0; left:auto; background:#fff; border:1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width:240px; max-width:min(320px, 90vw);
  padding:8px; opacity:0; visibility:hidden; transform: translateY(6px); transition: all var(--transition);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform: translateY(0);
}
.dropdown li a{ display:block; padding:9px 12px; border-radius: var(--radius-sm); color: var(--color-ink); font-weight:500; font-size:0.95rem; }
.dropdown li a:hover{ background: var(--color-bg-tint); color: var(--color-primary); }

.nav-toggle{ display:none; background:none; border:none; width:40px; height:34px; padding:0; position:relative; }
.nav-toggle span{
  position:absolute; left:0; right:0; height:3px; background: var(--color-ink); border-radius:2px;
  transition: all var(--transition);
}
.nav-toggle span:nth-child(1){ top:4px; }
.nav-toggle span:nth-child(2){ top:15px; }
.nav-toggle span:nth-child(3){ top:26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(11px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-11px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color:#fff; padding: 72px 0 96px; position:relative; overflow:hidden;
}
.hero-inner{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px; align-items:center; }
.hero h1{ color:#fff; margin-bottom:16px; }
.hero .lead{ color: rgba(255,255,255,0.9); }
.hero-tagline{ color: var(--color-accent); font-weight:700; font-size:1rem; letter-spacing:0.02em; margin-bottom:10px; }
.badge{
  background: rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.3);
  padding:6px 14px; border-radius:999px; font-size:0.85rem; font-weight:600;
}
.badge.badge-new{ background: var(--color-accent); color: var(--color-ink); border-color:transparent; }
.nav-badge{ padding:2px 8px; font-size:0.68rem; margin-left:6px; vertical-align:middle; }

/* ---------- Hero feature list (USPs) ---------- */
.feature-grid{
  display:flex; flex-wrap:wrap; column-gap:26px; row-gap:10px; margin:26px 0; padding:0;
}
.feature-item{ display:flex; align-items:center; gap:8px; }
.feature-icon{
  flex-shrink:0; width:16px; height:16px; color: var(--color-accent);
  display:flex; align-items:center; justify-content:center;
}
.feature-text{ font-weight:600; font-size:0.92rem; color:#fff; }
.new-tag{
  flex-shrink:0; font-size:0.65rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--color-accent);
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-cta.center{ justify-content:center; }
.hero-media{
  background: var(--color-bg-soft); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
}
.hero-media img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); align-items:start; }
.grid-2.align-center{ align-items:center; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  overflow:hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column; position:relative;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-badge{
  position:absolute; top:12px; right:12px; z-index:1;
  background: var(--color-accent); color: var(--color-ink);
  padding:5px 12px; border-radius:999px; font-size:0.78rem; font-weight:800;
  letter-spacing:0.02em; box-shadow: var(--shadow-sm);
}
.card-lg{ padding:28px; }
.card-media{ aspect-ratio: 16/10; overflow:hidden; background: var(--color-bg-soft); }
.card-media img{ width:100%; height:100%; object-fit:cover; }
.card-media.feature{ aspect-ratio:auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.card-media.feature.wide{ aspect-ratio:21/8; }
.card-body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.card-body h3{ margin-bottom:8px; }
.card-body p{ color: var(--color-ink-soft); flex:1; }
.card-link{ font-weight:700; margin-top:10px; display:inline-flex; align-items:center; gap:6px; }

/* ---------- Team ---------- */
.team-card{ text-align:center; padding:24px 18px; }
.team-photo{
  width:120px; height:120px; border-radius:50%; margin:0 auto 16px; overflow:hidden;
  background: var(--color-bg-tint); border:3px solid var(--color-accent);
}
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-photo.placeholder-photo{
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.4rem;
  color: var(--color-primary-dark); background: var(--color-bg-tint);
}
.photo-placeholder-block{ margin-bottom:20px; }
.photo-placeholder-square{ width:100%; height:auto; aspect-ratio:1; border-radius: var(--radius-md); font-size:2.5rem; margin-bottom:8px; }
.photo-placeholder-square:is(img){ object-fit:cover; }
.team-card ul{ text-align:left; margin-top:10px; font-size:0.92rem; color: var(--color-ink-soft); }
.team-card ul li{ padding-left:18px; position:relative; margin-bottom:6px; }
.team-card ul li::before{ content:"✓"; position:absolute; left:0; color: var(--color-primary); font-weight:700; }
.team-role{ color: var(--color-primary); font-weight:700; font-size:0.9rem; margin-bottom:8px; }

/* ---------- Pricing table ---------- */
.price-table-wrap{ overflow-x:auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
table.price-table{ width:100%; border-collapse: collapse; min-width:720px; background:#fff; }
table.price-table th, table.price-table td{
  padding:14px 16px; text-align:left; border-bottom:1px solid var(--color-border);
}
table.price-table thead th{
  background: var(--color-primary); color:#fff; position:sticky; top:0;
}
table.price-table tbody tr:nth-child(even){ background: var(--color-bg-soft); }
table.price-table td.price{ font-weight:700; font-variant-numeric: tabular-nums; }
table.price-table th:first-child, table.price-table td:first-child{ font-weight:700; }

.price-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:32px 0; }
.price-card{ border:1px solid var(--color-border); border-radius: var(--radius-md); padding:24px; background:#fff; }
.price-card.featured{ border-color: var(--color-primary); box-shadow: var(--shadow-md); position:relative; }
.price-card.featured::before{
  content:"Beliebt"; position:absolute; top:-12px; right:20px; background: var(--color-accent);
  color: var(--color-ink); font-size:0.75rem; font-weight:800; padding:4px 12px; border-radius:999px;
}
.price-card .amount{ font-size:2rem; font-weight:800; color: var(--color-primary); margin:8px 0; }
.price-card .amount small{ font-size:0.9rem; font-weight:600; color: var(--color-ink-soft); }
.note-box{
  background: var(--color-bg-tint); padding:18px 20px;
  border-radius: var(--radius-sm); margin:20px 0; font-size:0.95rem;
}
.note-box::before{
  content:"Wichtig zu wissen"; display:block; font-size:0.72rem; font-weight:800; letter-spacing:0.06em;
  text-transform:uppercase; color: var(--color-primary); margin-bottom:6px;
}
.note-box.warning{ background:#fff6e5; }
.note-box.warning::before{ content:"Bitte beachten"; color:#a3720a; }
.note-box.offer::before{ content:"Sonderangebot"; }
.note-box .stack{ margin-top:8px; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--color-border); }
.faq-question{
  width:100%; text-align:left; background:none; border:none; padding:20px 0; font-weight:700; font-size:1.05rem;
  display:flex; justify-content:space-between; align-items:center; color: var(--color-ink);
}
.faq-question .plus{ transition: transform var(--transition); font-size:1.4rem; color: var(--color-primary); }
.faq-question[aria-expanded="true"] .plus{ transform: rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height var(--transition); }
.faq-answer-inner{ padding-bottom:20px; color: var(--color-ink-soft); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-field.full{ grid-column: 1 / -1; }
label{ font-weight:600; font-size:0.92rem; }
input, select, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family:inherit; font-size:1rem; line-height:1.4; background:#fff; color: var(--color-ink);
  height:46px;
}
textarea{ height:auto; }
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:40px; cursor:pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5760' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
select::-ms-expand{ display:none; }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--color-primary); outline-offset:1px; }
fieldset{ border:1px solid var(--color-border); border-radius: var(--radius-md); padding:20px; margin-bottom:24px; }
legend{ font-weight:700; padding:0 8px; }
.radio-row{ display:flex; gap:20px; flex-wrap:wrap; }
.radio-option{ display:flex; align-items:center; gap:8px; font-weight:500; margin-bottom:12px; }
.radio-option:last-child{ margin-bottom:0; }
.radio-option input{ width:auto; height:auto; }
.form-note{ font-size:0.85rem; color: var(--color-ink-soft); margin-top:12px; }

/* Honeypot-Feld gegen Spam-Bots: für Menschen unsichtbar, aber nicht display:none
   (manche Bots ignorieren display:none-Felder gezielt) */
.hp-field-wrap{
  position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;
}

/* ---------- Testimonial / trust ---------- */
.trust-strip{ display:flex; flex-wrap:wrap; gap:32px; justify-content:center; align-items:center; }
.trust-item{ text-align:center; }
.trust-item .num{ font-size:2rem; font-weight:800; color: var(--color-primary); }
.trust-item .label{ color: var(--color-ink-soft); font-size:0.9rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:0.85rem; color: var(--color-ink-soft); margin-bottom:20px; }
.breadcrumb a{ color: var(--color-ink-soft); }
.breadcrumb a:hover{ color: var(--color-primary); }

/* ---------- Page header (subpages) ---------- */
.page-hero{ background: var(--color-bg-tint); padding:48px 0; }
.page-hero h1{ margin-bottom:8px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--color-ink); color: rgba(255,255,255,0.85); padding-top:56px; }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; }
.footer-col h3{ color:#fff; font-size:1rem; margin-bottom:14px; }
.site-footer address{ font-style:normal; }
.site-footer a{ color: rgba(255,255,255,0.85); }
.site-footer a:hover{ color: var(--color-accent); }
.footer-links li{ margin-bottom:8px; }
.social-link{ display:inline-block; margin-top:12px; font-weight:700; color: var(--color-accent) !important; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.15); padding:18px 0; text-align:center; font-size:0.85rem; }

/* ---------- Utilities ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.tag-list.center{ justify-content:center; }
.container-narrow{ max-width:760px; }
.quote{ font-style:italic; font-size:1.1rem; }
.btn-outline-light{ border-color:#fff; color:#fff; }
.btn-outline-light:hover{ background:#fff; color: var(--color-ink); }
.bg-primary .lead{ color: rgba(255,255,255,0.9); }
address{ font-style:normal; }

.tag{ background: var(--color-bg-tint); color: var(--color-primary-dark); padding:4px 12px; border-radius:999px; font-size:0.85rem; font-weight:600; }
a.tag{ transition: background var(--transition), color var(--transition); }
a.tag:hover{ background: var(--color-primary); color:#fff; }

/* ---------- Bildergalerie ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin:32px 0; }
.gallery-tile{
  position:relative; display:block; aspect-ratio:4/3; overflow:hidden; width:100%;
  border-radius: var(--radius-md); background: var(--color-bg-tint); box-shadow: var(--shadow-sm);
  border:none; padding:0; font:inherit; text-align:left;
}
button.gallery-tile{ cursor:zoom-in; }
.gallery-tile img{ width:100%; height:100%; object-fit:cover; transition: transform var(--transition); }
.gallery-tile:hover img{ transform: scale(1.06); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding:28px 14px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  color:#fff; font-size:0.85rem; font-weight:600; line-height:1.3;
}
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .gallery-grid{ grid-template-columns: 1fr; } }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background: rgba(16,24,30,0.92);
  display:flex; align-items:center; justify-content:center; padding:40px 20px;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:80vh; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.lightbox-caption{ color:#fff; text-align:center; margin-top:14px; font-size:0.95rem; }
.lightbox-inner{ display:flex; flex-direction:column; align-items:center; max-width:1100px; width:100%; }
.lightbox-close{
  position:absolute; top:18px; right:24px; background:rgba(255,255,255,0.12); border:none; color:#fff;
  width:44px; height:44px; border-radius:50%; font-size:1.6rem; line-height:1; cursor:pointer;
}
.lightbox-close:hover{ background: rgba(255,255,255,0.22); }

/* ---------- Kundenstimmen (horizontales Scrollen) ---------- */
.testimonial-scroll{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:8px 4px 20px; margin:32px -4px 0; -webkit-overflow-scrolling:touch;
}
.testimonial-scroll .card{ flex:0 0 320px; scroll-snap-align:start; }
.testimonial-scroll::-webkit-scrollbar{ height:8px; }
.testimonial-scroll::-webkit-scrollbar-track{ background: var(--color-bg-tint); border-radius:999px; }
.testimonial-scroll::-webkit-scrollbar-thumb{ background: var(--color-border); border-radius:999px; }
.testimonial-scroll::-webkit-scrollbar-thumb:hover{ background: var(--color-primary); }
@media (max-width: 560px){ .testimonial-scroll .card{ flex-basis: 84vw; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
  .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
  .price-cards{ grid-template-columns: repeat(2,1fr); }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:absolute; top:74px; left:0; right:0; background:#fff; border-bottom:1px solid var(--color-border);
    max-height:0; overflow:hidden; transition: max-height var(--transition);
  }
  .main-nav.open{ max-height: 80vh; overflow-y:auto; }
  .main-nav ul{ flex-direction:column; align-items:stretch; padding:12px 20px 20px; gap:2px; }
  .main-nav > ul > li > a{ padding:12px 8px; }
  .main-nav ul.dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; display:none; padding-left:12px; }
  .main-nav .has-dropdown.open ul.dropdown{ display:flex; flex-direction:column; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .feature-grid{ flex-direction:column; }
  .price-cards{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; }
  section{ padding: 44px 0; }
}