/* ==========================================================
   Leadership Horizons™ – Website Petra Tramp
   Gemeinsames Design für alle Seiten
   ========================================================== */

/* ---------- Schrift (lokal eingebunden, DSGVO-konform) ---------- */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/open-sans-300.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/open-sans-regular.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/open-sans-500.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/open-sans-600.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/open-sans-700.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/open-sans-italic.woff2") format("woff2")}

/* ---------- Farben ---------- */
:root{
  --gelb:#ffd230;
  --grau:#575756;          /* Überschriften, dunkle Kontaktfläche */
  --text:#333333;
  --footer:#333333;
  --karte:#f6f5f3;         /* helle Karten */
  --sand:rgba(166,156,134,.1);
  --band:rgba(51,51,51,.66);
  --textbox:rgba(87,87,86,.5);
  --pfeil:rgba(131,132,131,.58);
  --breite:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:#fff;color:var(--text);font-family:"Open Sans",Arial,sans-serif;font-size:18px;font-weight:500;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{font-weight:300;color:var(--grau);margin:0 0 .3em;line-height:1.4}
strong,b{font-weight:700}
ul{margin:0 0 1em;padding-left:1.2em}

.container{width:80%;max-width:var(--breite);margin:0 auto}
.container.wide{max-width:1880px;width:94%}
.narrow{max-width:607px;margin-left:auto;margin-right:auto}
.center{text-align:center}
.section{padding:50px 0}
.section.pt0{padding-top:0}
.section.pb0{padding-bottom:0}
.sand{background:var(--sand)}
.space{height:40px}

/* ---------- Typografie-Bausteine ---------- */
.title{font-size:clamp(34px,4.7vw,60px);font-weight:300;text-transform:uppercase;text-align:center;line-height:1.4;padding-top:40px}
.subtitle{font-size:clamp(24px,3vw,38px);font-weight:300;text-align:center;line-height:1.5}
.lead{font-size:clamp(20px,1.9vw,24px);font-weight:600;color:var(--grau);text-align:center;line-height:1.5}
.claim{font-size:clamp(24px,2.7vw,35px);font-weight:500;color:var(--gelb);text-transform:uppercase;text-align:center;line-height:1.5}
.claim.dark{color:var(--grau)}
.lead.gelb{color:var(--gelb);font-size:clamp(26px,3vw,38px);font-weight:500}
.label{font-size:22px;font-weight:600;color:var(--grau);text-transform:uppercase;text-align:center;margin:0}
.small-note{font-size:18px;font-weight:600;margin-top:10px}
.text-block{max-width:60%;margin:0 auto;text-align:center}
.text-block.w61{max-width:61%}
.text-block.w65{max-width:65%}
.text-block.w68{max-width:68%}
.text-block.w73{max-width:73%}
.text-block + .claim{margin-top:60px}
.text-block ul.luftig li{padding-bottom:15px}
/* Aufzählungen: eigener schmaler Block, mittig, Text linksbündig (wie im Original) */
.text-block ul{text-align:left;display:block;width:fit-content;max-width:100%;margin:0 auto 1em;padding-left:1.2em}
.subtitle{margin-bottom:45px}
.subtitle + .lead{margin-top:-29px}
.subtitle + .cards{margin-top:0}
.subtitle + .steps{margin-top:0}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--gelb);color:var(--grau);font-size:17px;font-weight:400;text-transform:uppercase;text-decoration:none;padding:6px 14px 6px 36px;border-radius:3px;line-height:1.7;transition:padding .25s, background .25s;position:relative}
.btn::before{content:"";position:absolute;left:12px;top:50%;width:15px;height:15px;margin-top:-7.5px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%23575756' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/></svg>") no-repeat center/contain}
.btn:hover{background:#f5c400}
/* Button mit Rahmen und Pfeil (z. B. „Mehr über mich“) */
.btn.outline{background:transparent;color:var(--text);border:2px solid var(--grau);font-size:20px;padding:5px 14px 5px 42px}

.btn.outline::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%23333333' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/></svg>") no-repeat center/contain}
.btn.outline:hover{padding:5px 14px 5px 42px;background:rgba(255,255,255,.25)}
.btn-wrap{margin-top:25px}
.btn-wrap.center{text-align:center}

/* ---------- Kopfzeile & Menü ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;height:128px;display:flex;align-items:center;justify-content:space-between;padding:0 3%;transition:height .3s, background .3s}
.site-header .logo img{height:96px;width:auto;transition:height .3s}
.site-header.scrolled{height:80px;background:rgba(255,255,255,.92)}
.site-header.scrolled .logo img{height:60px}
.menu-toggle{background:none;border:0;cursor:pointer;padding:8px;width:48px;height:48px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.menu-toggle span{display:block;height:3px;width:30px;background:var(--gelb);border-radius:2px}

.menu-panel{position:fixed;top:0;right:0;height:100%;width:320px;max-width:85vw;background:var(--gelb);z-index:60;padding:90px 40px 40px;transform:translateX(100%);transition:transform .35s ease;overflow-y:auto}
.menu-open .menu-panel{transform:none}
.menu-close{position:absolute;top:24px;right:24px;background:none;border:0;color:#fff;font-size:40px;line-height:1;cursor:pointer}
.menu-panel ul{list-style:none;margin:0;padding:0}
.menu-panel li{margin:0 0 14px}
.menu-panel a{color:rgba(255,255,255,.95);text-decoration:none;font-size:17px;font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.menu-panel a:hover,.menu-panel a.aktiv{color:var(--grau)}
.menu-panel .sub{padding:8px 0 0 16px}
.menu-panel .sub a{font-size:17px}
.menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:55;opacity:0;pointer-events:none;transition:opacity .3s}
.menu-open .menu-backdrop{opacity:1;pointer-events:auto}

/* ---------- Titelbild (Hero) ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;text-align:center;background-size:cover;background-position:50% 100%;color:#fff;padding:140px 5% 120px}
.hero.bottom{background-position:50% 100%}
/* Startseite: Schriftzug über dem Horizont */
.hero,.hero.oben{padding-top:calc(150px + 12vh)}
.hero.tiefer{padding-top:calc(190px + 12vh)}
.hero.hoeher{padding-top:calc(99px + 12vh)}
.hero h1{color:#fff;font-size:clamp(40px,6.8vw,87px);font-weight:300;line-height:1.3;margin:0 0 10px;text-shadow:0 0 13.5px rgba(0,0,0,.4)}
.hero p{font-size:clamp(24px,3.9vw,50px);font-weight:400;line-height:1.2;margin:0;text-shadow:0 0 7.8px rgba(0,0,0,.4)}
.hero .hero-links{margin-top:67px;font-size:clamp(20px,2.5vw,32px);font-weight:600;text-transform:uppercase;line-height:1.7;text-shadow:0 0 9.6px rgba(0,0,0,.4)}
.hero .hero-links a{display:block;width:fit-content;margin:0 auto 19px;padding:10px 0;color:#fff;text-decoration:none}
.hero .hero-links a:hover{color:var(--gelb)}

/* weißer Bogen am unteren Rand */
.curve{position:relative}
.curve::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(60px,14vw,180px);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'><path fill='%23ffffff' d='M0 140h1280C573.08 140 0 0 0 0z'/></svg>") no-repeat;background-size:100% 100%;pointer-events:none}
.curve.to-sand::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'><path fill='%23f9f8f7' d='M0 140h1280C573.08 140 0 0 0 0z'/></svg>")}

/* weißer Bogen am oberen Rand */
.curve-top{position:relative;padding-top:clamp(70px,12vw,150px)!important}
.curve-top::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(50px,9vw,110px);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 140' preserveAspectRatio='none'><path fill='%23ffffff' d='M0 140h1280C573.08 140 0 0 0 0z'/></svg>") no-repeat;background-size:100% 100%;transform:rotate(180deg);pointer-events:none}

/* ---------- Graues Band mit großer Überschrift ---------- */
.band{background:var(--band);padding:40px 3%;text-align:center}
.band h2{color:#fff;font-size:clamp(34px,5.5vw,70px);font-weight:300;text-transform:uppercase;margin:0;line-height:1.4}

/* ---------- Bildfläche mit Textkasten ---------- */
/* --pt/--pb = Abstand über/unter dem Textkasten wie im Original (feste Pixel, auf kleinen Bildschirmen kleiner) */
.image-panel{--pt:300px;--pb:211px;position:relative;background-size:cover;background-position:50% 50%;padding:min(var(--pt),30vw) 0 max(min(var(--pb),20vw),70px)}
.image-panel .grid{display:grid;grid-template-columns:1fr 1fr;gap:5.5%}
.image-panel .box{grid-column:2;background:var(--textbox);color:#fff;font-size:clamp(19px,1.95vw,25px);line-height:1.5;padding:25px 25px 30px}
.image-panel .box.left{grid-column:1}
.image-panel .box-wrap{grid-column:2}
.image-panel .box-wrap .box{grid-column:auto}
.image-panel .box h3{color:var(--gelb);font-size:clamp(22px,2.3vw,29px);font-weight:500;text-transform:uppercase;line-height:1.5}
.image-panel .box ul{padding-left:1.2em}
.image-panel .box .btn-wrap{margin-top:10px}
/* --h = Höhe der reinen Bildfläche wie im Original */
.image-panel.plain{--h:900px;padding:0;height:min(var(--h),85vw)}

/* ---------- Gelbe Trennlinie ---------- */
.divider{width:20%;min-width:150px;height:0;border:0;border-top:2px solid var(--gelb);margin:60px auto}
.divider + .title{padding-top:0}

/* ---------- Zitat-Fläche mit Porträt (Startseite) ---------- */
.quote-hero{position:relative;background-size:cover;background-position:50% 0;padding:min(378px,30vw) 6% min(700px,45vw)}
.quote-hero .quote{max-width:1080px;margin:0 auto;font-size:clamp(20px,1.95vw,25px);font-weight:400;line-height:1.5;color:#444}
.quote-hero .quote em{font-size:16px;display:block;margin-top:6px}

/* ---------- Karten ---------- */
.cards{display:grid;gap:5.5%;margin-top:30px}
.cards.two{grid-template-columns:1fr 1fr;gap:3%}
.cards.three{grid-template-columns:repeat(3,1fr);gap:3%}
.card{background:var(--karte);border-radius:7px;padding:30px 25px 45px 30px}
.card.sand{background:var(--sand)}
.card h2{font-size:clamp(26px,2.7vw,35px);text-transform:uppercase;font-weight:300}
.card h3{font-size:23px;font-weight:600;text-transform:uppercase;line-height:1.6;margin-bottom:1.2em}
.card.centered{padding:30px 25px 30px 30px}
.card .btn-wrap{margin-top:auto;padding-top:20px}
.cards.three .card{display:flex;flex-direction:column}

/* ---------- Schritte mit Pfeilen ---------- */
.steps{width:40vw;min-width:min(506px,100%);margin:30px auto 0;background:var(--sand);border-radius:7px;padding:35px 20px;text-align:center}
.steps .step p{margin:0}
.steps .arrow{display:block;margin:20px auto;width:30px;height:44px;color:var(--pfeil)}
.steps .num{font-size:52px;font-weight:800;color:var(--gelb);line-height:1.2}
.steps h3{font-size:19px;font-weight:600;text-transform:uppercase;margin:0 0 4px}

/* ---------- 5 Dimensionen (Development Ansatz) ---------- */
.dims{text-align:center;margin-top:16px}
.dims .num{font-size:52px;font-weight:800;color:var(--gelb);line-height:37px;margin:0 0 16px}
.dims h3{font-size:19px;font-weight:600;text-transform:uppercase;line-height:39px;margin:0 0 16px}
.dims .t{margin:0 0 15px}
.dims .arrow{display:block;width:30px;height:44px;margin:0 auto 40px;color:var(--pfeil)}

/* ---------- Sonnenmodell über die ganze Breite ---------- */
.sonne{height:73.7vw;background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
.small-note{margin:0;line-height:29px}

/* ---------- Eckdaten (Aktuelles) ---------- */
.fakten{display:grid;grid-template-columns:repeat(4,1fr);gap:3%;margin-top:50px}
.fakten .card{padding:25px 25px 28px}
.fakten .fakt-label{font-size:15px;font-weight:600;color:var(--grau);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
@media (max-width:980px){.fakten{grid-template-columns:1fr 1fr;gap:20px}}
@media (max-width:600px){.fakten{grid-template-columns:1fr}}

/* ---------- Bildreihen (Galerie) ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);background:#333}
.gallery.three{grid-template-columns:repeat(3,1fr)}
.gallery img{width:100%;height:auto}

/* ---------- Bild-Blurbs (Development Ansatz) ---------- */
.blurbs{display:grid;grid-template-columns:repeat(3,1fr);gap:3%;margin-top:40px;font-size:16px}
.blurbs img{width:100%;border-radius:4px;margin-bottom:18px}
.blurbs h4{font-size:17px;font-weight:600;text-transform:uppercase;margin:0 0 6px}
.blurbs h4 a{text-decoration:none}
.blurbs h4 a:hover{color:#000}

/* ---------- Stimmen (Zitat-Slider) ---------- */
.testimonials{background:var(--sand);padding:40px 0}
.testimonials .slides{position:relative;max-width:748px;margin:0 auto;text-align:center;font-size:17px;font-weight:400}
.testimonials .quote-icon{width:101px;margin:0 auto 20px}
.testimonials .slide{display:none}
.testimonials .slide.aktiv{display:block;animation:fade .6s}
.testimonials .dots{display:flex;justify-content:center;gap:10px;margin-top:20px}
.testimonials .dots button{width:10px;height:10px;border-radius:50%;border:0;background:#c9c3b5;cursor:pointer;padding:0}
.testimonials .dots button.aktiv{background:var(--grau)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Kontakt-Fläche (unten auf jeder Seite) ---------- */
.contact-cta{background:var(--grau);padding:50px 0 0;color:#fff}
.contact-cta .grid{display:grid;grid-template-columns:3fr 2fr;gap:5.5%;align-items:stretch}
.contact-cta .text{padding:30px 0 70px;display:flex;flex-direction:column;align-items:flex-start}
.contact-cta .text .btn-wrap{margin-top:65px}
.contact-cta img{align-self:end}
.contact-cta h3{color:var(--gelb);font-size:clamp(28px,3vw,38px);font-weight:500}
.contact-cta .tagline{color:var(--gelb);font-size:clamp(22px,2.4vw,31px);line-height:1.6;margin-top:auto;padding-top:60px}
.contact-cta img{width:100%;max-width:359px}

/* ---------- Seiten-Text (Impressum, Datenschutz) ---------- */
.page-text{padding:170px 0 80px}
.page-text h1{font-size:clamp(34px,4.7vw,60px);text-transform:uppercase;margin-bottom:.6em}
.page-text h2{font-size:26px;font-weight:600;margin-top:1.4em}
.page-text p{margin-bottom:.8em}

/* ---------- Kontaktformular ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 2fr;gap:5.5%}
.form input[type=text],.form input[type=email],.form textarea{width:100%;font:inherit;font-size:16px;color:var(--text);background:#eee;border:0;border-radius:0;padding:16px;margin-bottom:14px}
.form textarea{min-height:200px;resize:vertical}
.form .check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;margin:6px 0 18px}
.form .check input{margin-top:4px}
.form .hp{position:absolute;left:-9999px}
.form .btn{border:0;cursor:pointer;font-family:inherit}
.form-msg{padding:16px 20px;border-radius:4px;margin-bottom:20px;display:none}
.form-msg.ok{display:block;background:#eef5e9}
.form-msg.fehler{display:block;background:#fbeaea}

/* ---------- Fußzeile ---------- */
.site-footer{background:var(--footer);color:#fff;font-size:17px;line-height:1.6}
.site-footer .top{display:grid;grid-template-columns:repeat(3,1fr);gap:5.5%;padding:60px 0 40px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--gelb)}
.site-footer .logo img{width:194px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul ul{padding-left:16px}
.site-footer .bottom{background:rgba(0,0,0,.32);padding:15px 0;font-size:14px}
.site-footer .bottom .container{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.social{display:flex;gap:18px}
.social a{display:inline-flex;width:22px;height:22px}
.social svg{width:100%;height:100%;fill:#fff}
.social a:hover svg{fill:var(--gelb)}

/* ---------- Tablet & Handy ---------- */
@media (max-width:980px){
  .cards.two,.cards.three,.blurbs,.contact-cta .grid,.contact-grid,.site-footer .top{grid-template-columns:1fr}
  .cards{gap:30px}
  .text-block,.text-block[class*=" w"]{max-width:100%}
  .text-block ul,.container.wide .text-block ul{width:auto}
  .blurbs{gap:40px}
  .image-panel .grid{grid-template-columns:1fr}
  .image-panel .box,.image-panel .box.left,.image-panel .box-wrap{grid-column:1}
.image-panel .box-wrap{grid-column:2}
.image-panel .box-wrap .box{grid-column:auto}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery.three{grid-template-columns:1fr}
  .contact-cta img{max-width:420px;margin:0 auto}
  .contact-cta .text{padding-bottom:0}
  .contact-cta .text .btn-wrap{margin-top:30px}
  .contact-cta .tagline{padding-top:30px}
  .site-header{height:96px}
  .site-header .logo img{height:64px}
  .quote-hero{background-position:30% 0}
}
/* eigene Titelbilder für Handys, wie im Original */
@media (max-width:767px){
  .hero.mobil-ueber-mich{background-image:url("../bilder/Ueber-uns-mobil-8b.jpg")!important;background-position:0 0}
  .hero.mobil-kontakt{background-image:url("../bilder/Kontakt-mobil-7.jpg")!important;background-position:0 0}
}
@media (max-width:600px){
  body{font-size:17px}
  .container{width:88%}
  .site-header{height:80px}
  .site-header .logo img{height:52px}
  .steps{padding:30px 16px}
}