/* Struktur/Layout - farbunabhängig. Farben kommen aus theme-*.css über
   CSS-Variablen, damit der Admin-Bereich das Theme umschalten kann, ohne
   dass Markup oder Struktur sich ändern. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  /* Ueberschriften sollen nie neben einem .figure-float eingequetscht
     stehen, egal wie viel Text vorher schon am Bild vorbeigelaufen ist. */
  clear: both;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
p { margin: 0 0 1em; color: var(--text-dim); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}
/* Clearfix: ein .figure-float in einem Container darf nie in den naechsten
   Container "durchbluten" - jeder Container schliesst seine eigenen Floats
   vollstaendig ein. */
.container::after { content: ""; display: table; clear: both; }

/* ---- Header ---- */
.site-header { border-bottom: 1px solid var(--border); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1rem, 3vw, 2.5rem);
}
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--text); }
.brand-logo { width: 40px; height: 40px; border-radius: 50%; display: block; }
.brand em { color: var(--accent); font-style: normal; }
.main-nav { display: flex; align-items: center; gap: 1.6rem; }
.main-nav a { color: var(--text-dim); font-weight: 500; }
.main-nav a:hover, .main-nav a.active { color: var(--text); text-decoration: none; }
.main-nav a.nav-cta {
  background: var(--accent);
  color: var(--bg);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 1.2rem;
  padding: 0.3rem 0.6rem;
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 0.9rem clamp(1rem, 3vw, 2.5rem); width: 100%; border-top: 1px solid var(--border); }
}

/* ---- Hero (Startseite) ---- */
.hero {
  padding: 6rem 0 4.5rem;
  border-bottom: 1px solid var(--border);
  background-size: cover;
  background-position: center;
}
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
}
.hero h1, .hero .eyebrow { color: #fff; }
/* War vorher ".hero p.lead" - traf nie etwas, weil der Text in
   <div class="lead"><p>...</p></div> steckt (die Klasse sitzt am div, nicht
   am p). Dadurch griff die weisse Textfarbe nie, im hellen Theme wurde der
   Einleitungstext auf dem Foto fast unlesbar. */
.hero .lead { max-width: 46ch; font-size: 1.1rem; color: rgba(255,255,255,0.85); }
.hero .lead p { color: inherit; margin-bottom: 0; }

/* ---- Page-Hero (Unterseiten) ---- */
.page-hero {
  background-size: cover;
  background-position: center;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { color: #fff; margin: 0.3em 0 0; }
.page-hero-back { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.page-hero-back:hover { color: #fff; }

/* ---- Sections ---- */
/* Bewusst ohne Trennlinien zwischen Sections - Rhythmus kommt allein über
   großzügigen Abstand, damit Seiten wie aus einem Guss wirken statt wie
   aneinandergereihte Kästen. */
.section { padding: 2.75rem 0; }
.section-head { max-width: 60ch; margin-bottom: 2rem; }

/* ---- Cards / Grid ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  /* "start" statt Standard "stretch" - sonst zwingt eine einzelne Karte mit
     Foto alle Nachbarn in derselben Zeile auf ihre Hoehe und die kuerzeren
     Karten haben unten viel Leerraum. Karten duerfen jetzt einfach
     unterschiedlich hoch sein. */
  align-items: start;
  /* Muss nach einem .figure-float garantiert die volle Breite bekommen,
     nicht neben dem Bild eingequetscht werden. */
  clear: both;
}
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  /* Mindesthoehe als Basis, damit kurze und lange Karten in derselben Reihe
     nicht so krass auseinanderfallen (align-items:start auf .card-grid
     laesst Karten sonst komplett frei in ihrer natuerlichen Hoehe). */
  min-height: 170px;
}

/* ---- Gallery ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.gallery-grid a {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  background: var(--bg-raised);
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-grid a:hover img { transform: scale(1.05); }
.gallery-empty {
  color: var(--text-faint);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}

/* ---- CTA / Kontakt ---- */
.cta-box {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.5rem;
  text-align: center;
}
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  margin-top: 1rem;
}
.btn:hover { text-decoration: none; opacity: 0.9; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--border); margin-top: 3rem; }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
  color: var(--text-faint);
  font-size: 0.9rem;
}
.footer-nav { display: flex; gap: 1.2rem; }
.footer-nav a { color: var(--text-faint); }

/* ---- Trust-Badges ---- */
.trust-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}
.trust-badges li {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  color: var(--text);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.trust-badges li::before {
  content: "✓ ";
  color: var(--accent);
  font-weight: 700;
}

/* Gleiches Boxen-Aussehen wie trust-badges, aber ohne Häkchen - für
   Aufzählungen ohne Compliance-Bedeutung (Ausrüstung, Kategorien). */
.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
}
.tag-list li {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  color: var(--text-dim);
}

/* ---- Bildunterschriften ---- */
figure.photo { margin: 0; }
figure.photo img { border-radius: 12px; width: 100%; }
figure.photo figcaption { color: var(--text-faint); font-size: 0.85rem; margin-top: 0.5rem; }

/* ---- Qualifikationen (Über mich) ---- */
.quali-block {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.quali-photos {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.droneflightcheck-card {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-top: 1.5rem;
}
.droneflightcheck-card img {
  width: 200px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
/* Textspalte muss den verbleibenden Platz fuellen, sonst bleibt bei einer
   breiten Karte (volle Container-Breite) rechts neben dem Text Leerraum
   stehen. */
.droneflightcheck-card > div { flex: 1; }
.droneflightcheck-card h3 { margin: 0 0 0.3em; }
.droneflightcheck-card p { margin-bottom: 0.5em; }
@media (max-width: 700px) {
  .quali-block { grid-template-columns: 1fr; }
  .droneflightcheck-card { flex-direction: column; align-items: flex-start; }
  .droneflightcheck-card img { width: 100%; }
}

/* ---- Bild + langer Text ---- */
/* Kein Spalten-Layout mehr (Grid/Sticky) - bei deutlich laengerem Text als
   Bild blieb die Bildspalte immer als eigener, oft leer wirkender Block
   stehen, egal wie die Spaltenhoehen berechnet wurden. Ein schwebendes
   Bild (float) hat dieses Problem strukturell nicht: der Text laeuft direkt
   am Bild vorbei und nutzt danach automatisch wieder die volle Breite -
   keine Spalte, die leer bleiben koennte. */
.figure-float {
  float: left;
  width: 300px;
  margin: 0 2rem 1rem 0;
  border-radius: 12px;
}
@media (max-width: 700px) {
  .figure-float { float: none; width: 100%; max-width: 320px; margin: 0 auto 1.5rem; }
}

/* Kein max-width hier (war vorher 900px) - sah bei ~1558px Testbreite gut
   aus, liess aber bei einem breiteren Fenster wieder ungenutzten Platz bis
   zum Container-Rand stehen. Gleiches Prinzip wie bei Leistungen: der Text
   nutzt die volle Container-Breite neben dem schwebenden Bild. */
.prose-with-figure { max-width: none; }

/* ---- Aufgelockerte Foto-Paare ---- */
/* Feste, gleiche Bildproportion (Crop per object-fit) statt roher
   Seitenverhaeltnisse - sonst wird ein Hochkant-Foto neben einem
   Querformat-Foto je nach Spaltenbreite riesig oder winzig und das Paar
   wirkt zufaellig zusammengewuerfelt statt bewusst gestaltet. */
.photo-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}
.photo-duo figure.photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto;
}
@media (max-width: 700px) {
  .photo-duo { grid-template-columns: 1fr; }
  .photo-duo figure:nth-child(2) { margin-top: 0; }
}

/* ---- Leistungen: Karten statt Rasterzwang, wechselnde Bildgrößen ---- */
.service-teasers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.service-teasers .card h3 { margin-bottom: 0.3em; font-size: 1.05rem; }
.service-teasers .card p { font-size: 0.9rem; margin-bottom: 0; }
.service-teasers .card .icon { font-size: 1.6rem; margin-bottom: 0.6rem; display: block; }

/* ---- Ablauf/Prozess ---- */
.process-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  clear: both;
}
@media (max-width: 900px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .process-steps { grid-template-columns: 1fr; }
}
.process-steps li {
  counter-increment: step;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1rem;
  position: relative;
}
.process-steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.process-steps strong { display: block; margin-bottom: 0.3rem; }
.process-steps span { color: var(--text-dim); font-size: 0.9rem; }

/* ---- FAQ (als <details>/<summary> - aufklappbar ohne eigenes JS) ---- */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 1.1rem 0;
}
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -0.1rem;
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 400;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0.7rem 0 0; }

/* ---- Kontaktformular ---- */
.contact-form { display: flex; flex-direction: column; gap: 1rem; text-align: left; max-width: 480px; margin: 1.5rem auto 0; }
.contact-form label { font-size: 0.85rem; color: var(--text-dim); display: flex; flex-direction: column; gap: 0.35rem; }
.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .contact-form .form-row { grid-template-columns: 1fr; } }
.contact-form button { align-self: flex-start; }
.contact-form .form-status { font-size: 0.9rem; min-height: 1.3em; }
.contact-form .form-status.ok { color: #7fbf7f; }
.contact-form .form-status.error { color: var(--danger, #d9705b); }
.contact-alt { margin-top: 1.25rem; color: var(--text-faint); font-size: 0.9rem; }

/* ---- Legal pages ---- */
.legal-content { max-width: 70ch; }
.legal-content h2 { margin-top: 1.6em; }