/* =========================================================================== Design-System Grotegut Zimmermann Coaching Consulting Gemeinsame Quelle fuer die Startseite und die /unternehmen/-Seiten. Am 22.09.2026 aus dem Inline-CSS der Startseite herausgeloest, damit die Seiten nicht auseinander laufen. Farbregel Lime: #ABC91A ist Flaeche (Buttons, Rahmen, Badges). Als Textfarbe auf hellem Grund gilt #5F760D, das Marken-Lime kaeme dort nur auf rund 1,9:1. =========================================================================== */ /* Das @font-face fuer Inter steht in assets/inter.css, das jede Seite zusaetzlich einbindet. Bewusst nicht hier, damit es nur einen Ort gibt. */ :root{--navy:#183250;--night:#080820;--lime:#ABC91A;--lime-dark:#5F760D;--fog:#F1F0EC;--peri:#7880A8;--ink:#42516A;--line:#D8DCDf;--white:#fff;--radius:14px;--max:1216px} /* Anker-Abstand = Hoehe des klebenden Headers, 96 px, ab 640 px (Tailwind sm) 112 px, siehe _tools/partials/header.html. Der Abschnitt beginnt damit genau an der Header-Unterkante, die Luft zur Ueberschrift kommt aus seinem eigenen Innenabstand. Mit 16 px Zugabe lagen grosse Abschnitte rund 140 px tief. Vorher 30 px aus dem Prototypen ohne klebenden Header: "Passenden Einstieg" sprang so tief, dass die Ueberschrift unter dem Header lag (25.09.2026). Aendert sich die Header-Hoehe, diese beiden Werte mitziehen. */ *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}@media(min-width:640px){html{scroll-padding-top:112px}}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--fog);color:var(--navy);line-height:1.65;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--lime-dark);outline-offset:5px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--navy);outline-offset:3px}h1,h2,h3,p{margin:0}h1,h2{font-weight:900;line-height:1.08;letter-spacing:-.035em;text-transform:uppercase}h2{overflow-wrap:anywhere;hyphens:auto}h3{font-weight:750;line-height:1.22;letter-spacing:-.025em}p{color:var(--ink)}.wrap{width:min(var(--max),calc(100% - 96px));margin-inline:auto}.section{padding-block:102px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:21px}.eyebrow:before{content:"";width:25px;height:3px;background:var(--lime-dark)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:52px;border:0;border-radius:9px;padding:14px 23px;font-size:13px;font-weight:750;line-height:1.4;transition:background .15s,transform .15s}.btn:hover{transform:translateY(-2px)}.btn-lime{background:var(--lime);color:var(--navy)}.btn-dark{background:var(--navy);color:#fff}.btn-dark:hover{background:var(--night)}.btn-outline{border:1px solid #AEB8C5;background:transparent;color:var(--navy)}.arrow{width:19px;height:19px;flex-shrink:0}.text-link{display:inline-flex;align-items:center;gap:14px;font-size:14px;font-weight:750;padding-block:8px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}.skip{position:absolute;top:-100px;background:white;z-index:50;padding:10px}.skip:focus{top:10px} /* --- Ueberschriften gegen den Tailwind-Preflight absichern --------------- tw-main.css steht bewusst als letztes Stylesheet im (siehe _tools/build-tailwind.mjs). Sein Preflight setzt h1-h6 auf font-weight:inherit und schlug damit bei gleicher Spezifitaet die Werte oben: die Ueberschriften liefen mit 400 statt 900. Entschieden am 23.09.2026 (Marcel): Gewichte wie im Designsystem. "body h1" hat Spezifitaet 0,0,2 und gewinnt gegen den Preflight (0,0,1), ohne die Reihenfolge der Stylesheets anzufassen. Eine Umstellung der Reihenfolge haette zugleich den Zeilenabstand des body von 1,5 auf 1,65 geaendert, der ebenfalls vom Preflight ueberschrieben wird. Das ist bewusst NICHT mit entschieden. Tailwind-Klassen wie font-bold (0,1,0) gewinnen weiterhin. */ body h1,body h2{font-weight:900} body h3{font-weight:750} .header{background:white}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:36px;height:115px}.brand{padding:10px 0;flex-shrink:0}.brand img{width:140px;height:auto}.nav{display:flex;align-items:center;gap:32px;font-size:13px;font-weight:600}.nav>a:not(.btn){padding:14px 0}.nav>a:hover{color:var(--lime-dark)}.nav .btn:hover{color:#fff}.menu-toggle{display:none;background:none;border:1px solid #CED3DB;border-radius:8px;min-height:44px;padding:8px 14px;font-size:13px;font-weight:700} .hero{background:var(--navy);color:#fff;overflow:hidden}.hero-inner{display:grid;grid-template-columns:1.06fr 1fr;min-height:634px}.hero-copy{padding:66px 36px 64px 0;position:relative;z-index:1}.hero .eyebrow{color:var(--lime);margin-bottom:23px}.hero .eyebrow:before{background:var(--lime)}.hero h1{font-size:clamp(42px,4.65vw,66px);max-width:660px;line-height:1.045;letter-spacing:-.045em}.hero-copy>p{font-size:16px;line-height:1.75;color:#DEE3EF;max-width:470px;margin:24px 0 29px}.hero-action{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.hero-sub{font-size:11px;color:#ADB4DE;margin-top:24px}.hero-visual{position:relative;margin-right:calc((min(var(--max),100vw - 96px) - 100vw)/2);min-height:100%;overflow:hidden}.hero-visual>img{height:100%;width:100%;position:absolute;object-fit:cover;object-position:49% 45%}.portrait-caption{position:absolute;bottom:30px;left:30px;right:35px;background:var(--navy);color:#fff;padding:16px 21px;border-left:4px solid var(--lime);max-width:375px}.portrait-caption strong{display:block;font-size:13px}.portrait-caption span{font-size:11px;color:#D0D7EA}.hero-visual .corner{position:absolute;top:27px;right:28px;width:36px;height:36px;border-top:3px solid var(--lime);border-right:3px solid var(--lime)} .audiences{padding:56px 0 86px;background:var(--fog)}.audience-intro{display:flex;align-items:baseline;justify-content:space-between;gap:25px;margin-bottom:28px}.audience-intro h2{font-size:26px;letter-spacing:-.03em}.audience-intro p{font-size:13px}.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.audience-card{position:relative;display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid #E0E2E2;border-radius:var(--radius);padding:28px 27px 24px;color:var(--navy);transition:border-color .18s,box-shadow .18s}.audience-card:hover{border-color:var(--lime-dark);box-shadow:0 9px 22px #1832500B}.audience-card .icon{width:32px;height:32px;color:var(--navy);margin-bottom:25px}.audience-card h3{font-size:22px;max-width:300px;margin-bottom:13px;min-height:54px}.audience-card p{font-size:14px;line-height:1.65;margin-bottom:27px;flex-grow:1}.card-action{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:750;border-top:1px solid #E8E9E6;padding-top:18px;width:100%}.card-action .arrow{color:var(--lime-dark)} .canvas-section{background:white;padding-top:88px}.section-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:95px;align-items:end;margin-bottom:40px}.section-intro h2{font-size:42px;max-width:600px}.section-intro p{font-size:15px;line-height:1.8;max-width:485px}.canvas{background:var(--fog);border:1px solid #E4E5E0;border-radius:20px;padding:30px}.canvas-top{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}.canvas-top h3{font-size:18px}.canvas-top span{font-size:12px;color:#56617A}.phase-controls{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:24px;border-bottom:1px solid #D5D9D9}.phase{display:flex;gap:8px;align-items:center;min-height:42px;border:1px solid transparent;background:transparent;border-radius:8px;color:#46556C;font-size:11px;font-weight:650;padding:10px 12px}.phase b{font-size:10px;font-weight:500;color:#62718B}.phase:hover{background:white}.phase[aria-pressed=true]{background:var(--navy);color:#fff}.phase[aria-pressed=true] b{color:var(--lime)}.phase-title{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:25px 0 23px}.phase-title h3{font-size:23px}.phase-title p{font-size:12px}.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.role-card{padding:25px 23px 26px;background:white;border-radius:12px;min-height:186px;border-top:3px solid var(--navy)}.role-card.ki{background:var(--navy);border-top-color:var(--lime);color:white}.role-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.role-label svg{width:22px;height:22px}.role-card h4{font-size:18px;font-weight:750;letter-spacing:-.02em;line-height:1.4;margin:0 0 10px}.role-card p{font-size:13px;line-height:1.65}.role-card.ki .role-label{color:var(--lime)}.role-card.ki p{color:#D6DEEF}.canvas-rule{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:26px}.canvas-rule p{font-size:12px;max-width:685px}.canvas-rule button{white-space:nowrap;border:0;background:transparent;color:var(--navy);font-size:12px;font-weight:750;text-decoration:underline;text-underline-offset:4px;min-height:44px}.canvas-table-wrap{overflow-x:auto;margin-top:24px;border-radius:8px}.canvas-table-wrap[hidden]{display:none}.canvas-table{border-collapse:collapse;min-width:750px;width:100%;font-size:12px;background:#fff}.canvas-table caption{text-align:left;font-weight:700;padding:17px;background:white}.canvas-table th,.canvas-table td{padding:15px;vertical-align:top;text-align:left;border-bottom:1px solid #DBDEDF}.canvas-table thead th{background:var(--navy);color:white}.canvas-table tbody th{font-weight:700;width:18%}.canvas-note{margin-top:23px;font-size:12px;color:#56617A;display:flex;align-items:center;gap:10px}.canvas-note svg{width:17px;height:17px;flex-shrink:0} .canvas-columns{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-top:40px;background:var(--fog);border:1px solid #E7E6E1;border-radius:20px;padding:36px}.canvas-image{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid #E4E5E0;background:#fff;padding:22px 22px 78px}.canvas-img{width:100%;height:auto;display:block}.canvas-enlarge{position:absolute;left:22px;bottom:22px}.canvas-roles h3{font-size:26px;margin:10px 0 18px}.canvas-roles>p{font-size:14px;line-height:1.75;max-width:480px}.role-summary{margin:26px 0 0;padding:0}.role-summary div{display:grid;grid-template-columns:104px 1fr;gap:26px;align-items:start;padding:16px 0;border-top:1px solid #DFDFD9}.role-summary div:first-child{border-top:0;padding-top:0}.role-summary dt{font-weight:800;font-size:13.5px;margin:0}.role-summary dd{margin:0;font-size:14px;line-height:1.6;color:var(--ink)}.role-summary .is-ki dt{color:var(--lime-dark)}.canvas-callout{margin-top:26px;padding:18px 21px;border-left:3px solid var(--lime-dark);background:var(--fog);border-radius:0 12px 12px 0;font-size:13px;line-height:1.65;color:var(--ink)}.canvas-callout strong{display:block;color:var(--navy);margin-bottom:4px} .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} dialog.dialog-canvas{max-width:min(1280px,calc(100% - 40px))}.dialog-canvas-img{width:100%;height:auto;display:block;border-radius:10px} .approach{padding-block:94px;background:white;border-top:1px solid #E1E4E5}.approach-heading{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;margin-bottom:43px}.approach-heading h2{font-size:40px}.approach-heading p{font-size:15px}.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:43px}.principle{border-top:2px solid var(--navy);padding-top:22px}.principle h3{font-size:20px;margin-bottom:13px}.principle p{font-size:14px}.approach-bottom{display:flex;gap:12px;align-items:center;font-size:12px;color:#4C5D72;margin-top:33px}.approach-bottom span{height:7px;width:7px;flex-shrink:0;border-radius:50%;background:var(--lime-dark)} .people{background:var(--fog)}.people-grid{display:grid;grid-template-columns:1fr 1fr;gap:82px;align-items:center}.people-photo{position:relative}.people-photo img{width:100%;height:auto;aspect-ratio:1.05;object-fit:cover;object-position:50% 46%;border-radius:16px}.photo-credit{font-size:10px;color:#5E6980;margin-top:9px}.people h2{font-size:42px;margin-bottom:24px}.people .lead{font-size:16px;margin-bottom:17px}.people p{font-size:14px;line-height:1.8}.people-names{display:grid;grid-template-columns:1fr 1fr;gap:23px;margin:28px 0;padding-bottom:27px;border-bottom:1px solid #D1D6D9}.people-names strong{display:block;font-size:14px;margin-bottom:4px}.people-names span{font-size:12px;color:#56617A}.book-link{display:flex;align-items:center;justify-content:space-between;gap:16px}.book-link small{font-size:11px;font-weight:700;color:#56617A}.book-link strong{display:block;font-size:16px}.book-link>a{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #AEB8C5}.book-link>a:hover{background:white} .faq{background:#fff;padding-block:85px}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:95px}.faq h2{font-size:36px}.faq details{border-bottom:1px solid #D8DDE1;padding:20px 0}.faq details:first-child{padding-top:0}.faq summary{display:flex;align-items:center;justify-content:space-between;gap:25px;list-style:none;cursor:pointer;font-size:15px;font-weight:700}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-size:26px;font-weight:400;line-height:1;color:var(--lime-dark)}.faq details[open] summary:after{content:"−"}.faq details p{font-size:14px;margin-top:15px;max-width:600px} .contact{background:var(--navy);color:#fff;padding-block:89px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.contact .eyebrow{color:var(--lime)}.contact .eyebrow:before{background:var(--lime)}.contact h2{font-size:43px;max-width:500px}.contact p{font-size:15px;color:#D5DCED;margin-top:23px;max-width:420px}.contact-signature{margin-top:31px;font-size:14px;font-weight:700}.contact-signature span{display:block;font-size:12px;font-weight:400;color:#B7C3D9;margin-top:3px}.form-note{color:#CDD5E6;font-size:11px;background:#FFFFFF0B;border:1px solid #FFFFFF25;border-radius:7px;padding:10px 13px;margin-bottom:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600}.field.full{grid-column:1/-1}.field input,.field select,.field textarea{width:100%;border:1px solid #758BA6;background:#fff;color:var(--navy);border-radius:7px;padding:12px 13px;min-height:46px;font-size:13px;line-height:1.5}.field select{padding-right:25px}.field textarea{resize:vertical;min-height:95px}.field input::placeholder,.field textarea::placeholder{color:#68768B}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.form-actions small{color:#C9D3E6;font-size:10px;max-width:205px;line-height:1.6}.form-message{margin-top:18px;padding:13px 16px;border-left:3px solid var(--lime);font-size:13px;background:#FFFFFF10}.form-message[hidden]{display:none}.contact input:focus-visible,.contact select:focus-visible,.contact textarea:focus-visible{outline-color:var(--lime)} /* --- Kontaktformular, Versand (23.09.2026) ------------------------------ Einwilligung, Honigtopf und Rueckmeldungen fuer kontakt/senden.php. Lime #ABC91A steht hier als Textfarbe auf Navy, dort traegt es rund 7:1. Das Rot fuer Fehler ist bewusst hell gewaehlt, damit es auf Navy lesbar bleibt, und kommt nie allein: die Meldung steht immer auch als Text da. */ .field-check{display:flex;align-items:flex-start;gap:11px;font-size:12px;line-height:1.55;color:#D5DCED;cursor:pointer}.field-check.full{grid-column:1/-1}.field-check input{flex-shrink:0;width:18px;height:18px;margin:1px 0 0;accent-color:var(--lime)}.field-check a{color:var(--lime);text-decoration:underline;text-underline-offset:2px} .hp-feld{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .contact [aria-invalid="true"]{border-color:#F4A3A3;box-shadow:0 0 0 2px #F4A3A355} .form-message.is-fehler{border-left-color:#F4A3A3} .contact .form-note a{color:var(--lime)} .contact button[disabled]{opacity:.6;cursor:progress;transform:none} @media(max-width:620px){.field-check.full{grid-column:auto}} .footer{background:var(--night);color:white;padding-block:40px}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:35px;margin-bottom:25px}.footer .footer-logo{width:145px;height:auto}.footer-nav{display:flex;gap:28px;flex-wrap:wrap;font-size:12px;color:#D8DEF0}.footer-nav button{border:0;padding:0;background:transparent;color:inherit;font-size:inherit}.footer-nav a:hover,.footer-nav button:hover{text-decoration:underline;text-underline-offset:4px}.footer-bottom{padding-top:22px;border-top:1px solid #FFFFFF20;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#B6BED8}.footer-bottom p{color:inherit} dialog{padding:0;border:0;border-radius:18px;background:var(--fog);color:var(--navy);max-width:600px;width:calc(100% - 40px);max-height:85vh;box-shadow:0 22px 90px #08082055}dialog::backdrop{background:#080820AA;backdrop-filter:blur(3px)}.dialog-inner{padding:42px}.dialog-close{position:absolute;right:16px;top:14px;border:0;border-radius:50%;background:white;color:var(--navy);width:36px;height:36px;font-size:25px;line-height:1}.dialog-inner h2{font-size:29px;padding-right:10px;margin-bottom:20px}.dialog-inner>p{font-size:14px;margin-bottom:17px}.dialog-inner ul{padding-left:20px;color:var(--ink);font-size:14px;margin:15px 0 25px}.dialog-inner li{margin-bottom:10px}.dialog-inner .editor-note{font-size:11px;background:#fff;padding:13px;border-radius:6px;margin-bottom:23px}.dialog-inner .btn{margin-top:7px} @media(min-width:1600px){.hero-visual{margin-right:0}.hero-inner{max-width:var(--max)}.hero{background:linear-gradient(90deg,var(--navy) 50%,var(--night) 50%)}} @media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero-inner{grid-template-columns:1.08fr 1fr;min-height:590px}.hero-visual{margin-right:-32px}.hero-copy{padding:55px 26px 54px 0}.hero h1{font-size:49px}.hero-copy>p{font-size:15px}.nav{gap:23px}.audience-card{padding:24px 20px}.audience-card h3{font-size:20px;min-height:50px}.section-intro,.approach-heading{gap:50px}.section-intro h2,.people h2{font-size:35px}.people-grid{gap:50px}.canvas{padding:24px}.phase{font-size:10px;padding:9px}.role-card{padding:23px 18px}.role-card h4{font-size:17px}.contact-grid{gap:55px}.contact h2{font-size:37px}.form-actions{align-items:flex-start;flex-direction:column}.faq-grid{gap:45px}.portrait-caption{left:20px;right:20px}} @media(max-width:800px){.wrap{width:calc(100% - 40px)}.header-inner{height:99px}.brand img{width:130px}.nav{gap:18px}.nav .btn{padding:12px 15px;min-height:46px}.hero-inner{grid-template-columns:1fr 1fr;min-height:570px}.hero h1{font-size:39px}.hero-copy{padding-top:49px;padding-right:22px}.hero-visual{margin-right:-20px}.hero-copy>p{font-size:14px}.hero .eyebrow{font-size:9px;letter-spacing:.1em;gap:8px}.hero .eyebrow:before{width:17px}.hero .btn{font-size:11px;padding:13px 17px}.portrait-caption{left:14px;right:14px;padding:13px}.portrait-caption strong{font-size:11px}.portrait-caption span{font-size:10px}.audience-intro{align-items:flex-start;flex-direction:column;gap:10px}.audience-grid{gap:12px}.audience-card{padding:22px 16px}.audience-card h3{font-size:19px;min-height:69px}.audience-card p{font-size:12px}.card-action{font-size:10px;gap:9px}.section{padding-block:70px}.section-intro{gap:30px;grid-template-columns:1fr}.section-intro p{max-width:620px}.section-intro h2{font-size:36px}.role-grid{gap:10px}.role-card{padding:20px 15px}.role-card h4{font-size:15px}.role-card p{font-size:12px}.canvas-rule{gap:20px;align-items:flex-start;flex-direction:column}.canvas-top{gap:12px}.canvas-top h3{font-size:16px}.canvas-top span{font-size:10px}.phase-title p{max-width:205px}.approach-heading{gap:25px;grid-template-columns:1fr}.approach-heading h2{font-size:35px}.approach-grid{gap:23px}.principle h3{font-size:18px}.principle p{font-size:13px}.people-grid{gap:30px}.people h2{font-size:30px}.people-names{grid-template-columns:1fr;gap:14px}.book-link strong{font-size:13px}.book-link>a{width:40px;height:40px}.faq-grid{grid-template-columns:1fr;gap:32px}.contact-grid{grid-template-columns:1fr;gap:37px}.contact h2{font-size:37px;max-width:600px}.contact p{max-width:600px}.form-actions{align-items:center;flex-direction:row}.footer-bottom{font-size:9px}} @media(max-width:620px){.header-inner{position:relative;height:100px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:91px;left:-20px;right:-20px;z-index:10;background:white;padding:24px;box-shadow:0 10px 20px #18325015;align-items:stretch;gap:8px}.nav.open{display:flex;flex-direction:column}.nav>a:not(.btn){padding:11px 0}.hero-inner{display:flex;flex-direction:column;min-height:0}.hero-copy{padding:43px 0 40px}.hero h1{font-size:clamp(33px,9.5vw,57px);line-height:1.055;max-width:530px}.hero .eyebrow{font-size:10px}.hero-copy>p{font-size:15px;margin:23px 0 25px;max-width:490px}.hero .btn{font-size:12px;min-height:50px}.hero-sub{margin-top:19px}.hero-visual{margin:0 -20px;min-height:355px;height:355px}.hero-visual>img{object-position:50% 33%}.portrait-caption{bottom:20px;left:20px;right:auto;max-width:calc(100% - 40px);padding:13px 17px}.portrait-caption strong{font-size:12px}.portrait-caption span{font-size:10px}.hero-visual .corner{top:20px;right:20px;width:28px;height:28px}.audiences{padding:40px 0 55px}.audience-intro{gap:11px;margin-bottom:24px}.audience-intro h2{font-size:26px;max-width:340px}.audience-intro p{font-size:12px}.audience-grid{grid-template-columns:1fr;gap:14px}.audience-card{padding:24px}.audience-card .icon{margin-bottom:18px;width:28px;height:28px}.audience-card h3{font-size:23px;min-height:0;max-width:400px}.audience-card p{font-size:14px;margin-bottom:20px}.card-action{font-size:12px}.section{padding-block:58px}.section-intro{margin-bottom:28px}.section-intro h2{font-size:33px}.section-intro p{font-size:14px}.eyebrow{font-size:10px;margin-bottom:18px}.canvas{padding:22px 16px;border-radius:14px;margin-inline:-6px}.canvas-top{align-items:flex-start;flex-direction:column;gap:5px;margin-bottom:19px}.phase-controls{gap:5px;padding-bottom:19px}.phase{font-size:10px;padding:8px 10px;min-height:42px;background:#fff}.phase-title{align-items:flex-start;flex-direction:column;gap:7px;padding:23px 0 19px}.phase-title h3{font-size:22px}.phase-title p{max-width:none;font-size:11px}.role-grid{grid-template-columns:1fr;gap:11px}.role-card{min-height:0;padding:20px;border-top-width:0;border-left:3px solid var(--navy)}.role-card.ki{border-left-color:var(--lime)}.role-label{margin-bottom:13px}.role-card h4{font-size:18px}.role-card p{font-size:13px}.canvas-rule{padding-top:20px;gap:10px}.canvas-note{align-items:flex-start;font-size:11px}.canvas-columns{grid-template-columns:1fr;gap:28px;margin-top:26px;padding:20px;border-radius:16px}.role-summary div{grid-template-columns:1fr;gap:5px}.approach-heading{margin-bottom:30px}.approach-heading h2{font-size:32px}.approach-grid{grid-template-columns:1fr;gap:27px}.principle{padding-top:18px}.principle h3{font-size:21px}.principle p{font-size:14px}.approach-bottom{font-size:11px;align-items:flex-start}.approach-bottom span{margin-top:6px}.people-grid{grid-template-columns:1fr;gap:32px}.people h2{font-size:33px}.people-photo img{aspect-ratio:1.12;object-position:50% 40%}.people-names{grid-template-columns:1fr 1fr;gap:20px}.people-names strong{font-size:13px}.people-names span{font-size:11px}.book-link strong{font-size:15px}.faq{padding-block:56px}.faq h2{font-size:31px}.faq summary{font-size:14px}.contact{padding-block:57px}.contact h2{font-size:34px}.contact p{font-size:14px}.contact-grid{gap:31px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.form-actions{flex-direction:column;align-items:stretch}.form-actions small{max-width:none;font-size:11px}.footer{padding-block:33px}.footer-top{flex-direction:column;align-items:flex-start;gap:27px}.footer-nav{font-size:11px;gap:24px}.footer-bottom{flex-direction:column;gap:12px;font-size:10px}.dialog-inner{padding:42px 25px 30px}.dialog-inner h2{font-size:25px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}} @media print{.header,.contact,.footer,.hero-action,.menu-toggle,.canvas-rule button{display:none!important}.wrap{width:100%}.section,.audiences{padding:30px 0}.hero{print-color-adjust:exact}.hero-inner{min-height:450px}.hero-copy{padding:30px}.hero-visual{margin:0}.hero h1{font-size:40px}.hero-sub{display:none}.canvas-table-wrap[hidden]{display:block}.canvas-table{min-width:0}.phase-controls,.role-grid,.phase-title{display:none}.canvas,.people-grid,.audience-card{break-inside:avoid}} /* Variante: helles Hero-Foto mit redaktioneller Vollbreite */ .hero.hero-light { position: relative; isolation: isolate; overflow: hidden; min-height: 660px; background: #F1F0EC; color: var(--navy); } .hero-light .hero-inner { position: relative; display: block; min-height: 660px; } .hero-light .hero-copy { position: relative; z-index: 3; width: 50%; max-width: 590px; padding: 75px 0 68px; } .hero-light .hero-visual { position: absolute; z-index: -1; inset: 0 auto 0 50%; width: 100vw; min-height: 100%; margin: 0; transform: translateX(-50%); } .hero-light .hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(241,244,245,.99) 0%, rgba(241,244,245,.96) 30%, rgba(241,244,245,.72) 40%, rgba(241,244,245,.12) 49%, rgba(241,244,245,0) 60%); } .hero-light .hero-visual > img { left: 0; right: auto; width: 100%; transform: translateX(7%); /* Vertikaler Anker 3 %, auf jedem Format. Begruendung als Rechnung: object-fit:cover laesst das Bild die volle Breite fuellen. Der Hero ist aber nur rund 660 px hoch, also steht das Bild vertikal ueber, und object-position-y legt fest, welcher Anteil dieses Ueberstands OBEN wegfaellt. Der Ueberstand haengt vom Seitenverhaeltnis des Bildschirms ab, deshalb verschiebt ein fester Prozentwert den Beschnitt je nach Geraet. Oben faellt aber nie mehr weg als y mal Ueberstand, und der Ueberstand ist immer kleiner als die dargestellte Bildhoehe. Bei y = 3 % gehen oben also hoechstens 3 % der Bildhoehe verloren, auf jedem Format. Marcels Haaransatz liegt bei 5,7 % der Bildhoehe (y=76 von 1333 px, per Helligkeitsschwelle gemessen), Silkes bei 12,8 %. Beide bleiben damit immer sichtbar, unten geht dafuer Oberkoerper weg. Vorher: 38 %, mit Nachbesserungen auf 15 % ab 1600 px und 4 % ab 2200 px. Gemessen am 23.09.2026 war der Kopf damit bei 1180 bis 1536 px (Laptops) und 1680 bis 1920 px (Full HD) angeschnitten. Nicht wieder auf Breiten-Breakpoints umstellen, das verschiebt den Fehler nur. */ object-position: 50% 3%; } .hero-light .eyebrow { color: var(--lime-dark); } .hero-light .eyebrow::before { background: var(--lime-dark); } .hero-light h1 { color: var(--navy); font-size: clamp(43px,4.45vw,64px); text-wrap: balance; } .hero-light .hero-copy > p { color: #384b62; max-width: 475px; } .hero-light .hero-sub { color: #56677c; } .hero-light .portrait-caption { left: auto; right: max(30px, calc((100vw - min(var(--max), 100vw - 96px)) / 2)); bottom: 28px; z-index: 2; max-width: 390px; } @media (max-width: 1100px) { .hero-light .hero-copy { width: 53%; max-width: 535px; padding-top: 66px; } .hero-light h1 { font-size: 50px; } .hero-light .hero-visual > img { width: 100%; transform: translateX(7%); object-position: 50% 3%; } .hero-light .portrait-caption { right: 32px; } } @media (max-width: 800px) { .hero.hero-light, .hero-light .hero-inner { min-height: 590px; } .hero-light .hero-copy { width: 55%; padding-top: 54px; } .hero-light h1 { font-size: 42px; } .hero-light .hero-visual::after { background: linear-gradient(90deg, rgba(241,244,245,.99) 0%, rgba(241,244,245,.94) 36%, rgba(241,244,245,.42) 55%, rgba(241,244,245,0) 76%); } } @media (max-width: 620px) { .hero.hero-light { min-height: 0; background: #f4f6f7; } .hero-light .hero-inner { min-height: 0; display: flex; flex-direction: column; } .hero-light .hero-copy { width: 100%; max-width: none; padding: 43px 0 40px; } .hero-light h1 { font-size: clamp(33px,9.5vw,57px); } .hero-light .hero-visual { position: relative; z-index: 0; inset: auto; width: auto; height: 365px; min-height: 365px; margin: 0 -20px; transform: none; } .hero-light .hero-visual::after { display: none; } .hero-light .hero-visual > img { left: 0; right: auto; width: 100%; transform: none; object-position: 54% 3%; } .hero-light .portrait-caption { left: 20px; right: auto; bottom: 20px; max-width: calc(100% - 40px); } } /* --- Gesellschafterprofile auf /autoren.htm --------------------------------- Zwei Portraets im Wechsel: links Foto, rechts Text, beim zweiten Profil umgekehrt. Bewusst nicht ueber row-reverse geloest, sondern ueber grid-template-areas, damit die Lesereihenfolge im DOM immer Foto, dann Text bleibt und der Umbruch auf Schmalgeraeten ohne Sonderregel stimmt. */ .profil{display:grid;grid-template-columns:300px minmax(0,1fr);gap:52px;align-items:start;padding:44px 0;border-top:1px solid #E1E2DE} .profil:first-of-type{border-top:0;padding-top:0} .profil.gespiegelt{grid-template-columns:minmax(0,1fr) 300px} .profil.gespiegelt .profil-foto{grid-column:2;grid-row:1} .profil.gespiegelt .profil-text{grid-column:1;grid-row:1} .profil-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px} .profil-rolle{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-dark);margin-bottom:10px} .profil-text h3{font-size:30px;font-weight:900;letter-spacing:-.03em;margin-bottom:5px} .profil-funktion{font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:20px} .profil-text p{font-size:14.5px;line-height:1.8;margin-bottom:14px;max-width:620px} .profil-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 20px;padding:0;list-style:none} .profil-tags li{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lime-dark);background:#fff;border:1px solid #DCE2C9;border-radius:99px;padding:7px 13px} .profil-links{display:flex;flex-wrap:wrap;gap:26px} .profil-links a{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:750;color:var(--navy);text-decoration:underline;text-underline-offset:5px;min-height:44px} .profil-links svg{width:15px;height:15px;flex-shrink:0} @media(max-width:800px){ .profil,.profil.gespiegelt{grid-template-columns:1fr;gap:26px;padding:34px 0} .profil.gespiegelt .profil-foto,.profil.gespiegelt .profil-text{grid-column:1;grid-row:auto} .profil-foto{max-width:280px} .profil-text h3{font-size:26px} } /* --- Pain-Point-Gegenueberstellung auf den /unternehmen/-Seiten -------------- */ .arg-liste{margin:0;padding:0} .arg-liste>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px;align-items:start;padding:22px 0;border-top:1px solid #E4E5E0} .arg-liste>div:first-child{border-top:0;padding-top:0} .arg-liste dt{font-size:15px;font-weight:800;line-height:1.45;color:var(--navy);margin:0} .arg-liste dd{margin:0;font-size:14.5px;line-height:1.75;color:var(--ink)} @media(max-width:800px){ .arg-liste>div{grid-template-columns:1fr;gap:8px;padding:18px 0} .approach-grid[style*="repeat(4"]{grid-template-columns:1fr!important;gap:24px!important} .section[style*="var(--navy)"] .wrap[style*="1fr 1fr"]{grid-template-columns:1fr!important;gap:24px!important} } /* Hero mit Illustration im Hintergrund (Konzerne, ab 25.09.2026). Motive liegen in 02_Bilder/Illustrationen/hero-unternehmen/ der GZCC-Wissensbasis, samt Rohbildern und Aufbereitungsskript. Das Bild ist nicht freigestellt, sein Hintergrund ist exakt #F1F0EC, deshalb verschmilzt es mit der Flaeche. Es liegt hinter dem Text, rechts unten an der Satzspiegelkante (Marcel, 25.09.: "in den Hintergrund, dann etwas groesser"). Die Maske laesst die Raender auslaufen, das Motiv ist angeschnitten. Links, wo es hinter dem Text liegt, ist es auf 14 bis 28 % Deckkraft zurueckgenommen, das Gebaeude stand sonst voll hinter der Ueberschrift. Unter 800 px ausgeblendet, dort laege es ganz hinter dem Text. */ .hero-illu-bg{position:relative;overflow:hidden} .hero-illu-bg>.wrap{position:relative;z-index:1} .hero-illu{position:absolute;z-index:0;bottom:0;right:calc((100% - min(var(--max),100% - 96px)) / 2);width:min(60%,780px);height:auto;pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 82%,transparent 100%),linear-gradient(to right,rgba(0,0,0,.14) 0,rgba(0,0,0,.28) 32%,#000 62%,#000 92%,transparent 100%);-webkit-mask-composite:source-in; mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 82%,transparent 100%),linear-gradient(to right,rgba(0,0,0,.14) 0,rgba(0,0,0,.28) 32%,#000 62%,#000 92%,transparent 100%);mask-composite:intersect} @media(max-width:800px){.hero-illu{display:none}} /* Foto-Hintergrund im Stil der GbR-Teams-Hintergruende (/unternehmen/, ab 25.09.2026). Festgelegt am 28.09.2026 auf Variante A (Regal), Variante B (Besprechungsecke) und ihr Umschalter sind entfernt. Rohbilder: 02_Bilder/Hintergruende/website-hero/ der GZCC-Wissensbasis. Mobil rutscht die Deko hinter den Text, dort haelt ein heller Schleier von links den Text lesbar. */ .hero-foto{--hg:url(hintergruende/unternehmen-a-regal.webp);background:var(--hg) right center/cover no-repeat;padding-block:110px} @media(max-width:800px){.hero-foto{padding-block:56px 48px;background:linear-gradient(to right,rgba(240,236,229,.94) 0,rgba(240,236,229,.86) 60%,rgba(240,236,229,.35) 100%),var(--hg) 78% center/cover no-repeat}} /* Kontaktblock mit Foto (25.09.2026): rechts das Foto von Silke und Marcel, ein quadratischer Ausschnitt aus dem Startseiten-Hero (assets/ kontakt-silke-marcel.webp, 1040 px, 55 KB). Rahmen sind die zwei Lime-Winkel aus dem GbR-Logo, oben links und unten rechts. Genutzt auf /unternehmen/ mit Unterseiten und autoren.htm, nicht auf der Startseite (dort steht das Formular). Unter 900 px steht das Foto unter dem Text. */ .contact-mit-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:80px;align-items:center} .contact-foto{position:relative;margin:0} .contact-foto img{display:block;width:100%;height:auto;border-radius:4px} .contact-foto::before,.contact-foto::after{content:"";position:absolute;width:46px;height:46px;pointer-events:none} .contact-foto::before{top:-14px;left:-14px;border-top:3px solid var(--lime);border-left:3px solid var(--lime)} .contact-foto::after{bottom:-14px;right:-14px;border-bottom:3px solid var(--lime);border-right:3px solid var(--lime)} @media(max-width:900px){.contact-mit-foto{grid-template-columns:1fr;gap:52px}.contact-foto{max-width:380px;margin-inline:14px}}