:root{
  --black:#111111;
  --white:#ffffff;
  --grey:#767676;
  --line:#e2e2e2;
  --muted:#f6f4f2;
  --accent:#ff5a2c;
  --max:1200px;
}

/* Grund */
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--white);
  background-image:url('images/Portrait-Analog.png');
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
  color:#222;
  font-family: 'Courier Prime', monospace;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  letter-spacing:0.01em;
}

/* Hintergrund nur für "Über mich" überschreiben, falls body die Klasse page-about trägt */
body.page-about{
  background-image:url('images/Hintergrund.png');
}

/* Headings: Inter, grosszügiger Type-Scale */
h1,h2,h3,h4,h5,h6,
.logo, .hero-title, .about-body h3 {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.1;
}

/* Layout container */
.container{max-width:var(--max);margin:0 auto;padding:0 1.5rem}
main{
  margin-top:0;
  padding-top:4rem;
  padding-bottom:4rem;
  flex:1 0 auto;
}

/* Hero: schlankes, ruhiges weisses Banner */
.hero{
  position:relative;
  min-height:120px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  overflow:hidden;
  padding:1.25rem 0;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.hero::before{display:none}
.hero-media{display:none}

.hero-bar{
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 76px 0 0;
  height:44px;
}

.brand{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  padding-left:76px;
  z-index:11;
}
.mast-name{
  font-family:'Inter',sans-serif;
  font-weight:900;
  font-size:clamp(20px,2.4vw,26px);
  letter-spacing:-0.01em;
  color:var(--black);
  text-decoration:none;
}

/* Nav */
.topnav{margin-left:auto; margin-right:0; transform:none; padding-right:0;}
.topnav-columns{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;gap:2.5rem;align-items:center;font-family:'Courier Prime', monospace;font-size:13px;line-height:1;text-transform:uppercase;letter-spacing:0.06em}
.topnav-columns li{color:var(--black)}
.topnav-columns a{text-decoration:none;color:var(--black);display:block;transition:opacity .2s ease}
.topnav-columns a:hover{opacity:0.5}

.hero-inner{position:relative;padding:1rem;color:var(--black)}
.hero-sub{font-family:'Courier Prime', monospace;margin-top:.5rem;color:rgba(0,0,0,0.75);letter-spacing:0.01em}

/* Grid: eine Spalte, mehr Abstand */
.grid{display:grid;grid-template-columns:1fr;gap:32px;margin:2rem 0;align-items:start;max-width:760px;margin-left:auto;margin-right:auto}

/* Tile: reduzierter, moderner */
.tile{
  background:var(--white);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  border-radius:2px;
  padding:2.25rem;
  border:1px solid var(--line);
  box-shadow:none;
  transition:border-color .25s ease;
}
.tile:hover{border-color:#c9c9c9}
.tile .img{height:100%;min-height:160px;background-size:cover;background-position:center;transition:transform .6s ease, filter .4s ease}
.tile .img[role="img"]{background-repeat:no-repeat}

.tile-row-item{padding:2.25rem}

/* Typografie innerhalb Tiles */
.title{
  margin:.6rem 0 0;
  color:var(--black);
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  letter-spacing:0;
  font-size:clamp(26px,3.5vw,36px);
}
.meta{font-family:'Courier Prime', monospace;color:var(--black);font-size:.85rem;text-transform:uppercase;letter-spacing:0.05em}
.excerpt{
  font-family:'Courier Prime', monospace;
  color:#222;
  margin:1rem 0;
  font-size:0.9rem;
  line-height:1.55;
  letter-spacing:0.01em;
  max-width:65ch;
}
.more{font-weight:700;color:var(--accent);text-decoration:none;padding:0.35rem 0;border-bottom:1px solid transparent;transition:border-color .2s ease}
.more:hover{border-color:var(--accent)}

/* About: zwei Boxen (Text inkl. Kontakt, Porträt) */
.about-row{
  grid-column:1;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
  align-items:stretch;
}
.about-text,
.about-portrait{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2px;
  padding:2.25rem;
}
.about-text h3{
  margin:0;
  font-size:clamp(26px,3.5vw,36px);
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  letter-spacing:0;
}

.contact-divider{
  border:none;
  border-top:1px solid var(--line);
  width:60%;
  margin:2rem 0 1.5rem;
}
.contact-heading{
  margin:0 0 0.5rem;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--black);
  font-weight:700;
}
.contact{
  margin-top:0;
  font-family:'Courier Prime', monospace;
  font-size:0.9rem;
  line-height:1.55;
  letter-spacing:0.01em;
}

.about-portrait{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.75rem;
}
.portrait{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:2px;
  background:#efefef;
}

/* Hover effects */
.tile:hover .img{transform:scale(1.03)}
.tile::after{content:'';position:absolute;inset:0;pointer-events:none}

/* Responsive rules */
@media (max-width:720px){
  .hero{min-height:200px;padding:1rem 0}
  .hero-bar{flex-direction:column;align-items:flex-start;padding:0 1rem;gap:0.5rem;height:auto}
  .brand{text-align:left;margin-top:0;position:static;padding-left:0}
  .mast-role{display:none}
  .topnav-columns{flex-direction:row;gap:1.25rem;align-items:center}
  .topnav{margin-left:0;transform:none;margin-right:0;padding-right:0}
  .hero-inner{padding:1rem}
  .grid{max-width:100%}
  body{background-attachment:scroll}
  main{padding-top:2.5rem}
  .tile{padding:1.5rem}
  .tile-row-item{padding:1.5rem}
  .about-row{grid-template-columns:1fr}
  .portrait{height:280px}
}

/* Footer: bildschirmbreit, deckend weiss */
.site-footer{
  border-top:1px solid var(--line);
  padding:2.5rem 0;
  text-align:center;
  color:var(--grey);
  background:var(--white);
  font-size:0.85rem;
  width:100%;
}
.site-footer small{font-family:'Courier Prime', monospace;letter-spacing:0.01em;font-size:0.8rem}
.footer-sep{color:var(--line);margin:0 0.25rem}
.footer-link{
  color:var(--grey);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.footer-link:hover{
  color:var(--black);
  border-color:var(--grey);
}

/* Brand-Positionierung */
.hero { position: relative !important; }
.brand {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding-left: 76px !important;
  z-index: 9999 !important;
  max-width: none !important;
}
.hero-bar { max-width: none !important; margin: 0 !important; padding-right: 76px !important; }
.topnav { padding-right: 0 !important; }
@media (max-width:720px){
  .brand { position: static !important; transform: none !important; padding-left: 0 !important; }
  .hero-bar { padding-right: 1rem !important; }
  .topnav { padding-right: 0 !important; }
}