/* christian-schulze.de — link page (2026-11-11, round 2 after Christian's review: "in line with customer-strategy.de").
   Taken from customer-strategy.de assets/site.css: the tokens, h1/h3, .eyebrow, .hero (sage ground, rule below) with the
   faint two-circle motif (.hero--motif), .hero__cred, .hero__sub with the terracotta second half, the clickable card
   .way (white, 1px rule, lifts with a shadow on hover) with its .go line and moving arrow. Round 3 (Christian, 11 Nov 2026:
   "use the site logos and wordmarks"): each card leads with the destination's logo; the CV card keeps the site's
   document line icon. Only the card layout is new: logo left, text right, one column. */
@font-face{font-family:'Inter';src:url('fonts/inter-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Onest';src:url('fonts/onest-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-variable.woff2') format('woff2');font-weight:100 800;font-display:swap}
:root{
  --ink:#0B2D4A; --ink-2:#3A5A7A; --ink-3:#566D85;
  --accent:#D4896E; --accent-dk:#9C5038;
  --sage-lt:#EEF1ED; --paper:#FBFAF7; --rule:#D5D9D3; --desk:#ECE8E0;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --head:'Onest','Inter',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --max:840px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--body);min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1} /* the navy footer always reaches the bottom of the window */
img{display:block;max-width:100%;height:auto}
ul{list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h3{font-family:var(--head);letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(32px,4.6vw,42px);font-weight:700;margin-bottom:16px}
h3{font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.eyebrow{font-family:var(--head);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dk);margin-bottom:14px}

/* opening block */
.hero{background:var(--sage-lt);border-bottom:1px solid var(--rule)}
.hero__inner{display:grid;grid-template-columns:160px minmax(0,1fr);gap:40px;align-items:center;padding:56px 28px 52px}
.hero__img{width:160px;height:160px;object-fit:cover}
.hero__cred{font-family:var(--head);font-weight:600;font-size:15.5px;color:var(--ink);margin-bottom:14px}
.hero__sub{font-size:19px;color:var(--ink-2);max-width:32em}
.hero__sub span{color:var(--accent-dk)}
.hero--motif{position:relative;overflow:hidden}
.hero--motif::before{content:'';position:absolute;right:-180px;top:-200px;width:980px;height:640px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%228 26 104 68%22%3E%3CclipPath id=%22q%22%3E%3Ccircle cx=%2242%22 cy=%2260%22 r=%2234%22/%3E%3C/clipPath%3E%3Ccircle cx=%2242%22 cy=%2260%22 r=%2234%22 fill=%22%230B2D4A%22 fill-opacity=%22.03%22/%3E%3Ccircle cx=%2278%22 cy=%2260%22 r=%2234%22 fill=%22%230B2D4A%22 fill-opacity=%22.02%22/%3E%3Ccircle cx=%2278%22 cy=%2260%22 r=%2234%22 fill=%22%23D4896E%22 fill-opacity=%22.07%22 clip-path=%22url(%23q)%22/%3E%3C/svg%3E") no-repeat center/contain;pointer-events:none}
.hero--motif .hero__inner{position:relative}

/* the link cards (customer-strategy.de .way): each destination's own logo or wordmark on the left, text on the right.
   Lockups as in the sites' mastheads: customer-strategy.de = mark + "CUSTOMER STRATEGY" (Onest 800, caps, +5%);
   ecommerceresearch.org = mark + "ecommerce" 800 / "research" 400 / ".org" grey; Frankfurt School = its primary logo,
   vivid blue (resources/fs_logos, PDF converted to SVG); LinkedIn = its current logo (Wikimedia Commons "LinkedIn 2021.svg"). */
.sec{padding:48px 0 56px}
.ways{display:grid;gap:16px}
.way{display:grid;grid-template-columns:290px minmax(0,1fr);gap:28px;align-items:center;padding:26px 30px;background:#fff;border:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.way:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(11,45,74,.09)}
.lk{display:flex;align-items:center;gap:12px;min-height:56px;white-space:nowrap}
.lk img{display:block;height:auto}
.lk--cs img{width:52px;height:34px}
.lk--cs span{font:800 17px/1 var(--head);letter-spacing:.05em;text-transform:uppercase}
.lk--er img{width:33px;height:42px}
.lk--er span{font:800 20px/1 var(--head);letter-spacing:-.01em}
.lk--er b{font-weight:400}.lk--er small{font-weight:400;color:var(--ink-3);font-size:inherit}
.lk--fs img{width:170px}
.lk--li img{width:120px}
.lk--cv svg{width:40px;height:40px;color:var(--accent-dk);flex:0 0 auto}
.lk--cv span{font:600 20px/1.1 var(--head);letter-spacing:-.01em}
.way__body{display:flex;flex-direction:column;gap:6px}
.way__p{color:var(--ink-2);font-size:16px}
.go{font-weight:600;font-size:15px;color:var(--ink)}
.go i{display:inline-block;font-style:normal;transition:transform .25s}
.way:hover .go i{transform:translateX(4px)}

/* legal pages (/impressum/, /datenschutz/; own pages since 11 Nov 2026): compact opening block, text on the paper */
.hero--sub .hero__inner--plain{grid-template-columns:1fr;padding:40px 28px 36px}
.hero--sub h1{font-size:clamp(30px,4.4vw,44px);margin-bottom:0}
.hero--sub .eyebrow a{color:inherit;text-decoration:none}
.legal h2{font-family:var(--head);font-size:20px;font-weight:700;letter-spacing:-.01em;margin:28px 0 8px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--ink-2);font-size:16px;max-width:42em;margin-bottom:10px}
.legal a{color:var(--ink)}
.legal__date{margin-top:26px;font-size:14px!important}

/* round 4 (Christian, 11 Nov 2026: "more like customer-strategy.de"): the card section on the dark sand of its
   next-to-last home section (.desk), the footer navy with its mono base line (.foot / .foot__base). */
.desk{background:var(--desk);border-bottom:1px solid var(--rule)}
.foot{background:var(--ink);color:#C8D3DD}
.foot__base .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;padding:22px 28px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.foot__base a{text-decoration:none;color:#C8D3DD}
.foot__base a:hover{color:#fff}
.foot__base span{margin-left:auto;color:#8FA4B8}

@media (max-width:640px){
  .wrap{padding:0 20px}
  .hero__inner{grid-template-columns:1fr;gap:22px;padding:36px 20px 36px}
  .hero__img{width:120px;height:120px}
  .hero--motif::before{right:-220px;top:-120px;width:620px;height:400px}
  .hero__sub{font-size:17.5px}
  .way{grid-template-columns:1fr;gap:14px;padding:22px 20px 20px}
  .foot__base .wrap{padding:18px 20px}
  .foot__base span{margin-left:0;width:100%}
  .lk{min-height:0}
}
@media (prefers-reduced-motion:reduce){.way,.go i{transition:none}.way:hover{transform:none}}