@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); /* NEU: Playfair Display importiert */

/* Allgemeine Sektionen für blaue Trennung */
section {
    padding: 30px 20px;
    border-top: 1px solid #e0e0e0; /* Leichte Trennung */
}

body {
    font-family: 'Playfair Display', serif; /* GEÄNDERT: Elegante Schriftart */
    margin:0;
    padding:0;
    background:#fff;
    color:#111;
}

.hero {
    text-align:center;
    padding:20px;
    border-top: none; /* Entfernt die Trennlinie für die erste Sektion */
}

.hero-img {
    width:100%;
    max-width:500px;
    border-radius:12px;
}

.price {
    font-size:24px;
    margin:10px 0;
}

.cta {
    display:inline-block;
    padding:14px 24px;
    background:#1e90ff; /* GEÄNDERT: Blauer Button (Royal Blue) */
    color:#fff;
    border-radius:8px;
    text-decoration:none;
    transition: background-color 0.3s; /* Für einen kleinen Hover-Effekt */
}

.cta:hover {
    background: #007bff; /* Dunkleres Blau beim Hover */
}

h2 {
    margin-top:40px;
    text-align:center;
    color: #1e90ff; /* GEÄNDERT: Blaue Überschriften */
    margin-bottom: 20px;
}

.sizechart-img, .testimonial {
    width:90%;
    max-width:400px;
    display:block;
    margin:20px auto;
    border-radius:8px;
}

.faq {
    padding: 20px;
}

/* Optional: Blaue Details für Listenelemente (Punkte) */
.benefits ul {
    list-style-type: none; /* Entfernt die Standardpunkte */
    padding: 0;
}

.benefits li {
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.benefits li::before {
    content: "•";
    color: #1e90ff; /* Blauer Punkt vor dem Text */
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); /* NEU: Playfair Display importiert */

/* Allgemeine Sektionen für blaue Trennung */
section {
    padding: 30px 20px;
    border-top: 1px solid #e0e0e0; /* Leichte Trennung */
}

body {
    font-family: 'Playfair Display', serif; /* GEÄNDERT: Elegante Schriftart */
    margin:0;
    padding:0;
    background:#fff;
    color:#111;
}

.hero {
    text-align:center;
    padding:20px;
    border-top: none; /* Entfernt die Trennlinie für die erste Sektion */
}

.hero-img {
    width:100%;
    max-width:500px;
    border-radius:12px;
}

.price {
    font-size:24px;
    margin:10px 0;
}

.cta {
    display:inline-block;
    padding:14px 24px;
    background:#1e90ff; /* GEÄNDERT: Blauer Button (Royal Blue) */
    color:#fff;
    border-radius:8px;
    text-decoration:none;
    transition: background-color 0.3s; /* Für einen kleinen Hover-Effekt */
}

.cta:hover {
    background: #007bff; /* Dunkleres Blau beim Hover */
}

h2 {
    margin-top:40px;
    text-align:center;
    color: #1e90ff; /* GEÄNDERT: Blaue Überschriften */
    margin-bottom: 20px;
}

.sizechart-img, .testimonial {
    width:90%;
    max-width:400px;
    display:block;
    margin:20px auto;
    border-radius:8px;
}

.faq {
    padding: 20px;
}

/* Optional: Blaue Details für Listenelemente (Punkte) */
.benefits ul {
    list-style-type: none; /* Entfernt die Standardpunkte */
    padding: 0;
}

.benefits li {
    padding-left: 1.5em;
    text-indent: -1.5em;
}

.benefits li::before {
    content: "•";
    color: #1e90ff; /* Blauer Punkt vor dem Text */
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
}

/* Wechselnder Hintergrund für mehr Tiefe */
.benefits, .faq {
    background-color: #f7f7f7; /* Sehr helles, kaum sichtbares Grau */
}

<footer class="footer">
  <p>
    <a href="impressum.html">Impressum</a> |
    <a href="agb.html">AGB</a> |
    <a href="widerruf.html">Widerrufsrecht</a> |
    <a href="datenschutz.html">Datenschutzerklärung</a>
  </p>
</footer>
</body>
</html>