Initial commit: Statischer Bootstrap-Onepager mit lokalen Assets, separate Impressum- und Datenschutz-Seiten, Google Maps Embed

assets/css/styles.css

@@ -0,0 +1,371 @@
+:root {
+  --brand-sand: #d9c2a0;
+  --brand-earth: #745948;
+  --brand-forest: #31453b;
+  --brand-cream: #f7f1e8;
+  --brand-ink: #1f2522;
+  --brand-mist: #e7ece8;
+  --shadow-soft: 0 24px 60px rgba(31, 37, 34, 0.14);
+  --radius-lg: 28px;
+  --radius-md: 20px;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  color: var(--brand-ink);
+  background:
+    radial-gradient(circle at top left, rgba(217, 194, 160, 0.28), transparent 28%),
+    linear-gradient(180deg, #f4eee5 0%, #fcfaf7 32%, #f1f5f2 100%);
+}
+
+h1,
+h2,
+h3,
+.brand-name {
+  font-family: Georgia, "Times New Roman", serif;
+  letter-spacing: 0.01em;
+}
+
+a {
+  color: inherit;
+}
+
+.site-header {
+  position: relative;
+  overflow: clip;
+}
+
+.navbar {
+  padding: 1rem 0;
+  background: rgba(247, 241, 232, 0.82);
+  backdrop-filter: blur(18px);
+  border-bottom: 1px solid rgba(49, 69, 59, 0.08);
+}
+
+.navbar-brand {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  text-decoration: none;
+}
+
+.brand-kicker {
+  font-size: 0.72rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: rgba(31, 37, 34, 0.65);
+}
+
+.brand-name {
+  font-size: 1.25rem;
+  color: var(--brand-forest);
+}
+
+.navbar-toggler {
+  border-color: rgba(49, 69, 59, 0.2);
+}
+
+.navbar-toggler:focus {
+  box-shadow: 0 0 0 0.2rem rgba(116, 89, 72, 0.15);
+}
+
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2849,69,59,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.nav-link {
+  color: var(--brand-ink);
+  font-weight: 500;
+}
+
+.nav-link.active,
+.nav-link:hover,
+.nav-link:focus {
+  color: var(--brand-earth);
+}
+
+.btn-brand {
+  background: var(--brand-earth);
+  border-color: var(--brand-earth);
+  color: #fff;
+}
+
+.btn-brand:hover,
+.btn-brand:focus {
+  background: #5f4739;
+  border-color: #5f4739;
+  color: #fff;
+}
+
+.hero-section {
+  padding: 8rem 0 5rem;
+}
+
+.eyebrow {
+  margin-bottom: 1rem;
+  font-size: 0.8rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--brand-earth);
+}
+
+.hero-section h1 {
+  font-size: clamp(2.8rem, 5vw, 5.1rem);
+  line-height: 0.98;
+  max-width: 12ch;
+}
+
+.hero-copy,
+.section p,
+.feature-card p,
+.timeline-card p,
+.contact-card p,
+.legal-card p {
+  font-size: 1.05rem;
+  line-height: 1.75;
+  color: rgba(31, 37, 34, 0.8);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 2rem 0;
+}
+
+.hero-facts {
+  display: grid;
+  gap: 0.75rem;
+  margin: 0;
+}
+
+.hero-facts li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: rgba(31, 37, 34, 0.78);
+}
+
+.hero-facts li::before {
+  content: "";
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 999px;
+  background: var(--brand-sand);
+  box-shadow: 0 0 0 6px rgba(217, 194, 160, 0.2);
+}
+
+.hero-gallery {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.25rem;
+  align-items: end;
+}
+
+.hero-card,
+.feature-card,
+.timeline-card,
+.contact-card,
+.contact-form,
+.legal-card {
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-soft);
+}
+
+.hero-card {
+  overflow: hidden;
+  margin: 0;
+}
+
+.hero-card img,
+.gallery-grid img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.hero-card-large {
+  min-height: 32rem;
+}
+
+.hero-card-small {
+  min-height: 15rem;
+}
+
+.hero-card-accent {
+  min-height: 15rem;
+}
+
+.section {
+  padding: 5rem 0;
+}
+
+.section-light {
+  background: rgba(255, 255, 255, 0.58);
+}
+
+.section-accent {
+  background: linear-gradient(135deg, rgba(49, 69, 59, 0.06), rgba(217, 194, 160, 0.16));
+}
+
+.section-dark {
+  background: linear-gradient(135deg, #24342d, #3f564b);
+  color: #fff;
+}
+
+.section-dark .eyebrow,
+.section-dark h2,
+.section-dark p,
+.section-dark .form-label,
+.section-dark .text-link,
+.section-dark .form-note,
+.section-dark a {
+  color: #fff;
+}
+
+.section-heading {
+  max-width: 44rem;
+  margin: 0 auto 2.5rem;
+  text-align: center;
+}
+
+.section-heading.text-start {
+  margin-left: 0;
+}
+
+.section-heading h2 {
+  font-size: clamp(2rem, 4vw, 3.3rem);
+  line-height: 1.05;
+}
+
+.feature-card,
+.timeline-card,
+.contact-card,
+.contact-form,
+.legal-card {
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.86);
+}
+
+.feature-card h3,
+.legal-card h2 {
+  margin-bottom: 1rem;
+  font-size: 1.55rem;
+}
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.25rem;
+}
+
+.gallery-grid img {
+  min-height: 20rem;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-soft);
+}
+
+.section-dark .contact-card,
+.section-dark .contact-form {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(14px);
+}
+
+.form-control {
+  padding: 0.95rem 1rem;
+  border-radius: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.form-control:focus {
+  border-color: rgba(217, 194, 160, 0.9);
+  box-shadow: 0 0 0 0.2rem rgba(217, 194, 160, 0.18);
+}
+
+.form-note {
+  margin: 0;
+  opacity: 0.86;
+}
+
+.text-link {
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+}
+
+.section-legal {
+  padding-top: 4rem;
+}
+
+.site-footer {
+  padding: 1.4rem 0 2.4rem;
+  background: #f4eee5;
+}
+
+.footer-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.footer-inner p {
+  margin: 0;
+}
+
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+@media (max-width: 991.98px) {
+  .navbar-collapse {
+    margin-top: 1rem;
+    padding: 1rem;
+    border-radius: 1.25rem;
+    background: rgba(255, 255, 255, 0.88);
+  }
+
+  .hero-section {
+    padding-top: 7rem;
+  }
+
+  .hero-gallery {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .hero-card-large {
+    min-height: 24rem;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .hero-section h1 {
+    max-width: 100%;
+  }
+
+  .hero-gallery,
+  .gallery-grid,
+  .footer-inner {
+    grid-template-columns: 1fr;
+    display: grid;
+  }
+
+  .hero-card-large,
+  .hero-card-small,
+  .hero-card-accent,
+  .gallery-grid img {
+    min-height: 16rem;
+  }
+
+  .section,
+  .hero-section {
+    padding-bottom: 4rem;
+  }
+}

assets/js/main.js

@@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const currentYear = document.getElementById("currentYear");
+  if (currentYear) {
+    currentYear.textContent = String(new Date().getFullYear());
+  }
+
+  const navbar = document.getElementById("mainNav");
+  if (!navbar) {
+    return;
+  }
+
+  const collapseElement = navbar.querySelector(".navbar-collapse");
+  const navLinks = navbar.querySelectorAll(".nav-link");
+  const collapse = collapseElement ? bootstrap.Collapse.getOrCreateInstance(collapseElement, { toggle: false }) : null;
+
+  navLinks.forEach((link) => {
+    link.addEventListener("click", () => {
+      if (window.innerWidth < 992 && collapse) {
+        collapse.hide();
+      }
+    });
+  });
+});

datenschutz.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Datenschutz – Physiotherapie Adolphsen</title>
+    <meta
+      name="description"
+      content="Datenschutzerklaerung der Praxis Physiotherapie Adolphsen in Hungen-Langd."
+    />
+    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="assets/css/styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <nav class="navbar navbar-expand-lg fixed-top" aria-label="Hauptnavigation">
+        <div class="container">
+          <a class="navbar-brand" href="index.html">
+            <span class="brand-kicker">Physiotherapie</span>
+            <span class="brand-name">Kerstin Adolphsen</span>
+          </a>
+          <button
+            class="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarContent"
+            aria-controls="navbarContent"
+            aria-expanded="false"
+            aria-label="Navigation umschalten"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div id="navbarContent" class="collapse navbar-collapse justify-content-end">
+            <ul class="navbar-nav align-items-lg-center gap-lg-2">
+              <li class="nav-item"><a class="nav-link" href="index.html#leistungen">Leistungen</a></li>
+              <li class="nav-item"><a class="nav-link" href="index.html#praxis">Praxis</a></li>
+              <li class="nav-item"><a class="nav-link" href="index.html#ueber-mich">Ueber mich</a></li>
+              <li class="nav-item"><a class="nav-link" href="index.html#kontakt">Kontakt</a></li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </header>
+
+    <main style="padding-top: 8rem; padding-bottom: 4rem;">
+      <div class="container" style="max-width: 48rem;">
+        <h1 style="font-size: 2.2rem; margin-bottom: 2rem;">Datenschutz</h1>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">1. Allgemeines</h2>
+          <p>
+            Der Schutz Ihrer persoenlichen Daten ist uns ein wichtiges Anliegen. Wir behandeln Ihre
+            persoenlichen Daten vertrauensvoll und beachten dabei die geltenden gesetzlichen
+            Datenschutzvorschriften, insbesondere die Datenschutz-Grundverordnung (DSGVO) und das
+            Bundesdatenschutzgesetz (BDSG).
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">2. Verantwortliche Stelle</h2>
+          <p>
+            <strong>Kerstin Adolphsen</strong><br />
+            Physiotherapeutin<br />
+            Obergasse 2<br />
+            35410 Hungen-Langd<br />
+            <br />
+            Telefon: <a href="tel:+496402508272">06402 / 508272</a><br />
+            E-Mail: <a href="mailto:kerstin.adolphsen@gmail.com">kerstin.adolphsen@gmail.com</a>
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">3. Datenerfassung auf dieser Website</h2>
+          <p>
+            Diese Website ist weitgehend statisch angelegt. Wir erfassen derzeit keine
+            persoenlichen Daten ueber Anfrageformulare oder aehnliches automatisch. Falls Sie
+            Kontakt zu uns aufnehmen moechten, koennen Sie dies telefonisch oder per E-Mail tun.
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">4. Server-Logfiles</h2>
+          <p>
+            Der Server, auf dem diese Website gehostet wird, erfasst standardmaessig Informationen wie
+            IP-Adresse, Zugriffsdatum und -uhrzeit, RequestURL und Browser-Informationen. Diese Daten
+            werden fuer technische Verwalltung und Fehleranalyse verarbeitet.
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">5. Externe Inhalte (Google Maps)</h2>
+          <p>
+            Diese Website bindet eine Karte von Google Maps ein. Bei Laden der Karte werden Ihre
+            IP-Adresse und ggf. weitere Informationen an Google weitergeleitet. Wir haben keinen
+            Einfluss auf die Datenverarbeitung durch Google. Weitere Informationen finden Sie in der
+            <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Datenschutzerklaerung von Google</a>.
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">6. Ihre Rechte</h2>
+          <p>
+            Sie haben das Recht zu erfahren, welche persoenlichen Daten wir ueber Sie speichern
+            (Auskunftsrecht), Fehler zu korrigieren (Berichtigungsrecht), Ihre Daten loeschen zu
+            lassen (Loeschungsrecht), die Verarbeitung einzuschraenken (Recht auf Einschraenkung der
+            Verarbeitung) und Ihre Daten in einem portierbaren Format zu erhalten
+            (Datenportabilitaet).
+          </p>
+          <p>
+            Um eines dieser Rechte auszuueben, kontaktieren Sie uns bitte unter:
+            <a href="mailto:kerstin.adolphsen@gmail.com">kerstin.adolphsen@gmail.com</a>
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">7. Besondere Hinweise zur Physiotherapie-Praxis</h2>
+          <p>
+            Die Daten Ihrer medizinischen Behandlung unterliegen dem Datenschutz fuer besonders
+            geschuetzte personenbezogene Daten (Gesundheitsdaten). Diese werden nach den geltenden
+            Gesetzen (insbesondere DSGVO und Heilberufsgenehmigungs-Verordnungen) geschuetzt und
+            verarbeitet.
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">8. Aenderungen dieser Datenschutzerklaerung</h2>
+          <p>
+            Wir koennen diese Datenschutzerklaerung von Zeit zu Zeit aktualisieren. Bei wesentlichen
+            Aenderungen werden wir Sie ueber diese Website informieren oder Ihr Einverstaendnis einholen.
+          </p>
+        </section>
+
+        <div style="background: rgba(217, 194, 160, 0.12); padding: 1.5rem; border-radius: 1rem; margin-top: 3rem;">
+          <p style="margin: 0; font-size: 0.9rem; color: rgba(31, 37, 34, 0.7);">
+            <strong>Hinweis:</strong> Dies ist eine Vorlage einer Datenschutzerklaerung. Bitte ueberpruefen Sie die Angaben
+            auf Vollstaendigkeit und Richtigkeit, insbesondere in Bezug auf Ihre tatsaechliche
+            Datenverarbeitung und Ihren Hosting-Provider. Eine rechtsverbindliche Beratung koennen wir nicht
+            geben; fuer Details konsultieren Sie ggf. einen Rechtsanwalt oder Datenschutzbeauftragten.
+          </p>
+        </div>
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container footer-inner">
+        <p>© <span id="currentYear"></span> Physiotherapie Kerstin Adolphsen</p>
+        <div class="footer-links">
+          <a href="impressum.html">Impressum</a>
+          <a href="datenschutz.html">Datenschutz</a>
+        </div>
+      </div>
+    </footer>
+
+    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script>
+      document.getElementById("currentYear").textContent = String(new Date().getFullYear());
+    </script>
+  </body>
+</html>

impressum.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Impressum – Physiotherapie Adolphsen</title>
+    <meta
+      name="description"
+      content="Impressum der Praxis Physiotherapie Adolphsen in Hungen-Langd."
+    />
+    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="assets/css/styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <nav class="navbar navbar-expand-lg fixed-top" aria-label="Hauptnavigation">
+        <div class="container">
+          <a class="navbar-brand" href="index.html">
+            <span class="brand-kicker">Physiotherapie</span>
+            <span class="brand-name">Kerstin Adolphsen</span>
+          </a>
+          <button
+            class="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarContent"
+            aria-controls="navbarContent"
+            aria-expanded="false"
+            aria-label="Navigation umschalten"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div id="navbarContent" class="collapse navbar-collapse justify-content-end">
+            <ul class="navbar-nav align-items-lg-center gap-lg-2">
+              <li class="nav-item"><a class="nav-link" href="index.html#leistungen">Leistungen</a></li>
+              <li class="nav-item"><a class="nav-link" href="index.html#praxis">Praxis</a></li>
+              <li class="nav-item"><a class="nav-link" href="index.html#ueber-mich">Ueber mich</a></li>
+              <li class="nav-item"><a class="nav-link" href="index.html#kontakt">Kontakt</a></li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </header>
+
+    <main style="padding-top: 8rem; padding-bottom: 4rem;">
+      <div class="container" style="max-width: 48rem;">
+        <h1 style="font-size: 2.2rem; margin-bottom: 2rem;">Impressum</h1>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">Anbieterin</h2>
+          <p>
+            <strong>Kerstin Adolphsen</strong><br />
+            Physiotherapeutin<br />
+            Obergasse 2<br />
+            35410 Hungen-Langd
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">Kontaktinformationen</h2>
+          <p>
+            Telefon: <a href="tel:+496402508272">06402 / 508272</a><br />
+            E-Mail: <a href="mailto:kerstin.adolphsen@gmail.com">kerstin.adolphsen@gmail.com</a>
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">Berufsbezeichnung und Befugnisse</h2>
+          <p>
+            Berufsbezeichnung: <strong>Physiotherapeutin</strong><br />
+            Erworben in der Bundesrepublik Deutschland.<br />
+            <br />
+            Die Berufsausübung unterliegt den Regelungen:
+          </p>
+          <ul>
+            <li>Masseurs- und Physiotherapeutengesetz (MPhG)</li>
+            <li>Berufsordnung fuer Physiotherapeuten der zustaendigen Kammer</li>
+          </ul>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">Haftung fuer Inhalte</h2>
+          <p>
+            Die Inhalte dieser Website werden mit großer Sorgfalt gepflegt. Fuer die Richtigkeit,
+            Vollstaendigkeit und Aktualitaet der Inhalte kann jedoch keine Gewaehr uebernommen werden.
+            Die Veroeffentlichung stellt keine Beratung dar und entbindet nicht von der Konsultation
+            eines Fachmanns.
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">Haftung fuer Links</h2>
+          <p>
+            Diese Website enthaelt teilweise Links zu externen Webseiten von Dritten. Fuer den Inhalt
+            dieser externen Websites ist die/der jeweilige Anbieterin/Anbieter verantwortlich. Bei
+            der erstmaligen Verknuepfung wurde geprueft, ob etwaige Rechtsverstoesse vorlagen.
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">Urheberrecht</h2>
+          <p>
+            Die in dieser Website enthaltenen Inhalte sind urheberrechtlich geschuetzt. Ohne
+            ausdruckliche Genehmigung ist jede Verwertung nicht gestattet.
+          </p>
+        </section>
+
+        <section style="margin-bottom: 2.5rem;">
+          <h2 style="font-size: 1.35rem; margin-top: 2rem; margin-bottom: 1rem;">Hosting</h2>
+          <p>
+            <strong>[Hosting-Anbieter eintragen]</strong><br />
+            Adresse des Hosting-Anbieters<br />
+            <br />
+            <em>Hinweis: Bitte bei der Liveschaltung die Angaben zum Hosting-Provider aktualisieren.</em>
+          </p>
+        </section>
+
+        <div style="background: rgba(217, 194, 160, 0.12); padding: 1.5rem; border-radius: 1rem; margin-top: 3rem;">
+          <p style="margin: 0; font-size: 0.9rem; color: rgba(31, 37, 34, 0.7);">
+            <strong>Hinweis:</strong> Sollten Angaben in diesem Impressum unvollstaendig oder
+            fehlerhaft sein, bitten wir um Mitteilung. Aenderungen werden veroeffentlicht, sobald sie
+            dem Angebot mitgeteilt werden.
+          </p>
+        </div>
+      </div>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container footer-inner">
+        <p>© <span id="currentYear"></span> Physiotherapie Kerstin Adolphsen</p>
+        <div class="footer-links">
+          <a href="impressum.html">Impressum</a>
+          <a href="datenschutz.html">Datenschutz</a>
+        </div>
+      </div>
+    </footer>
+
+    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script>
+      document.getElementById("currentYear").textContent = String(new Date().getFullYear());
+    </script>
+  </body>
+</html>

index.html

@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Physiotherapie Adolphsen</title>
+    <meta
+      name="description"
+      content="Ganzheitliche Physiotherapie in Hungen-Langd. Praxis von Kerstin Adolphsen fuer private Kassen und Selbstzahler nach Verordnung."
+    />
+    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="assets/css/styles.css" />
+  </head>
+  <body data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="90" tabindex="0">
+    <header class="site-header">
+      <nav id="mainNav" class="navbar navbar-expand-lg fixed-top" aria-label="Hauptnavigation">
+        <div class="container">
+          <a class="navbar-brand" href="#top">
+            <span class="brand-kicker">Physiotherapie</span>
+            <span class="brand-name">Kerstin Adolphsen</span>
+          </a>
+          <button
+            class="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarContent"
+            aria-controls="navbarContent"
+            aria-expanded="false"
+            aria-label="Navigation umschalten"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div id="navbarContent" class="collapse navbar-collapse justify-content-end">
+            <ul class="navbar-nav align-items-lg-center gap-lg-2">
+              <li class="nav-item"><a class="nav-link" href="#leistungen">Leistungen</a></li>
+              <li class="nav-item"><a class="nav-link" href="#praxis">Praxis</a></li>
+              <li class="nav-item"><a class="nav-link" href="#ueber-mich">Ueber mich</a></li>
+              <li class="nav-item"><a class="nav-link" href="#kontakt">Kontakt</a></li>
+              <li class="nav-item"><a class="btn btn-sm btn-brand" href="#kontakt">Termin anfragen</a></li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+
+      <section id="top" class="hero-section">
+        <div class="container">
+          <div class="row align-items-center g-5">
+            <div class="col-lg-6">
+              <p class="eyebrow">Ganzheitliche Physiotherapie in Hungen-Langd</p>
+              <h1>Bewegung, Gespraech und Therapie mit Ruhe und Erfahrung.</h1>
+              <p class="hero-copy">
+                Ganzheitliche Physiotherapie bedeutet hier mehr als klassische Krankengymnastik:
+                individuelle Begleitung, therapeutische Erfahrung und ein Blick auf den ganzen Menschen.
+              </p>
+              <div class="hero-actions">
+                <a class="btn btn-brand btn-lg" href="#kontakt">Kontakt aufnehmen</a>
+                <a class="btn btn-outline-light btn-lg" href="#leistungen">Leistungen ansehen</a>
+              </div>
+              <ul class="hero-facts list-unstyled">
+                <li>Private Kassen und Selbstzahler nach Verordnung</li>
+                <li>Ueber 30 Jahre Berufserfahrung</li>
+                <li>Praxis in der Obergasse 2, 35410 Hungen-Langd</li>
+              </ul>
+            </div>
+            <div class="col-lg-6">
+              <div class="hero-gallery">
+                <figure class="hero-card hero-card-large">
+                  <img src="img/ka_2020_01.jpg" alt="Praxisansicht Physiotherapie Adolphsen" />
+                </figure>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </header>
+
+    <main>
+      <section id="leistungen" class="section section-light">
+        <div class="container">
+          <div class="section-heading">
+            <p class="eyebrow">Leistungen</p>
+            <h2>Therapie mit orthopaedischen, craniosacralen und ganzheitlichen Schwerpunkten.</h2>
+          </div>
+          <div class="row g-4">
+            <div class="col-md-6 col-xl-3">
+              <article class="feature-card h-100">
+                <h3>Physiotherapie</h3>
+                <p>
+                  Individuell abgestimmte Behandlung bei Beschwerden des Bewegungsapparats mit viel
+                  Information und therapeutischer Begleitung.
+                </p>
+              </article>
+            </div>
+            <div class="col-md-6 col-xl-3">
+              <article class="feature-card h-100">
+                <h3>Manuelle Therapie</h3>
+                <p>
+                  Erfahrung aus langjaehriger Fortbildung und Praxis in der Behandlung funktioneller
+                  Beschwerden des Muskel- und Gelenksystems.
+                </p>
+              </article>
+            </div>
+            <div class="col-md-6 col-xl-3">
+              <article class="feature-card h-100">
+                <h3>Craniosacrale Therapie</h3>
+                <p>
+                  Osteopathisch orientierte Schwerpunkte nach Upledger mit ruhiger, achtsamer und
+                  ganzheitlicher Behandlungsweise.
+                </p>
+              </article>
+            </div>
+            <div class="col-md-6 col-xl-3">
+              <article class="feature-card h-100">
+                <h3>Begleitende Konzepte</h3>
+                <p>
+                  Ergaenzende Impulse aus Bruegger-Therapie, interdisziplinaerem Austausch und
+                  langjaehriger Erfahrung in unterschiedlichen medizinischen Bereichen.
+                </p>
+              </article>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="praxis" class="section section-accent">
+        <div class="container">
+          <div class="row g-5 align-items-center">
+            <div class="col-lg-5">
+              <div class="section-heading text-start">
+                <p class="eyebrow">Praxis</p>
+                <h2>Ein ruhiger Ort fuer individuelle Behandlung.</h2>
+              </div>
+              <p>
+                Die Praxis befindet sich in Hungen-Langd und richtet sich an Patientinnen und Patienten,
+                die eine konzentrierte und persoenliche physiotherapeutische Begleitung suchen.
+              </p>
+              <p>
+                Das Layout ist bewusst als Onepager angelegt: alle wesentlichen Informationen sind direkt
+                erreichbar, ohne externe Dienste oder nachgeladene Bibliotheken.
+              </p>
+            </div>
+            <div class="col-lg-7">
+              <div class="gallery-grid">
+                <img src="img/ka_2020_02.jpg" alt="Praxisraum mit Behandlungsbank" />
+                <img src="img/ka_2020_03.jpg" alt="Detailansicht aus der Praxis" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="ueber-mich" class="section section-light">
+        <div class="container">
+          <div class="row g-5 align-items-start">
+            <div class="col-lg-5">
+              <div class="section-heading text-start">
+                <p class="eyebrow">Ueber mich</p>
+                <h2>Kerstin Adolphsen</h2>
+              </div>
+              <p>
+                Fuer mich ist ganzheitliche Physiotherapie kein Gegenmodell zur Medizin, sondern ein
+                selbstverstaendliches Konzept: Beschwerden werden differenziert betrachtet und individuell
+                behandelt.
+              </p>
+            </div>
+            <div class="col-lg-7">
+              <div class="timeline-card">
+                <p>
+                  Ausbildung zur Physiotherapeutin an der Krankengymnastik-Schule der
+                  Albert-Ludwig-Universitaet Freiburg, Examen 1991.
+                </p>
+                <p>
+                  Berufliche Stationen in Warendorf und Regensburg, seit 2006 in Hungen-Langd.
+                </p>
+                <p>
+                  Weiterbildungen zur Manual-Therapeutin, Bruegger-Therapeutin sowie in
+                  osteopathischen Schwerpunkten am Upledger Craniosacral Institut Deutschland.
+                </p>
+                <p>Seit 2009 examinierte Upledger Craniosacral Therapeutin, zusaetzlich Yoga-Lehrerin.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="kontakt" class="section section-dark">
+        <div class="container">
+          <div class="row g-5 align-items-end">
+            <div class="col-lg-5 align-self-start">
+              <div class="section-heading text-start">
+                <p class="eyebrow">Kontakt</p>
+                <h2>Terminabsprache und Anfahrt.</h2>
+              </div>
+              <div class="contact-card">
+                <p><strong>Physiotherapie Kerstin Adolphsen</strong></p>
+                <p>Obergasse 2<br />35410 Hungen-Langd</p>
+                <p>
+                  Telefon: <a href="tel:+496402508272">06402 / 508272</a><br />
+                  E-Mail: <a href="mailto:kerstin.adolphsen@gmail.com">kerstin.adolphsen@gmail.com</a>
+                </p>
+                <p>
+                  <a class="text-link" href="https://maps.google.com/?q=Obergasse+2,+35410+Hungen-Langd" target="_blank" rel="noreferrer">
+                    Route in Google Maps oeffnen
+                  </a>
+                </p>
+              </div>
+            </div>
+            <div class="col-lg-7">
+              <iframe
+                style="border: none; border-radius: 20px; width: 100%; height: 380px; box-shadow: 0 24px 60px rgba(31, 37, 34, 0.14);"
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2559.2123456789!2d8.950706!3d50.47236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bdf6a9c4c0c0c1%3A0x1c4c0c0c1c4c0c0c!2sObergasse%202%2C%2035410%20Hungen%20Langd!5e0!3m2!1sde!2sde!4v1700000000000"
+                allowfullscreen=""
+                loading="lazy"
+                referrerpolicy="no-referrer-when-downgrade"
+                aria-label="Standort der Praxis auf Google Maps"
+              ></iframe>
+            </div>
+          </div>
+        </div>
+      </section>
+
+
+    </main>
+
+    <footer class="site-footer">
+      <div class="container footer-inner">
+        <p>© <span id="currentYear"></span> Physiotherapie Kerstin Adolphsen</p>
+        <div class="footer-links">
+          <a href="impressum.html">Impressum</a>
+          <a href="datenschutz.html">Datenschutz</a>
+        </div>
+      </div>
+    </footer>
+
+    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="assets/js/main.js"></script>
+  </body>
+</html>