<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&amp;family=Open+Sans:wght@400;600&amp;display=swap');

/* --- Variablen fÃ¼r Farben und Schriftarten (optional, aber gut fÃ¼r Konsistenz) --- */
:root {
    --primary-color: #0D47A1; /* Dunkelblau */
    --secondary-color: #1976D2; /* Helleres Blau */
    --accent-color: #ff8c00; /* Orange */
    --light-bg: #f8f9fa; /* Sehr helles Grau */
    --medium-bg: #e9ecef; /* Etwas dunkleres Grau */
    --text-dark: #212529; /* Fast Schwarz */
    --text-light: #6c757d; /* Grau */
    --white: #ffffff;
    --border-color: #dee2e6; /* Helles Grau fÃ¼r RÃ¤nder */

    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- Globale Stile &amp; Resets --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Aktiviert Smooth Scrolling global */
}

body {
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--white);
}

.container {
    width: 90%;
    max-width: 1140px; /* Etwas breiter fÃ¼r moderne Bildschirme */
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.8em;
}

h1 { font-size: 2.8em; line-height: 1.2; }
h2 { font-size: 2.2em; text-align: center; margin-bottom: 1.5em; padding-top: 1em;}
h3 { font-size: 1.6em; color: var(--secondary-color); }

p {
    margin-bottom: 1em;
    color: var(--text-light);
}
section p:last-of-type {
    margin-bottom: 0; /* Kein Abstand nach dem letzten Absatz in einer Sektion */
}

a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

ul, ol {
    margin-bottom: 1em;
    padding-left: 25px; /* Standard-Einzug fÃ¼r Listen */
}

li {
    margin-bottom: 0.5em;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Abschnitte &amp; HintergrÃ¼nde --- */
section {
    padding: 70px 0; /* Mehr vertikaler Abstand */
    overflow: hidden; /* Verhindert seitliches Scrollen bei Animationen/Schatten */
}

.alternate-bg {
    background-color: var(--light-bg);
}

/* --- Buttons --- */
.cta-button {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--white) !important; /* Wichtig wegen Link-Farben */
    padding: 12px 30px;
    font-family: var(--font-heading);
    font-size: 1.1em;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: 50px; /* Abgerundete Ecken */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.cta-button:hover {
    background-color: #e07b00; /* Dunkleres Orange */
    text-decoration: none; /* Kein Unterstrich beim Hover */
    transform: translateY(-3px); /* Leichter Hebe-Effekt */
    box-shadow: var(--shadow-md);
}

/* --- Header --- */
header {
    background-color: var(--white);
    color: var(--text-dark);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid var(--border-color);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Logo Stile (angepasst fÃ¼r Bild-Logo) --- */
header .logo a {
    /* Entferne die Text-Farbe und Text-Dekoration, da es jetzt ein Bild ist */
    color: initial; /* Setzt die Farbe auf den Standardwert zurÃ¼ck */
    text-decoration: none; /* Entfernt den Unterstrich beim Link-Hover */
    display: flex; /* Hilfreich, um das Bild mittig auszurichten, falls nÃ¶tig */
    align-items: center; /* Vertikal zentrieren im Link */
    height: 100%; /* Nimmt die HÃ¶he des Eltern-Containers (des Links) ein */
}

header .logo img {
    /* Maximale HÃ¶he, damit das Logo nicht zu groÃŸ wird */
    max-height: 50px; /* Passe diesen Wert an, je nachdem wie hoch dein Header sein soll */
    width: auto; /* Die Breite wird automatisch angepasst, um das SeitenverhÃ¤ltnis beizubehalten */
    display: block; /* Entfernt mÃ¶glichen zusÃ¤tzlichen Platz unter dem Bild */
}

/* Die alten Text-spezifischen Logo-Stile sind nicht mehr nÃ¶tig */
/*
header .logo {
    font-family: var(--font-heading);
    font-size: 1.8em;
    font-weight: 700;
    color: var(--primary-color);
}
*/


header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

header nav ul li {
    margin: 0 15px; /* GleichmÃ¤ÃŸiger Abstand */
}

header nav ul li a {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 1em;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease;
}
header nav ul li a::after { /* Unterstrich-Effekt beim Hover */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}
header nav ul li a:hover {
    color: var(--primary-color);
    text-decoration: none; /* Standard-Unterstrich entfernen */
}
header nav ul li a:hover::after {
    width: 100%;
}

.header-kontakt {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--secondary-color);
}

/* --- Nav Toggle Button (Hamburger) --- */
#nav-toggle {
    display: none; /* StandardmÃ¤ÃŸig auf groÃŸen Bildschirmen versteckt */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: 20px; /* Abstand zum Kontakt */
    position: relative; /* Wichtig fÃ¼r die Positionierung der Spans */
    z-index: 1001; /* Ãœber der Navigation, wenn sie ausgeklappt ist */
}

#nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--primary-color); /* Farbe der Linien */
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
}

#nav-toggle span:last-child {
    margin-bottom: 0;
}

/* --- Hero Section --- */
.hero {
    background: linear-gradient(to bottom, var(--white), var(--light-bg)); /* Sanfter Verlauf */
    text-align: center;
    padding: 80px 0;
}
.hero h1 {
    color: var(--primary-color);
}
.hero h2 {
    color: var(--secondary-color);
    font-size: 1.5em; /* Etwas kleiner als H1 */
    margin-bottom: 1.5em;
    font-weight: 400; /* Nicht so fett */
}
.hero p {
    font-size: 1.1em;
    color: var(--text-light);
    max-width: 700px; /* Text nicht zu breit laufen lassen */
    margin: 0 auto 1.5em auto;
}
.hero .cta-button {
    padding: 15px 40px; /* GrÃ¶ÃŸerer Button */
    font-size: 1.2em;
}

/* --- Problem Section --- */
#probleme h2 { margin-bottom: 1em; } /* Etwas weniger Abstand zum Grid */

.problem-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.problem-item {
    background-color: var(--white);
    padding: 25px;
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Abgerundete Ecken */
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.problem-item:hover {
    transform: translateY(-5px); /* Heben beim Hover */
    box-shadow: var(--shadow-md);
}

.problem-item img.icon {
    width: 45px;
    height: 45px;
    margin-right: 20px;
    flex-shrink: 0; /* Verhindert Schrumpfen des Icons */
    filter: grayscale(30%) opacity(80%); /* Icons etwas dezenter */
}
.problem-item p {
    margin-bottom: 0; /* Kein Abstand unter dem Text im Item */
    color: var(--text-dark); /* Dunklerer Text fÃ¼r bessere Lesbarkeit */
    font-weight: 600;
}

/* --- Leistungen Section --- */
#leistungen ul {
    list-style: none; /* Standard-Punkte entfernen */
    padding-left: 0;
    max-width: 800px; /* Liste nicht zu breit */
    margin: 0 auto 1em auto; /* Zentrieren und Abstand nach unten */
}
#leistungen li {
    position: relative;
    padding-left: 30px; /* Platz fÃ¼r Icon */
    margin-bottom: 15px; /* Mehr Abstand zwischen Punkten */
    font-size: 1.05em;
}
#leistungen li::before { /* Custom Checkmark */
    content: 'âœ”'; /* Oder \2714 */
    position: absolute;
    left: 0;
    top: 3px; /* Feinjustierung vertikal */
    color: var(--secondary-color);
    font-weight: bold;
    font-size: 1.2em;
}

/* Styling fÃ¼r die Bilder unter den Leistungen (nebeneinander) */
.leistungen-bilder {
    display: flex; /* Bilder in eine Reihe legen */
    gap: 20px; /* Abstand zwischen den Bildern */
    margin-top: 40px; /* Abstand zur Liste darÃ¼ber */
    justify-content: center; /* Bilder optional zentrieren */
    flex-wrap: wrap; /* Erlaube Umbruch auf kleinere Bildschirme */
}

.leistungen-bilder img {
    display: block; /* Entfernt mÃ¶glichen zusÃ¤tzlichen Platz unter inline Bildern */
    width: 100%; /* StandardmÃ¤ÃŸig 100% Breite im Flex-Kontext */
    max-width: 350px; /* Maximale Breite fÃ¼r jedes Bild auf groÃŸen Bildschirmen */
    height: auto; /* HÃ¶he passt sich proportional an die Breite an */
    object-fit: contain; /* Das gesamte Bild wird angezeigt */
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    flex: 1 1 250px; /* Flex-Basis von 250px, erlaubt Schrumpfen und Wachsen */
}


/* Anpassung fÃ¼r mobile GerÃ¤te (Bilder untereinander stapeln) */
@media (max-width: 768px) { /* Anpassung fÃ¼r Handys und kleine Tablets */
    .leistungen-bilder {
        flex-direction: column; /* Bilder untereinander stapeln */
        align-items: center; /* Zentrieren der gestapelten Bilder */
    }
    .leistungen-bilder img {
        width: 90%; /* Bilder nehmen fast volle Breite ein */
        max-width: none; /* Max-width auf Mobil ignorieren */
        height: auto; /* HÃ¶he auf Auto setzen, damit das Bild proportional bleibt */
        margin-bottom: 20px; /* Abstand unter den gestapelten Bildern */
    }
    .leistungen-bilder img:last-child {
        margin-bottom: 0; /* Kein Abstand nach dem letzten Bild */
    }
}


/* --- Ablauf Section --- */
.process-list {
    list-style: none;
    padding: 0;
    counter-reset: process-counter;
    max-width: 800px;
    margin: 40px auto 0 auto;
    position: relative;
}
/* Optional: Eine Linie links neben den Punkten */
.process-list::before {
    content: '';
    position: absolute;
    left: 18px; /* Zentriert auf den Kreis */
    top: 15px;
    bottom: 15px;
    width: 4px;
    background-color: var(--medium-bg);
    border-radius: 2px;
}

.process-list li {
    counter-increment: process-counter;
    margin-bottom: 30px;
    position: relative;
    padding-left: 60px; /* Mehr Platz fÃ¼r den Kreis */
    font-size: 1.1em;
}

.process-list li::before {
    content: counter(process-counter);
    position: absolute;
    left: 0;
    top: -2px; /* Vertikale Ausrichtung */
    background-color: var(--primary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-family: var(--font-heading);
    font-size: 1.2em;
    z-index: 1; /* Ãœber der optionalen Linie */
}
.process-list li strong {
    color: var(--text-dark);
    font-weight: 600;
}

/* --- Preise Section --- */
.price-box {
    border: 1px solid var(--border-color);
    padding: 30px; /* Mehr Innenabstand */
    max-width: 450px;
    margin: 30px auto;
    text-align: center;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}
.price-box:hover {
    transform: scale(1.03); /* Leichter Zoom-Effekt */
}
.price-box h3 {
    margin-bottom: 0.5em;
}
.price-box .price {
    font-size: 3.5em; /* GrÃ¶ÃŸerer Preis */
    font-weight: 700;
    color: var(--primary-color);
    margin: 15px 0;
}
.price-box p:not(.price) { /* Alle Paragraphen auÃŸer dem Preis */
    color: var(--text-light);
    font-size: 0.95em;
    margin-bottom: 1em;
}
.price-box ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
    display: inline-block;
}
.price-box li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
    color: var(--text-dark);
}
.price-box li::before { /* GrÃ¼ner Haken */
    content: 'âœ“';
    color: #28a745; /* GrÃ¼n */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}
.price-box .cta-button {
    margin-top: 20px;
}

/* --- Buchungssektion --- */
#buchen .container &gt; p { /* Der EinfÃ¼hrungstext */
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

#buchen .booking-widget,
#buchen .booking-form {
    margin: 40px auto; /* Mehr Abstand, zentriert */
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    max-width: 700px; /* Maximale Breite fÃ¼r Formulare/Widget */
    text-align: center; /* Zentriert den Google Button im booking-widget */
}

#buchen h3 {
    margin-top: 0;
    margin-bottom: 1.5em;
    color: var(--primary-color);
    text-align: left;
    border-bottom: 2px solid var(--accent-color); /* Linie unter der Ãœberschrift */
    padding-bottom: 0.5em;
    display: inline-block; /* Linie nur so breit wie der Text */
}


/* Formular Stile verbessern (Styling bleibt bestehen, auch wenn HTML auskommentiert ist) */
.booking-form label {
    display: block;
    margin: 15px 0 5px 0; /* Mehr Abstand Ã¼ber dem Label */
    font-weight: 600;
    color: var(--text-dark);
}
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form textarea {
    width: 100%; /* Volle Breite */
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1em;
    font-family: var(--font-body);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.booking-form input[type="text"]:focus,
.booking-form input[type="email"]:focus,
.booking-form input[type="tel"]:focus,
.booking-form textarea:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2); /* Fokus-Indikator */
    outline: none; /* Standard-Outline entfernen */
}
.booking-form textarea {
    min-height: 120px; /* MindesthÃ¶he fÃ¼r Textarea */
    resize: vertical; /* Nur vertikales VergrÃ¶ÃŸern erlauben */
}
.booking-form button {
    margin-top: 25px;
    width: 100%; /* Button Ã¼ber volle Breite */
    padding: 15px; /* GrÃ¶ÃŸerer Button */
    font-size: 1.2em;
}


/* Styling fÃ¼r den Google Calendar Button - VERGRÃ–SSERT und angepasst */
#buchen .booking-widget button {
    /* Overrides fÃ¼r das Aussehen, passend zum CTA-Button */
    display: block !important; /* Macht das Element zum Block-Element */
    margin: 30px auto !important; /* Zentriert den Block und gibt mehr Abstand oben/unten */

    background-color: var(--accent-color) !important; /* Farbe passend zum CTA */
    color: var(--white) !important; /* Textfarbe passend zum CTA */
    padding: 25px 60px !important; /* &lt;-- VERGRÃ–SSERTER ABSTAND (MACHT DEN BUTTON GRÃ–SSER) */
    font-family: var(--font-heading) !important; /* Schriftart passend zu Ãœberschriften/CTAs */
    font-size: 1.8em !important; /* &lt;-- VERGRÃ–SSERTE SCHRIFT (MACHT DEN BUTTON AUCH GRÃ–SSER) */
    font-weight: 600 !important; /* Schriftschnitt passend zum CTA */
    text-decoration: none !important; /* Kein Unterstrich */
    border: none !important;
    border-radius: 50px !important; /* Abgerundete Ecken passend zum CTA */
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease !important; /* Animationen passend zum CTA */
    box-shadow: var(--shadow-sm) !important; /* Schatten passend zum CTA */
}

/* Hover-Effekt fÃ¼r den Google Button */
#buchen .booking-widget button:hover {
    background-color: #e07b00 !important; /* Dunkleres Orange beim Hover */
    text-decoration: none !important;
    transform: translateY(-3px) !important; /* Leichter Hebe-Effekt */
    box-shadow: var(--shadow-md) !important; /* GrÃ¶ÃŸerer Schatten beim Hover */
}


/* --- Ãœber Uns --- */
#ueber-uns img { /* Beispiel fÃ¼r ein Profilbild */
    float: left; /* Bild links, Text rechts */
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 50%; /* Rundes Bild */
    width: 150px; /* Feste GrÃ¶ÃŸe */
    height: 150px;
    object-fit: cover; /* Bild zuschneiden, nicht verzerren */
    border: 3px solid var(--white);
    box-shadow: var(--shadow-sm);
}

/* Verbessertes Styling fÃ¼r Ãœberschrift in Ãœber Uns */
#ueber-uns h2 {
    text-align: left; /* Titel linksbÃ¼ndig wie bei Buchungsformular */
    border-bottom: 2px solid var(--accent-color); /* Linie unter der Ãœberschrift */
    padding-bottom: 0.5em;
    display: inline-block;
    margin-bottom: 1em; /* Abstand nach der Linie */
}

/* Verbessertes Styling fÃ¼r Text in Ãœber Uns */
#ueber-uns p {
    color: var(--text-dark); /* Dunkler fÃ¼r bessere Lesbarkeit */
    line-height: 1.8; /* Mehr Zeilenabstand */
    margin-bottom: 1.2em; /* Etwas mehr Abstand zwischen den AbsÃ¤tzen */
}
/* Stelle sicher, dass der letzte Absatz auch Abstand hat (kann bei float-Layouts nÃ¶tig sein) */
#ueber-uns p:last-of-type {
    margin-bottom: 1.2em;
}

#ueber-uns { /* Container fÃ¼r Clearfix */
    overflow: auto; /* Verhindert, dass der Hintergrund abschneidet und cleart floats */
}


/* --- Kontakt --- */
#kontakt p {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 0.5em; /* Abstand zwischen den Zeilen */
}
#kontakt p:last-child {
    margin-bottom: 0;
}

#kontakt p strong {
    color: var(--text-dark);
}

/* --- Footer --- */
footer {
    background-color: var(--text-dark);
    color: var(--medium-bg); /* Hellgrauer Text */
    text-align: center;
    padding: 30px 0;
    margin-top: 60px; /* Mehr Abstand nach oben */
    font-size: 0.95em;
}

/* Angepasste Regel fÃ¼r Zentrierung der Footer-AbsÃ¤tze */
footer p {
    margin-bottom: 0.5em;
    color: var(--medium-bg); /* Hellgrauer Text */
    text-align: center; /* Text innerhalb des Absatzes zentrieren */
    display: inline-block; /* LÃ¤sst den Absatz sich wie ein Inline-Block verhalten, damit er vom Eltern-Element zentriert wird */
    width: auto; /* Der Block nimmt nur die benÃ¶tigte Breite ein */
}

/* Behalte diese Regel bei, damit der letzte Absatz keinen unnÃ¶tigen Bodenabstand hat */
footer p:last-child {
    margin-bottom: 0;
}


footer a {
    color: var(--white); /* WeiÃŸe Links fÃ¼r besseren Kontrast */
    text-decoration: underline;
}
footer a:hover {
    color: var(--accent-color); /* Orange beim Hover */
}

/* Optional: Anpassung fÃ¼r sehr kleine Bildschirme, falls Inline-Block Probleme macht oder untereinander besser aussieht */
@media (max-width: 480px) {
    footer p {
        display: block; /* Auf sehr kleinen Bildschirmen wieder als Block */
        margin-left: auto;
        margin-right: auto;
        width: 100%; /* Volle Breite */
    }
    /* Optional: FÃ¼ge hier padding-bottom zu den p's hinzu, wenn sie untereinander stehen */
}


/* --- ResponsivitÃ¤t --- */
/* Anpassung fÃ¼r Tablets (769px bis 992px) */
@media (max-width: 992px) {
    h1 { font-size: 2.4em; }
    h2 { font-size: 2em; }
    .container { width: 95%; } /* Etwas mehr Platz auf Tablets */

    /* Anpassung Header fÃ¼r grÃ¶ÃŸere Tablets */
    header .container {
        flex-wrap: wrap; /* Erlaube Umbruch */
        justify-content: space-between; /* Verteile die Elemente */
    }
    header .logo { order: 1; margin-right: 20px;}
    header nav { order: 3; width: 100%; text-align: center; margin-top: 10px;}
    .header-kontakt { order: 2; margin-left: auto; } /* Kontakt rechts schieben */
}

/* Anpassung fÃ¼r mobile GerÃ¤te (bis 768px) */
@media (max-width: 768px) {
    h1 { font-size: 2em; }
    h2 { font-size: 1.8em; }
    section { padding: 50px 0; }

    header .container {
        flex-direction: row; /* Behalte die Zeilenrichtung fÃ¼r Logo, Toggle, Kontakt */
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    header .logo {
        order: 1;
        margin-right: 0;
    }

    header nav {
        width: 100%;
        order: 3;
        margin-top: 15px;
        text-align: center;
        /* Die folgenden Zeilen sind Alternativen, falls die display: none / display: flex Umschaltung im JS Probleme macht */
        /* transition: max-height 0.3s ease-in-out; */
        /* max-height: 0; */
        overflow: hidden;
    }

    header nav ul {
        flex-direction: column;
        align-items: center;
        /* WICHTIG: display: none wird vom JS auf display: flex geÃ¤ndert, wenn die Nav offen ist */
        display: none;
        width: 100%;
        padding: 20px 0;
        background-color: var(--white);
        border-top: 1px solid var(--border-color);
    }

    header nav ul li {
        margin: 10px 0;
    }

    #nav-toggle {
        display: block; /* Auf MobilgerÃ¤ten anzeigen */
        order: 2;
        margin-left: 20px;
    }

    .header-kontakt {
        order: 2; /* Positionierung des Kontakts auf Mobil */
        margin-top: 0;
        font-size: 1em;
        margin-left: auto;
        margin-right: 20px; /* Etwas Abstand zum Toggle */
    }

    /* Stile, wenn die mobile Navigation geÃ¶ffnet ist (gesteuert durch JS - Klasse .open) */
    header nav.open ul {
        display: flex; /* Navigation sichtbar machen durch JS-Toggle */
        flex-direction: column;
    }
    /* header nav.open {
        max-height: 500px; // Alternative Methode mit max-height transition
    } */

    /* Animation des Hamburger-Icons, wenn geÃ¶ffnet */
    header nav.open #nav-toggle span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    header nav.open #nav-toggle span:nth-child(2) {
        opacity: 0;
    }
    header nav.open #nav-toggle span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }


    .problem-list {
       grid-template-columns: 1fr; /* Auf Mobil nur eine Spalte */
       gap: 20px;
    }
    .process-list { padding-left: 10px; } /* Padding auf Mobil anpassen */
    .process-list li { padding-left: 50px; }
    .process-list li::before { left: 0; }
    .process-list::before { left: 18px; }


    #ueber-uns img {
        float: none; /* Float auf Mobil entfernen */
        display: block; /* Bild als Block anzeigen */
        margin: 0 auto 15px auto; /* Zentrieren */
        width: 120px; /* GrÃ¶ÃŸe anpassen */
        height: 120px;
    }

    .booking-form button {
        width: 100%; /* Button volle Breite auf Mobil */
    }

    /* Anpassung fÃ¼r den Google Calendar Button auf Mobil */
    #buchen .booking-widget button {
        padding: 15px 30px !important; /* Kleineres Padding auf Mobil */
        font-size: 1.2em !important; /* Kleinere Schrift auf Mobil */
    }
}</pre></body></html>