/* Base stylesheet (generated) */


/* === Responsive Patch V2 (added) === */
:root{
  --container-max: 1120px;
  --gap: 1rem;
  --accent:#A65A44; 
}


/* CSS: in assets/css/styles.css ergänzen */


.btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.1rem; border-radius:12px;
  font-weight:600; line-height:1; text-decoration:none;justify:center;
  border:1px solid var(--accent); transition:transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn__icon{ width:1.1em; height:1.1em; }

.btn--primary{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(166,90,68,.25); }
.btn--primary:active{ transform:none; box-shadow:none; }

.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(166,90,68,.35), 0 2px 10px rgba(0,0,0,.08);
}

/* Option: Ghost-Variante auf hellem Hintergrund */
.btn--ghost{
  background:transparent; color:var(--accent); border-color:var(--accent);
}
.btn--ghost:hover{ background:rgba(166,90,68,.06); cursor:pointer;}
#em:hover{ cursor:pointer;color: var(--accent);}

/* Mobil vollbreit, auf Desktop inline */
@media (max-width:640px){
  .btn--block-sm{ display:flex; width:100%; justify-content:center; }
}

/* Motion dezent halten */
@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:active{ transition:none; transform:none; }
}

*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container-max);margin:0 auto;padding:0 20px}
/* Header layout */
header .container, .header .container{display:flex;align-items:center;gap:16px}
/* Navigation defaults */
#primary-nav a{white-space:nowrap}
.menu-toggle{display:none;appearance:none;border:0;background:transparent;font-size:1.6rem;line-height:1;padding:.3rem .5rem;cursor:pointer; color:black !important}
.menu-toggle:focus{outline:2px solid #0003;outline-offset:2px}
/* Grid helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}






@media (max-width: 1024px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 900px){
  .menu-toggle{display:inline-block}
  #primary-nav{display:none}
  .nav-open #primary-nav{display:block}
  #primary-nav a{display:block;padding:.5rem 0}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .grid-3{grid-template-columns:1fr}
  h1{font-size:1.8rem;line-height:1.2}
  h2{font-size:1.35rem}
  .container{padding:0 16px}
}


/* === Slide-in Overlay Menu (mobile) === */
@media (max-width: 900px){
  /* panel */
  #primary-nav{
    position: fixed;
    top: 0; right: 0; bottom: 0;
   /* width: min(360px, 78vw); */
    background: #fff;
    padding: 24px 24px 24px; /* space for header */
    box-shadow: -6px 0 16px rgba(0,0,0,.08);
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow-y: auto;
    z-index: 1000;
    max-height: 230px;
  }
  .nav-open #primary-nav{ display: block; transform: translateX(0); }

  /* stack links vertically in panel */
  #primary-nav .menu{ display: flex; flex-direction: column; gap: .8rem; }

  /* backdrop */
  .nav-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 999;
  }
  .nav-open .nav-backdrop{ opacity: 1; pointer-events: auto; }

  /* prevent body scroll */
  html.nav-open, html.nav-open body{ overflow: hidden; }
}

/* === merged from styles.css === */

:root{--accent:#A65A44;--text:#333;--muted:#6F6F6F;--bg:#fff;--line:#E8E8E8}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;line-height:1.55}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
nav a{color:var(--text);text-decoration:none;margin:0 10px;font-size:14px;letter-spacing:.03em;text-transform:uppercase}
nav a:hover{color:var(--accent)}
.hero{padding:96px 0 48px;border-bottom:1px solid var(--line)}
.eyebrow{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
h1{font-size:48px;line-height:1.1;margin:10px 0;color:var(--accent)}
h2{font-size:28px;margin:24px 0 8px;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
h3{font-size:18px;margin:18px 0 6px;color:var(--text)}
.year{font-size:18px;margin:18px 0 6px;color:var(--text)}

h4{margin:18px 0 0px;color:var(--text)}
.lead{font-size:18px;max-width:88ch}
.section{padding:56px 0;border-bottom:1px solid var(--line)}
.grid-2{display:grid;grid-template-columns:2fr 1.2fr;gap:28px;row-gap:0px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.project p{margin:0px}
.list{list-style:none;padding:0;margin:0;display:grid;gap:0px}
.list li::before{content:"•";color:var(--accent);margin-right:8px}
.rule{height:1px;background:var(--line);margin:20px 0}
img.portrait{margin-top: 20px;width:100%;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.08);object-fit:cover}
footer{padding:28px 0;color:var(--muted);font-size:13px}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-top:16px}
footer a{text-decoration:none;color:var(--text)}
footer a:hover{color:var(--accent)}
.grid-2 a{text-decoration:none;color:var(--text)}
.grid-2 a:hover{color:var(--accent)}
.no-grid-mobile { display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:start }

@media (max-width: 640px){
.no-grid-mobile { display:block; }

  }
  
@media (max-width:640px){.grid-2{grid-template-columns:1fr  !important;}.hero{padding:72px 0 36px}h1{font-size:40px}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}.hero{padding:72px 0 36px}h1{font-size:40px}}


/* brand no underline */
a.brand, .brand {
  text-decoration: none !important;
  border-bottom: none !important;
}
a.brand:hover, .brand:hover {
  text-decoration: none !important;
  border-bottom: none !important;
}


/* utility */
.clearfix::after { content: ""; display: table; clear: both; }
.about-portrait { border-radius: 6px; }
@media (max-width:640px){
.about-portrait { border-radius: 6px; max-width:100% !important; margin-top: 15px !important; }
}

/* === Patch: footer border removed; lines in terracotta === */
.footer, footer.footer, footer { border-top: none !important; }

hr, .rule { border-color: #E2725B !important; }
.section { border-top: 2px solid #E2725B !important; }
.header { border-bottom: 2px solid #E2725B !important; }

/* Brand stays without underline (safety) */
a.brand, .brand { text-decoration: none !important; border-bottom: none !important; }
a.brand:hover, .brand:hover { text-decoration: none !important; border-bottom: none !important; }


/* Defensive: remove pseudo-element lines over footer if any */
.footer::before, footer::before {
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* === Patch: standardized line style (1px, #A65A44) & footer border 0 === */
:root {
  --accent: #A65A44;
  --line: #A65A44;
}

.header { border-bottom: 1px solid #A65A44 !important; }
.section { border-top: 1px solid #A65A44 !important; }

hr, .rule {
  border: 0 !important;
  border-top: 1px solid #A65A44 !important;
}

.footer, footer.footer, footer {
  border-top: 0 !important;
}

/* Nav underline/active line color */
.menu a.active, .menu a:hover { border-color: #A65A44 !important; }

/* Any remaining grey rule colors overridden */
.border-top, .border-bottom { border-color: #A65A44 !important; }


/* === Patch: remove all footer borders === */
.footer, footer.footer, footer {
  border: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.footer::before, .footer::after, footer::before, footer::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}


/* === Patch: remove borders on footer container === */
footer .container, .footer .container {
  border: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
footer .container * {
  border-color: transparent !important; /* defensive, avoids stray 1px borders */
}


/* === Patch: Footer container has no border === */
footer, .footer { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
footer .container, .footer .container { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
/* Also ensure no rules appear inside footer */
footer hr, .footer hr, footer .rule, .footer .rule,
footer .border-top, .footer .border-top, footer .border,
footer .line, .footer .line { border: 0 !important; border-top: 0 !important; }

/* === merged from ._styles.css === */
Mac OS X        	2


?ATTR
?[com.apple.TextEncodingcom.apple.lastuseddate#PS
<com.apple.quarantineUTF-8;1342179848ip{
q/0083;69023444;Safari;87DC4D57-B978-4350-86E2-D6C6462B3F65

/* === Overlay Menu (final) === */
nav .menu { display: flex; gap: 1rem; align-items: center; }

/* Desktop default: visible inline */
#primary-nav { display: block; }

/* Mobile: slide-in panel */
@media (max-width: 900px){
  .menu-toggle{ display: inline-block; appearance:none; border:0; background:transparent; font-size:1.6rem; line-height:1; padding:.3rem .5rem; cursor:pointer;color:black !important }
  /* panel */
  #primary-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(360px, 78vw);
    background: #fff;
    padding: 80px 24px 24px;
    box-shadow: -6px 0 16px rgba(0,0,0,.08);
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow-y: auto; z-index: 1000;
  }
  /* remove any previous display:none rules by forcing block */
  #primary-nav { display: block !important; }
  /* vertical menu in panel */
  #primary-nav .menu { flex-direction: column; gap: .8rem; }
  /* backdrop */
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 999 }
  .nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .nav-open #primary-nav { transform: translateX(0); }
  html.nav-open, html.nav-open body { overflow: hidden; }
}


/* === Clickability hardening for overlay menu === */
@media (max-width: 900px){
  #primary-nav { z-index: 1001 !important; pointer-events: auto !important; }
  #primary-nav .menu a, #primary-nav .menu button { position: relative; z-index: 1002; pointer-events: auto !important; }
  .nav-backdrop { z-index: 1000 !important; }
}


/* === Mobile Menu · Alternative (slide-down) === */

/* Desktop default */
#primary-nav { display: block; }
#primary-nav .menu { display: flex; gap: 1rem; align-items: center; }

/* Neutralize old overlay rules on mobile */
@media (max-width: 900px){
  /* show toggle */
  .menu-toggle{ display: inline-block; appearance:none; border:0; background:transparent; font-size:1.6rem; line-height:1; padding:.3rem .5rem; cursor:pointer; color:black !important }

  /* nav behaves as normal flow (no fixed/transform) */
  #primary-nav{ position: static !important; transform: none !important; width: 100% !important; box-shadow: none !important; padding: 0 !important; z-index: auto !important; }

  /* collapsed by default */
  #primary-nav .menu{ display: none; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid #A65A44; }
  #primary-nav .menu a{ display: block; padding: 14px 0; border-bottom: 1px solid #A65A44; }

  /* open state */
  .nav-open #primary-nav .menu{ display: flex; }

  /* header wrap so toggle + brand stay on one line */
  header .container, .header .container{ flex-wrap: wrap; }
}

/* Optional: small-screen type refinements */
@media (max-width: 640px){
  h1{ font-size: 1.8rem; line-height: 1.2; }
  h2{ font-size: 1.35rem; }
  .container{ padding: 0 16px; }
}


/* removed mobile-only marker */
#primary-nav .menu 
@media (max-width: 900px){
  #primary-nav .menu 
}

/* removed mobile-only marker */
#primary-nav 
@media (max-width: 900px){
  #primary-nav 
}





/* removed mobile-only marker */
            /* Desktop & >900px: hide */
@media (max-width: 900px){
          /* <=900px: show */
}
}


/* === MOBILE-ONLY · FINAL STRICT RULES === */
.mobile-only { display: none !important; }
@media (max-width: 900px){
  .mobile-only { display: block !important; }
}


/* === HARDLOCK (re-assert) === */
.mobile-only { display: none !important; }
@media (max-width: 900px){
  .mobile-only { display: block !important; }
}