zwischenversion

app.py

@@ -15,5 +15,9 @@ def impressum():
 def kontakt():
     return render_template("kontakt.html")
 
+@app.route("/datenschutz")
+def datenschutz():
+    return render_template("datenschutz.html")
+
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=5000)

deploy_flask.sh

@@ -2,22 +2,21 @@
 set -euo pipefail
 
 SRC_ROOT="/Volumes/MacBook SD/Projekte/HebammeKrystyna"
-DST_ROOT="/Volumes/docker/flask-postgres/app-hebammekrystyna"
+
+APP_DST="/Volumes/docker/flask-postgres/app-hebammekrystyna"
+ASSET_DST="/Volumes/docker/flask-postgres/hebammekrystyna"
 
 NAS_USER="BKolb"
 NAS_HOST="192.168.0.10"
 CONTAINER_NAME="flask_hebammekrystyna"
 
-echo "🚀 Starte Deployment..."
+echo "Starte Deployment..."
 
-[ -d "$SRC_ROOT" ] || { echo "❌ Quelle fehlt: $SRC_ROOT"; exit 1; }
+[ -d "$SRC_ROOT" ] || { echo "Quelle fehlt: $SRC_ROOT"; exit 1; }
-[ -d "$DST_ROOT" ] || { echo "❌ Ziel fehlt: $DST_ROOT"; exit 1; }
+[ -d "$APP_DST" ] || { echo "App-Ziel fehlt: $APP_DST"; exit 1; }
-
+[ -d "$ASSET_DST" ] || { echo "Asset-Ziel fehlt: $ASSET_DST"; exit 1; }
-########################################
-# 1. CORE CODE (ohne images/styles/files)
-########################################
-echo "📦 Synchronisiere Core-Projektdateien ..."
 
+echo "Synchronisiere Projektdateien nach $APP_DST ..."
 rsync -av --delete \
   --exclude '.DS_Store' \
   --exclude '._*' \
@@ -32,71 +31,45 @@ rsync -av --delete \
   --exclude 'files/' \
   --exclude 'images/' \
   --exclude 'styles/' \
-  "$SRC_ROOT/" "$DST_ROOT/"
+  "$SRC_ROOT/" "$APP_DST/"
-
-########################################
-# 2. IMAGES
-########################################
-echo "🖼️ Synchronisiere images/ ..."
 
+echo "Synchronisiere images/ nach $ASSET_DST/images ..."
 if [ -d "$SRC_ROOT/images" ]; then
-  mkdir -p "$DST_ROOT/images"
+  mkdir -p "$ASSET_DST/images"
-
   rsync -av --delete \
     --exclude '.DS_Store' \
     --exclude '._*' \
-    "$SRC_ROOT/images/" "$DST_ROOT/images/"
+    --exclude 'videos/' \
+    "$SRC_ROOT/images/" "$ASSET_DST/images/"
 else
-  echo "⚠️ images/ nicht gefunden – übersprungen."
+  echo "Hinweis: $SRC_ROOT/images nicht gefunden, übersprungen."
 fi
 
-########################################
+echo "Synchronisiere styles/ nach $ASSET_DST/styles ..."
-# 3. STYLES
-########################################
-echo "🎨 Synchronisiere styles/ ..."
-
 if [ -d "$SRC_ROOT/styles" ]; then
-  mkdir -p "$DST_ROOT/styles"
+  mkdir -p "$ASSET_DST/styles"
-
   rsync -av --delete \
     --exclude '.DS_Store' \
     --exclude '._*' \
-    "$SRC_ROOT/styles/" "$DST_ROOT/styles/"
+    "$SRC_ROOT/styles/" "$ASSET_DST/styles/"
 else
-  echo "⚠️ styles/ nicht gefunden – übersprungen."
+  echo "Hinweis: $SRC_ROOT/styles nicht gefunden, übersprungen."
 fi
 
-########################################
+echo "Synchronisiere templates/ nach $APP_DST/templates ..."
-# 4. TEMPLATES
-########################################
-echo "📄 Synchronisiere templates/ ..."
-
 if [ -d "$SRC_ROOT/templates" ]; then
-  mkdir -p "$DST_ROOT/templates"
+  mkdir -p "$APP_DST/templates"
-
   rsync -av --delete \
     --exclude '.DS_Store' \
     --exclude '._*' \
-    "$SRC_ROOT/templates/" "$DST_ROOT/templates/"
+    "$SRC_ROOT/templates/" "$APP_DST/templates/"
 else
-  echo "⚠️ templates/ nicht gefunden – übersprungen."
+  echo "Hinweis: $SRC_ROOT/templates nicht gefunden, übersprungen."
 fi
 
-########################################
+echo "files/ wird bewusst nicht angefasst."
-# 5. HINWEIS FILES
-########################################
-echo "📁 files/ wird bewusst NICHT synchronisiert."
 
-########################################
+echo "Container neu starten ... manuell!"
-# 6. OPTIONAL: CONTAINER RESTART
+#ssh "${NAS_USER}@${NAS_HOST}" "docker restart ${CONTAINER_NAME}"
-########################################
-echo "🔄 Starte Container neu ... MANUELL zu tun"
 
-#ssh "${NAS_USER}@${NAS_HOST}" "docker restart ${CONTAINER_NAME}" \
+echo "Deployment abgeschlossen."
-#  && echo "✅ Container erfolgreich neu gestartet" \
-#  || echo "⚠️ Container konnte nicht neu gestartet werden"
-
-########################################
-# DONE
-########################################
-echo "🎉 Deployment abgeschlossen."

templates/base.html

@@ -4,302 +4,33 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Hebamme Krystyna Kolb{% endblock %}</title>
-    <style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
-        :root {
-            --rosa: #f8dfe8;
-            --rosa-dunkel: #c97f95;
-            --blau: #dcefff;
-            --blau-dunkel: #6c8cab;
-            --text: #4f4850;
-            --weiss: rgba(255,255,255,0.72);
-            --weiss-stark: rgba(255,255,255,0.88);
-            --shadow: 0 10px 28px rgba(108, 140, 171, 0.18);
-            --radius: 22px;
-        }
-
-        * {
-            box-sizing: border-box;
-        }
-
-        body {
-            margin: 0;
-            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-            color: var(--text);
-            background: linear-gradient(135deg, #f9d9e6 0%, #f8e7ee 28%, #eaf4ff 72%, #d8ebff 100%);
-            min-height: 100vh;
-        }
-
-        .page-wrap {
-            max-width: 1180px;
-            margin: 0 auto;
-            padding: 28px 20px 40px;
-        }
-
-        .topbar {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            gap: 24px;
-            margin-bottom: 24px;
-        }
-
-        .logo-box,
-        .photo-box {
-            background: var(--weiss);
-            border-radius: 24px;
-            box-shadow: var(--shadow);
-            backdrop-filter: blur(6px);
-            padding: 14px;
-        }
-
-        .logo-box img {
-            display: block;
-            max-height: 88px;
-            width: auto;
-        }
-
-        .photo-box img {
-            display: block;
-            width: 170px;
-            max-width: 100%;
-            height: auto;
-            border-radius: 18px;
-            object-fit: cover;
-        }
-
-        nav {
-            margin-bottom: 28px;
-            background: var(--weiss);
-            border-radius: 18px;
-            padding: 14px 18px;
-            box-shadow: var(--shadow);
-        }
-
-        nav a {
-            color: var(--blau-dunkel);
-            text-decoration: none;
-            font-weight: 600;
-            margin-right: 18px;
-        }
-
-        nav a:hover {
-            color: var(--rosa-dunkel);
-        }
-
-        .hero {
-            display: grid;
-            grid-template-columns: 1.2fr 0.8fr;
-            gap: 28px;
-            align-items: center;
-            margin-bottom: 34px;
-        }
-
-        .hero-card {
-            background: var(--weiss-stark);
-            border-radius: 30px;
-            padding: 36px 34px;
-            box-shadow: var(--shadow);
-        }
-
-        .eyebrow {
-            display: inline-block;
-            padding: 8px 14px;
-            border-radius: 999px;
-            background: rgba(255,255,255,0.7);
-            color: var(--rosa-dunkel);
-            font-size: 0.95rem;
-            font-weight: 700;
-            margin-bottom: 18px;
-        }
-
-        h1 {
-            font-size: clamp(2rem, 4vw, 3.6rem);
-            line-height: 1.08;
-            margin: 0 0 20px;
-            color: #6f5d69;
-        }
-
-        .hero-text {
-            font-size: 1.15rem;
-            line-height: 1.8;
-            margin: 0;
-        }
-
-        .hero-highlight {
-            color: var(--rosa-dunkel);
-            font-weight: 700;
-        }
-
-        .intro-side {
-            background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.62));
-            border-radius: 30px;
-            padding: 30px;
-            box-shadow: var(--shadow);
-        }
-
-        .intro-side h2 {
-            margin-top: 0;
-            color: var(--blau-dunkel);
-            font-size: 1.5rem;
-        }
-
-        .intro-side p {
-            line-height: 1.75;
-            margin-bottom: 0;
-        }
-
-        .section-title {
-            font-size: 2rem;
-            color: #6f5d69;
-            margin: 12px 0 18px;
-        }
-
-        .section-subtitle {
-            margin: 0 0 26px;
-            line-height: 1.75;
-            max-width: 760px;
-        }
-
-        .leistungen-grid {
-            display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-            gap: 18px;
-        }
-
-        details {
-            background: var(--weiss-stark);
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
-            padding: 0;
-            overflow: hidden;
-        }
-
-        summary {
-            list-style: none;
-            cursor: pointer;
-            padding: 22px 24px;
-            font-size: 1.08rem;
-            font-weight: 700;
-            color: var(--blau-dunkel);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        summary::-webkit-details-marker {
-            display: none;
-        }
-
-        summary::after {
-            content: "+";
-            font-size: 1.4rem;
-            color: var(--rosa-dunkel);
-            margin-left: 14px;
-        }
-
-        details[open] summary::after {
-            content: "–";
-        }
-
-        .detail-content {
-            padding: 0 24px 24px;
-            line-height: 1.75;
-        }
-
-        .languages {
-            margin: 8px 0 0;
-            padding-left: 18px;
-        }
-
-        footer {
-            margin-top: 38px;
-            padding: 20px 10px 10px;
-            text-align: center;
-            color: #7b7480;
-            font-size: 0.95rem;
-        }
-
-        @media (max-width: 900px) {
-            .hero,
-            .leistungen-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .topbar {
-                align-items: stretch;
-            }
-
-            .photo-box img {
-                width: 130px;
-            }
-        }
-
-        @media (max-width: 640px) {
-            .topbar {
-                flex-direction: column;
-            }
-
-            .logo-box img {
-                max-height: 70px;
-            }
-
-            .photo-box img {
-                width: 100%;
-                max-width: 220px;
-            }
-
-            .hero-card,
-            .intro-side {
-                padding: 24px;
-            }
-
-            h1 {
-                font-size: 2rem;
-            }
-        }
-
-        .logo {
-            height: 90px;
-            object-fit: contain;
-        }
-
-        .profile {
-            width: 180px;
-            height: auto;
-            border-radius: 20px;
-            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
-            object-fit: cover;
-        }
-
-        .profile {
-            width: 180px;
-            border-radius: 50%;
-            border: 4px solid rgba(255,255,255,0.6);
-        }
-    </style>
 </head>
 <body>
     <div class="page-wrap">
-        <div class="topbar">
+        <header class="topbar">
             <div class="logo-box">
-                <img src="{{ url_for('static', filename='logo_transparent.png') }}" class="logo">
+                <img src="{{ url_for('static', filename='logo_transparent.png') }}" alt="Logo Hebamme Krystyna Kolb" class="logo">
             </div>
 
             <div class="photo-box">
-                <img src="{{ url_for('static', filename='Krystyna_optimized_full.png') }}" class="profile">
+                <img src="{{ url_for('static', filename='Krystyna_optimized_full.png') }}" alt="Krystyna Kolb" class="profile">
             </div>
-        </div>
+        </header>
 
-        <nav>
+        <nav class="main-nav">
             <a href="{{ url_for('home') }}">Startseite</a>
-            <a href="{{ url_for('impressum') }}">Impressum</a>
             <a href="{{ url_for('kontakt') }}">Kontakt</a>
+            <a href="{{ url_for('impressum') }}">Impressum</a>
+            <a href="{{ url_for('datenschutz') }}">Datenschutz</a>
         </nav>
 
-        {% block content %}{% endblock %}
+        <main>
+            {% block content %}{% endblock %}
+        </main>
 
-        <footer>
+        <footer class="footer">
-            Hebamme Krystyna Kolb
+            <p>Hebamme Krystyna Kolb · Von Wien bis zum Neusiedlersee</p>
         </footer>
     </div>
 </body>

templates/home.html

@@ -1,5 +1,4 @@
 {% extends "base.html" %}
-
 {% block title %}Hebamme Krystyna Kolb{% endblock %}
 
 {% block content %}
@@ -7,22 +6,22 @@
     <div class="hero-card">
         <div class="eyebrow">Mit Herz, Erfahrung und Achtsamkeit</div>
         <h1>Hebamme Krystyna Kolb</h1>
-        <p class="hero-text">
+        <p class="hero-motto">
-            <span class="hero-highlight">Ein neues Leben ist ein Wunder.</span>
+            Ein neues Leben ist ein Wunder. Die jungen Familien achtsam zu begleiten ist meine Berufung.
-            Die jungen Familien achtsam zu begleiten ist meine Berufung.
+            Ich unterstütze euch mit 25 Jahren Erfahrung – einfühlsam, individuell und sicher in der
-            Ich unterstütze euch mit <strong>25 Jahren Erfahrung</strong> –
+            Schwangerschaft, bei der Geburt und im Wochenbett.
-            einfühlsam, individuell und sicher in der Schwangerschaft,
+        </p>
-            rund um die Geburt und im Wochenbett.
+        <p class="note-region">
+            Betreuungen sind von Wien bis zum Neusiedlersee möglich.
         </p>
     </div>
 
-    <div class="intro-side">
+    <div class="info-card">
         <h2>Begleitung in einer besonderen Zeit</h2>
         <p>
-            Jede Schwangerschaft ist einzigartig. In dieser sensiblen und wertvollen Lebensphase
+            Schwangerschaft, Geburt und die erste Zeit mit eurem Baby sind besonders wertvolle Lebensphasen.
-            ist es mir wichtig, euch mit Ruhe, Fachwissen und persönlicher Zuwendung zur Seite zu stehen.
+            Ich begleite euch mit Ruhe, Erfahrung und einem offenen Ohr für eure Fragen, Sorgen und Wünsche.
-            Gemeinsam schaffen wir Vertrauen, Orientierung und einen geschützten Raum für eure Fragen,
+            Dabei ist mir wichtig, dass ihr euch sicher, verstanden und gut aufgehoben fühlt.
-            Wünsche und Bedürfnisse.
         </p>
     </div>
 </section>
@@ -30,81 +29,71 @@
 <section>
     <h2 class="section-title">Meine Leistungen</h2>
     <p class="section-subtitle">
-        Ich begleite euch mit fachlicher Kompetenz und viel Feingefühl durch die verschiedenen Phasen
+        Jede Familie ist anders – deshalb darf auch Begleitung individuell sein. Meine Leistungen unterstützen
-        von Schwangerschaft, Geburt und der ersten Zeit mit eurem Baby. Die folgenden Leistungen
+        euch fachlich und menschlich durch die Schwangerschaft, rund um die Geburt und in der ersten Zeit
-        können individuell auf eure persönliche Situation abgestimmt werden.
+        mit eurem Kind.
     </p>
 
-    <div class="leistungen-grid">
+    <div class="services-grid">
         <details>
             <summary>Mutter-Kind-Pass-Beratung</summary>
             <div class="detail-content">
-                In der Zeit zwischen der 18. und 22. Schwangerschaftswoche biete ich euch eine
+                Zwischen der 18. und 22. Schwangerschaftswoche biete ich euch eine ausführliche Beratung
-                umfassende Beratung im Rahmen des Mutter-Kind-Passes an. Dabei geht es um Fragen
+                im Rahmen des Mutter-Kind-Passes an. Dabei besprechen wir die Entwicklung eures Babys,
-                rund um die Entwicklung eures Babys, euer körperliches und seelisches Wohlbefinden
+                eure körperlichen Veränderungen, euer Wohlbefinden und viele praktische Fragen rund um
-                sowie um wertvolle Informationen für eine bewusste und gut vorbereitete Schwangerschaft.
+                diese besondere Zeit.
             </div>
         </details>
 
         <details>
             <summary>Akupunktur</summary>
             <div class="detail-content">
-                Mit punktgenauer Aktivierung ausgewählter Punkte aus der chinesischen Medizin kann
+                Akupunktur kann in der Schwangerschaft und rund um die Geburt eine sanfte Unterstützung sein.
-                Akupunktur den Körper sanft unterstützen. Sie wird in der Schwangerschaft häufig als
+                Durch die gezielte Aktivierung ausgewählter Punkte aus der chinesischen Medizin lassen sich
-                wohltuende Begleitung eingesetzt und kann individuell auf eure Bedürfnisse abgestimmt werden.
+                Körper und Wohlbefinden individuell begleiten.
             </div>
         </details>
 
         <details>
             <summary>Geburtsvorbereitungskurs</summary>
             <div class="detail-content">
-                Eine gute Vorbereitung schenkt Vertrauen. Im Geburtsvorbereitungskurs erhaltet ihr
+                Eine gute Vorbereitung schenkt Vertrauen. Im Geburtsvorbereitungskurs geht es um Wissen,
-                hilfreiches Wissen über die Geburt, Atem- und Entspannungstechniken, den Umgang mit
+                Entspannung, Atemtechniken, den Ablauf der Geburt und die ersten Tage mit eurem Baby.
-                Wehen sowie die ersten Tage mit eurem Baby. Ziel ist es, euch Sicherheit zu geben und
+                So könnt ihr euch innerlich gestärkt und gut vorbereitet auf die Geburt einstimmen.
-                euch gestärkt auf die Geburt einzustimmen.
             </div>
         </details>
 
         <details>
             <summary>Wochenbettbetreuung</summary>
             <div class="detail-content">
-                Die erste Zeit nach der Geburt ist intensiv, berührend und oft auch herausfordernd.
+                Das Wochenbett ist eine intensive, berührende und oft auch herausfordernde Zeit. Ich begleite
-                In der Wochenbettbetreuung begleite ich euch zuhause mit Ruhe und Erfahrung. Ich unterstütze
+                euch zuhause mit Erfahrung und Ruhe, unterstütze bei Fragen zur Rückbildung, zur Versorgung
-                bei Fragen zur Rückbildung, zur Versorgung eures Babys, zum Stillen und zu allem,
+                eures Babys und zu allem, was euch als Familie bewegt.
-                was euch in dieser neuen Lebensphase bewegt.
             </div>
         </details>
 
         <details>
             <summary>Still- und Laktationsberatung</summary>
             <div class="detail-content">
-                Stillen ist etwas sehr Natürliches und gleichzeitig nicht immer selbstverständlich.
+                Stillen darf wachsen. Mit fachkundiger und einfühlsamer Beratung unterstütze ich euch bei
-                Mit einfühlsamer und fachkundiger Still- und Laktationsberatung helfe ich euch dabei,
+                einem guten Start, bei Unsicherheiten und bei individuellen Herausforderungen, damit ihr euren
-                einen guten Start zu finden, Unsicherheiten zu klären und individuelle Lösungen zu entwickeln,
+                eigenen sicheren Weg finden könnt.
-                damit ihr euch sicher und gut begleitet fühlt.
             </div>
         </details>
 
         <details>
             <summary>Homöopathie</summary>
             <div class="detail-content">
-                Die Homöopathie kann als sanfte, ergänzende Begleitung in besonderen Lebensphasen
+                Homöopathie kann auf Wunsch als sanfte ergänzende Begleitung eingesetzt werden. Dabei steht
-                eingesetzt werden. Mit großer Sorgfalt und auf eure persönliche Situation abgestimmt
+                immer die individuelle Situation von Mutter und Kind im Mittelpunkt.
-                beziehe ich diese Möglichkeit auf Wunsch in meine Betreuung mit ein.
             </div>
         </details>
 
         <details>
             <summary>Fremdsprachliche Betreuung</summary>
             <div class="detail-content">
-                Eine vertrauensvolle Begleitung beginnt mit gutem Verstehen. Ich biete Betreuung in
+                Eine vertrauensvolle Begleitung lebt vom Verstehen. Ich betreue euch gerne mehrsprachig in:
-                mehreren Sprachen an, damit ihr euch in Gesprächen sicher, verstanden und aufgehoben fühlt.
+                Deutsch, Polnisch, Russisch und Englisch.
-                <ul class="languages">
-                    <li>Deutsch</li>
-                    <li>Polnisch</li>
-                    <li>Russisch</li>
-                    <li>Englisch</li>
-                </ul>
             </div>
         </details>
     </div>

templates/impressum.html

@@ -1,13 +1,48 @@
 {% extends "base.html" %}
-
 {% block title %}Impressum | Hebamme Krystyna Kolb{% endblock %}
 
 {% block content %}
-<div class="hero-card">
+<section class="legal-card">
     <h1>Impressum</h1>
-    <p class="hero-text">
+    <p class="lead">Informationen gemäß den geltenden gesetzlichen Informationspflichten.</p>
-        Angaben gemäß den gesetzlichen Bestimmungen.<br><br>
+
-        Hebamme Krystyna Kolb
+    <h3>Anbieterin</h3>
+    <p>
+        Krystyna Kolb<br>
+        Feriensiedlung 55<br>
+        A-2460 Bruckneudorf<br>
+        Telefon: <a href="tel:+4369910072909">+43 699 1007 2909</a><br>
+        E-Mail: <a href="mailto:Krystyna.Kolb@gmail.com">Krystyna.Kolb@gmail.com</a>
     </p>
-</div>
+
+    <h3>Rechtliche Hinweise</h3>
+    <p>
+        Diese Website dient der Information über die Leistungen von Hebamme Krystyna Kolb.
+        Alle Inhalte wurden mit größtmöglicher Sorgfalt erstellt. Eine Haftung für die
+        Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann jedoch nicht übernommen werden.
+    </p>
+
+    <p>
+        Inhalte, Texte, Bilder und Grafiken dieser Website sind urheberrechtlich geschützt.
+        Jede Verwendung außerhalb der gesetzlichen Grenzen bedarf der vorherigen Zustimmung.
+    </p>
+
+    <h3>Datenschutz</h3>
+    <p>
+        Informationen zur Verarbeitung personenbezogener Daten finden Sie in der
+        <a href="{{ url_for('datenschutz') }}">Datenschutzerklärung</a>.
+    </p>
+
+    <h3>Online-Streitbeilegung</h3>
+    <p>
+        Verbraucher haben die Möglichkeit, Beschwerden an die Online-Streitbeilegungsplattform
+        der EU zu richten.
+    </p>
+
+    <h3>Hinweis zur Verbraucherstreitbeilegung</h3>
+    <p>
+        Es besteht keine Verpflichtung zur Teilnahme an einem Streitbeilegungsverfahren vor
+        einer Verbraucherschlichtungsstelle.
+    </p>
+</section>
 {% endblock %}

templates/kontakt.html

@@ -1,13 +1,21 @@
 {% extends "base.html" %}
-
 {% block title %}Kontakt | Hebamme Krystyna Kolb{% endblock %}
 
 {% block content %}
-<div class="hero-card">
+<section class="legal-card">
     <h1>Kontakt</h1>
-    <p class="hero-text">
+
-        Gerne begleite ich euch auf eurem Weg durch Schwangerschaft, Geburt und Wochenbett.
+    <div class="contact-block">
-        Für Anfragen und Terminvereinbarungen freue ich mich über eure Nachricht.
+        <strong>Krystyna Kolb</strong><br>
+        Feriensiedlung 55<br>
+        A-2460 Bruckneudorf<br><br>
+
+        <a href="tel:+4369910072909">+43 699 1007 2909</a><br>
+        <a href="mailto:Krystyna.Kolb@gmail.com">Krystyna.Kolb@gmail.com</a>
+    </div>
+
+    <p class="lead">
+        Betreuungen sind von Wien bis zum Neusiedlersee möglich. Ich freue mich über eure Anfrage.
     </p>
-</div>
+</section>
 {% endblock %}

templates/styles/styles.css

@@ -0,0 +1,260 @@
+@import url('https://fonts.googleapis.com/css2?family=Handlee&family=Quicksand:wght@400;500;700&display=swap');
+
+:root {
+    --rosa-1: #f8dbe7;
+    --rosa-2: #fbeaf1;
+    --blau-1: #e7f2ff;
+    --blau-2: #d8ebff;
+    --text: #4b4650;
+    --accent-rosa: #bf6f8c;
+    --accent-blau: #6f8eae;
+    --card: rgba(255, 255, 255, 0.82);
+    --card-strong: rgba(255, 255, 255, 0.9);
+    --shadow: 0 12px 30px rgba(86, 110, 140, 0.16);
+    --radius: 24px;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    color: var(--text);
+    font-family: "Quicksand", Arial, sans-serif;
+    background: linear-gradient(135deg, var(--rosa-1) 0%, var(--rosa-2) 35%, var(--blau-1) 70%, var(--blau-2) 100%);
+    min-height: 100vh;
+}
+
+h1, h2, h3, .handwritten, .hero-motto {
+    font-family: "Handlee", cursive;
+    font-weight: 400;
+}
+
+.page-wrap {
+    max-width: 1180px;
+    margin: 0 auto;
+    padding: 28px 20px 40px;
+}
+
+.topbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 24px;
+    margin-bottom: 20px;
+}
+
+.logo-box,
+.photo-box,
+.main-nav,
+.hero-card,
+.info-card,
+details,
+.legal-card {
+    background: var(--card);
+    box-shadow: var(--shadow);
+    border-radius: var(--radius);
+    backdrop-filter: blur(6px);
+}
+
+.logo-box,
+.photo-box {
+    padding: 14px;
+}
+
+.logo {
+    display: block;
+    height: 92px;
+    width: auto;
+    object-fit: contain;
+}
+
+.profile {
+    display: block;
+    width: 200px;
+    max-width: 100%;
+    height: auto;
+    border-radius: 22px;
+    object-fit: cover;
+    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
+}
+
+.main-nav {
+    padding: 14px 18px;
+    margin-bottom: 28px;
+}
+
+.main-nav a {
+    text-decoration: none;
+    color: var(--accent-blau);
+    font-weight: 700;
+    margin-right: 18px;
+    font-size: 1rem;
+}
+
+.main-nav a:hover {
+    color: var(--accent-rosa);
+}
+
+.hero {
+    display: grid;
+    grid-template-columns: 1.2fr 0.8fr;
+    gap: 26px;
+    align-items: center;
+    margin-bottom: 34px;
+}
+
+.hero-card,
+.info-card,
+.legal-card {
+    padding: 30px;
+}
+
+.eyebrow {
+    display: inline-block;
+    margin-bottom: 14px;
+    padding: 8px 14px;
+    border-radius: 999px;
+    background: rgba(255,255,255,0.65);
+    color: var(--accent-rosa);
+    font-weight: 700;
+    font-size: 0.95rem;
+}
+
+h1 {
+    font-size: clamp(2.2rem, 4vw, 3.8rem);
+    color: #6f5f6b;
+    line-height: 1.08;
+    margin: 0 0 18px;
+}
+
+h2 {
+    font-size: 2rem;
+    color: #6f5f6b;
+    margin-top: 0;
+}
+
+.hero-motto {
+    font-size: 1.45rem;
+    line-height: 1.65;
+    margin: 0;
+    color: #735f6c;
+}
+
+.lead,
+.info-card p,
+.legal-card p,
+.legal-card li {
+    font-size: 1.06rem;
+    line-height: 1.75;
+}
+
+.note-region {
+    margin-top: 18px;
+    font-weight: 700;
+    color: var(--accent-blau);
+}
+
+.section-title {
+    margin: 10px 0 14px;
+}
+
+.section-subtitle {
+    max-width: 820px;
+    line-height: 1.75;
+    margin: 0 0 24px;
+}
+
+.services-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+}
+
+details {
+    overflow: hidden;
+}
+
+summary {
+    list-style: none;
+    cursor: pointer;
+    padding: 20px 22px;
+    font-weight: 700;
+    color: var(--accent-blau);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+summary::-webkit-details-marker {
+    display: none;
+}
+
+summary::after {
+    content: "+";
+    font-size: 1.5rem;
+    color: var(--accent-rosa);
+}
+
+details[open] summary::after {
+    content: "–";
+}
+
+.detail-content {
+    padding: 0 22px 22px;
+    line-height: 1.75;
+}
+
+.contact-block {
+    font-size: 1.08rem;
+    line-height: 1.9;
+}
+
+.contact-block a {
+    color: var(--accent-blau);
+    text-decoration: none;
+    font-weight: 700;
+}
+
+.legal-card h3 {
+    margin-top: 28px;
+    margin-bottom: 10px;
+    font-size: 1.55rem;
+    color: var(--accent-blau);
+}
+
+.legal-card ul {
+    padding-left: 20px;
+    line-height: 1.8;
+}
+
+.footer {
+    text-align: center;
+    padding-top: 28px;
+    color: #736b76;
+}
+
+@media (max-width: 900px) {
+    .hero,
+    .services-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 640px) {
+    .topbar {
+        flex-direction: column;
+    }
+
+    .profile {
+        width: 100%;
+        max-width: 260px;
+    }
+
+    .hero-card,
+    .info-card,
+    .legal-card {
+        padding: 22px;
+    }
+}