@import url("reset.css");

/* ==========================================================================
   Inhalt
   1. Basis & Typografie
   2. Buttons
   3. Navigation (Desktop, Burger-Menü, Subnav)
   4. Gemeinsame Bausteine (Linien, Hero-Inhalt, Features, CTA, Kontakt)
   5. Startseite
   6. Leistungen, Sachverständigenleistungen, Gutachten
   7. Über mich
   8. Messtechnik & Methoden
   9. Fachwissen, Impressum & Popup
   10. FAQ
   11. Cookie-Hinweis & Karte
   12. Responsive (absteigend nach Breite)
   Farben: Gold #C9A33A · Gold dunkel #c89b3c · Gold hell #ddb15a · Hintergrund #050505
   ========================================================================== */


/* 1. Basis & Typografie
   ========================================================================== */
* { box-sizing: border-box;}
html { scroll-behavior: smooth;}
html,
body,
main { background: #050505 !important;}
body { color: #fff; font-family: Arial, Helvetica, sans-serif; line-height: normal;}
p { font-size: 18px; font-weight: 300; line-height: 21px; margin-bottom: 15px; font-family: "Arial", sans-serif; color: #fff;}
a { color: #C9A33A; text-decoration: none; cursor: pointer;}
h1 { font-size: 3.5rem; line-height: 60px; margin-bottom: 10px; font-family: "Minion Pro", serif;}
h1 span { color: #C9A33A; font-size: 1.5rem; display: block; margin-bottom: 40px;}
h2 { font-size: 35px; margin-bottom: 30px; font-family: "Minion Pro", serif; text-align: center;}
h3 { font-size: 25px; margin-bottom: 10px; font-family: "Minion Pro", serif; text-align: center;}
h4 { font-size: 20px;}
li { font-size: 18px; font-family: "Arial", serif; list-style: disc;}
strong { font-weight: 600;}
header { width: 100%; min-height: 10vh; position: relative; z-index: 1;}
#kontakt,
#id1,
#id2 { scroll-margin-top: 140px;}
#id1 { background: #050505; overflow: hidden; margin-top: -80px; position: relative; z-index: 2;}
#id1 p,
#id1 h2 { color: #fff; margin-bottom: 8px; text-align: left;}
#id1 .btn { display: block; width: fit-content; margin-top: 15px;}
.content { align-items: center; width: 100%; padding: 150px 5%; display: flex; justify-content: center;}
.col { width: 100%; display: flex; flex-direction: column; align-items: center;}


/* 2. Buttons
   ========================================================================== */
button,
.btn { background-color: #C9A33A; color: #100E0B; border: none; cursor: pointer; text-decoration: none; font-size: 20px; font-family: "Arial", sans-serif;}
button { padding: 15px 30px; border-radius: 40px; display: inline-block; transition: all 0.3s ease;}
.btn { padding: 5px 30px; border-radius: 18px; transition: 0.5s; display: block; width: fit-content; margin-top: 15px; text-align: center; position: relative;}
a.btn { padding: 15px 30px; border-radius: 40px; display: inline-block; transition: all 0.3s ease;}
.btn::after { content: "▼"; margin-left: 8px; font-size: 10px; vertical-align: middle; display: inline-block;}
button:hover,
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); background-color: #d4af37;}
.service-btn { cursor: pointer; margin: 30px;}
.card-btn,
.cta-gold { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #C9A33A; color: #111; text-decoration: none; padding: 14px 26px; font-weight: 600; border-radius: 6px; transition: .3s ease; border: 1px solid transparent;}
.card-btn:hover,
.cta-gold:hover { background: #ddb15a; transform: translateY(-2px);}


/* 3. Navigation
   ========================================================================== */
/* Desktop-Leiste */
nav { position: fixed; background: #100E0B; width: 100%; top: 0; text-align: right; padding: 22px 1.5% 22px 3%; z-index: 100; display: flex; justify-content: right; align-items: center; border-bottom: 1px solid #6C6B6B;}
nav > a { flex-shrink: 0; margin-right: auto;}
.logo { position: static; width: 60px; height: auto; margin-right: 20px; border-radius: 0;}
.logo:hover { transition: 0.5s; transform: scale(0.95);}
nav ul { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0;}
nav ul li { display: inline-block; text-align: left; text-transform: uppercase;}
nav ul li a { text-decoration: none; font-size: 15px; letter-spacing: .2px; white-space: nowrap; color: #fff; font-weight: 500; text-transform: none; transition: all 0.3s ease; position: relative;}
nav ul li a:focus,
nav ul li a:active { outline: none; border-bottom: none;}
nav ul li a:hover { color: #C9A33A;}
nav ul li a::after { content: ""; position: absolute; width: 0; height: 2px; background: #C9A33A; left: 0; bottom: -5px; transition: 0.4s;}
nav ul li a:hover::after { width: 100%;}

/* Aktive Seite (class="active" am Link der aktuellen Unterseite) */
nav ul li a.active { color: #C9A33A;}
nav ul li a.active::after { width: 100%;}

/* Telefon, Trennlinie, Kontakt-Button */
.nav-phone { margin-left: 4px;}
.nav-phone a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 2px solid #C9A33A; border-radius: 50%; background: transparent; transition: .3s ease;}
.nav-phone a:hover { background: #C9A33A;}
.nav-phone img { width: 17px; height: 17px; filter: brightness(0) saturate(100%) invert(72%) sepia(24%) saturate(847%) hue-rotate(359deg);}
.nav-phone a:hover img { filter: brightness(0);}
.nav-divider { width: 1px; height: 26px; background: #6C6B6B; margin: 0 -8px;}
.nav-contact a { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; font-size: 14px; white-space: nowrap; border: 2px solid #C9A33A; border-radius: 6px; color: #C9A33A; font-weight: 600; text-decoration: none; transition: .3s ease;}
.nav-contact a:hover { background: #C9A33A; color: #000;}

/* Burger-Menü (wird bis 1490px angezeigt, siehe Responsive) */
.navi { display: none;}
.burger-nav { position: fixed; right: 0; top: -6px; color: #fff; z-index: 9999; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 30px; cursor: pointer; transition: all .4s ease-in-out; background-color: #C9A33A; padding: 16px 21px 21px 19px;}
.burger-nav b { transition: all .4s ease-in-out; float: left; margin-left: 0; font-family: "Roboto"; font-style: normal;}
.burger-nav-anim { top: -5px; color: #fff;}
.burger-nav-anim b:first-of-type { -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.burger-nav-anim b:nth-of-type(2) { opacity: 0;}
.burger-nav-anim b:last-of-type { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -80%;}
.full-screen-nav { position: fixed; z-index: 9998; width: 100%; height: 100vh; background: #000; display: table; visibility: hidden; transition: all .4s ease-in-out; opacity: 0;}
.full-screen-nav.active { opacity: 1; visibility: visible;}
.full-screen-nav ul { text-align: center; display: table-cell; vertical-align: middle; width: 100%;}
.full-screen-nav ul li a { padding: 20px; display: block; font-size: 20px; color: #fff; transition: all .4s ease-in-out; text-decoration: none;}
.full-screen-nav ul li a.active { color: #C9A33A; font-weight: 600;}
.full-screen-nav .nav-phone,
.full-screen-nav .nav-contact { display: block; margin: 20px auto;}
.full-screen-nav .nav-phone a { margin: auto;}
.full-screen-nav .nav-contact a { width: 250px; margin: auto;}
.full-screen-nav .nav-divider { width: 100%; height: 1px; background: rgba(255, 255, 255, .15); margin: 15px 0;}
.fadeIn { opacity: 1 !important; visibility: visible !important;}
.fadeUp { opacity: 1 !important; margin-top: 0 !important;}

/* Impressum / Datenschutz unten links */
.subnav { position: fixed; bottom: 0; left: 0; z-index: 99; display: flex; justify-content: flex-start; align-items: stretch; background-color: #100E0B; border-radius: 0 10px 0 0;}
.subnav a { color: #fff; padding: 8px 15px; font-size: 13px; line-height: 23px;}
.subnav a:hover,
.subnav a.active { background-color: #C9A33A;}


/* 4. Gemeinsame Bausteine
   ========================================================================== */
/* Goldlinien */
.gold-line { width: 80px; height: 3px; background: #C9A33A; margin: 25px 0;}
.gold-line.small { width: 60px;}
.gold-divider { width: 100px; height: 2px; background: #C9A33A; margin-bottom: 35px;}

/* Unterzeilen über Überschriften */
.services-subtitle,
.page-subtitle { display: block; margin-top: 200px; margin-bottom: 20px; color: #C9A33A; font-family: "Minion Pro", serif; font-size: 1.5rem; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none;}

/* Inhalt in Header-Bildern */
.hero-content { position: relative; z-index: 2; max-width: 700px; margin-left: 8%; transform: translateY(0);}

/* Feature-Boxen mit Icon */
.feature-box { background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;}
.feature-box h2 { color: #fff; font-size: 30px; line-height: 1.2; margin: 0 0 8px; text-align: center; font-family: "Minion Pro", serif;}
.feature-box p { color: #d7d7d7; font-size: 15px; line-height: 1.5; margin: 0;}
.feature-box .info-icon { display: flex; justify-content: center; align-items: center; margin-bottom: 15px;}
.feature-box .info-icon img { width: 60px; height: auto;}
.feature-row { display: grid; grid-template-columns: repeat(2, 220px); justify-content: left; gap: 50px 80px; margin-top: 50px; margin-bottom: 70px;}
.feature-icon img { width: 38px; height: 38px; margin-bottom: 15px;}

/* Texte in Header-Bildern – steht bewusst nach den Feature-Boxen, damit es auch dort gilt */
.hero-content p { color: #fff; font-size: 18px; line-height: 1.8;}

.hero-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; padding: 70px 8%;}
.hero-features > div { display: flex; flex-direction: column; align-items: center; gap: 18px;}
.hero-features span { font-size: 20px; line-height: 1.5; color: #fff; text-align: center; font-family: "Minion Pro", serif;}
.icon-circle { width: 72px; height: 72px; border: 1px solid rgba(200, 155, 60, .4); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 30px;}
.icon-circle img,
.hero-features img { width: 48px; height: 48px;}

/* CTA-Leiste "Sie haben Fragen …" */
.methods-cta { width: 100vw; margin-left: calc(50% - 50vw); padding: 40px 8%; background: #090909; display: flex; justify-content: space-between; align-items: center;}
.methods-cta h2 { color: #fff; font-size: 30px; line-height: 1.3; text-align: left; margin-bottom: 10px; font-family: "Minion Pro", serif; font-weight: 400;}
.methods-cta p { color: #bdbdbd; margin: 0; line-height: 1.7; font-size: 18px;}
.cta-left { display: flex; align-items: center; gap: 25px;}
.cta-left .praxis-icon { flex-shrink: 0;}
.praxis-icon img { width: 55px;}
.cta-left .praxis-icon img { width: 60px;}
.cta-button { background: #c89b3c; color: #111; padding: 18px 40px; text-decoration: none; font-weight: 600; white-space: nowrap; border-radius: 4px; margin-left: auto; transition: .3s;}
.cta-button:hover { background: #ddb15a;}

/* Kontaktbereich */
.kontakt-section { background: #050505; padding: 120px 8%;}
.kontakt-wrapper { display: grid; grid-template-columns: 480px 1fr; gap: 70px; align-items: start;}
.kontakt-content h2 { color: #fff; font-size: 3rem; margin-bottom: 25px; text-align: left;}
.kontakt-intro { color: #d7d7d7; font-size: 18px; line-height: 1.8; margin-bottom: 50px;}
.kontakt-info { display: flex; flex-direction: column; gap: 35px;}
.kontakt-item { display: flex; gap: 20px;}
.kontakt-item h3 { color: #fff; font-size: 18px; font-family: "Minion Pro", serif; font-weight: 400; margin-bottom: 10px; text-align: left;}
.kontakt-item p,
.kontakt-item span,
.kontakt-item a { color: #d7d7d7; line-height: 1.7;}
.kontakt-box { backdrop-filter: blur(6px); margin-top: 60px; border: 1px solid rgba(201, 155, 60, .3); border-radius: 18px; padding: 40px; text-align: center; background: rgba(255, 255, 255, .02);}
.kontakt-box h3 { color: #fff; font-size: 2rem; line-height: 1.3; margin-bottom: 10px;}
.kontakt-box .gold-line { margin: 20px auto 30px auto;}
.kontakt-box p { color: #d7d7d7; line-height: 1.8; margin-bottom: 25px; text-align: center; font-size: 18px;}
.kontakt-box .btn { display: block; width: fit-content; margin: 0 auto;}
.kontakt-map { overflow: hidden; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .08); height: 1075px;}
.kontakt-map iframe {height: 1075px;}
.kontakt-features { margin-top: 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;}
.feature { display: flex; gap: 20px; align-items: flex-start;}
.feature img { width: 42px; margin-bottom: 5px;}
.feature h4 { color: #fff; margin-bottom: 8px; text-align: left;}
.feature p { text-align: left;}
.kontakt-features .feature p { color: #fff !important;}


/* 5. Startseite
   ========================================================================== */
.hero { position: relative; min-height: 100vh; background: url("../images/verstaendiger.jpg") center center / cover no-repeat; display: flex; align-items: center; padding: 180px 8% 150px;}
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .60); z-index: 1;}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(5, 5, 5, 0.311), rgba(5, 5, 5, 0), rgba(5, 5, 5, 0));}
.hero h1 { color: #fff; font-size: 3.5rem; line-height: 1.1; margin-bottom: 30px; text-shadow: 0 4px 18px rgba(0, 0, 0, .8);}
.startseite .hero-content { margin-top: 70px;}
.hero-line { width: 90px; height: 3px; background: #C9A33A; margin-bottom: 35px;}
.hero-point { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 25px;}
.hero-point img { width: 26px; margin-top: 4px;}
.hero-btn { display: inline-block; margin-top: 40px;}


/* 6. Leistungen, Sachverständigenleistungen, Gutachten
   ========================================================================== */
/* Header-Bilder */
.gutachten-header { min-height: 900px; display: flex; align-items: center; background: linear-gradient(90deg, rgba(0, 0, 0, 0.819) 0%, rgba(0, 0, 0, 0.54) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%), url("../images/gutachten.webp") center center / cover no-repeat;}
.sachverstaendigenleistungen-header { min-height: 900px; width: 100%; display: flex; align-items: center; background: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35)), url("../images/zertifikate-header.webp"); background-size: cover; background-position: center;}
.sachverstaendigenleistungen-header .hero-content { padding-top: 100px;}

/* Bereich & Raster */
.services-section { background: #050505; overflow: hidden; padding: 100px 8% 120px; text-align: center; display: flex; flex-direction: column; align-items: center;}
.services-section h2 { color: #fff; font-size: 3rem; margin-bottom: 30px; text-align: center;}
.services-intro { margin: 0 auto 70px; color: #d2d2d2; font-size: 18px; line-height: 1.8; max-width: 700px; text-shadow: 0 3px 15px rgba(0, 0, 0, .8);}
.services-content { padding-left: 60px; padding-right: 60px;}
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px; width: 100%; max-width: 1400px; margin: 0 auto;}
.services-toggle { grid-column: 1 / -1; text-align: center; margin: 25px 0;}
.extra-card { display: none;}

/* Leistungskarten */
.service-card { background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .08); text-align: left; transition: .3s; padding: 80px; border-radius: 10px;}
.service-card:hover { border-color: #C9A33A; transform: translateY(-4px);}
.service-card h2,
.service-card h3 { color: #fff; font-size: 2rem; line-height: 1.3; text-align: left;}
.service-card p { color: #fff;}
.service-top { display: flex; gap: 25px; margin-bottom: 30px; align-items: flex-start;}
.service-icon { width: 82px; height: 82px; border: 1px solid rgba(201, 163, 58, .3); border-radius: 50%; display: flex; flex-shrink: 0; align-items: center; justify-content: center;}
.service-icon img { width: 42px;}
.service-card-large { grid-column: 1 / -1; width: 100%;}
.service-card-large .service-top { display: flex; align-items: center; gap: 25px;}
.service-card-large .cta-gold { margin-left: auto; white-space: nowrap;}
.large-grid { display: grid; grid-column: 1 / -1; gap: 35px; margin-bottom: 35px;}

/* Listen mit Haken */
.service-card ul,
.service-details ul,
.card-content ul { list-style: none; padding-left: 0; margin-left: 0;}
.service-card ul { padding: 0; margin: 0;}
.service-card li,
.service-details li { position: relative; padding-left: 30px; color: #ddd; margin-bottom: 18px; line-height: 1.7; font-size: 18px; list-style: none;}
.service-card li { margin-bottom: 15px; color: #d0d0d0;}
.service-card li::before,
.service-details li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #C9A33A; font-weight: bold; font-size: 1.2rem;}

/* Aufklappbare Details */
.service-details { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;}
.service-details.active { max-height: 1000px; opacity: 1; margin-top: 30px;}
.details-content { display: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08);}
.details-content.active { display: block;}


/* 7. Über mich
   ========================================================================== */
.about-wrapper { width: 100%; max-width: 1400px; margin: auto; padding: 250px 5% 90px;}
.about-hero { display: grid; grid-template-columns: 1fr 520px; gap: 70px; align-items: center; margin-bottom: 45px;}
.about-small { color: #C9A33A; font-family: "Minion Pro", serif; font-size: 1.5rem; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; margin-bottom: 20px;}
.about-small p { color: #C9A33A !important; font-family: "Minion Pro", serif; font-size: 1.5rem; font-weight: 400; margin: 0; text-transform: none; letter-spacing: 0;}
.about-title { font-size: 3.5rem; line-height: 1; color: #fff; margin-bottom: 25px; font-family: "Minion Pro", serif; font-weight: 400;}
.about-subtitle { color: #e9e9e9; font-size: 25px; line-height: 1.45; margin-bottom: 35px; font-family: "Minion Pro", serif;}
.about-text { color: #cfcfcf; font-size: 18px; line-height: 1.9; max-width: 700px; margin-bottom: 35px;}
.signature-name { color: #C9A33A; font-family: 'Parisienne', cursive; font-weight: 400; font-size: 44px; margin-top: 40px; line-height: 1;}
.signature-role { color: #cfcfcf; font-size: 18px; margin-top: 20px;}
.about-image img { width: 100%; height: 560px; object-fit: cover; border-radius: 12px; display: block;}
.about-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; margin-bottom: 30px;}
.about-features .feature-box { border: 1px solid rgba(201, 163, 58, .18); background: #0a0a0a; padding: 38px 30px; border-radius: 10px; text-align: left;}
.about-features .feature-box h3 { color: #fff; font-size: 30px; line-height: 1.35; margin-bottom: 22px; text-align: center; font-family: "Minion Pro", serif; font-weight: 400;}
.about-features .feature-box p { color: #cfcfcf; line-height: 1.8; font-size: 16px; text-align: left;}
.about-info { border: 1px solid rgba(201, 163, 58, .15); border-radius: 12px; padding: 55px 45px; background: #090909;}
.info-row { display: flex; gap: 35px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .08);}
.info-row:last-child { border-bottom: none; margin-bottom: 0;}
.info-icon { min-width: 85px; height: 85px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.info-icon img { width: 40px;}
.info-content h3 { color: #fff; font-size: 30px; margin-bottom: 18px; text-align: left; font-family: "Minion Pro", serif; font-weight: 400;}
.info-content p { color: #d0d0d0; font-size: 18px; line-height: 1.9;}
.highlight-box { margin-top: 10px; border: 0.5px solid #C9A33A; border-radius: 10px; padding: 35px; display: flex; gap: 25px; align-items: center;}
.highlight-icon { min-width: auto; height: auto; border: none; border-radius: 0; display: flex; align-items: center; justify-content: center; color: #C9A33A; font-size: 32px;}
.highlight-icon img { width: 35px; height: 35px; display: block;}
.highlight-content h3 { color: #fff; font-size: 30px; margin-bottom: 10px; text-align: left; font-family: "Minion Pro", serif; font-weight: 400;}
.highlight-content p { color: #d0d0d0; font-size: 18px; line-height: 1.8;}


/* 8. Messtechnik & Methoden
   ========================================================================== */
.methods-hero { position: relative; display: block; min-height: 620px; padding-top: 100px; background: linear-gradient(to right, rgba(5, 5, 5, .95), rgba(5, 5, 5, .45), rgba(5, 5, 5, .15)), url("../images/messe-header.webp") center center / cover no-repeat;}
.hero-left { width: 50%; padding: 200px 8% 10px; display: flex; flex-direction: column; justify-content: center;}
.hero-left h1 { color: #fff; font-size: 3.5rem; line-height: 1.05; font-weight: 500; margin-bottom: 25px;}
.hero-left p { color: #d0d0d0; line-height: 1.8; font-size: 18px;}
.hero-right { display: none;}
.methods-overview { padding: 50px 8% 120px;}
.methods-overview .services-subtitle { text-align: center;}
.methods-overview h2 { text-align: center; color: white; font-size: 35px; margin-bottom: 60px;}
.methods-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.method-card { background: #0b0b0b; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; overflow: hidden; transition: .35s;}
.method-card:hover { transform: translateY(-8px); border-color: rgba(200, 155, 60, .3);}
.method-card img { width: 100%; height: 290px; object-fit: cover;}
.method-card h3 { color: #fff; font-size: 2rem; line-height: 1.0; margin-bottom: 18px;}
.method-card p { color: #bcbcbc; line-height: 1.2; margin-bottom: 25px;}
.method-card h3,
.method-card p,
.method-card .service-btn,
.method-card .service-details { padding-left: 30px; padding-right: 30px; box-sizing: border-box;}
.method-card ul { list-style: none; margin: 0; padding: 0 30px 25px;}
.method-card .service-details ul { padding-left: 0;}
.method-card li { position: relative; padding-left: 28px; margin-bottom: 12px; color: #d0d0d0; line-height: 1.6; list-style: none;}
.method-card li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #C9A33A; font-weight: bold;}
.number { width: 55px; height: 55px; border-radius: 50%; background: #050505; border: 2px solid #C9A33A; color: #C9A33A; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: -28px 0 20px 25px; position: relative;}
.praxis-box { margin-top: 50px; padding: 30px 35px; background: #0b0b0b; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; display: flex; align-items: flex-start; gap: 20px;}
.praxis-box h3 { color: white; margin-bottom: 10px; text-align: left;}
.praxis-box p { color: #bdbdbd; font-size: 18px; line-height: 1.5;}
.methods-gallery { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px;}
.methods-gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px;}


/* 9. Fachwissen, Impressum & Popup
   ========================================================================== */
#fachwissen-section { width: 100%; max-width: 1600px; margin: auto; padding: 40px;}
.fachwissen-hero { width: 100vw; margin-left: calc(50% - 50vw); position: relative; min-height: 800px; display: flex; align-items: center; padding: 100px; overflow: hidden; margin-bottom: 100px; background: linear-gradient(to right, rgba(0, 0, 0, 0.88) 20%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.25) 100%), url("../images/unterlagen.webp"); background-size: cover; background-position: center;}
.hero-text { flex: 1; margin-top: 0;}
.hero-text h1 { font-size: 3.5rem; line-height: 1.1; font-family: "Minion Pro", serif;}
.hero-text p { color: #c9c9c9; font-size: 18px; line-height: 1.8;}
.hero-image { flex: 1;}
.fachwissen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 80px;}
.fach-card { background: #0b0b0b; border: 1px solid #242424; border-radius: 20px; overflow: hidden; transition: .3s;}
.fach-card:hover { transform: translateY(-5px); border-color: #c89b3c;}
.fach-card img { width: 100%; height: 260px; object-fit: cover;}
.card-content { padding: 35px;}
.card-content ul li { list-style: none; margin-bottom: 18px; color: #d7d7d7; line-height: 1.6;}
.fach-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center;}
.fach-icons .icon-box p { color: #fff; margin-bottom: 140px;}
.icon-box { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 40px;}

/* "Mehr erfahren"-Buttons */
.fachwissen-buttons { margin-top: 24px;}
.fachwissen-more-btn { border: none; background: #c89b3c; color: #050505; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;}
.fachwissen-more-btn:hover { background: #c89b3c; transform: translateY(-1px);}

/* Popup */
.fachwissen-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.65); align-items: center; justify-content: center; padding: 20px;}
.fachwissen-modal.is-open { display: flex;}
.fachwissen-modal-content { position: relative; width: min(760px, 100%); max-height: 85vh; overflow-y: auto; background: #050505; padding: 40px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);}
.fachwissen-modal-close { position: absolute; top: 10px; right: 15px; border: none; background: transparent; font-size: 32px; cursor: pointer; color: #555;}
.fachwissen-modal-close:hover { color: #000;}
.fachwissen-modal-body { line-height: 1.7;}
.fachwissen-modal-body p { color: #fff !important;}


/* 10. FAQ
   ========================================================================== */
#faq { max-width: 1000px; margin: 0 auto; padding: 90px;}
#faq h1 { margin-bottom: 100px;}
#faq h2 { font-size: 26px; margin-top: 0;}
#faq > h2 + .gold-line { margin: 20px 0 50px;}
#faq h3 { color: #fff; font-size: 26px; margin: 60px 0 25px 0; font-family: "Minion Pro", serif; position: relative;}
#faq h3::after { content: ""; display: block; width: 70px; height: 3px; background: #c89b3c; margin: 20px auto 30px auto;}
#faq p { margin-bottom: 10px;}
#faq p:last-of-type { margin-bottom: 0;}
#faq p ~ h3 { margin-top: 30px;}
#faq ul { margin-left: 15px; list-style: disc;}

/* Akkordeon */
#faq .accordion { overflow: hidden; margin-bottom: 30px;}
.tab { background: #2f2f2f; border: 1px solid rgba(200, 155, 60, .18); border-radius: 18px; overflow: hidden; transition: .3s ease;}
.tab:hover { border-color: rgba(200, 155, 60, .45);}
#faq .tab { margin-bottom: 5px;}
.tab-label { font-size: 18px; font-weight: 600;}
#faq .tab > summary { display: flex; justify-content: space-between; align-items: center; background: #C9A33A; color: black; cursor: pointer; list-style: none; padding: 20px 30px; -webkit-tap-highlight-color: #fff0;}
#faq .tab > summary::-webkit-details-marker { display: none;}
.tab-label::after { font-size: 28px; color: #050505;}
#faq .tab > summary::after { content: "❯"; width: 1em; height: 1em; text-align: center; transform: rotate(90deg); transition: transform .2s ease;}
#faq .tab[open] > summary::after { transform: rotate(270deg);}
#faq .tab > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px;}
#faq .tab .tab-content { overflow: hidden; max-height: 0; transition: max-height .3s ease; background: #fff; color: inherit; padding: 20px 30px;}
#faq .tab[open] .tab-content { max-height: 100vh; background-color: #050505;}
.tab-content p,
.tab-content li { color: #d7d7d7; line-height: 1.8;}

/* Aufzählungszeichen der Häkchen-Listen ausblenden */
#faq .tab > summary::marker,
.service-details li::marker,
.service-card li::marker,
.method-card li::marker,
.card-content ul li::marker { content: "";}


/* 11. Cookie-Hinweis & Karte
   ========================================================================== */
#dsa-check-all.dsa-cookie-button,
.dsa-cookie-notice-form input[type="checkbox"]:checked + label::before,
.dsa-cookie-notice-form input[type="checkbox"]:disabled + label::before { background: #C9A33A !important; color: black;}
.dsa-cookie-notice-form input[type="checkbox"] + label::before { border: 2px solid black !important;}
#maps { width: 100% !important; height: 600px !important;}


/* 12. Responsive
   ========================================================================== */
/* Bis 1490px: Burger-Menü statt Desktop-Navigation */
@media screen and (max-width: 1490px) {
  nav { background: #050505;}
  nav ul { display: none;}
  .navi { display: block;}
  .burger-nav { display: block; position: fixed; top: 10px; right: 15px; z-index: 10001;}
  .full-screen-nav { display: table; position: fixed; inset: 0; z-index: 10000;}
}

@media screen and (max-width: 1100px) {
  .about-hero,
  .about-features { grid-template-columns: 1fr;}
}

@media (max-width: 992px) {
  .sachverstaendigenleistungen-header .hero-content { padding-top: 150px;}
}

@media (max-width: 900px) {
  /* Navigation */
  nav { top: 0; left: 0; height: 85px; background: rgba(5, 5, 5, .97); z-index: 9999; justify-content: space-between; padding: 0 25px;}
  .logo { position: absolute; max-height: 55px; width: auto;}

  /* Startseite & Kontakt */
  .hero { padding: 140px 25px 100px; min-height: auto;}
  .hero h1,
  .kontakt-content h2 { font-size: 3rem;}
  .hero-features,
  .kontakt-wrapper,
  .kontakt-features { grid-template-columns: 1fr;}
  .kontakt-map { height: 500px;}
  .kontakt-box h3 { font-size: 1.6rem;}
  .feature-row { grid-template-columns: repeat(2, 1fr); gap: 30px;}

  /* Leistungen */
  .services-section h2 { font-size: 2.8rem;}
  .services-grid,
  .large-grid { grid-template-columns: 1fr;}
  .service-card-large { grid-column: span 1;}
  .service-top { flex-direction: column; align-items: flex-start;}

  /* Fachwissen */
  .fachwissen-hero { flex-direction: column;}
  .fachwissen-grid { grid-template-columns: 1fr;}
}

@media screen and (max-width: 800px) {
  header { height: 770px;}
  .about-wrapper { padding: 120px 20px 60px;}
  .about-title { font-size: 50px;}
  .about-subtitle { font-size: 22px;}
  .info-row { flex-direction: column;}
  .highlight-box { flex-direction: column; align-items: flex-start;}
  .info-content h3,
  .highlight-content h3 { font-size: 32px;}
}

@media (max-width: 768px) {
  .sachverstaendigenleistungen-header .hero-content { padding-top: 120px;}
  .service-card-large .service-top { flex-wrap: wrap;}
  .service-card-large .cta-gold { margin-left: 0; width: 100%; text-align: center;}
  .service-btn { margin-left: 20px !important;}

  /* CTA-Leiste */
  .methods-cta { flex-direction: column !important; text-align: center !important; padding: 30px 20px !important;}
  .cta-left { flex-direction: column !important; text-align: center !important;}
  .cta-button { width: 100% !important; margin: 0 !important;}

  /* Messtechnik */
  .methods-hero { display: block !important; min-height: auto !important;}
  .hero-left { padding: 100px 25px 50px !important;}
  .hero-left h1 { font-size: 2.5rem !important; line-height: 1.1 !important;}
  .hero-features { flex-direction: column !important; gap: 20px !important;}
  .methods-overview { padding: 80px 20px !important;}
  .methods-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 25px !important;}
  .method-card img { height: 220px !important;}
  .method-card h3 { font-size: 1.6rem !important;}
  .method-card p { padding-left: 20px !important; padding-right: 20px !important;}
  .method-card ul { width: 100% !important; padding: 0 20px 20px !important;}
  .method-card li { max-width: 100% !important; font-size: 15px !important; line-height: 1.5 !important;}
  .praxis-box { flex-direction: column !important; padding: 25px 20px !important;}
  .methods-gallery { grid-template-columns: 1fr 1fr !important;}
  .methods-gallery img { height: 140px !important;}
}

@media screen and (max-width: 700px) {
  .content { display: block;}
}

@media screen and (max-width: 600px) {
  /* Schriftgrößen */
  body { font-size: 14px;}
  p { font-size: 15px !important; line-height: 1.5 !important;}
  h1 { font-size: 30px !important; line-height: 1.2 !important;}
  h2 { font-size: 25px !important; line-height: 1.3 !important;}
  h3 { font-size: 20px !important; line-height: 1.3 !important;}
  li,
  .service-card li,
  .service-details li { font-size: 15px !important; line-height: 1.5 !important;}

  /* Leistungen */
  #id2.services-section.leistungen-page { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-left: 15px !important; padding-right: 15px !important;}
  #id2.services-section.leistungen-page * { min-width: 0;}
  #id2 .service-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important;}

  /* Gutachten & Sachverständigenleistungen */
  .services-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-left: 15px !important; padding-right: 15px !important;}
  .services-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important;}
  .services-grid .service-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important;}
  .services-grid .service-card * { min-width: 0; max-width: 100%; overflow-wrap: break-word;}
  .services-grid .service-top { flex-wrap: wrap;}
  .services-grid .service-card img { max-width: 100%;}

  /* Popup */
  .fachwissen-modal-content { padding: 30px 22px;}
}

@media (max-width: 500px) {
  .feature-row { grid-template-columns: 1fr;}
}