/* Thomas Mercantile — thomasmercantile.de
   Eine Farbwelt: durchgehend Dunkelgrün, kein Hell-Dunkel-Wechsel.
   --green ist der aus der Logodatei gemessene Hintergrund, damit der
   Bildausschnitt im Hero nahtlos auf der Fläche liegt. */
:root{
  --green:#384035;
  --green-rgb:56,64,53;
  --green-deep:#2F3730;
  --green-lift:#424C45;
  --cream:#F2EEE4;
  --cream-70:rgba(242,238,228,.72);
  --cream-50:rgba(242,238,228,.6);
  --tan:#C8A87A;
  --line:rgba(242,238,228,.14);
  --serif:'Cormorant Garamond',ui-serif,Georgia,Cambria,serif;
  --sans:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Schriften, lokal eingebunden ---------- */
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Grundlage ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--green)}
body{
  margin:0;
  background:var(--green);
  color:var(--cream-70);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}

/* Feines, statisches Korn über der ganzen Seite, damit die Bildtextur des
   Logos und die CSS-Flächen als eine Oberfläche wirken. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27220%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.82%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27220%27 height=%27220%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:220px 220px;
}

:where(a,button):focus-visible{
  outline:2px solid var(--tan);
  outline-offset:3px;
  border-radius:2px;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.wrap{width:min(88%,1080px);margin:0 auto}

.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--cream-50);
  margin-bottom:clamp(28px,4vw,46px);
}

h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.6rem,3vw,2.15rem);
  line-height:1.2;
  color:var(--cream);
  margin:0 0 14px;
  letter-spacing:.005em;
}

/* ---------- Wortmarke als Text (Footer, Rechtsseiten, Fallback) ---------- */
.wordmark{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  color:var(--cream);
  display:flex;flex-direction:column;gap:7px;
  line-height:1.05;
}
.wordmark span{display:block;text-transform:uppercase}
.wm-line-1{font-size:1.15rem;letter-spacing:.35em;margin-right:-.35em}
.wm-line-2{font-size:.62rem;letter-spacing:.35em;margin-right:-.35em}

/* ---------- Hero ---------- */
.hero{
  background:var(--green);
  min-height:min(90vh,820px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:clamp(70px,12vh,130px) 5vw;
}
.hero-inner{display:flex;flex-direction:column;align-items:center;width:100%}

.hero-logo{
  margin:0;
  position:relative;
  width:min(100%,720px);
  line-height:0;
}
.hero-logo img{width:100%;height:auto}
/* Die Ränder des Bildausschnitts laufen in die Fläche aus, damit keine Kante
   sichtbar wird. Die Bilddatei selbst bleibt unverändert. */
.hero-logo::before,
.hero-logo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.hero-logo::before{
  background:
    linear-gradient(to bottom, var(--green) 0, rgba(var(--green-rgb),0) 15%),
    linear-gradient(to top, var(--green) 0, rgba(var(--green-rgb),0) 15%);
}
.hero-logo::after{
  background:
    linear-gradient(to right, var(--green) 0, rgba(var(--green-rgb),0) 7%),
    linear-gradient(to left, var(--green) 0, rgba(var(--green-rgb),0) 7%);
}

.hero-line{
  margin-top:clamp(26px,4vh,44px);
  max-width:52ch;
  font-size:clamp(.95rem,1.7vw,1.05rem);
  line-height:1.8;
  color:var(--cream-70);
}

/* ---------- Sektionen ---------- */
.band{
  padding-block:clamp(66px,11vh,124px);
  border-top:1px solid var(--line);
}
.band-base{background:var(--green)}
.band-deep{background:var(--green-deep)}

.threes{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(34px,4.5vw,56px);
}
@media (min-width:760px){
  .threes{grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,60px)}
}
.threes p{color:var(--cream-70);max-width:32ch}

/* ---------- Markenkarte ---------- */
.brand-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(22px,3vw,32px);
}
@media (min-width:760px){
  .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.brand-card{
  background:var(--green-lift);
  border:1px solid var(--line);
  max-width:520px;
  transition:border-color .35s var(--ease);
}
.brand-card:hover{border-color:rgba(200,168,122,.5)}
.brand-card-link{
  display:block;
  padding:clamp(30px,4vw,44px);
  text-decoration:none;
}
.brand-mark{display:block;color:var(--cream);width:min(180px,60%)}
.brand-mark svg{width:100%;height:auto}
.brand-text{
  display:block;
  margin-top:clamp(22px,3vw,30px);
  font-family:var(--serif);
  font-size:clamp(1.2rem,2.4vw,1.45rem);
  line-height:1.35;
  color:var(--cream);
  max-width:24ch;
}
.brand-meta{
  display:block;
  margin-top:16px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--cream-50);
}

/* ---------- Hersteller und Partner ---------- */
.lede{
  font-family:var(--serif);
  font-size:clamp(1.4rem,3vw,2rem);
  line-height:1.35;
  color:var(--cream);
  max-width:26ch;
}
.sub{
  margin-top:22px;
  color:var(--cream-70);
  max-width:56ch;
}
.sub a{
  color:var(--cream);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:1px;
  transition:border-color .3s var(--ease);
}
.sub a:hover{border-bottom-color:var(--tan)}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--green-deep);
  border-top:1px solid var(--line);
  padding-block:clamp(56px,9vh,96px);
  font-size:.92rem;
  color:var(--cream-70);
}
.site-footer .wordmark{margin-bottom:22px}
.foot-line{margin-top:7px;color:var(--cream-70)}
.site-footer a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--line)}
.site-footer a:hover{border-bottom-color:var(--tan)}
.footnav{
  display:flex;flex-wrap:wrap;gap:26px;
  margin-top:clamp(26px,4vw,38px);
  padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;
}
.footnav a{border-bottom:none}
.footnav a:hover{border-bottom:1px solid var(--tan)}
.copyline{
  margin-top:22px;
  font-size:.72rem;letter-spacing:.14em;
  color:var(--cream-50);
}

/* ---------- Rechtsseiten ---------- */
.legal-top{
  background:var(--green-deep);
  padding-block:clamp(30px,5vh,46px);
}
.legal-top a{text-decoration:none;display:inline-block}
.legal-shell{
  background:var(--green);
  border-top:1px solid var(--line);
  padding-block:clamp(54px,9vh,100px);
}
.legal-shell h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.9rem,4vw,2.6rem);
  color:var(--cream);margin:0 0 clamp(30px,4vw,46px);
}
.legal-block{margin-top:clamp(28px,4vw,40px);max-width:64ch}
.legal-block h2{font-size:clamp(1.15rem,2.2vw,1.4rem);margin-bottom:12px}
.legal-block p{color:var(--cream-70);margin-top:12px}
.legal-block p:first-of-type{margin-top:0}
.legal-block a{color:var(--cream);border-bottom:1px solid var(--line);text-decoration:none}
.legal-block a:hover{border-bottom-color:var(--tan)}

/* ---------- Einblenden ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.js [data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1;transform:none}
}