/* ============================================================
   Hanse HVB — Unternehmensseite
   Hell, ruhig, typografisch. Marineblau als einzige Farbe.
   Fotos statt Animationen. Nichts bewegt sich außer dem Einblenden.
   ============================================================ */
:root{
  --paper:#ffffff;
  --paper-2:#f4f5f7;
  --paper-3:#e9ecf0;
  --ink:#141a22;
  --ink-2:#48525f;
  --ink-3:#7a848f;
  --line:#e3e6ea;
  --line-2:#cfd4da;
  --navy:#0f2b4c;
  --navy-2:#1a4170;
  --ok:#1f8a4c;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --wrap:1160px;
  --pad:28px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--paper);}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3,h4,h5,p,dl,dd,dt,ul,ol,figure{margin:0;}
button{font:inherit;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px;}
.skip-link{position:absolute; left:-999px; top:8px; z-index:200; background:var(--navy); color:#fff; padding:8px 14px;}
.skip-link:focus{left:12px;}

/* ---------- Typografie ---------- */
.eyebrow{display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500;}
.h1{font-family:var(--serif); font-weight:400; font-size:clamp(36px,4.4vw,58px); line-height:1.08; letter-spacing:-0.015em; color:var(--ink);}
.h2{font-family:var(--serif); font-weight:400; font-size:clamp(28px,3vw,40px); line-height:1.15; letter-spacing:-0.01em;}
.h3{font-size:19px; font-weight:600; line-height:1.3;}
.lead{font-size:clamp(18px,1.5vw,20px); line-height:1.6; color:var(--ink-2); max-width:600px;}
.prose p{color:var(--ink-2); max-width:620px;}
.prose p + p{margin-top:16px;}
.prose p.first{color:var(--ink); font-size:18.5px;}
.small{font-size:14px; line-height:1.55; color:var(--ink-3);}
.num{font-variant-numeric:tabular-nums;}

/* ---------- Schaltflächen ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 22px; border-radius:4px; font-size:15px; font-weight:500; white-space:nowrap; transition:background .25s ease, color .25s ease, border-color .25s ease;}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-2);}
.btn-line{border:1px solid var(--line-2); color:var(--ink);}
.btn-line:hover{border-color:var(--ink-3);}
.btn-sm{height:38px; padding:0 16px; font-size:14px;}
.arrow{color:var(--navy); font-weight:500; border-bottom:1px solid transparent; transition:border-color .2s;}
.arrow::after{content:"\2192"; margin-left:8px; display:inline-block; transition:transform .3s var(--ease);}
.arrow:hover{border-color:var(--navy);}
.arrow:hover::after{transform:translateX(4px);}

/* ---------- Kopf ---------- */
.masthead{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.masthead .wrap{display:flex; align-items:center; height:76px; gap:32px;}
.wordmark{display:flex; align-items:baseline; gap:10px; font-family:var(--serif); font-size:22px; color:var(--navy); letter-spacing:-0.01em;}
.wordmark small{font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);}
.mainnav{display:flex; gap:28px; margin-left:auto; font-size:15px; color:var(--ink-2);}
.mainnav a{white-space:nowrap; padding:4px 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;}
.mainnav a:hover{color:var(--ink); border-color:var(--ink);}
.masthead-actions{display:flex; align-items:center; gap:14px;}
.burger{display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:4px; background:none; cursor:pointer; position:relative;}
.burger span, .burger span::before, .burger span::after{content:""; position:absolute; left:12px; width:16px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease);}
.burger span{top:20px;}
.burger span::before{left:0; top:-5px;}
.burger span::after{left:0; top:5px;}
.masthead.open .burger span{background:transparent;}
.masthead.open .burger span::before{transform:translateY(5px) rotate(45deg);}
.masthead.open .burger span::after{transform:translateY(-5px) rotate(-45deg);}

/* ---------- Fotoplatzhalter ----------
   Jeder Platz zeigt, welches Foto dort hingehört. Liegt die Datei im
   Ordner, erscheint sie automatisch und der Hinweis verschwindet. */
.ph{position:relative; background:var(--paper-2); border:1px dashed var(--line-2); overflow:hidden; display:grid; place-items:center; text-align:center; padding:24px; color:var(--ink-3);}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}
.ph.has{border:0; background:none;}
.ph.has img{display:block;}
.ph.has .ph-label{display:none;}
.ph-label{font-size:12.5px; line-height:1.5; max-width:300px;}
.ph-label b{display:block; font-size:13px; color:var(--ink-2); margin-bottom:6px; font-weight:600;}
.ph-label i{display:block; width:28px; height:22px; margin:0 auto 12px; border:1.5px solid var(--line-2); border-radius:3px; position:relative;}
.ph-label i::after{content:""; position:absolute; left:8px; top:4px; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--line-2);}
.ph.r-3-2{aspect-ratio:3/2;}
.ph.r-4-3{aspect-ratio:4/3;}
.ph.r-3-4{aspect-ratio:3/4;}
.ph.r-21-9{aspect-ratio:21/9;}
.ph.r-16-9{aspect-ratio:16/9;}

/* ---------- Aufmacher ---------- */
.hero{padding:72px 0 88px; border-bottom:1px solid var(--line);}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;}
.hero .eyebrow{margin-bottom:24px;}
.hero .h1{margin-bottom:24px; max-width:620px;}
.hero .lead{margin-bottom:36px;}
.hero-actions{display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-bottom:44px;}
.facts{display:flex; flex-wrap:wrap; border-top:1px solid var(--line); margin:0;}
.facts div{padding:18px 32px 0 0; margin-right:32px; border-right:1px solid var(--line);}
.facts div:last-child{border-right:0; margin-right:0; padding-right:0;}
.facts dt{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px;}
.facts dd{font-size:17px; font-weight:500; color:var(--ink);}

/* ---------- Abschnitte ---------- */
.section{padding:104px 0;}
.section.alt{background:var(--paper-2);}
.section + .section:not(.alt){border-top:1px solid var(--line);}
.grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,2fr); gap:56px; align-items:start;}
.grid .eyebrow{position:sticky; top:100px;}
.section .h2{margin-bottom:24px; max-width:680px;}

/* Unternehmen: Text links, Person rechts */
.company{display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:start;}
.person{border-top:2px solid var(--navy); padding-top:20px;}
.person .ph{margin-bottom:18px; max-width:380px;}
.person .name{font-family:var(--serif); font-size:24px; color:var(--ink);}
.person .role{color:var(--ink-3); font-size:14px; margin:2px 0 12px;}
.person p{font-size:15px; color:var(--ink-2);}
.person a{display:inline-block; margin-top:10px; font-size:14px;}

/* Tätigkeit: drei Spalten + Foto */
.services{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:8px;}
.services li{padding-top:20px; border-top:1px solid var(--line-2);}
.services .n{display:block; font-size:12px; letter-spacing:.12em; color:var(--ink-3); margin-bottom:18px;}
.services h3{margin-bottom:10px;}
.services p{color:var(--ink-2); font-size:16px;}
.services-photo{margin-top:56px;}

/* Grundsätze */
.principles{display:grid; grid-template-columns:1fr 1fr; gap:32px 48px;}
.principles div{padding-top:18px; border-top:1px solid var(--line-2);}
.principles dt{font-weight:600; font-size:17px; margin-bottom:8px;}
.principles dd{color:var(--ink-2); font-size:16px;}

/* Zwischenbild in voller Breite */
.interlude{padding:0;}
.interlude .ph{aspect-ratio:21/8; border-left:0; border-right:0;}

/* Beiträge */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:8px;}
.post{display:block; padding-top:20px; border-top:1px solid var(--line-2);}
.post .meta{font-size:12.5px; color:var(--ink-3); margin-bottom:14px;}
.post h3{font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.25; margin-bottom:12px; transition:color .2s;}
.post:hover h3{color:var(--navy);}
.post p{color:var(--ink-2); font-size:15.5px; margin-bottom:14px;}

/* Partner */
.partner-row{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;}
.partner-mark{font-family:var(--serif); font-size:34px; color:var(--ink); white-space:nowrap;}
.partner-mark em{font-style:normal; color:var(--ink-3);}

/* Kontakt */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.contact-list{margin-top:32px; border-top:1px solid var(--line);}
.contact-list div{display:grid; grid-template-columns:120px 1fr; padding:16px 0; border-bottom:1px solid var(--line);}
.contact-list dt{color:var(--ink-3); font-size:14px;}
.contact-list dd{color:var(--ink);}
.contact-list a:hover{color:var(--navy); text-decoration:underline;}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line); background:var(--paper-2); padding:56px 0 36px; font-size:14px; color:var(--ink-3);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px;}
.foot h5{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; font-weight:500;}
.foot ul{list-style:none; padding:0;}
.foot li{margin-bottom:8px;}
.foot a:hover{color:var(--ink);}
.foot address{font-style:normal; line-height:1.8; margin-top:12px;}
.clocks{display:flex; gap:22px; flex-wrap:wrap; margin-top:16px; font-size:13px;}
.clock{display:flex; align-items:center; gap:8px;}
.clock .dot{width:6px; height:6px; border-radius:50%; background:var(--line-2);}
.clock .dot.open{background:var(--ok);}
.clock b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;}
.disclaimer{border-top:1px solid var(--line); padding:26px 0; font-size:13px; line-height:1.6; max-width:900px;}
.disclaimer p + p{margin-top:10px;}
.disclaimer b{color:var(--ink-2); font-weight:600;}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px;}
.foot-bottom nav{display:flex; gap:20px;}

/* ---------- Unterseiten (Beiträge, Rechtliches) ---------- */
.page{max-width:760px; padding:72px 0 96px;}
.page h1{font-family:var(--serif); font-weight:400; font-size:clamp(32px,3.6vw,46px); line-height:1.1; margin-bottom:12px;}
.page .updated, .legal .updated{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:44px;}
.page h2, .legal h2{font-family:var(--serif); font-weight:400; font-size:27px; margin:52px 0 14px; padding-top:24px; border-top:1px solid var(--line);}
.page p, .page li, .legal p, .legal li{color:var(--ink-2); font-size:17px;}
.page p + p, .legal p + p{margin-top:14px;}
.page ul, .legal ul{padding-left:20px; margin:14px 0;}
.legal{max-width:760px; padding:72px 0 96px;}
.legal h1{font-family:var(--serif); font-weight:400; font-size:44px; line-height:1.1; margin-bottom:12px;}
.legal address{font-style:normal; color:var(--ink); line-height:1.8;}
.legal a:not(.btn), .page a:not(.btn){color:var(--navy); text-decoration:underline;}
.legal .todo{display:none;}
.article{padding:44px 0; border-top:1px solid var(--line);}
.article:first-of-type{border-top:0; padding-top:0;}
.article h2{border-top:0; padding-top:0; margin-top:0;}
.article .meta{font-size:12.5px; color:var(--ink-3); margin-bottom:16px;}

/* ---------- Einblenden ---------- */
.js .rv{opacity:0; transform:translateY(10px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.js .rv.on{opacity:1; transform:none;}
.js .stagger > *{opacity:0; transform:translateY(10px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.js .stagger.on > *{opacity:1; transform:none;}
.js .stagger > *:nth-child(2){transition-delay:100ms;}
.js .stagger > *:nth-child(3){transition-delay:200ms;}
.js .stagger > *:nth-child(4){transition-delay:300ms;}

/* ---------- Anpassung ---------- */
@media (max-width:1040px){
  .mainnav{display:none;}
  .burger{display:block;}
  .masthead.open .mainnav{display:flex; flex-direction:column; gap:0; position:absolute; top:76px; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px var(--pad) 20px; margin:0;}
  .masthead.open .mainnav a{padding:14px 0; border-bottom:1px solid var(--line); font-size:16px;}
  .masthead-actions .btn{display:none;}
  .hero-grid, .company, .contact{grid-template-columns:1fr; gap:40px;}
  .grid{grid-template-columns:1fr; gap:24px;}
  .grid .eyebrow{position:static;}
  .services, .posts{grid-template-columns:1fr; gap:28px;}
  .principles{grid-template-columns:1fr;}
  .partner-row{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  :root{--pad:20px;}
  .section{padding:72px 0;}
  .hero{padding:48px 0 64px;}
  .facts{flex-direction:column;}
  .facts div{padding:14px 0; margin:0; border-right:0; border-bottom:1px solid var(--line);}
  .facts div:last-child{border-bottom:0;}
  .foot-grid{grid-template-columns:1fr; gap:26px;}
  .contact-list div{grid-template-columns:96px 1fr;}
  .interlude .ph{aspect-ratio:4/3;}
}
@media (prefers-reduced-motion:reduce){
  .rv, .stagger > *{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ============================================================
   Umbau: weniger Muster, mehr Fließtext.
   Kopfzeile mit Adresse, Bild über die volle Breite, Infokasten,
   Fließtext mit Zwischenüberschriften und Porträt, schlichte Listen.
   ============================================================ */
.topline{background:var(--navy); color:rgba(255,255,255,.82); font-size:13px;}
.topline .wrap{display:flex; justify-content:space-between; gap:20px; height:36px; align-items:center;}
.topline a:hover{color:#fff; text-decoration:underline;}
.masthead .wrap{height:70px;}

.banner{aspect-ratio:21/7; border-left:0; border-right:0; border-top:0;}
.banner.has{border:0;}

.intro{padding:56px 0 64px; border-bottom:1px solid var(--line);}
.intro-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:64px; align-items:start;}
.intro h1{font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.4vw,44px); line-height:1.15; margin-bottom:20px;}
.intro .lead{max-width:none; font-size:18px;}

.infobox{background:var(--paper-2); border-top:3px solid var(--navy); padding:22px 26px 10px;}
.infobox h2{font-family:var(--sans); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:10px;}
.infobox dl div{display:grid; grid-template-columns:130px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:14.5px;}
.infobox dt{color:var(--ink-3);}
.infobox dd{color:var(--ink);}

.text{max-width:780px;}
.text h2{font-family:var(--serif); font-weight:400; font-size:clamp(28px,3vw,36px); line-height:1.15; margin-bottom:26px;}
.text h3{font-family:var(--serif); font-weight:500; font-size:21px; margin:34px 0 10px;}
.text p{color:var(--ink-2); font-size:17px;}
.text p + p{margin-top:14px;}
.text a{color:var(--navy); text-decoration:underline; text-underline-offset:3px;}

.portrait{float:right; width:260px; margin:6px 0 20px 40px;}
.portrait figcaption{font-size:13px; color:var(--ink-3); line-height:1.5; margin-top:10px;}
.section .text::after{content:""; display:table; clear:both;}

.two{display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:start;}
.plainlist dt{font-weight:600; font-size:17px; margin-top:22px;}
.plainlist dt:first-child{margin-top:0;}
.plainlist dd{color:var(--ink-2); margin-top:6px;}
.plainlist dd a{color:var(--navy); text-decoration:underline; text-underline-offset:3px;}

.note{background:var(--paper); border:1px solid var(--line-2); padding:24px 26px; font-size:15px;}
.note h3{font-size:15px; font-weight:600; margin-bottom:10px;}
.note p{color:var(--ink-2);}
.note p + p{margin-top:10px;}
.section.alt .note{background:#fff;}
.wide{margin-top:56px;}

.news, .postlist{list-style:none; padding:0; margin:0;}
.news li{display:grid; grid-template-columns:130px 1fr; gap:16px; padding:14px 0; border-top:1px solid var(--line); font-size:15.5px; color:var(--ink-2);}
.news li:last-child{border-bottom:1px solid var(--line);}
.news time{color:var(--ink-3); font-variant-numeric:tabular-nums;}
.postlist li{padding:14px 0; border-top:1px solid var(--line);}
.postlist li:last-child{border-bottom:1px solid var(--line);}
.postlist a{display:block; font-family:var(--serif); font-size:19px; color:var(--ink);}
.postlist a:hover{color:var(--navy); text-decoration:underline; text-underline-offset:3px;}
.postlist span{font-size:13px; color:var(--ink-3);}
.postlist + .small{margin-top:14px;}
#aktuelles h2, #kontakt h2{font-family:var(--serif); font-weight:400; font-size:clamp(28px,3vw,36px); line-height:1.15; margin-bottom:22px;}

.addr{font-style:normal; margin-top:22px; line-height:1.8; color:var(--ink);}
.addr a{color:var(--navy); text-decoration:underline; text-underline-offset:3px;}
#kontakt .small{margin-top:18px;}

.foot .clocks{margin:0; gap:18px;}
.foot-bottom{align-items:center;}

@media (max-width:900px){
  .topline .topline-right{display:none;}
  .intro-grid, .two{grid-template-columns:1fr; gap:36px;}
  .portrait{float:none; width:100%; max-width:300px; margin:0 0 24px;}
}
@media (max-width:640px){
  .topline{display:none;}
  .banner{aspect-ratio:4/3;}
  .infobox dl div{grid-template-columns:1fr; gap:2px;}
  .news li{grid-template-columns:1fr; gap:4px;}
}

/* Standortfoto mit Bildnachweis */
.standort{max-width:420px; justify-self:end;}
.standort figcaption{font-size:12.5px; color:var(--ink-3); line-height:1.5; margin-top:10px;}
.standort figcaption a{color:var(--ink-3); text-decoration:underline; text-underline-offset:2px;}
@media (max-width:900px){ .standort{justify-self:start;} }

/* Umbau: Aufmacherbild im Abschnitt, Partnerblock mit Logo */
.lead-photo{margin-bottom:32px;}
.partner{display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start;}
.partner-logos{display:grid; gap:18px;}
.partner-logo{background:#fff; border:1px solid var(--line); padding:26px; display:grid; place-items:center; min-height:120px; transition:border-color .2s;}
.partner-logo:hover{border-color:var(--line-2);}
.partner-logo img{width:100%; max-width:240px; height:auto; object-fit:contain;}
.partner .text{max-width:none;}
.partner .warn{margin-top:22px; padding:16px 18px; border:1px solid var(--line-2); background:var(--paper-2); font-size:14px; line-height:1.55; color:var(--ink-2);}
.partner .warn b{color:var(--ink); font-weight:600;}
@media (max-width:900px){ .partner{grid-template-columns:1fr; gap:28px;} .partner-logos{grid-template-columns:1fr 1fr; max-width:520px;} }

/* Kursband unter der blauen Leiste */
.tickerbar{background:var(--paper-2); border-bottom:1px solid var(--line);}
.tickerbar .wrap{display:flex; align-items:center; gap:18px; height:44px;}
.ticker-label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap;}
.ticker-widget{flex:1; min-width:0; height:44px; overflow:hidden;}
.tradingview-widget-container{height:44px;}
@media (max-width:640px){ .tickerbar{display:block;} .ticker-label{display:none;} }


/* Wirtschaftskalender */
.calendar{grid-template-columns:.8fr 1.2fr; align-items:start;}
.calendar-widget{border:1px solid var(--line); background:#fff; padding:6px; min-height:560px;}
.calendar-widget .tradingview-widget-container{height:560px;}
@media (max-width:900px){ .calendar{grid-template-columns:1fr;} }
.partner .warn .warn-title{display:block; margin-bottom:6px; font-weight:600; color:var(--ink);}

/* TradingView erst nach Klick (Einwilligung) */
.tv-consent-ticker{display:flex; align-items:center; gap:14px; height:44px; font-size:13px; color:var(--ink-3);}
.tv-consent-ticker .tv-load{background:none; border:1px solid var(--line-2); border-radius:4px; padding:6px 12px; font-size:13px; color:var(--ink); cursor:pointer;}
.tv-consent-ticker .tv-load:hover{border-color:var(--ink-3);}
.tv-consent-ticker .tv-note a, .tv-consent-cal a{text-decoration:underline; text-underline-offset:2px;}
.tv-consent-cal{display:grid; place-content:center; gap:18px; min-height:548px; padding:32px; text-align:center;}
.tv-consent-cal .tv-text{max-width:460px; color:var(--ink-2); font-size:15px;}
.tv-consent-cal .tv-load{justify-self:center;}
.tv-withdraw{font-size:12px; color:var(--ink-3); text-align:right; padding:4px 0 0;}
.tv-withdraw button{background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer;}
@media (max-width:640px){ .tv-consent-ticker .tv-note{display:none;} }