erstes Layout fertig

app.py

@@ -1,20 +1,27 @@
-from flask import Flask, render_template
+from flask import Flask, render_template, send_from_directory
+
+app = Flask(__name__)
+
+
+@app.route('/favicon.ico')
+def favicon():
+    return send_from_directory('static', 'favicon.ico')
+
 
-app = Flask(__name__, static_folder="images", static_url_path="/images")
 
 @app.route("/")
 @app.route("/home")
 def home():
     return render_template("home.html")
 
-@app.route("/impressum")
-def impressum():
-    return render_template("impressum.html")
-
 @app.route("/kontakt")
 def kontakt():
     return render_template("kontakt.html")
 
+@app.route("/impressum")
+def impressum():
+    return render_template("impressum.html")
+
 @app.route("/datenschutz")
 def datenschutz():
     return render_template("datenschutz.html")

deploy_flask.sh

@@ -2,9 +2,7 @@
 set -euo pipefail
 
 SRC_ROOT="/Volumes/MacBook SD/Projekte/HebammeKrystyna"
-
-APP_DST="/Volumes/docker/flask-postgres/app-hebammekrystyna"
-ASSET_DST="/Volumes/docker/flask-postgres/hebammekrystyna"
+DST_ROOT="/Volumes/docker/flask-postgres/app-hebammekrystyna"
 
 NAS_USER="BKolb"
 NAS_HOST="192.168.0.10"
@@ -13,10 +11,9 @@ CONTAINER_NAME="flask_hebammekrystyna"
 echo "Starte Deployment..."
 
 [ -d "$SRC_ROOT" ] || { echo "Quelle fehlt: $SRC_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; }
+[ -d "$DST_ROOT" ] || { echo "Ziel fehlt: $DST_ROOT"; exit 1; }
 
-echo "Synchronisiere Projektdateien nach $APP_DST ..."
+echo "Synchronisiere Projektdateien ..."
 rsync -av --delete \
   --exclude '.DS_Store' \
   --exclude '._*' \
@@ -29,47 +26,11 @@ rsync -av --delete \
   --exclude 'venv/' \
   --exclude 'node_modules/' \
   --exclude 'files/' \
-  --exclude 'images/' \
-  --exclude 'styles/' \
-  "$SRC_ROOT/" "$APP_DST/"
-
-echo "Synchronisiere images/ nach $ASSET_DST/images ..."
-if [ -d "$SRC_ROOT/images" ]; then
-  mkdir -p "$ASSET_DST/images"
-  rsync -av --delete \
-    --exclude '.DS_Store' \
-    --exclude '._*' \
-    --exclude 'videos/' \
-    "$SRC_ROOT/images/" "$ASSET_DST/images/"
-else
-  echo "Hinweis: $SRC_ROOT/images nicht gefunden, übersprungen."
-fi
-
-echo "Synchronisiere styles/ nach $ASSET_DST/styles ..."
-if [ -d "$SRC_ROOT/styles" ]; then
-  mkdir -p "$ASSET_DST/styles"
-  rsync -av --delete \
-    --exclude '.DS_Store' \
-    --exclude '._*' \
-    "$SRC_ROOT/styles/" "$ASSET_DST/styles/"
-else
-  echo "Hinweis: $SRC_ROOT/styles nicht gefunden, übersprungen."
-fi
-
-echo "Synchronisiere templates/ nach $APP_DST/templates ..."
-if [ -d "$SRC_ROOT/templates" ]; then
-  mkdir -p "$APP_DST/templates"
-  rsync -av --delete \
-    --exclude '.DS_Store' \
-    --exclude '._*' \
-    "$SRC_ROOT/templates/" "$APP_DST/templates/"
-else
-  echo "Hinweis: $SRC_ROOT/templates nicht gefunden, übersprungen."
-fi
+  "$SRC_ROOT/" "$DST_ROOT/"
 
 echo "files/ wird bewusst nicht angefasst."
 
-echo "Container neu starten ... manuell!"
+echo "Starte Container neu ..."
 #ssh "${NAS_USER}@${NAS_HOST}" "docker restart ${CONTAINER_NAME}"
 
 echo "Deployment abgeschlossen."

static/styles/style.css

@@ -8,8 +8,7 @@
     --text: #4b4650;
     --accent-rosa: #bf6f8c;
     --accent-blau: #6f8eae;
-    --card: rgba(255, 255, 255, 0.82);
-    --card-strong: rgba(255, 255, 255, 0.9);
+    --card: rgba(255, 255, 255, 0.85);
     --shadow: 0 12px 30px rgba(86, 110, 140, 0.16);
     --radius: 24px;
 }
@@ -22,74 +21,35 @@ 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%);
+    background: linear-gradient(135deg, var(--rosa-1), var(--blau-2));
     min-height: 100vh;
 }
 
-h1, h2, h3, .handwritten, .hero-motto {
+h1, h2, h3 {
     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);
+    padding: 22px 20px 40px;
 }
 
 .main-nav {
-    padding: 14px 18px;
-    margin-bottom: 28px;
+    background: var(--card);
+    padding: 14px 20px;
+    border-radius: var(--radius);
+    margin-bottom: 26px;
+    box-shadow: var(--shadow);
+    text-align: center;
 }
 
 .main-nav a {
+    display: inline-block;
+    margin: 0 14px;
     text-decoration: none;
-    color: var(--accent-blau);
     font-weight: 700;
-    margin-right: 18px;
+    color: var(--accent-blau);
     font-size: 1rem;
 }
 
@@ -97,18 +57,33 @@ details,
     color: var(--accent-rosa);
 }
 
-.hero {
+.hero-header {
     display: grid;
-    grid-template-columns: 1.2fr 0.8fr;
-    gap: 26px;
+    grid-template-columns: 180px 1fr 220px;
+    gap: 28px;
     align-items: center;
-    margin-bottom: 34px;
+    background: var(--card);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    padding: 28px 30px;
+    margin-bottom: 28px;
 }
 
-.hero-card,
-.info-card,
-.legal-card {
-    padding: 30px;
+.hero-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo {
+    max-width: 150px;
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.hero-text-block {
+    min-width: 0;
 }
 
 .eyebrow {
@@ -129,62 +104,70 @@ h1 {
     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;
+    font-size: 1.22rem;
     line-height: 1.75;
+    margin: 0;
 }
 
 .note-region {
-    margin-top: 18px;
+    margin-top: 16px;
     font-weight: 700;
     color: var(--accent-blau);
 }
 
+.hero-photo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.profile {
+    width: 220px;
+    height: 260px;
+    object-fit: cover;
+    object-position: center 20%; /* verschiebt Fokus nach oben */
+    border-radius: 22px;
+}
+
+.info-card,
+.legal-card {
+    background: var(--card);
+    padding: 30px;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    margin-bottom: 28px;
+}
+
 .section-title {
-    margin: 10px 0 14px;
+    font-size: 2rem;
+    margin-bottom: 10px;
 }
 
 .section-subtitle {
-    max-width: 820px;
+    margin-bottom: 20px;
     line-height: 1.75;
-    margin: 0 0 24px;
 }
 
 .services-grid {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(2, 1fr);
     gap: 18px;
 }
 
 details {
+    background: var(--card);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
     overflow: hidden;
 }
 
 summary {
-    list-style: none;
-    cursor: pointer;
-    padding: 20px 22px;
+    padding: 18px;
     font-weight: 700;
+    cursor: pointer;
+    list-style: none;
     color: var(--accent-blau);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
 }
 
 summary::-webkit-details-marker {
@@ -193,16 +176,18 @@ summary::-webkit-details-marker {
 
 summary::after {
     content: "+";
-    font-size: 1.5rem;
+    float: right;
     color: var(--accent-rosa);
+    font-size: 1.4rem;
+    line-height: 1;
 }
 
 details[open] summary::after {
-    content: "–";
+    content: "−";
 }
 
 .detail-content {
-    padding: 0 22px 22px;
+    padding: 0 18px 18px;
     line-height: 1.75;
 }
 
@@ -211,50 +196,36 @@ details[open] summary::after {
     line-height: 1.9;
 }
 
-.contact-block a {
+.contact-block a,
+.legal-card 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;
+    margin-top: 40px;
+    color: #777;
 }
 
-@media (max-width: 900px) {
-    .hero,
+@media (max-width: 980px) {
+    .hero-header {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+
+    .hero-logo,
+    .hero-photo {
+        justify-content: center;
+    }
+
+    .profile {
+        width: 150px;
+        height: 150px;
+    }
+
     .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;
-    }
-}

templates/base.html

@@ -4,19 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Hebamme Krystyna Kolb{% endblock %}</title>
+    <link rel="icon" href="/favicon.ico">
     <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
 </head>
 <body>
     <div class="page-wrap">
-        <header class="topbar">
-            <div class="logo-box">
-                <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') }}" alt="Krystyna Kolb" class="profile">
-            </div>
-        </header>
 
         <nav class="main-nav">
             <a href="{{ url_for('home') }}">Startseite</a>
@@ -25,9 +17,7 @@
             <a href="{{ url_for('datenschutz') }}">Datenschutz</a>
         </nav>
 
-        <main>
-            {% block content %}{% endblock %}
-        </main>
+        {% block content %}{% endblock %}
 
         <footer class="footer">
             <p>Hebamme Krystyna Kolb · Von Wien bis zum Neusiedlersee</p>

templates/home.html

@@ -2,8 +2,12 @@
 {% block title %}Hebamme Krystyna Kolb{% endblock %}
 
 {% block content %}
-<section class="hero">
-    <div class="hero-card">
+<section class="hero-header">
+    <div class="hero-logo">
+        <img src="{{ url_for('static', filename='images/logo_transparent.png') }}" alt="Logo Hebamme Krystyna Kolb" class="logo">
+    </div>
+
+    <div class="hero-text-block">
         <div class="eyebrow">Mit Herz, Erfahrung und Achtsamkeit</div>
         <h1>Hebamme Krystyna Kolb</h1>
         <p class="hero-motto">
@@ -16,17 +20,21 @@
         </p>
     </div>
 
-    <div class="info-card">
-        <h2>Begleitung in einer besonderen Zeit</h2>
-        <p>
-            Schwangerschaft, Geburt und die erste Zeit mit eurem Baby sind besonders wertvolle Lebensphasen.
-            Ich begleite euch mit Ruhe, Erfahrung und einem offenen Ohr für eure Fragen, Sorgen und Wünsche.
-            Dabei ist mir wichtig, dass ihr euch sicher, verstanden und gut aufgehoben fühlt.
-        </p>
+    <div class="hero-photo">
+        <img src="{{ url_for('static', filename='images/Krystyna_optimized_full.png') }}" alt="Krystyna Kolb" class="profile">
     </div>
 </section>
 
-<section>
+<section class="info-card">
+    <h2>Begleitung in einer besonderen Zeit</h2>
+    <p>
+        Schwangerschaft, Geburt und die erste Zeit mit eurem Baby sind besonders wertvolle Lebensphasen.
+        Ich begleite euch mit Ruhe, Erfahrung und einem offenen Ohr für eure Fragen, Sorgen und Wünsche.
+        Dabei ist mir wichtig, dass ihr euch sicher, verstanden und gut aufgehoben fühlt.
+    </p>
+</section>
+
+<section class="services-section">
     <h2 class="section-title">Meine Leistungen</h2>
     <p class="section-subtitle">
         Jede Familie ist anders – deshalb darf auch Begleitung individuell sein. Meine Leistungen unterstützen