/* =========================================================
   Port Metals International — Schwarz/Weiß, editorial luxury
   Gemeinsames Stylesheet für alle Seiten
   ========================================================= */
:root{
  --ink:#0a0a0a;
  --graphite:#1a1a1a;
  --grey:#6d6a66;
  --line:#e4e2de;
  --line-dark:rgba(255,255,255,.14);
  --paper:#ffffff;
  --soft:#f6f5f3;
  --max:1200px;
}
/* ---------- LOKALE SCHRIFTEN (selbst gehostet, ohne Google) ----------
   Lege die beiden Dateien in einen Unterordner "fonts" neben style.css:
     fonts/Inter-Variable.woff2   (Fließtext, alle Stärken)
     fonts/Cinzel-Variable.woff2  (Überschriften, Stärke 400–700)
   Bezugsquellen siehe Hinweis am Dateiende. */
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-Variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Cinzel';
  src:url('fonts/Cinzel-Variable.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.serif{font-family:'Trajan Pro','Cinzel',Georgia,'Times New Roman',serif;font-weight:500;line-height:1.12;letter-spacing:.005em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.eyebrow{font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--grey);font-weight:600}
.rule{width:52px;height:1px;background:var(--ink);margin:20px 0}
.rule.light{background:#fff;opacity:.6}
/* ---------- NAV ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site.dark{background:rgba(10,10,10,.82);border-bottom:1px solid var(--line-dark)}
nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:center;gap:13px}
.brand .mark{width:34px;height:34px;flex:none}
.brand .txt b{font-family:'Trajan Pro','Cinzel',serif;font-size:1.42rem;font-weight:600;letter-spacing:.02em;display:block;line-height:1}
.brand .txt span{font-size:.58rem;letter-spacing:.36em;text-transform:uppercase;color:var(--grey)}
header.dark .brand .txt b{color:#fff}
header.dark .brand .txt span{color:#b7b4ae}
.menu{display:flex;gap:34px;list-style:none}
.menu a{font-size:.85rem;letter-spacing:.04em;color:var(--graphite);position:relative;padding:4px 0;transition:color .2s}
.menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:currentColor;transition:width .28s}
.menu a:hover::after,.menu a.active::after{width:100%}
header.dark .menu a{color:#d9d6d0}
header.dark .menu a:hover,header.dark .menu a.active{color:#fff}
.burger{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;color:inherit}
header.dark .burger{color:#fff}
/* ---------- BUTTONS ---------- */
.btn{display:inline-block;padding:14px 30px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;transition:all .25s;cursor:pointer;border:1px solid var(--ink)}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:#fff;color:var(--ink)}
.btn-out{background:transparent;color:var(--ink)}
.btn-out:hover{background:var(--ink);color:#fff}
.btn-light{border-color:#fff;color:#fff}
.btn-light:hover{background:#fff;color:var(--ink)}
.btn-light-solid{background:#fff;color:var(--ink);border-color:#fff}
.btn-light-solid:hover{background:transparent;color:#fff}
/* ---------- HERO ---------- */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding:120px 32px 130px}
.hero .eyebrow{color:#b7b4ae}
.hero h1{font-size:clamp(2.8rem,6vw,5.4rem);color:#fff;max-width:16ch;margin:22px 0}
.hero h1 em{font-style:italic}
.hero p.lead{font-size:1.15rem;color:#cdcac4;font-weight:300;max-width:560px}
.hero-cta{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
.hero-figure{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:min(460px,42vw);opacity:.9;z-index:1}
.hero-figure svg{width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
/* page hero (Unterseiten) */
.page-hero{background:var(--ink);color:#fff;padding:96px 0 84px}
.page-hero .num{font-family:'Trajan Pro','Cinzel',serif;font-size:3.4rem;color:#54524e}
.page-hero h1{font-size:clamp(2.4rem,5vw,4rem);color:#fff;margin:6px 0 14px}
.page-hero p{color:#cdcac4;max-width:640px;font-weight:300}
.crumb{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#8c8983;margin-bottom:26px}
.crumb a:hover{color:#fff}
/* ---------- SECTION ---------- */
section{padding:104px 0}
section.tight{padding:76px 0}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head h2{font-size:clamp(2rem,3.8vw,3rem);margin-top:12px}
.sec-head p{color:var(--grey);font-size:1.05rem;margin-top:10px}
/* ---------- FIELD CARDS (Home) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.card{background:#fff;padding:0;display:flex;flex-direction:column;transition:background .3s}
.card .thumb{height:230px;position:relative;display:flex;align-items:flex-end;padding:18px}
.card .thumb .cap{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.4);padding:5px 10px}
.card .body{padding:34px 30px 38px;display:flex;flex-direction:column;flex:1}
.card .num{font-family:'Trajan Pro','Cinzel',serif;font-size:1.5rem;color:var(--grey)}
.card h3{font-size:1.7rem;margin:6px 0 10px}
.card p{color:var(--grey);font-size:.96rem;flex:1}
.card .more{margin-top:18px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.card:hover{background:var(--soft)}
.card:hover .more{text-decoration:underline}
/* monochrome "photo" panels — echte Fotos hier einsetzen (filter:grayscale(1)) */
.mono-gems{background:linear-gradient(135deg,#3a3a3a,#0a0a0a 55%,#2b2b2b)}
.mono-export{background:linear-gradient(135deg,#4a4a4a,#141414 60%,#333)}
.mono-sog{background:linear-gradient(135deg,#2c2c2c,#000 55%,#404040)}
.mono-lg{min-height:460px;position:relative;display:flex;align-items:flex-end;padding:24px}
.mono-lg .cap{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.4);padding:6px 12px}
/* ---------- SPLIT CONTENT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .txt{order:2}
.prose h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:8px}
.prose p{color:var(--grey);margin-top:16px}
.prose strong{color:var(--ink);font-weight:600}
.facts{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.facts li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.facts li span:first-child{color:var(--grey);letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;font-weight:600;padding-top:3px}
.facts li span:last-child{text-align:right;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.tag{font-size:.72rem;letter-spacing:.06em;padding:7px 14px;border:1px solid var(--line);color:#4a4741}
/* ---------- CTA STRIP ---------- */
.strip{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:60px 32px}
.strip h3{font-size:2rem}
.strip p{color:var(--grey)}
/* ---------- TEAM ---------- */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:800px}
.person{border:1px solid var(--line);padding:30px;display:flex;gap:20px;align-items:center}
.avatar{width:62px;height:62px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Trajan Pro','Cinzel',serif;font-size:1.4rem;font-weight:600;color:#fff;background:var(--ink)}
.person h4{font-size:1.15rem}
.person .role{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin:3px 0 8px}
.person a{font-size:.9rem;color:var(--grey)}
.person a:hover{color:var(--ink)}
/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.cinfo div{margin-bottom:24px}
.cinfo .lbl{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);font-weight:600;margin-bottom:5px}
.cinfo .val{font-size:1.05rem}
.cinfo .val a:hover{text-decoration:underline}
form{border:1px solid var(--line);padding:38px}
form label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin:16px 0 6px}
form input,form textarea{width:100%;padding:13px 15px;border:1px solid var(--line);font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink)}
form input:focus,form textarea:focus{outline:none;border-color:var(--ink)}
form button{margin-top:22px;width:100%}
/* ---------- FOOTER ---------- */
footer.site{background:var(--ink);color:#b3b0aa;padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
footer.site h5{color:#fff;font-family:'Trajan Pro','Cinzel',serif;font-size:1.2rem;font-weight:600;margin-bottom:16px}
footer.site p{font-size:.9rem;max-width:340px}
footer.site ul{list-style:none}
footer.site ul li{margin-bottom:10px;font-size:.9rem}
footer.site a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;font-size:.8rem;color:#7d7a74}
/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .menu{display:none;position:absolute;top:80px;left:0;right:0;background:var(--ink);flex-direction:column;padding:20px 32px;gap:18px}
  .menu.open{display:flex}
  .menu a{color:#fff!important}
  .burger{display:block}
  .hero-figure{display:none}
  .cards{grid-template-columns:1fr}
  .split,.contact-grid{grid-template-columns:1fr;gap:40px}
  .split.rev .txt{order:0}
  .team{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
/* ---------- TRAJAN PRO (optional, lizenzpflichtig) ----------
   Legt die echte Schriftdatei (TrajanPro.woff2 / .otf) in denselben
   Ordner, dann wird sie automatisch statt Cinzel verwendet. */
@font-face{
  font-family:'Trajan Pro';
  src:local('Trajan Pro'),local('TrajanPro-Regular'),
      url('TrajanPro.woff2') format('woff2'),
      url('TrajanPro.otf') format('opentype');
  font-weight:400 700;font-display:swap;
}
/* ---------- BILD-AUFMACHER (Edelstein-Seite) ---------- */
.img-hero{min-height:92vh;background:#000 center top/cover no-repeat;
  display:flex;align-items:flex-end;color:#fff;padding:0 0 56px}
.img-hero .crumb{color:#d6d3cd}
.img-hero .crumb a:hover{color:#fff}
.img-hero h1{font-size:clamp(2rem,4vw,3.2rem);color:#fff;margin:6px 0 2px}
.ih-tag{font-size:.76rem;letter-spacing:.34em;text-transform:uppercase;color:#8ff0b4}
@media(max-width:900px){.img-hero{min-height:80vh;padding-bottom:40px}}
/* ---------- FEATURE-BILDER & WERTE (Bergbau-Abschnitt) ---------- */
.feature img{width:100%;height:clamp(320px,54vh,600px);object-fit:cover;display:block}
.feature .cap{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding:12px 0 0}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:10px}
.value{background:#fff;padding:30px 28px}
.value h4{font-size:1.3rem;margin-bottom:8px}
.value p{color:var(--grey);font-size:.95rem}
@media(max-width:900px){.values{grid-template-columns:1fr}}
/* ---------- LOGO-BILD in der Navigation ---------- */
.brand .brandlogo{height:46px;width:auto;display:block}
@media(max-width:900px){.brand .brandlogo{height:40px}}
/* ---------- LEGAL (Impressum / Datenschutz) ---------- */
.legal{max-width:840px}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:6px}
.legal h2{font-family:'Inter',sans-serif;font-weight:600;font-size:1.25rem;letter-spacing:0;margin:34px 0 8px;color:var(--ink)}
.legal h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1rem;margin:22px 0 6px;color:var(--ink)}
.legal p,.legal li{color:var(--grey);margin-top:10px}
.legal strong{color:var(--ink)}
.legal ul{margin:8px 0 0 20px}
.legal a{color:var(--ink);text-decoration:underline}
.ph{background:#fff3cd;border:1px dashed #d9b400;color:#7a5c00;padding:0 5px;font-style:normal}
.foot-bottom a{text-decoration:underline}