:root {
    --brand-orange: #FF5F1F;
    --text-color: #555;
    --text-color-dark: #333;
    --background-light: #fff;
    --max-width: 1280px;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}
*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--text-color);
    background-color: var(--background-light);
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.honeypot-field {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

/* --- Header & Navigation --- */
.main-header {
    background-color: var(--background-light);
    padding: 15px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar-brand .logo {
    height: 50px;
    width: auto;
    display: block;
}
.navbar-nav {
    display: flex;
    align-items: center;
    list-style: none;
    flex-grow: 1;
    justify-content: center;
    gap: 35px;
}
.nav-item {
    position: relative;
}
.nav-link {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 1em;
    padding: 10px 0;
    transition: color 0.3s ease;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: var(--brand-orange);
    transition: width 0.3s ease;
}
.nav-link:hover, .nav-link:focus, .nav-link.active {
    color: var(--brand-orange);
}
.nav-link:hover::after, .nav-link:focus::after, .nav-link.active::after {
    width: 100%;
}
.header-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* --- Buttons & General --- */
.btn {
    padding: 12px 25px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 500;
}
.btn-primary {
    background-color: var(--brand-orange);
    color: var(--background-light);
    border: 1px solid var(--brand-orange);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #e64a00;
    border-color: #e64a00;
}

/* --- Hero Section --- */
.hero-section {
    padding-top: 20px;
    padding-bottom: 80px;
}
.hero-section .container {
    position: relative;
}

.hero-video-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative; /* Wichtig für das Overlay */
    line-height: 0; /* Verhindert Leerraum unter dem Video */
}

.hero-video {
    width: 100%;
    height: auto;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%);
    z-index: 1;
}
.hero-content-box {
    /* Desktop: Absolute Positionierung für den Overlay-Effekt */
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    z-index: 2;
    
    margin: 0 auto; /* Zentriert die Box, falls sie schmaler ist */
    max-width: calc(100% - 80px);

    /* Styling der Box */
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 50px;
}
.hero-left {
    flex: 1 1 70%;
}
.hero-right {
    flex: 1 1 30%;
}
.hero-subtitle {
    display: inline-block;
    background-color: #FFF0E9;
    color: #FF5F1F;
    padding: 5px 12px;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
.hero-title {
    font-size: 2.9em;
    font-weight: 500;
    line-height: 1.25;
    margin: 0;
    color: #333;
}
.hero-text {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #555;
}


/* --- Services Section (Tabs) --- */
.services-section {
    background-color: #f8f9fa;
    padding: 80px 0;
}
.section-header {
    text-align: center;
    margin-bottom: 50px;
}
.section-subtitle {
    display: inline-block; 
    background-color: #FFF0E9; 
    color: #FF5F1F; 
    padding: 5px 12px;
    font-size: 0.9em; 
    font-weight: 700; 
    letter-spacing: 1px; 
    margin-bottom: 15px;
}
.section-title {
    font-size: 2.5em; 
    font-weight: 500; 
    color: #333;
}
.tabs-wrapper {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: stretch; /* WICHTIG: Zwingt beide Spalten auf die gleiche Höhe */
}
.tab-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.tab-button {
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 20px;
    border: 1px solid #e0e0e0; 
    background-color: #fff; 
    border-radius: 8px;
    font-size: 1em; 
    font-weight: 600; 
    text-align: left; 
    cursor: pointer;
    transition: all 0.3s ease; 
    color: #333;
}
.tab-button:hover {
    border-color: #FF5F1F; 
    color: #FF5F1F;
}
.tab-button.active {
    background-color: #FF5F1F; 
    color: #fff; 
    border-color: #FF5F1F;
}
.tab-icon {
    flex-shrink: 0; 
    width: 24px; 
    height: 24px; 
    fill: none; 
    stroke: currentColor;
    stroke-width: 2; 
    stroke-linecap: round; 
    stroke-linejoin: round;
}
.tab-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden;
    display: grid;
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: grid;
    grid-template-columns: 40% 60%;
    animation: fadeIn 0.5s;
    height: 100%; /* Stellt sicher, dass das Pane die volle Höhe des Containers einnimmt */
}
.tab-pane-image {
    padding: 20px;
    height: 100%;
}
.tab-pane-image img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    display: block; 
    border-radius: 8px;
}
.tab-pane-text {
    padding: 40px;
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}
.tab-pane-text h3 {
    font-size: 2em; 
    font-weight: 500; 
    margin-bottom: 20px; 
    color: #333;
}
.checklist {
    list-style: none; 
    padding: 0; 
    margin-top: 25px;
    display: flex; 
    flex-direction: column; 
    gap: 15px;
}
.checklist li {
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-weight: 500;
}
.check-icon {
    color: #FF5F1F; 
    flex-shrink: 0; 
    width: 20px; 
    height: 20px;
    stroke-width: 3;
    fill: none;
    stroke: currentColor; 
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Projekte Section --- */

.projects-section {
    padding: 80px 0;
}
.project-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    overflow: hidden; /* Stellt sicher, dass die Ecken des Bildes abgerundet sind */
    margin-top: 20px;
    max-width: 1000px;
    margin: 20px auto 0;
}

.project-card-image {
    width: 100%;
    display: block; /* Verhindert Leerraum unter dem Bild */
    border-radius: 12px 12px 0 0; /* Nur die oberen Ecken abrunden */
}

.project-card-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */
    gap: 40px;
    padding: 30px 40px;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.tag {
    background-color: #f1f1f1;
    color: #555;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
}

.tag.tag-primary {
    background-color: var(--brand-orange);
    color: #fff;
}

.project-title {
    font-size: 1.8em;
    font-weight: 500;
    color: var(--text-color-dark);
}

.project-card-right p {
    font-size: 1em;
    line-height: 1.6;
    color: var(--text-color);
}

/* --- Bento Grid Section --- */

.bento-grid {
    display: grid;
    /* Ändere das Grid auf drei Spalten */
    grid-template-columns: 1.5fr 1fr 1fr; /* Gibt der Textbox etwas mehr Platz */
    grid-template-rows: auto; /* Reihenhöhe automatisch anpassen */
    gap: 25px;
}

.bento-item {
    background-color: #fff;
    border-radius: 12px;
    padding: 40px;
    min-width: 0;
}

.bento-item-large {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.bento-item-image {
    padding: 0; /* Kein Padding für das Bild-Item */
    overflow: hidden;
}
.bento-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bento-item-accordion {
    padding: 0;
    background-color: transparent; /* Der Accordion-Container selbst ist unsichtbar */
}

.bento-subtitle {
    display: inline-block; 
    background-color: #FFF0E9; 
    color: var(--brand-orange);
    padding: 5px 12px; 
    font-size: 0.9em; 
    font-weight: 700; 
    margin-bottom: 15px;
}

.bento-title {
    font-size: 2.5em; 
    font-weight: 500; 
    color: var(--text-color-dark); 
    margin-bottom: 20px;
}

.bento-item-large p {
    line-height: 1.6;
}

.bento-item-large .btn {
    margin-top: 30px;
}

/* --- Accordion Styling --- */

.accordion-item {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: background-color 0.3s;
}

.accordion-item + .accordion-item {
    margin-top: 15px;
}

.accordion-item.active {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    background: none;
    border: none;
    font-size: 1.2em;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-color-dark);
    transition: color 0.3s;
}

.accordion-item.active .accordion-header {
    color: #fff;
}

.accordion-arrow {
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-arrow {
    transform: rotate(180deg);
}

.accordion-content {
    display: grid;
    /* Im geschlossenen Zustand hat die Zeile die Höhe 0 */
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out;
}

.accordion-content p {
    padding: 0 20px 20px 20px;
    line-height: 1.6;
    color: #555;
}

.accordion-item.active .accordion-content {
    /* Im offenen Zustand dehnt sich die Zeile auf die volle Höhe aus */
    grid-template-rows: 1fr;
}

.accordion-content-inner {
    /* Versteckt den Inhalt, solange die Animation läuft */
    overflow: hidden;
}

.accordion-content-inner p {
    padding: 0 20px 20px 20px;
    line-height: 1.6;
}

.accordion-item.active .accordion-content p {
    color: #fff;
}

.accordion-item.active .accordion-content-inner p {
    color: #fff;
}

/* --- Team Section --- */
.team-section {
    padding: 80px 0;
    background-color: var(--background-light);
}

.team-header {
    display: grid;
    grid-template-columns: 1fr 0.5fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.team-header-right p {
    font-size: 1em;
    line-height: 1.7;
    color: var(--text-color);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.team-member-card {
    text-align: center;
}

.team-member-photo {
    width: 100%;
    aspect-ratio: 3 / 4; /* Modernes CSS für Proportionen, passt sich der Breite an */
    background-color: #e9e9e9; /* Platzhalter-Farbe */
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden; /* Stellt sicher, dass das Bild die runden Ecken beibehält */
}

/* Stil für das Bild, sobald Sie es einfügen */
.team-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sorgt dafür, dass das Bild den Bereich ausfüllt, ohne sich zu verzerren */
}

.team-member-name {
    font-size: 1.25em;
    font-weight: 500;
    color: var(--text-color-dark);
    margin-bottom: 5px;
}

.team-member-role {
    font-size: 0.9em;
    color: var(--text-color);
}

/* --- Pricing Section (KOMPLETT ÜBERARBEITET) --- */
.pricing-section {
    padding: 80px 0;
    background-color: #f8f9fa; 
}

/* FIX 1 & 2: Zeilenabstand und Margin der Überschrift angepasst */
.pricing-section .section-title {
    line-height: 1.25; /* Reduziert den Zeilenabstand */
    margin-bottom: 25px; /* Vergrößert den Abstand zum Paragraphen */
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch; 
}

.pricing-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 35px;
    display: flex;
    flex-direction: column; 
    border: 1px solid #eee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* FIX 3: Stellt sicher, dass alle Karten die gleiche Höhe haben */
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.pricing-card-content {
    flex-grow: 1; 
}

.package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.package-name {
    font-size: 1.5em;
    font-weight: 500;
    color: var(--text-color-dark);
}

.popular-badge {
    background-color: #FFF0E9;
    color: var(--brand-orange);
    font-size: 0.75em;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--brand-orange);
}

.package-price {
    margin-block: 15px;
}

.price-amount {
    font-size: 3.5em;
    font-weight: 500;
    color: var(--text-color-dark);
}

.price-unit {
    font-size: 1em;
    color: var(--text-color);
    margin-left: 5px;
}

.price-unit sup {
    font-size: 0.8em;
    top: -0.3em;
}

.package-description {
    color: var(--text-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    font-weight: 500;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.feature-list li::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23333' stroke='%23333' stroke-width='2'/%3E%3Cpath d='M9 12l2 2 4-4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
}

.pricing-card .btn {
    margin-top: 30px;
}
/* FIX 5: Abstand zwischen Features und Button vergrößert */
.pricing-card .btn {
    margin-top: 30px;
}


/* --- Hervorgehobene Karte --- */
.pricing-card--highlighted {
    background-color: var(--brand-orange);
    color: #fff;
}
.pricing-card--highlighted:hover {
    transform: scale(1.05) translateY(-5px);
}

.pricing-card--highlighted .package-name,
.pricing-card--highlighted .price-amount,
.pricing-card--highlighted .price-unit,
.pricing-card--highlighted .package-description,
.pricing-card--highlighted .feature-list li {
    color: #fff;
}

.pricing-card--highlighted .package-description {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.pricing-card--highlighted .feature-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M9 12l2 2 4-4' fill='none' stroke='%23FF5F1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* --- Neue Button-Stile --- */
.btn-outline {
    background-color: transparent;
    border: 2px solid var(--brand-orange);
    color: var(--brand-orange);
    padding: 10px 25px;
}
.btn-outline:hover, .btn-outline:focus {
    background-color: var(--brand-orange);
    color: #fff;
}

.btn-light {
    background-color: #fff;
    border: 2px solid #fff;
    color: var(--brand-orange);
}
.btn-light:hover, .btn-light:focus {
    background-color: #f1f1f1;
    border-color: #f1f1f1;
}

/* --- Kontakt Section --- */
.contact-section {
    padding: 80px 0;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Gibt dem Formular etwas mehr Platz */
    gap: 60px;
    align-items: center;
}

.contact-form-container .section-title {
    line-height: 1.25;
}

.contact-form-container p {
    margin-top: 25px; /* NEU: Fügt Abstand nach oben hinzu */
    margin-bottom: 40px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    font-size: 0.9em;
    margin-bottom: 8px;
    color: var(--text-color-dark);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px rgba(255, 95, 31, 0.2);
}

textarea {
    resize: vertical;
}

/* Custom Select Dropdown */
.custom-select-wrapper {
    position: relative;
}

.custom-select-wrapper::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 12px;
    pointer-events: none; /* Klicks gehen durch das Icon durch */
    color: #888;
}

.form-group select {
    appearance: none; /* Standard-Pfeil des Browsers entfernen */
    -webkit-appearance: none;
    -moz-appearance: none;
}

.contact-form .btn {
    width: 100%;
    font-size: 1.1em;
    padding: 15px;
}

/* Map Container */
.contact-map-container {
    height: 100%;
    min-height: 500px;
    border-radius: 12px;
    overflow: hidden; /* Stellt sicher, dass der iFrame die abgerundeten Ecken hat */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- Footer --- */
.main-footer {
    background-color: #fff;
    padding: 60px 0 30px 0;
    margin-top: 40px; /* Abstand zur letzten Sektion */
}

.footer-logo {
    height: 100px;
}
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.footer-brand .logo {
    height: 50px; /* Gleiche Höhe wie im Header */
}

.footer-nav ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--brand-orange);
}

.footer-divider {
    border: none;
    height: 1px;
    background-color: #e5e5e5;
    margin: 0 0 30px 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    color: #777;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-legal a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--brand-orange);
}

/* Trennlinie zwischen den Legal-Links */
.footer-legal a:first-child::after {
    content: '|';
    margin-left: 15px;
    color: #ccc;
}

.footer-copyright p {
    margin: 0;
}

/* --- Sticky Telefonbutton --- */
.sticky-phone-button {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1001;
    padding: 18px;

    /* NEU: Startwert für den Abstand */
    gap: 0; 

    align-items: center;
    background-color: var(--brand-orange);
    color: white;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);

    /* NEU: 'gap' zur Animation hinzugefügt */
    transition: border-radius 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), gap 0.3s ease-out;

    text-decoration: none;
}

.phone-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
}



.phone-text {
    font-weight: 600;
    font-size: 1em;

    /* KORREKTUR: Die Animation wird jetzt hierüber gesteuert */
    max-width: 0;
    opacity: 0;
    margin-left: 0px;
    white-space: nowrap;
    transition: max-width 0.5s ease-in-out, opacity 0.3s ease-in-out, margin-left 0.5s ease-in-out;
}

/* Zustand, wenn der Button erweitert ist */
.sticky-phone-button.expanded {
    border-radius: 50px;
    gap: 10px; /* Ändert nur den Radius zur Pille */
}

.sticky-phone-button.expanded .phone-text {
    max-width: 150px; /* Gibt dem Text Platz */
    opacity: 1;
}

/* --- Styling für Rechtstexte (Impressum, Datenschutz) --- */
.legal-content {
    padding-top: 60px;
    padding-bottom: 60px;
    max-width: 800px; /* Begrenzt die Breite für bessere Lesbarkeit */
}

.legal-content h1 {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: var(--text-color-dark);
    font-weight: 500;
}

.legal-content h2 {
    font-size: 1.8em;
    margin-top: 50px;
    margin-bottom: 20px;
    color: var(--text-color-dark);
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-weight: 500;
}

.legal-content h3 {
    font-size: 1.2em;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 10px;
    color: var(--text-color-dark);
}

.legal-content p, 
.legal-content li {
    line-height: 1.7;
    margin-bottom: 15px;
}

.legal-content a {
    color: var(--brand-orange);
    text-decoration: underline;
}

.legal-content a:hover {
    text-decoration: none;
}

.legal-content ul {
    list-style-position: inside;
    padding-left: 10px;
}

/* Breakpoint 1: Tablet Landscape (1100px) - NUR die Navigation wird mobil */
@media (max-width: 1100px) {
    /* --- RESPONSIVE DESIGN --- */
    .navbar-toggler {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1001;
    }
    .toggler-icon {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text-color-dark);
        margin: 4px 0;
        transition: all 0.3s ease;
    }
    .navbar-nav, .header-cta {
        display: none;
    }
    .navbar-toggler {
        display: block;
    }
    .main-header .navbar-nav.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--background-light);
        padding: 10px 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    .main-header .navbar-nav.active .nav-item {
        margin: 10px 0;
        text-align: center;
    }

    .sticky-phone-button {
        display: flex;
    }
}

/* Breakpoint 2: Tablet Portrait (992px) - Hero-Box und Video werden mobil */
@media (max-width: 992px) {
    
    .hero-content-box {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        margin: 20px;
        padding: 25px;
        gap: 25px;
    }
    .hero-title {
        font-size: 2.2em;
    }

    .tabs-wrapper {
        /* Stellt sicher, dass Buttons und Inhalt untereinander liegen */
        grid-template-columns: 1fr;
    }
    
    .tab-buttons {
        /* Buttons nebeneinander anordnen */
        flex-direction: column; 
        
        /* BEHEBT DEN OVERFLOW: Fügt horizontales Scrollen hinzu, falls nötig */
        overflow-x: auto;
        
        /* Verhindert, dass die Scrollbar direkt am Rand klebt */
        padding-bottom: 15px; 
    
        /* Versteckt die Scrollbar optisch auf den meisten Systemen */
        scrollbar-width: none; /* Firefox */
    }
    .tab-buttons::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    .tab-button {
        /* Verhindert, dass der Text im Button umbricht */
        white-space: nowrap; 
    }
    
    .tab-pane.active {
        /* BEHEBT DAS BILD-PROBLEM: Ändert das Layout auf eine Spalte */
        grid-template-columns: 1fr; 
    }

    .tab-pane-image img {
        max-width: 500px;
    }

    .tab-pane-image {
        align-self: center;
    }

    .section-title {
        font-size: 2.2em;
    }

    .bento-grid {
        /* Ändert das Layout auf 2 Spalten für Bild/Accordion */
        grid-template-columns: 1fr 1fr;
        /* Definiert die neuen Layout-Bereiche */
        grid-template-areas:
            "header header"
            "image accordion";
    }

    .bento-item-large {
        grid-area: header; /* Weist die Textbox dem oberen Bereich zu */
        align-items: center; /* Zentriert den Subtitle und andere Inhalte */
        text-align: center;
    }

    .bento-item-image {
        grid-area: image; /* Weist das Bild dem linken unteren Bereich zu */
    }

    .bento-item-accordion {
        grid-area: accordion; /* Weist das Accordion dem rechten unteren Bereich zu */
    }

    .bento-item-large .btn {
        align-self: center;
    }

    .team-header {
        grid-template-columns: 1fr; /* Header-Spalten untereinander anordnen */
        text-align: center;
        gap: 20px;
    }

    .team-grid {
        /* NEU: Auf Tablets in ein zweispaltiges Layout wechseln */
        grid-template-columns: repeat(2, 1fr);
        gap: 40px; /* Etwas mehr Abstand bei 2 Spalten */
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .pricing-card {
        max-width: 450px;
        margin: 0 auto;
        width: 100%; /* <-- DIESE ZEILE HINZUFÜGEN */
    }
    .pricing-card--highlighted {
        transform: scale(1); /* Auf Tablets den Skalierungs-Effekt zurücksetzen */
    }
    .pricing-card--highlighted:hover {
        transform: translateY(-5px);
    }

    .pricing-section{
        padding: 40px 0;
    }

    .contact-wrapper {
        grid-template-columns: 1fr; /* Layout auf eine Spalte ändern */
    }
}



/* Breakpoint 3: Phone (768px) */
@media (max-width: 768px) {
    .hero-section .container {
        position: static; /* Setzt die Positionierung für Mobil zurück */
    }
    
    .hero-video-wrapper {
        margin-bottom: 20px; /* Abstand zwischen Video und Box */
    }

    .hero-content-box {
        position: static; /* Box ist jetzt im normalen Layout-Fluss */
        width: 100%;
        max-width: 100%;
        margin: 0; /* Kein spezieller Margin mehr nötig */
        bottom: auto; left: auto; right: auto; /* Absolute Werte zurücksetzen */
        
        /* Layout innerhalb der Box für Mobilgeräte */
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 25px;
    }

    .hero-title {
        font-size: 1.8em;
    }

    .section-title {
        font-size: 1.5em;
    }

    .hero-section {
        padding-bottom: 40px;
    }
    
    .services-section {
        /* Reduziert den Abstand der Sektion oben und unten */
        padding: 40px 0;
    }
    
    .tabs-wrapper {
        /* Reduziert den Abstand zwischen Button-Leiste und Inhalts-Box */
        gap: 0px;
    }

    .tab-pane.active {
        /* Reduziert den Abstand zwischen Bild und Text */
        gap: 0px; 
    }
    
    .tab-pane-text {
        /* NEU: Weist dem Text die erste Position zu */
        order: 1; 
    }

    .tab-pane-image {
        /* NEU: Weist dem Bild die zweite Position zu */
        order: 2; 
        padding: 0 20px 20px 20px; /* Passt den Puffer für die untere Position an */
    }

    .project-card-content {
        grid-template-columns: 1fr; /* Layout auf eine Spalte ändern */
        gap: 25px;
        padding: 25px;
    }

    .project-title {
        font-size: 1.5em;
    }

    .projects-section {
        padding: 40px 0; /* Reduziert den Abstand der Sektion oben und unten */
    }

    .bento-grid {
        /* Ändert das Layout auf eine einzige Spalte */
        grid-template-columns: 1fr;
        grid-template-areas: none; /* Setzt die Bereichs-Namen zurück */
        gap: 25px;
    }

    /* Setzt die Zuweisungen zurück, damit "order" funktioniert */
    .bento-item-large,
    .bento-item-image,
    .bento-item-accordion {
        grid-area: auto;
    }

    /* Reihenfolge umkehren und Bild verkleinern */
    .bento-item-large { order: 1; }
    .bento-item-accordion { order: 2; } /* Accordion kommt an zweiter Stelle */
    .bento-item-image { 
        order: 3; /* Bild kommt an dritter Stelle */
        max-width: 400px; /* Verkleinert die maximale Breite des Bild-Containers */
        margin: 0 auto; /* Zentriert den kleineren Bild-Container */
    }

    .bento-title {
        font-size: 1.5em;
    }

    .hero-subtitle {
        font-size: 0.8em;
    }

    .team-section {
        padding: 40px 0;
    }

    .team-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        
        /* NEU: Weist das Grid an, alle Items horizontal zu zentrieren. */
        justify-items: center; 
    }
    
    .team-member-card {
        /* Die Breite wird durch max-width und width: 100% kontrolliert. */
        max-width: 400px;
        width: 100%; /* Stellt sicher, dass die Karte auf kleineren Schirmen schrumpft */
        
        /* Der problematische margin wird entfernt. */
        /* margin-inline: auto; */
    }

    .team-header {
        margin-bottom: 40px; /* Reduziert den Abstand unter dem Header */
    }

    .contact-wrapper {
        grid-template-columns: 1fr; /* Layout auf eine Spalte ändern */
    }

    .contact-section {
        padding: 40px 0; /* Reduziert den Abstand der Sektion oben und unten */
    }

}

/* --- Responsive Anpassungen für den Footer --- */
@media (max-width: 820px) {
    .footer-top {
        flex-direction: column;
        gap: 40px;
    }

    .footer-bottom {
        flex-direction: column-reverse; /* Copyright kommt nach oben */
        gap: 20px;
    }

    .footer-nav ul {
        flex-wrap: wrap; /* Erlaubt den Umbruch */
        justify-content: center; /* Zentriert die Links */
    }
}

@media (max-width: 480px) {
    .footer-nav ul {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}