/* Markus Weigl — markusweigl.at Gemeinsames Layout aller Seiten. Stand: 2026-05-28 (live-fertig: Self-Host-Fonts vorbereitet, A11y, prefers-reduced-motion) --------------------------------------------------------------------------- SCHRIFTARTEN Default-Pfad: Bunny Fonts (EU, DSGVO-konform, kein Tracking, keine Cookies). Sie werden im jeder Seite via fonts.bunny.net geladen. Wenn Du auf vollständig lokal hosten umstellen möchtest, lege die WOFF2- Dateien (Beschaffung siehe README) in /assets/fonts/ und entferne den -Tag in den HTML-Seiten; danach greifen die @font-face-Regeln unten. --------------------------------------------------------------------------- */ /* Lokale Fonts (aktiviert sich automatisch, sobald die WOFF2-Dateien vorhanden sind) */ @font-face{font-family:'Cormorant Garamond';src:local('Cormorant Garamond Regular'),url('../fonts/cormorant-garamond-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Cormorant Garamond';src:local('Cormorant Garamond Italic'),url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Cormorant Garamond';src:local('Cormorant Garamond Medium'),url('../fonts/cormorant-garamond-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Cormorant Garamond';src:local('Cormorant Garamond SemiBold'),url('../fonts/cormorant-garamond-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Mulish';src:local('Mulish Light'),url('../fonts/mulish-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Mulish';src:local('Mulish Regular'),url('../fonts/mulish-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Mulish';src:local('Mulish Medium'),url('../fonts/mulish-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Mulish';src:local('Mulish SemiBold'),url('../fonts/mulish-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} :root{ --pergament:#F5F1E5; --pergament-tief:#ECE6D4; --gruen:#3C4A2C; --gruen-med:#6A7A4F; --salbei:#AEB793; --gold:#B0862C; --ocker:#9C5A22; --braun:#5E4A33; --text:#2E2A21; --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);background:var(--pergament);color:var(--text);font-weight:400;line-height:1.78;font-size:17px;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.18;color:var(--gruen)} h1{font-size:3.4rem;font-weight:600;letter-spacing:.01em} a{color:inherit} img{max-width:100%;height:auto} /* Sichtbarer Fokus für Tastatur-Navigation */ :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px} /* Skip-Link für Screenreader / Tastatur */ .skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;background:var(--gruen);color:#F5F1E5;padding:10px 18px;z-index:200;border-radius:2px;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Navigation */ header{position:sticky;top:0;z-index:50;background:rgba(245,241,229,0.94);backdrop-filter:blur(6px);border-bottom:1px solid rgba(174,183,147,0.45)} .nav-inner{max-width:1120px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;min-height:78px} .brand{cursor:pointer;line-height:1.1;text-decoration:none;color:inherit} .brand .name img{height:34px;width:auto;display:block} .brand .role{font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ocker);font-weight:600;margin-top:3px} nav{display:flex;gap:26px;flex-wrap:wrap;align-items:center} nav a{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--braun);text-decoration:none;padding-bottom:4px;border-bottom:1.5px solid transparent;transition:.25s} nav a:hover{color:var(--gruen)} nav a.active{color:var(--gruen);border-bottom-color:var(--gold)} .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px} .menu-toggle span{display:block;width:24px;height:2px;background:var(--gruen);margin:5px 0;transition:.3s} /* Layout */ .wrap{max-width:1120px;margin:0 auto;padding:0 32px} .narrow{max-width:760px;margin:0 auto;padding:0 32px} /* Hero - dunkle Foto-Header */ .hero{position:relative;overflow:hidden;padding:96px 0 84px;text-align:center;background-color:var(--gruen);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;color:#F2EDDB} .hero h1,.hero h2,.hero h3{color:#F5F1E5} .hero .kicker{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:#E6BC7A;font-weight:600;margin-bottom:22px;text-shadow:0 1px 8px rgba(0,0,0,.35)} .hero .lead-line,.hero p.sub,.hero p{color:#EFE5C8} .hero h1{font-size:4.4rem;font-weight:600;letter-spacing:.01em;margin-bottom:6px;text-shadow:0 2px 16px rgba(0,0,0,.45)} .hero .lead-line{font-family:var(--serif);font-style:italic;font-size:1.7rem;font-weight:400;margin-top:14px} .hero h2,.hero .h2{font-size:3.1rem;font-weight:500;max-width:780px;margin:0 auto;text-shadow:0 2px 16px rgba(0,0,0,.45);color:#F5F1E5;font-family:var(--serif);line-height:1.18} .hero p.sub{font-family:var(--serif);font-style:italic;font-size:1.45rem;margin-top:16px} .hero .signature-name{margin:4px auto 2px;line-height:1} .hero .signature-name img{display:block;margin:0 auto;width:min(480px,82%);height:auto} .hero-offer{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#E6BC7A;font-weight:600;margin-top:20px;text-shadow:0 1px 8px rgba(0,0,0,.35)} .star{display:inline-block;margin:6px 0 0} /* Hero-Hintergrundbilder pro Seite */ .hero-start{background-image:linear-gradient(180deg, rgba(28,34,18,0.48), rgba(28,34,18,0.22) 45%, rgba(28,34,18,0.40)), url('../img/hero-start.jpg'); background-position:50% 88%; padding:120px 0 104px} .hero-person{background-image:linear-gradient(180deg, rgba(28,34,18,0.55), rgba(28,34,18,0.36) 50%, rgba(28,34,18,0.72)), url('../img/hero-person.jpg')} .hero-haltung{background-image:linear-gradient(180deg, rgba(28,34,18,0.55), rgba(28,34,18,0.36) 50%, rgba(28,34,18,0.72)), url('../img/hero-haltung.jpg')} .hero-retreat{background-image:linear-gradient(180deg, rgba(28,34,18,0.55), rgba(28,34,18,0.36) 50%, rgba(28,34,18,0.72)), url('../img/hero-retreat.jpg')} .hero-begleitung{background-image:linear-gradient(180deg, rgba(28,34,18,0.55), rgba(28,34,18,0.36) 50%, rgba(28,34,18,0.72)), url('../img/hero-begleitung.jpg')} .hero-fuehrung{background-image:linear-gradient(180deg, rgba(28,34,18,0.55), rgba(28,34,18,0.36) 50%, rgba(28,34,18,0.72)), url('../img/hero-fuehrung.jpg')} .hero-schulung{background-image:linear-gradient(180deg, rgba(28,34,18,0.55), rgba(28,34,18,0.36) 50%, rgba(28,34,18,0.72)), url('../img/hero-schulung.jpg')} .hero-worte{background-image:linear-gradient(180deg, rgba(28,34,18,0.55), rgba(28,34,18,0.36) 50%, rgba(28,34,18,0.72)), url('../img/hero-worte.jpg')} .hero-kontakt{background-image:linear-gradient(180deg, rgba(28,34,18,0.55), rgba(28,34,18,0.36) 50%, rgba(28,34,18,0.72)), url('../img/hero-kontakt.jpg')} /* Inhalte */ section.block{padding:64px 0} section.block.tight{padding:44px 0} .eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px} h2.section-title{font-size:2.5rem;margin-bottom:8px} h3.sub-title{font-size:1.7rem;color:var(--ocker);margin:34px 0 10px} p{margin-bottom:18px} .lead-para{font-family:var(--serif);font-size:1.5rem;font-style:italic;color:var(--braun);line-height:1.5;margin-bottom:26px} .divider{width:64px;height:0;border-top:1.5px solid var(--gold);margin:0 auto 30px} .center{text-align:center} .wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:22px;margin-top:14px} .weg-card{background:var(--pergament-tief);border:1px solid rgba(174,183,147,.55);border-radius:3px;padding:30px 24px;text-align:center;transition:.3s;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit} .weg-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 10px 28px -16px rgba(60,74,44,.5)} .weg-card .icon{margin-bottom:16px} .weg-card h3{font-size:1.32rem;margin-bottom:8px;font-weight:600} .weg-card p{font-size:.92rem;color:var(--braun);margin:0;line-height:1.6} .weg-card .more{margin-top:14px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ocker);font-weight:600} .panel{background:var(--pergament-tief);border-left:3px solid var(--gold);padding:32px 36px;margin:30px 0;border-radius:2px} .panel h3{color:var(--gruen);font-size:1.5rem;margin-bottom:10px} .panel.gruen{background:#E6EAD9;border-left-color:var(--gruen)} .rahmen{margin:26px 0;border-top:1px solid var(--salbei)} .rahmen .row{display:flex;gap:28px;padding:14px 4px;border-bottom:1px solid rgba(174,183,147,.5)} .rahmen .row .k{flex:0 0 168px;font-weight:600;color:var(--gruen);font-family:var(--serif);font-size:1.18rem} .rahmen .row .v{flex:1;color:var(--text)} .schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:18px;margin:28px 0} .schritt{padding:22px 20px;background:var(--pergament-tief);border-radius:2px;border-top:2px solid var(--salbei)} .schritt .nr{font-family:var(--serif);font-size:2rem;color:var(--gold);line-height:1} .schritt h4{font-size:1.2rem;margin:8px 0 6px} .schritt p{font-size:.9rem;color:var(--braun);margin:0;line-height:1.55} .quote{font-family:var(--serif);font-style:italic;font-size:1.7rem;color:var(--braun);line-height:1.45;border-left:3px solid var(--gold);padding:6px 0 6px 28px;margin:34px 0} .quote .attr{display:block;font-size:.86rem;font-style:normal;font-family:var(--sans);color:var(--gruen-med);margin-top:12px;letter-spacing:.04em} /* Stimmen */ .stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin:30px 0} .stimme{background:var(--pergament-tief);border-left:2px solid var(--gold);padding:24px 26px;border-radius:2px} .stimme p{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--braun);line-height:1.55;margin-bottom:14px} .stimme .von{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gruen-med);font-weight:600} /* FAQ */ .faq{margin:24px 0} details.faq-item{border-bottom:1px solid rgba(174,183,147,.55);padding:14px 0} details.faq-item summary{font-family:var(--serif);font-size:1.25rem;color:var(--gruen);font-weight:500;cursor:pointer;list-style:none;padding:6px 0;position:relative;padding-right:28px} details.faq-item summary::-webkit-details-marker{display:none} details.faq-item summary::after{content:'+';position:absolute;right:6px;top:6px;color:var(--gold);font-size:1.5rem;transition:transform .2s} details.faq-item[open] summary::after{content:'−'} details.faq-item p{margin-top:10px;color:var(--braun)} .worte-list{margin-top:20px} .worte-item{padding:24px 0;border-bottom:1px solid rgba(174,183,147,.55);transition:.2s} .worte-item:hover{padding-left:8px} .worte-item .meta{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600} .worte-item h3{font-size:1.65rem;margin:6px 0 6px;color:var(--gruen)} .worte-item p{margin:0;color:var(--braun);font-size:.98rem} .btn{display:inline-block;font-family:var(--sans);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gruen);border:1.5px solid var(--gold);padding:15px 34px;border-radius:2px;cursor:pointer;transition:.3s;background:transparent;text-decoration:none} .btn:hover{background:var(--gold);color:#fff} .btn:focus-visible{background:var(--gold);color:#fff} .btn-zeile{margin-top:30px} .call{text-align:center;background:#E6EAD9;padding:64px 32px;margin-top:8px} .call h2,.call h3{font-size:2.1rem;margin-bottom:12px} .call p{max-width:540px;margin:0 auto 8px;color:var(--braun)} .cv{margin-top:18px;border-top:1px solid var(--salbei);padding-top:8px} .cv .row{display:flex;gap:24px;padding:11px 0;border-bottom:1px solid rgba(174,183,147,.4);font-size:.95rem} .cv .row .jahr{flex:0 0 120px;color:var(--ocker);font-weight:600} .cv .row .was{flex:1;color:var(--text)} .portrait-pic{float:right;width:38%;max-width:300px;margin:8px 0 18px 28px;border-radius:3px;box-shadow:0 14px 34px -18px rgba(60,74,44,.65);border:1px solid rgba(174,183,147,.45)} .portrait-caption{display:block;clear:right;text-align:right;float:right;width:38%;max-width:300px;margin:-10px 0 22px 28px;font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--gruen-med)} @media(max-width:680px){.portrait-pic,.portrait-caption{float:none;width:100%;max-width:320px;display:block;margin:0 auto 8px}.portrait-caption{text-align:center;margin-bottom:22px}} /* Startseiten-Portrait-Anreissbox */ .start-portrait{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center} .start-portrait-bild{display:block;line-height:0;text-decoration:none} .start-portrait-bild img{width:220px;height:auto;border-radius:3px;border:1px solid rgba(174,183,147,.45);box-shadow:0 14px 34px -18px rgba(60,74,44,.55);transition:transform .3s} .start-portrait-bild:hover img{transform:translateY(-2px)} .start-portrait-text .eyebrow{margin-bottom:8px} @media(max-width:680px){.start-portrait{grid-template-columns:1fr;text-align:center}.start-portrait-bild{margin:0 auto}.start-portrait-bild img{width:200px}} /* Inline-Portrait in Bewusste Fuehrung */ .fuehrung-portrait{float:left;width:34%;max-width:240px;margin:4px 26px 12px 0;border-radius:3px;border:1px solid rgba(174,183,147,.45);box-shadow:0 14px 34px -18px rgba(60,74,44,.55)} @media(max-width:680px){.fuehrung-portrait{float:none;width:100%;max-width:260px;display:block;margin:0 auto 16px}} .kontakt-zeilen{margin:26px 0} .kontakt-zeilen .kz{padding:14px 0;border-bottom:1px solid rgba(174,183,147,.5);display:flex;gap:24px;flex-wrap:wrap} .kontakt-zeilen .kz .label{flex:0 0 130px;font-weight:600;color:var(--gruen);font-family:var(--serif);font-size:1.15rem} .kontakt-zeilen .kz a{text-decoration:none;border-bottom:1px dotted var(--salbei);transition:.2s} .kontakt-zeilen .kz a:hover{border-bottom-color:var(--gold)} /* Formulare (Kontakt & Newsletter) */ .formular{margin:30px 0;background:var(--pergament-tief);padding:32px 30px;border-radius:3px;border-top:2px solid var(--gold)} .formular .feld{margin-bottom:18px;display:flex;flex-direction:column;gap:6px} .formular label{font-family:var(--sans);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gruen);font-weight:600} .formular input[type=text],.formular input[type=email],.formular textarea{font-family:var(--sans);font-size:1rem;color:var(--text);background:#FBF8EE;border:1px solid var(--salbei);border-radius:2px;padding:11px 14px;line-height:1.5;transition:border-color .2s} .formular input:focus,.formular textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,134,44,.18)} .formular textarea{min-height:140px;resize:vertical} .formular .hinweis{font-size:.86rem;color:var(--gruen-med);font-style:italic;margin-top:4px;line-height:1.5} .formular .checkbox-feld{flex-direction:row;align-items:flex-start;gap:12px} .formular .checkbox-feld input{margin-top:5px;width:18px;height:18px;accent-color:var(--gold)} .formular .checkbox-feld label{text-transform:none;letter-spacing:0;font-weight:400;font-size:.92rem;color:var(--braun);line-height:1.55} .formular .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .formular button.btn{margin-top:8px;width:auto} .formular .erfolg{padding:18px 22px;background:#E6EAD9;border-left:3px solid var(--gruen);color:var(--gruen);font-family:var(--serif);font-size:1.15rem;border-radius:2px;margin-bottom:14px} .formular .fehler{padding:18px 22px;background:#F4E2D2;border-left:3px solid var(--ocker);color:var(--ocker);font-family:var(--serif);font-size:1.1rem;border-radius:2px;margin-bottom:14px} /* Newsletter-Block (eigene, etwas leisere Variante des Formulars) */ .newsletter{background:var(--pergament-tief);border-top:1px solid rgba(174,183,147,.45);border-bottom:1px solid rgba(174,183,147,.45);padding:54px 0;margin-top:24px} .newsletter h2,.newsletter h3{font-family:var(--serif);font-size:2rem;color:var(--gruen);margin-bottom:8px;text-align:center} .newsletter .untertitel{text-align:center;color:var(--braun);max-width:540px;margin:0 auto 22px;font-family:var(--serif);font-style:italic;font-size:1.18rem} .newsletter form{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:14px} .newsletter .reihe{display:flex;gap:10px;align-items:stretch} .newsletter input[type=email]{flex:1} .newsletter button.btn{white-space:nowrap} .newsletter .feinprint{font-size:.82rem;color:var(--gruen-med);text-align:center;font-style:italic;line-height:1.5} @media(max-width:560px){.newsletter .reihe{flex-direction:column}} footer{background:var(--gruen);color:#D7DBC6;margin-top:40px;padding:54px 0 30px} footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px} footer .fname img{height:44px;width:auto;display:block;margin-bottom:8px} footer .frole{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--salbei);margin-top:4px} footer nav{display:flex;flex-direction:column;gap:9px} footer nav a{color:#D7DBC6;text-transform:none;letter-spacing:.03em;font-size:.86rem;font-weight:400;border:none} footer nav a:hover{color:#fff} .footline{max-width:1120px;margin:36px auto 0;padding:20px 32px 0;border-top:1px solid rgba(174,183,147,.3);font-size:.74rem;color:var(--salbei);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between} .footline a{color:inherit;text-decoration:underline} @media(max-width:860px){ .menu-toggle{display:block} nav#mainnav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--pergament);flex-direction:column;gap:0;border-bottom:1px solid var(--salbei);padding:10px 0} nav#mainnav.open{display:flex} nav#mainnav a{padding:14px 32px;border-bottom:none;width:100%} nav#mainnav a.active{border-bottom:none;color:var(--ocker)} .hero h1{font-size:3rem} .hero h2,.hero .h2{font-size:2.2rem} .hero .lead-line{font-size:1.35rem} h2.section-title{font-size:2rem} .lead-para{font-size:1.28rem} .rahmen .row{flex-direction:column;gap:2px} .rahmen .row .k{flex:none} .wrap,.narrow{padding:0 22px} .nav-inner{padding:0 22px} } /* Reduced Motion */ @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } /* Print */ @media print{ header,footer,.menu-toggle,.btn,.call,.newsletter{display:none !important} body{background:#fff;color:#000;font-size:11pt} .hero{background:#fff !important;color:#000;padding:24px 0} .hero h1,.hero h2,.hero .h2,.hero .lead-line,.hero .kicker,.hero p{color:#000 !important;text-shadow:none !important} a{color:#000;text-decoration:underline} } /* Format-Interesse-Auswahl im Kontaktformular */ .optional-hint{color:var(--gruen-med);font-weight:400;text-transform:none;letter-spacing:0;font-size:.78rem} .interesse-feld{border:0;padding:0;margin-top:4px} .interesse-feld legend{font-family:var(--sans);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gruen);font-weight:600;margin-bottom:10px;padding:0} .interesse-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .interesse-option{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:#FBF8EE;border:1px solid var(--salbei);border-radius:2px;font-size:.92rem;line-height:1.4;cursor:pointer;transition:.2s} .interesse-option:hover{border-color:var(--gold);background:#fff} .interesse-option input[type=checkbox]{margin:2px 0 0;accent-color:var(--gold);flex-shrink:0} .interesse-option input[type=checkbox]:checked + *, .interesse-option:has(input:checked){border-color:var(--gold);background:#F5EDD8} @media(max-width:560px){.interesse-grid{grid-template-columns:1fr}}