/* Hari Benkson – Der Reeder und die Reise der Seele
   Schriften nach Vorgabe: Bodoni ausschließlich für den Namenszug,
   Garamond für Fließtext und Überschriften. */

:root{
  --navy:#032949;
  --navy-deep:#032949;
  --navy-line:rgba(255,255,255,0.38);
  --blue:#009fdf;
  --red:#d0211c;
  --paper:#ffffff;
  --paper-warm:#ffffff;
  --ink:#14212e;
  --ink-soft:#46545f;
  --rule:#c8d0d8;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'EB Garamond', Garamond, 'Adobe Garamond Pro', Georgia, serif;
  font-size:clamp(17px,1.2vw,20px);
  line-height:1.22;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%;}
a{color:inherit;}

.wrap{max-width:1600px; margin:0 auto; padding:0 clamp(1.25rem,4.1vw,4.1rem);}

/* ---------------- Kopfleiste ---------------- */
.topbar{
  background:var(--navy-deep);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:0.8rem clamp(1rem,3vw,2.5rem);
  max-width:1600px; margin:0 auto;
}

/* Der Namenszug – einzige Stelle mit Bodoni */
.wordmark{
  font-family:'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  font-weight:500;
  font-size:clamp(1.4rem,3.05vw,3.05rem);
  letter-spacing:0.01em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}
.wordmark span{padding-left:0.34em;}

.mainnav ul{display:flex; gap:0.95rem; list-style:none; margin:0; padding:0;}
.mainnav a{
  display:block;
  font-family:'EB Garamond', Garamond, Georgia, serif;
  font-size:0.88rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:uppercase;
  text-decoration:none;
  color:#fff;
  padding:1rem 1.35rem;
  border:1px solid #fff;
  transition:background-color .18s ease, border-color .18s ease;
}
.mainnav a:hover, .mainnav a:focus-visible{
  background:var(--blue); border-color:var(--blue); outline:none;
}
.mainnav a[aria-current="page"]{background:var(--blue); border-color:var(--blue);}

.navtoggle{
  display:none;
  background:none; border:1px solid var(--navy-line); color:#fff;
  font-family:'EB Garamond', Georgia, serif; font-weight:600;
  letter-spacing:0.11em; text-transform:uppercase;
  font-size:0.85rem; padding:0.55rem 0.95rem; cursor:pointer;
}

/* ---------------- Kopfbild ---------------- */
.hero{background:var(--navy);}
.hero-grid{display:grid; grid-template-columns:51.7fr 48.3fr; align-items:stretch;}
/* Breite führt, nie die Höhe: sonst bläht das Seitenverhältnis das Bild über
   seine Spalte hinaus, sobald die Textspalte höher als das Quadrat wird. */
.hero-art{
  position:relative; min-width:0;
  width:100%; aspect-ratio:1/1; min-height:100%;
  background:#c9d5dd; overflow:hidden;
}
.hero-art img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* weicher Übergang vom Bild in die blaue Fläche */
.hero-art::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(3,41,73,0) 55%,
    rgba(3,41,73,0.55) 82%,
    var(--navy) 100%);
  pointer-events:none;
}
.hero-panel{
  position:relative; z-index:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.9rem;
  padding:clamp(2rem,4vw,3.25rem) clamp(1.25rem,3vw,3rem);
  text-align:center;
  color:#fff;
}
.mottos{display:flex; flex-direction:column; gap:0.9rem;}
.motto{
  font-style:italic;
  font-size:clamp(1.08rem,1.6vw,1.32rem);
  line-height:1.4;
  margin:0;
}
.motto cite{
  display:block; font-style:normal;
  font-size:0.82rem; letter-spacing:0.02em;
  color:#c3d4e0; margin-top:0.3rem;
}
.motto-sep{color:#5f7c93; letter-spacing:0.5em; font-size:0.85rem;}

.hero-title{
  font-size:clamp(1.9rem,4vw,3rem);
  font-weight:500; line-height:1.1; margin:0;
  text-wrap:balance;
}
.hero-title em{display:block; font-size:0.62em; font-weight:400;}

.cover-block{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding-left:56px;
}
.badge{
  position:absolute; left:0; top:50%;
  margin-top:-52px; z-index:2;
  width:104px; height:104px;
  background:var(--red);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-style:italic; font-weight:600;
  font-size:1.16rem; line-height:1.15;
  color:#fff;
  transform:rotate(-6deg);
}
.cover{
  width:clamp(150px,17vw,215px);
  transform:rotate(3.5deg);
  box-shadow:0 8px 24px rgba(0,0,0,0.20), 0 0 18px rgba(255,255,255,0.045);
}
.cover-sm{width:clamp(90px,8vw,110px); box-shadow:0 5px 16px rgba(0,0,0,0.18), 0 0 12px rgba(255,255,255,0.04);}

.availability{
  text-align:left;
  display:flex; flex-direction:column; gap:0.8rem;
  font-size:0.95rem; line-height:1.45;
}
.availability h2{font-size:1.02rem; font-weight:600; margin:0 0 0.15rem;}
.availability dl{margin:0;}
.availability dt{font-weight:600; font-size:0.9rem;}
.availability dd{margin:0; color:#cfdde7; font-variant-numeric:tabular-nums;}

/* Kopfbereich der Autor-Seite */
.dedication-hero{display:flex; flex-direction:column; align-items:center; gap:0.9rem;}
.dedication-hero .flag{width:92px; background:#fff; padding:2px;}
.dedication-hero .intro{margin:0; font-size:1rem; color:#cfdde7; line-height:1.45;}
.dedication-hero h2{
  font-style:italic; font-weight:600;
  font-size:clamp(1.2rem,2.2vw,1.55rem); margin:0.2rem 0 0;
}
.dedication-hero .dates{font-size:0.88rem; color:#c3d4e0; font-variant-numeric:tabular-nums;}
.dedication-hero .verse{
  font-style:italic; font-size:1.05rem; line-height:1.5;
  margin:0.9rem 0 0; max-width:36ch;
}
.dedication-hero .verse footer{
  font-style:normal; font-size:0.82rem; color:#c3d4e0; margin-top:0.6rem;
}

/* ---------------- Abschnitte ---------------- */
section{padding:clamp(2rem,4.2vw,4.2rem) 0 clamp(3rem,5.2vw,5.2rem);}
section.tinted{background:var(--paper-warm);}
section.navy{background:var(--navy); color:#fff;}

.sec-head{
  display:flex; align-items:center; gap:clamp(1rem,1.6vw,1.6rem);
  flex-wrap:wrap; margin-bottom:1.9rem;
}
.tag{
  flex:none; display:inline-block;
  background:var(--navy); color:#fff;
  font-size:0.85rem; font-weight:600;
  letter-spacing:0; text-transform:uppercase;
  padding:1.05rem 1.35rem;
}
section.navy .tag{background:var(--blue);}
.sec-head h1{
  font-size:clamp(1.45rem,2.05vw,2.1rem);
  font-weight:600; line-height:1.15; margin:0;
  text-wrap:balance;
}
.sec-head h1{color:var(--navy);}
.sec-head h1 em{font-weight:600;}

.prose p{margin:0 0 1.15rem;}
.prose p:last-child{margin-bottom:0;}
.cols-2{column-count:2; column-gap:1.1rem;}
.cols-2 p{orphans:2; widows:2;}
.lead-quote, .lead-quote em{font-style:normal;}

/* ---------------- Buch ---------------- */
.quotes-row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,3vw,2.5rem);
  margin-top:2.25rem; padding-top:1.75rem;
  border-top:1px solid var(--rule);
}
.pull{margin:0;}
.pull p{font-style:italic; font-size:clamp(1.1rem,2vw,1.35rem); line-height:1.35; margin:0 0 0.5rem;}
.pull cite{font-style:normal; font-size:0.88rem; color:var(--ink-soft);}

.voices{
  margin-top:2.25rem;
  background:var(--navy); color:#fff;
  padding:clamp(1.75rem,4vw,2.75rem) clamp(1.25rem,3vw,2rem);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.voices p{font-style:italic; font-size:clamp(1.08rem,2vw,1.3rem); line-height:1.4; margin:0; max-width:34ch;}
.voices .sep{color:#5f7c93; letter-spacing:0.45em; font-size:0.85rem;}

/* ---------------- Autor ---------------- */
.autor-grid{display:grid; grid-template-columns:1fr 22%; gap:clamp(1.75rem,4vw,3rem); align-items:start;}
.autor-photo{width:100%; box-shadow:none;}

/* ---------------- Trailer ---------------- */
.video-link{
  position:relative; display:block; text-decoration:none;
  aspect-ratio:16/9; overflow:hidden; background:#000;
  border:1px solid rgba(255,255,255,0.25);
  max-width:860px;
}
.video-link img{width:100%; height:100%; object-fit:cover; opacity:.62; transition:opacity .2s ease;}
.video-link:hover img{opacity:.78;}
.video-cta{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.9rem;}
.play{
  width:78px; height:78px; border-radius:50%;
  background:var(--red);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  transition:transform .18s ease;
}
.video-link:hover .play{transform:scale(1.07);}
.play svg{width:27px; height:27px; fill:#fff; margin-left:5px;}
.video-cta span{
  font-weight:600; letter-spacing:0.12em; text-transform:uppercase; font-size:0.85rem;
  color:#fff; background:rgba(8,32,58,.72); padding:0.42rem 1rem;
}
.filmstrip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0.6rem;
  margin-top:1.75rem; padding:0.6rem;
  background:#dedede; border:1px solid #222;
}
.filmstrip figure{margin:0;}
.filmstrip img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.filmstrip figcaption{font-size:0.78rem; color:#bcd0de; margin-top:0.35rem; font-variant-numeric:tabular-nums;}

/* ---------------- Hintergrund ---------------- */
.article-grid{display:grid; grid-template-columns:1fr 260px; gap:clamp(1.75rem,4vw,3rem); align-items:start;}
/* ohne min-width:0 wächst die Rasterspalte auf die Mindestbreite der Tabelle
   und schiebt die ganze Seite seitlich auf, statt sie scrollen zu lassen */
.article-grid > *{min-width:0;}
.table-wrap{min-width:0;}
.article .subtitle{
  font-size:clamp(1.1rem,1.9vw,1.25rem); font-weight:600; line-height:1.4;
  color:var(--navy); margin:0 0 1.9rem;
}
.article h2{font-size:1.22rem; font-weight:600; color:var(--navy); margin:2.1rem 0 0.75rem;}
.article h3{font-style:italic; font-size:1.1rem; font-weight:600; margin:1.5rem 0 0.5rem;}
.article p{margin:0 0 1.1rem;}

.download-card{position:sticky; top:1.5rem; text-align:center;}
.download-card img{width:100%; border:1px solid var(--rule); box-shadow:0 6px 18px rgba(12,43,72,0.14);}
.download-card a{
  display:inline-block; margin-top:0.8rem;
  color:var(--red); font-weight:600; font-size:0.98rem;
  letter-spacing:0.02em; text-decoration:none;
  border-bottom:1px solid var(--red);
}
.download-card a:hover{color:#a3170f; border-color:#a3170f;}
.download-card .alt{display:block; margin-top:0.7rem; font-size:0.85rem; color:var(--ink-soft);}
.download-card .alt a{font-size:0.85rem; color:var(--ink-soft); border-bottom-color:var(--rule); margin-top:0;}

.table-wrap{overflow-x:auto; margin:1.5rem 0 1.75rem;}
table{border-collapse:collapse; width:100%; min-width:660px; font-size:0.95rem;}
caption{caption-side:bottom; text-align:left; font-size:0.85rem; color:var(--ink-soft); padding-top:0.6rem;}
th, td{border:1px solid var(--rule); padding:0.6rem 0.7rem; vertical-align:top; text-align:left;}
thead th{background:#e8edf2; font-weight:600; font-size:0.9rem;}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap;}
.model-figure{margin:1.75rem 0; max-width:420px;}
.model-figure img{width:100%; border:1px solid var(--rule);}
.model-figure figcaption{font-size:0.88rem; color:var(--ink-soft); margin-top:0.5rem; line-height:1.45;}
.imprint-note{
  margin-top:2.25rem; padding-top:1.1rem; border-top:1px solid var(--rule);
  font-size:0.88rem; color:var(--ink-soft); line-height:1.55;
}

/* ---------------- Kontakt ---------------- */
.kontakt-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(1.75rem,4vw,3rem); align-items:start;}
.contact-mail{
  font-size:clamp(1.2rem,2.3vw,1.55rem);
  text-decoration:none; border-bottom:1px solid var(--blue);
  display:inline-block; margin-top:0.4rem;
}
.partner{border:1px solid var(--rule); background:var(--paper); padding:1.4rem 1.5rem;}
.partner .label{
  font-size:0.82rem; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
  display:block; margin-bottom:0.6rem;
}
.partner a{display:block; max-width:300px; border-bottom:0; line-height:0;}
.partner-logo{width:100%; max-width:300px; height:auto; margin-top:0.55rem;}

/* ---------------- Fußzeile ---------------- */
footer.site{
  background:var(--navy-deep); color:#fff;
  padding:1.9rem 0 2.5rem; font-size:1rem;
}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:0.6rem 1.5rem; align-items:center; justify-content:flex-start;}
footer.site a{text-decoration:none; letter-spacing:0; text-transform:uppercase; font-size:1rem;}
footer.site a:hover{color:#fff;}
.footer-links{display:flex; gap:0.8rem;}
.footer-links a::after{content:"|"; display:inline-block; margin-left:0.8rem;}

/* Der zweispaltige Kopfbereich braucht Platz; darunter lieber untereinander,
   sonst wird die Textspalte zu schmal für Zitate und ISBN-Angaben. */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{min-height:0;}
  .hero-art::after{
    background:linear-gradient(180deg, rgba(3,41,73,0) 60%, rgba(3,41,73,0.6) 85%, var(--navy) 100%);
  }
}

@media (max-width:900px){
  .autor-grid, .kontakt-grid, .article-grid{grid-template-columns:1fr;}
  .autor-grid .autor-photo{max-width:320px;}
  .cols-2{column-count:1;}
  .quotes-row{grid-template-columns:1fr;}
  .filmstrip{grid-template-columns:repeat(2,1fr);}
  .download-card{position:static; max-width:280px;}
}
/* Die fünf Navigationskästen brauchen rund 820 px; darunter aufs Menü umstellen,
   sonst schiebt die Leiste die Seite seitlich auf. */
@media (max-width:960px){
  .navtoggle{display:block;}
  .mainnav{
    display:none;
    position:absolute; left:0; right:0; top:100%; z-index:50;
    background:var(--navy-deep);
    border-bottom:1px solid rgba(255,255,255,0.12);
    padding:0.75rem clamp(1rem,3vw,2.5rem) 1.1rem;
  }
  .mainnav.open{display:block;}
  .mainnav ul{flex-direction:column; gap:0.4rem;}
  .topbar-inner{position:relative;}
}

@media (max-width:720px){
  .cover-block{padding-left:40px;}
  .badge{width:84px; height:84px; margin-top:-42px; font-size:1rem;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

/* Proportionen und seitenabhängige Anordnung aus BENKSON_INTERNET (3).pdf.
   Die vorhandene Überlaufsicherung des Kopfbildes bleibt erhalten. */
.trailer-intro{margin-bottom:2.75rem;}
.trailer-intro a{overflow-wrap:anywhere; color:#30378f; font-weight:600;}
.page-kontakt .sec-head{column-gap:6.4vw;}
.badge{background:#fff; transform:none; isolation:isolate;}
.badge::before{content:""; position:absolute; inset:3px; background:#d51016; clip-path:inherit; z-index:-1;}
@media(min-width:1101px){
  .hero-panel{padding:0; display:block;}
  .page-index .mottos{position:absolute; top:5%; left:4%; right:4%; gap:0.7rem;}
  .motto{font-weight:600; font-size:clamp(1rem,1.45vw,1.5rem);}
  .motto cite{font-size:clamp(.8rem,1vw,1rem); font-weight:400; color:#fff;}
  .motto-sep{color:#fff; letter-spacing:0;}
  .page-index .cover-block, .page-kontakt .cover-block{position:absolute; right:9%; bottom:4%; padding:0; width:43%;}
  .page-kontakt .cover-block{width:49%; right:8%; bottom:5%;}
  .cover{width:100%; transform:rotate(5deg);}
  .badge{width:9.6vw; height:9.2vw; max-width:154px; max-height:147px; font-size:clamp(1.25rem,2.05vw,2.1rem); left:-32%; top:4%; margin:0;}
  .page-kontakt .badge{left:-37%; top:-8%;}
  .availability{position:absolute; bottom:9%; left:11.3%; width:31%; gap:1.25rem; font-size:clamp(.8rem,1vw,1rem); line-height:1.22; font-weight:600;}
  .availability h2{font-size:clamp(1rem,1.4vw,1.4rem); margin:0 0 1rem;}
  .availability dt{font-size:inherit;}
  .availability dd{color:#fff;}
  .dedication-hero{position:absolute; inset:13% 5% 12%; justify-content:space-between; gap:0;}
  .dedication-hero .flag{width:8vw; padding:0;}
  .dedication-hero .intro{font-size:1.6vw; color:#fff; margin-top:1.5rem;}
  .dedication-hero h2{font-size:2vw;}
  .dedication-hero .dates{font-size:1.1vw; color:#fff;}
  .dedication-hero .verse{max-width:none; font-size:1.6vw; line-height:1.27;}
  .dedication-hero .verse footer{font-size:1.15vw; color:#fff;}
  .page-trailer .video-link{position:absolute; width:70%; top:8%; left:17%;}
  .page-trailer .cover-block{position:absolute; left:31%; bottom:10%; width:12%; padding:0;}
  .page-trailer .badge{left:-200%; top:0;}
  .page-trailer .availability{left:46%; bottom:9%; width:50%;}
  .page-trailer .availability h2, .page-hintergrund .availability h2{display:none;}
  /* Gemeinsames Raster statt unabhängig platzierter Buch-/Preisblöcke. */
  .page-hintergrund .hero-panel{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    align-content:center;
    align-items:center;
    justify-items:center;
    gap:clamp(2.5rem,4vw,5rem) clamp(1.5rem,2.5vw,3rem);
    padding:clamp(2rem,4vw,5rem);
  }
  .page-hintergrund .hero-title{
    position:static; grid-column:1 / -1;
    font-size:clamp(2.5rem,4.3vw,5rem); font-weight:600;
    width:100%;
  }
  .page-hintergrund .hero-title em{margin-top:0.3em;}
  .page-hintergrund .cover-block{
    position:relative; width:min(100%,190px); padding:0;
  }
  .page-hintergrund .cover{width:100%; transform:none;}
  .page-hintergrund .badge{
    left:-18%; top:-8%; margin:0;
    width:clamp(64px,5.2vw,88px); height:clamp(64px,5.2vw,88px);
    font-size:clamp(.9rem,1.2vw,1.2rem);
  }
  .page-hintergrund .availability{
    position:static; width:100%; min-width:0;
    font-size:clamp(.9rem,1.1vw,1.1rem); line-height:1.45;
    gap:1.5rem; overflow-wrap:anywhere;
  }
  .page-hintergrund .availability dd{font-weight:400;}
  .page-hintergrund .availability dt{margin-bottom:0.25rem;}
  .page-autor section{padding-top:2.25rem; padding-bottom:2.25rem;}
}
@media(max-width:1100px){
  .cover{width:clamp(150px,27vw,280px);}
  .hero-panel .video-link{width:100%;}
  .page-kontakt .sec-head{gap:1.25rem;}
}

/* Kontakt-Partner bleibt unabhängig vom zweispaltigen Text sichtbar. */
.contact-partner{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--rule);}
.contact-partner a{display:block; width:min(100%,300px);}
.contact-partner .partner-logo{margin:0;}
.contact-partner a:focus-visible{outline:2px solid var(--blue); outline-offset:6px;}
.page-autor .sec-head h1{font-family:'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif; font-weight:500;}

/* Rechtliche Informationen: ohne Werbekopf, mit gut lesbarer Textbreite. */
.page-legal{min-height:100vh; display:flex; flex-direction:column;}
.legal-content{width:100%; max-width:960px; padding-top:3rem; padding-bottom:4rem; flex:1; line-height:1.55; overflow-wrap:anywhere;}
.legal-content h1{font-size:clamp(2rem,5vw,3rem); color:var(--navy); margin:0 0 2rem;}
.legal-content h2{font-size:1.4rem; color:var(--navy); margin:2rem 0 0.65rem;}
.legal-content p{margin:0 0 1rem;}
.legal-content a{ text-underline-offset:0.15em;}
.contact-text{max-width:46rem;}
.contact-text .contact-welcome{font-size:1.15em; color:var(--navy);}
.contact-text .contact-mail{font-size:inherit; display:inline; margin:0;}
.contact-topics{margin:0; padding-left:1.2rem;}
.contact-topics li{margin:0 0 0.75rem;}
.contact-topics li:last-child{margin-bottom:0;}