:root{
  --navy:#101f33;
  --ink:#15263b;
  --blue:#244e78;
  --gold:#e0b477;
  --paper:#f5f7f9;
  --line:#d9dfe5;
  --muted:#546273;
  --white:#fff}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:110px}
body{
  margin:0;
  color:var(--ink);
  background:white;
  font:1rem/1.65 'Segoe UI',Arial,sans-serif}
a{
  color:inherit;
  text-decoration:none}
button,a{
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid #b67b32;
  outline-offset:6px}
a:hover{
  text-decoration:underline;
  text-underline-offset:5px}
p{
  margin:0 0 1.3rem}
h1,h2,h3{
  line-height:1.13;
  margin:0;
  font-weight:400}
h1,h2{
  font-family:Georgia,'Times New Roman',serif}
h1{
  font-size:clamp(3rem,5.3vw,5.6rem);
  letter-spacing:-.04em}
h1 em{
  color:var(--gold);
  font-weight:400}
h2{
  font-size:clamp(2.2rem,3.5vw,3.8rem);
  letter-spacing:-.035em}
h3{
  font-size:1.6rem;
  line-height:1.3}
img{
  max-width:100%;
  height:auto;
  display:block}
.wrap{
  width:min(1240px,88%);
  margin:auto}
.header{
  padding:22px 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:#fff}
.brand{
  font-family:Georgia,serif;
  font-weight:bold;
  font-size:2.2rem;
  letter-spacing:-.07em;
  line-height:.9;
  white-space:nowrap}
.brand span{
  display:block;
  font: .75rem/1.8 'Segoe UI',Arial,sans-serif;
  letter-spacing:.36em;
  text-align:right;
  margin-top:6px}
.header nav{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:.9rem}
.nav-cta{
  border-bottom:1px solid var(--ink);
  padding:8px 0}
.nav-cta span{
  margin-left:15px}
.hero{
  background:var(--navy);
  color:#fff}
.hero-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:8%;
  padding:85px 0 65px;
  align-items:center}
.eyebrow{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  margin-bottom:28px}
.hero .eyebrow{
  color:var(--gold)}
.lead{
  font-size:1.16rem;
  max-width:600px;
  line-height:1.7;
  margin-top:28px;
  color:#d1d9e3}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:35px;
  background:var(--gold);
  color:var(--navy);
  padding:16px 24px;
  font-weight:600;
  line-height:1.4}
.button:hover{
  background:#efca99;
  text-decoration:none}
.hero-meta{
  font-size:.85rem;
  color:#b7c3d2;
  margin:20px 0 0}
.thought{
  border:1px solid #647184;
  padding:38px;
  transform:translateY(8px)}
.thought-label{
  font-size:.8rem;
  letter-spacing:.13em;
  color:#b7c3d2}
.thought>p{
  font-family:Georgia,serif;
  font-size:clamp(2rem,3vw,3.3rem);
  line-height:1.22;
  margin:30px 0;
  color:#fff}
.thought-rule{
  width:55px;
  height:2px;
  background:var(--gold);
  margin:30px 0}
.thought h2{
  font-size:2rem;
  line-height:1.25;
  margin-bottom:18px;
  color:var(--gold)}
.thought>span:last-child{
  color:#b7c3d2;
  font-size:.9rem}
.hero-bottom{
  border-top:1px solid #3a485b;
  display:flex;
  justify-content:space-between;
  padding:22px 0;
  font-size:.85rem;
  color:#b7c3d2}
.skip{
  position:absolute;
  left:15px;
  top:-100px;
  background:white;
  padding:10px;
  z-index:10}
.skip:focus{
  top:10px}
footer{
  padding:30px 0;
  font-size:.85rem}
@media(max-width:950px){
  .header{
    align-items:flex-start}
  .header nav{
    gap:16px;
    flex-wrap:wrap;
    justify-content:flex-end}
  .hero-grid{
    gap:35px}
  .thought{
    padding:26px}
  }
@media(max-width:700px){
  html{
    scroll-padding-top:25px}
  .header{
    display:block;
    padding:22px 6%}
  .brand{
    display:inline-block}
  .header nav{
    justify-content:flex-start;
    gap:12px 20px;
    margin-top:22px;
    font-size:.9rem}
  .nav-cta{
    padding:0}
  .hero-grid{
    grid-template-columns:1fr;
    padding:55px 0 40px}
  .thought{
    transform:none;
    margin-top:8px}
  .thought>p br{
    display:none}
  .thought>p{
    font-size:2.2rem}
  .thought h2 br{
    display:none}
  .hero-bottom{
    display:block}
  .hero-bottom a{
    display:block;
    margin-top:10px}
  .button{
    gap:18px;
    padding:16px 18px}
  .wrap{
    width:88%}
  }
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto}
  }
.section{
  padding-top:100px;
  padding-bottom:100px}
.section-intro{
  max-width:850px;
  margin-bottom:52px}
.section-intro>p:last-child{
  max-width:710px;
  font-size:1.13rem;
  color:var(--muted);
  margin:25px 0 0}
.section .eyebrow{
  color:var(--blue);
  margin-bottom:22px}
.topic-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px}
.number{
  display:block;
  font-size:.78rem;
  letter-spacing:.1em;
  font-weight:600;
  margin-bottom:24px;
  color:var(--blue)}
.topic{
  border-top:2px solid var(--ink);
  padding-top:22px}
.topic h3{
  font-family:Georgia,serif;
  font-size:2rem;
  line-height:1.2;
  margin-bottom:22px}
.topic p{
  color:var(--muted)}
details>summary{
  cursor:pointer;
  list-style:none}
details>summary::-webkit-details-marker{
  display:none}
.topic summary{
  font-size:.9rem;
  font-weight:600;
  line-height:1.5;
  padding:15px 22px 15px 0;
  border-top:1px solid var(--line);
  position:relative}
.topic summary:after,.faq summary:after{
  content:'+';
  position:absolute;
  right:0;
  top:12px;
  font-size:1.3rem;
  font-weight:400}
details[open]>summary:after{
  content:'−'}
.topic details p{
  font-size:.95rem;
  padding-top:8px}
.formats{
  background:var(--paper)}
.format-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.format{
  background:white;
  border:1px solid var(--line);
  padding:45px}
.format h3{
  font-family:Georgia,serif;
  font-size:2.4rem;
  margin-bottom:25px;
  line-height:1.14}
.format p{
  color:var(--muted)}
ul{
  padding-left:20px}
li{
  padding-left:5px;
  margin-bottom:9px}
.format ul{
  padding-bottom:18px}
.format .format-meta{
  font-size:.9rem;
  border-top:1px solid var(--line);
  padding-top:23px}
.format-dark{
  background:var(--navy);
  border-color:var(--navy);
  color:white}
.format-dark .number,.format-dark .text-link{
  color:var(--gold)}
.format-dark p{
  color:#cad4e0}
.format-dark .format-meta{
  border-color:#48566a}
.text-link{
  display:inline-block;
  font-weight:600;
  border-bottom:1px solid currentColor;
  padding-bottom:5px;
  margin-top:8px}
.text-link:hover{
  text-decoration:none;
  opacity:.8}
.split-heading{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  margin-bottom:55px;
  align-items:end}
.split-heading>p{
  color:var(--muted);
  font-size:1.12rem;
  margin-bottom:0}
.talks{
  border-top:1px solid var(--ink)}
.talks details{
  border-bottom:1px solid var(--line)}
.talks summary{
  display:grid;
  grid-template-columns:70px 1fr 32px;
  gap:15px;
  padding:30px 0;
  align-items:center}
.talks summary>span:first-child{
  align-self:start;
  padding-top:5px;
  font-size:.9rem;
  color:var(--muted)}
.talks h3{
  font-size:1.75rem}
.plus{
  font-size:1.8rem;
  transition:transform .2s}
.talks details[open] .plus{
  transform:rotate(45deg)}
.talk-body{
  padding:0 50px 35px 85px;
  max-width:870px}
.talk-body p{
  color:var(--muted)}
.workshop-section{
  background:var(--navy);
  color:white}
.workshop-section .eyebrow,.workshop-section .number{
  color:var(--gold)}
.workshop-section .split-heading>p,.method-grid p{
  color:#cad4e0}
.method-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px}
.method-grid article{
  padding-top:25px;
  border-top:1px solid #536072}
.method-grid h3{
  margin-bottom:20px}
.method-grid .number{
  font-size:1.5rem;
  font-family:Georgia,serif}
.result{
  border-top:1px solid #536072;
  padding-top:35px;
  margin-top:40px;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:0 50px;
  align-items:start}
.result>p:nth-child(2){
  font-family:Georgia,serif;
  font-size:1.85rem;
  line-height:1.4}
.result .button{
  grid-column:2;
  justify-self:start}
.about{
  display:grid;
  grid-template-columns:.8fr 1.5fr;
  gap:90px;
  align-items:center}
.portrait{
  max-width:325px;
  background:var(--navy)}
.portrait img{
  width:100%;
  height:auto}
.portrait>span{
  display:block;
  color:#e7edf4;
  padding:20px 24px;
  font-size:.78rem;
  letter-spacing:.05em;
  line-height:1.8}
.about h2{
  margin-bottom:28px}
.about p{
  color:var(--muted)}
.about .intro-copy{
  font-size:1.18rem;
  color:var(--ink)}
.references{
  background:var(--paper);
  padding:38px 0 40px}
.references .eyebrow{
  font-size:.8rem;
  color:var(--muted);
  margin-bottom:25px}
.reference-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px}
.reference-list>span{
  font-size:1.6rem;
  line-height:1.3;
  font-weight:600}
.reference-list small{
  display:block;
  font-size:.82rem;
  color:var(--muted);
  font-weight:400;
  margin-top:9px}
.faq{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:80px}
.faq details{
  border-bottom:1px solid var(--line)}
.faq details:first-child{
  border-top:1px solid var(--line)}
.faq summary{
  padding:23px 30px 23px 0;
  position:relative;
  font-weight:600}
.faq summary:after{
  top:19px}
.faq details p{
  color:var(--muted);
  padding-right:25px}
.contact{
  background:var(--navy);
  color:#fff}
.contact .eyebrow{
  color:var(--gold)}
.contact h2 em{
  color:var(--gold);
  font-weight:400}
.contact-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:center}
.contact-grid>div>p:last-child{
  color:#cad4e0;
  margin-top:25px;
  max-width:570px}
.contact-box{
  border-left:1px solid #536072;
  padding-left:50px}
.contact-box h3{
  font-family:Georgia,serif;
  font-size:2rem;
  margin-bottom:22px}
.contact-box>p{
  color:#cad4e0}
.contact-mail,.phone{
  display:block;
  overflow-wrap:anywhere;
  margin-top:24px}
.phone{
  font-size:1.4rem;
  margin-top:8px}
.small{
  font-size:.9rem}
.contact-box .small{
  max-width:300px}
footer{
  padding:50px 0 20px}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:start;
  padding-bottom:35px}
.footer-top>p{
  font-size:.9rem;
  color:var(--muted)}
.footer-top>a:last-child{
  overflow-wrap:anywhere}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.8rem;
  color:var(--muted)}
.footer-bottom nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap}
.subhero{
  background:var(--navy);
  color:white;
  padding:55px 0 60px}
.subhero a{
  font-size:.85rem;
  color:#cad4e0}
.subhero h1{
  font-size:clamp(2.5rem,5vw,4.5rem);
  margin:35px 0 25px;
  overflow-wrap:anywhere}
.subhero p{
  max-width:750px;
  color:#cad4e0;
  font-size:1.12rem}
.legal{
  max-width:850px;
  overflow-wrap:anywhere}
.legal h2{
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:1.65rem;
  margin:35px 0 18px;
  letter-spacing:0}
.legal h2:first-child{
  margin-top:0}
.legal h3{
  font-size:1.3rem;
  margin:28px 0 16px}
.legal a{
  text-decoration:underline;
  text-underline-offset:3px}
.books article{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:70px;
  align-items:center;
  padding:50px 0;
  border-bottom:1px solid var(--line)}
.books article:first-child{
  padding-top:0}
.books img{
  width:100%;
  height:330px;
  object-fit:contain}
.books h2{
  font-size:2.5rem;
  margin-bottom:24px}
.books article p{
  max-width:650px}
.books .small{
  color:var(--muted)}
@media(max-width:950px){
  .section{
    padding-top:70px;
    padding-bottom:70px}
  .topic-grid{
    gap:24px}
  .topic h3{
    font-size:1.75rem}
  .format{
    padding:30px}
  .format h3{
    font-size:2rem}
  .split-heading{
    gap:40px}
  .about{
    gap:40px}
  .faq{
    gap:40px}
  .contact-grid{
    gap:35px}
  .contact-box{
    padding-left:30px}
  .footer-top{
    flex-wrap:wrap}
  .footer-bottom{
    display:block}
  .footer-bottom nav{
    margin-top:15px}
  .books article{
    gap:35px;
    grid-template-columns:200px 1fr}
  }
@media(max-width:700px){
  .section{
    padding-top:60px;
    padding-bottom:60px}
  .section-intro{
    margin-bottom:35px}
  .topic-grid,.format-grid,.split-heading,.method-grid,.about,.faq,.contact-grid{
    grid-template-columns:1fr;
    gap:35px}
  .topic h3 br{
    display:none}
  .format{
    padding:28px}
  .split-heading{
    margin-bottom:35px}
  .talks summary{
    grid-template-columns:30px 1fr 22px;
    gap:10px;
    padding:24px 0}
  .talks h3{
    font-size:1.3rem}
  .talk-body{
    padding:0 0 25px 40px}
  .result{
    grid-template-columns:1fr;
    gap:0}
  .result .button{
    grid-column:1}
  .result>p:nth-child(2){
    font-size:1.6rem}
  .portrait{
    max-width:250px}
  .reference-list{
    grid-template-columns:1fr 1fr;
    gap:30px}
  .reference-list>span{
    font-size:1.3rem}
  .contact-box{
    border-left:0;
    border-top:1px solid #536072;
    padding:30px 0 0}
  .footer-top{
    display:grid;
    grid-template-columns:1fr;
    gap:22px}
  .footer-top .brand{
    justify-self:start}
  .books article{
    grid-template-columns:1fr;
    gap:30px}
  .books img{
    width:180px;
    height:245px}
  .books h2{
    font-size:2rem}
  }
@media print{
  .header nav,.button,.contact,.footer-top,.skip{
    display:none}
  .section{
    padding:25px 0}
  .hero,.workshop-section,.format-dark,.subhero{
    background:white;
    color:black}
  .hero .lead,.workshop-section p,.format-dark p,.subhero p{
    color:black}
  .thought{
    border-color:black}
  .hero-grid{
    padding:20px 0}
  .thought>p,.thought h2,h1 em{
    color:black}
  details{
    break-inside:avoid}
  a{
    color:black}
  .wrap{
    width:95%}
  }

/* Zweite Fassung: heller, näher am ursprünglichen Mayflower-Auftritt */
:root{--navy:#345675;--ink:#303944;--blue:#365c80;--gold:#365c80;--paper:#f4f6f8;--muted:#56616c;--line:#dbe2e7}
.header{padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}.brand{display:block;width:255px;flex-shrink:0;line-height:1}.brand img{width:100%;height:auto}.header nav{gap:23px}.hero{background:#f2f5f8;color:var(--ink)}.hero .eyebrow{color:var(--blue)}.lead,.hero-meta{color:var(--muted)}h1 em{color:var(--blue)}.hero-grid{grid-template-columns:1.25fr 1fr;gap:6%;padding-top:65px;padding-bottom:55px}h1{font-size:clamp(2.8rem,4.5vw,4.8rem)}.button{background:var(--blue);color:white}.button:hover{background:#274764}.hero-bottom{border-color:#d2dce5;color:var(--muted)}.hero-picture{margin:0;background:white;border:1px solid var(--line)}.hero-picture>img{width:100%;height:230px;object-fit:cover;object-position:65% center}.hero-picture figcaption{padding:28px 32px}.hero-picture h2{font-size:2.2rem;margin-bottom:15px}.hero-picture p{color:var(--muted);font-size:1rem;margin-bottom:0}.hero-picture .eyebrow{display:block;margin-bottom:15px;font-size:.78rem}.keynote-picture{margin:0 0 32px}.keynote-picture img{width:100%;height:auto}.format-dark{background:#eaf0f5;color:var(--ink);border:1px solid #d5e0e9}.format-dark .number,.format-dark .text-link{color:var(--blue)}.format-dark p{color:var(--muted)}.format-dark .format-meta{border-color:#c8d5df}.workshop-section{background:#edf2f6;color:var(--ink)}.workshop-section .eyebrow,.workshop-section .number{color:var(--blue)}.workshop-section .split-heading>p,.method-grid p{color:var(--muted)}.method-grid article,.result{border-color:#c5d3df}.contact{background:#e9eff5;color:var(--ink)}.contact .eyebrow,.contact h2 em{color:var(--blue)}.contact-grid>div>p:last-child,.contact-box>p{color:var(--muted)}.contact-box{border-color:#bbcad8}.subhero{background:#f1f5f8;color:var(--ink)}.subhero a,.subhero p{color:var(--muted)}.footer-top .brand{width:230px}.team-banner{margin-top:40px}.team-banner img{width:100%;height:auto}.team-profiles{display:grid;gap:55px}.team-person{display:grid;grid-template-columns:200px 1fr;gap:45px;padding-bottom:45px;border-bottom:1px solid var(--line);align-items:start}.team-person>img{width:200px;height:280px;object-fit:cover}.team-person h2{font-size:2.5rem;margin-bottom:22px}.team-person .eyebrow{margin-bottom:12px;font-size:.8rem}.team-person p{max-width:780px;color:var(--muted)}.team-contact{padding-top:60px}.team-contact h2{margin-bottom:20px}
@media(max-width:1100px){.header nav{gap:13px}.brand{width:220px}.header{gap:20px}.header nav{font-size:.85rem}}
@media(max-width:700px){.header .brand{width:235px}.header nav{font-size:.9rem;gap:12px 18px}.hero-grid{grid-template-columns:1fr;padding-top:45px}.hero-picture>img{height:200px}.hero-picture figcaption{padding:25px}.contact-box{border-color:#bbcad8}.team-person{grid-template-columns:1fr;gap:25px}.team-person>img{width:180px;height:252px}.team-person h2{font-size:2.1rem}.team-banner{width:100%;margin-top:0}.team-banner img{min-height:190px;object-fit:cover;object-position:70% center}}